[Button+] Multiple props are not reponsive

Describe the bug A couple of props do not work when you give them responsive values these include the variantColor and size props.

Expected Behavior When the size prop receives a value of ['md','lg'] it should use the corresponding value at the corresponding breakpoint

To Reproduce check out this sandbox: https://codesandbox.io/s/unresponsive-props-chakra-q4xyf

1. Look at the source code
2. The button is not displayed at all (both variantColor and size ar ignored as they are arrays), same applies to the ‘direction’ of the stack

Suggested solution(s)

This bug happens because chakra modifies or accesses these values with a function. I use a helper in my projects that makes it possible to also modify responsive arrays and objects and fixes that issue.

function modifyResponsiveValue(value, cb) {
  if (typeof value === 'string' || typeof value === 'number') {
    return cb(value)
  } else if (Array.isArray(value)) {
    return value.map(cb)
  } else {
    const newObj = {}
    Object.keys(value).forEach(k => (newObj[k] = cb(value[k])))
    return newObj
  }
}

Desktop (please complete the following information):

• OS: linux
• Browser chrome

Also happy to make a pr for this after the ts rewrite

[adamjarling]

Here’s one way to currently handle responsive button size, using Chakra UI’s useBreakpointValue() hook:

import {
  Button,
  useBreakpointValue,
} from '@chakra-ui/react';

function MyComponent() {
  const buttonSize = useBreakpointValue({ base: 'xs', sm: 'sm', md: 'md' });

  return (
    <Button size={buttonSize}>Responsive Button</Button>
  );
}

[Timonzimm]

Still an issue to this date.