v2.1.0.mdx

title	description	releaseUrl	releaseDate	version
Version 2.1.0	Explore the changelog for Chakra UI version 2.1.0. Learn about the latest features, bug fixes, and improvements.	chakra-ui#6044	May 22, 2022	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

• #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.
• Updated dependencies [3319eca8b, ddea8d143, 3992e50d3, b56f16f4e, a799a4467, c93f5c90b, 1cea9022b]

@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

• Updated dependencies [ddea8d143]

storybook-addon@2.0.3

Patch Changes

• Updated dependencies

@chakra-ui/accordion@2.0.1

Patch Changes

• Updated dependencies [3319eca8b]

@chakra-ui/avatar@2.0.1

Patch Changes

• #6057 b56f16f4e Thanks @jaqas! - Add referrerPolicy prop to Avatar & Image Components

• Updated dependencies [b56f16f4e]

@chakra-ui/descendant@3.0.1

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.

@chakra-ui/focus-lock@2.0.1

Patch Changes

• #6043 754649da8 Thanks @Methuselah96! - Upgrade dependency react-focus-lock to be compatible with React 18

@chakra-ui/image@2.0.1

Patch Changes

• #6057 b56f16f4e Thanks @jaqas! - Add referrerPolicy prop to Avatar & Image Components

@chakra-ui/media-query@3.0.1

Patch Changes

• #6069 a799a4467 Thanks @segunadebayo! - Fix regression in use-media-query hook in SSR envrionments where it throws hydration mismatch

@chakra-ui/menu@2.0.1

Patch Changes

• Updated dependencies [3319eca8b]

@chakra-ui/modal@2.0.1

Patch Changes

• Updated dependencies [754649da8]

@chakra-ui/pin-input@2.0.1

Patch Changes

• Updated dependencies [3319eca8b]

@chakra-ui/provider@2.0.3

Patch Changes

• Updated dependencies [ddea8d143]

@chakra-ui/skeleton@2.0.3

Patch Changes

• Updated dependencies [ddea8d143, a799a4467]

@chakra-ui/tabs@2.0.1

Patch Changes

• Updated dependencies [3319eca8b]

@chakra-ui/textarea@2.0.1

Patch Changes

• #6050 3992e50d3 Thanks @segunadebayo! - Fix ESLint warnings and errors

@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

• #6051 1cea9022b Thanks @itkrt2y! - Fix regression with the default toast position. It now defaults to bottom as described in docs

• Updated dependencies [3319eca8b, ddea8d143, c93f5c90b]

@chakra-ui/props-docs@2.0.3

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]

@chakra-ui/storybook-addon@3.0.0

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]

create-react-app-ts@2.0.3

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]

gatsby-starter-default@1.0.3

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]

chakra-nextjs@2.0.3

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]

chakra-nextjs-ts@2.0.3

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]

@chakra-ui/test-utils@2.0.3

Patch Changes

• Updated dependencies [3319eca8b, ddea8d143]