Skip to main content

Version 2.1.0

@chakra-ui/react@2.1.0

Minor Changes

  • #6050 ddea8d143 Thanks @segunadebayo! - Add support for responsive variants and sizes.

    <Button variant={['sm', 'lg']}>Click me</Button>

    Add support for !important in token values as an escape hatch for overriding properties in responsive variants/sizes.

    <Button variant={['sm', 'lg']} fontSize='lg !important'>
    Click me
    </Button>

    Notes

    • Based on how this is designed, there's no support for responsive colorScheme since it is technically not a variant
    • When using responsive sizes and variants, overriding properties via props might not work as expected. We use native CSS media queries to enable this feature so there's no "magic" under the hood. If you really want to override properties, you can consider using the important syntax

Patch Changes

@chakra-ui/styled-system@2.1.0

Minor Changes

  • #6050 ddea8d143 Thanks @segunadebayo! - Add support for responsive variants and sizes.

    <Button variant={['sm', 'lg']}>Click me</Button>

    Add support for !important in token values as an escape hatch for overriding properties in responsive variants/sizes.

    <Button variant={['sm', 'lg']} fontSize='lg !important'>
    Click me
    </Button>

    Notes

    • Based on how this is designed, there's no support for responsive colorScheme since it is technically not a variant
    • When using responsive sizes and variants, overriding properties via props might not work as expected. We use native CSS media queries to enable this feature so there's no "magic" under the hood. If you really want to override properties, you can consider using the important syntax

@chakra-ui/system@2.1.0

Minor Changes

  • #6050 ddea8d143 Thanks @segunadebayo! - Add support for responsive variants and sizes.

    <Button variant={['sm', 'lg']}>Click me</Button>

    Add support for !important in token values as an escape hatch for overriding properties in responsive variants/sizes.

    <Button variant={['sm', 'lg']} fontSize='lg !important'>
    Click me
    </Button>

    Notes

    • Based on how this is designed, there's no support for responsive colorScheme since it is technically not a variant
    • When using responsive sizes and variants, overriding properties via props might not work as expected. We use native CSS media queries to enable this feature so there's no "magic" under the hood. If you really want to override properties, you can consider using the important syntax

Patch Changes

storybook-addon@2.0.3

Patch Changes

  • Updated dependencies

@chakra-ui/accordion@2.0.1

Patch Changes

@chakra-ui/avatar@2.0.1

Patch Changes

@chakra-ui/descendant@3.0.1

Patch Changes

  • #60463319eca8b Thanks @Averethel! - Ensure types used by other chakra packages are properly exported and imported so that src directory is not referenced in the emitted type declarations.

@chakra-ui/focus-lock@2.0.1

Patch Changes

@chakra-ui/image@2.0.1

Patch Changes

@chakra-ui/media-query@3.0.1

Patch Changes

@chakra-ui/menu@2.0.1

Patch Changes

@chakra-ui/modal@2.0.1

Patch Changes

@chakra-ui/pin-input@2.0.1

Patch Changes

@chakra-ui/provider@2.0.3

Patch Changes

@chakra-ui/skeleton@2.0.3

Patch Changes

@chakra-ui/tabs@2.0.1

Patch Changes

@chakra-ui/textarea@2.0.1

Patch Changes

@chakra-ui/theme@2.0.2

Patch Changes

  • #6046 3319eca8b Thanks @Averethel! - Ensure types used by other chakra packages are properly exported and imported so that src directory is not referenced in the emitted type declarations.

  • #6056 c93f5c90b Thanks @johannespein! - Tag component variants borderRadius was overwriting baseStyle eventhough borderRadius was same for all variants. borderRadius is now part of the baseStyle

@chakra-ui/toast@2.0.3

Patch Changes

@chakra-ui/props-docs@2.0.3

Patch Changes

@chakra-ui/storybook-addon@3.0.0

Patch Changes

create-react-app-ts@2.0.3

Patch Changes

gatsby-starter-default@1.0.3

Patch Changes

chakra-nextjs@2.0.3

Patch Changes

chakra-nextjs-ts@2.0.3

Patch Changes

@chakra-ui/test-utils@2.0.3

Patch Changes