v1.7.4.mdx

title	description	releaseUrl	releaseDate	version
Version 1.7.4	Explore the changelog for Chakra UI version 1.7.4. Learn about the latest features, bug fixes, and improvements.	chakra-ui#5223	January 4, 2022	1.7.4

@chakra-ui/[email protected]

Major Changes

• #5126 712cc3d1e Thanks @ngxCoder! - The official Storybook Addon for Chakra UI.

  yarn add -D @chakra-ui/storybook-addon

  npm i -D @chakra-ui/storybook-addon

  Add the addon to your configuration in .storybook/main.js:

  module.exports = {
    addons: ["@chakra-ui/storybook-addon"],
  }

@chakra-ui/[email protected]

Minor Changes

• #5137 e624a277a Thanks @Patrick-Ullrich! - Improve error message when using ListItem without wrapping in List.

@chakra-ui/[email protected]

Minor Changes

• #4979 d5461a452 Thanks @segunadebayo! - ### Add support peer pseudo style props

  You can now style an element based on the state of its general sibling (marked with .peer or data-peer) attribute.

  <>
    <input type="checkbox" data-peer />
    <Box bg="white" _peerFocus={{ bg: "green.400" }} />
  </>

  The peer properties you can apply are _peerHover, _peerFocus, _peerFocusVisible, _peerActive, _peerInvalid, _peerChecked,_peerFocusWithin, _peerPlaceholderShown, _peerDisabled

  New style props

  Added _placeholderShown pseudo props for styling elements when sibling inputs have placeholder shown.

  Added _ltr pseudo props for styling elements in LTR writing mode. This is useful for products with RTL first approach.

  Added _mediaReduceMotion pseudo props to apply reduce motion styles to elements. This is useful when you need to remove CSS animations/transitions.

• #5307 213f61026 Thanks @segunadebayo! - Adds style props for CSS scroll behavior properties: scrollPadding, scrollMargin, scrollSnapAlign, etc...

  Here's a full list of properties:

  • Scroll Behavior: scrollBehavior, scrollSnapAlign, scrollSnapStop, scrollSnapType

  • Scroll Margin: scrollMargin, scrollMarginTop, scrollMarginBottom, scrollMarginLeft, scrollMarginRight, scrollMarginX, scrollMarginY

  • Scroll Padding: scrollPadding, scrollPaddingTop, scrollPaddingBottom, scrollPaddingLeft, scrollPaddingRight, scrollPaddingX, scrollPaddingY

@chakra-ui/[email protected]

Minor Changes

• #5243 ae6fd7a25 Thanks @TimKolberger! - Use the feature flag --strict-component-types for @chakra-ui/cli tokens to generate strict component type for the theming props variant and size.

  chakra-cli tokens --strict-component-types

  // before
  <Button variant="abc" />
  // valid type but variant is not available in the theme
  
  // after
  <Button variant="abc" /> // invalid
  // Type '"abc"' is not assignable to type '"link" | "outline" | "ghost" | "solid" | "unstyled" | undefined'.

Patch Changes

• Updated dependencies [d5461a452, 213f61026]

@chakra-ui/[email protected]

Minor Changes

• #5243 ae6fd7a25 Thanks @TimKolberger! - Use the feature flag --strict-component-types for @chakra-ui/cli tokens to generate strict component type for the theming props variant and size.

  chakra-cli tokens --strict-component-types

  // before
  <Button variant="abc" />
  // valid type but variant is not available in the theme
  
  // after
  <Button variant="abc" /> // invalid
  // Type '"abc"' is not assignable to type '"link" | "outline" | "ghost" | "solid" | "unstyled" | undefined'.

• #5244 3f1d7cf1c Thanks @TimKolberger! - Added token scales blur, borderStyles and borderWidths.

Patch Changes

• #5225 e9bbe3bd1 Thanks @TimKolberger! - Fixed an issue where the cli fails when prettier is not installed

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• #4918 756682037 Thanks @linxianxi! - Fix issue where focus styles persists when isDisabled is set to true and checkbox has focus.
• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• #5259 032c2e543 Thanks @primos63! - When the Editable component has its startsWithEditView set to true, then focus should be set to the EditableInput element when the component is mounted.
• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• #5237 801008e27 Thanks @navarroaxel! - Add a comment about useState alternative

• #4835 8a0e5bdbc Thanks @igorwessel! - Fixed a issue where useId generated inconsistent id values between client and server (SSR).

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• #5234 bc2613a9a Thanks @nxtman123! - useBreakpointValue returns the correct value on first tick, if matchMedia is available

@chakra-ui/[email protected]

Patch Changes

• #5296 94da4e986 Thanks @TimKolberger! - Omit disabled and aria-disabled props from MenuItemProps types

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [ae6fd7a25, 801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• #5240 f6fd9d8ac Thanks @SamHecquet! - Add aria-describedby to the radio props to improve accessibility

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [ae6fd7a25, 1b8e31eba, 801008e27, 756682037, f6fd9d8ac, 94da4e986, 3199b7242, 032c2e543, f05f56b9a, 8a0e5bdbc, e624a277a, eb5850687, bc2613a9a]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [ae6fd7a25, 801008e27, 8a0e5bdbc, bc2613a9a]

@chakra-ui/[email protected]

Patch Changes

• #5265 1b8e31eba Thanks @primos63! - Allow classNames specified on Slider and SliderFilledTrack to be added to the class list
• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [756682037]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• #5298 3199b7242 Thanks @TimKolberger! - Ensure consistent line height for FormErrorMessage and FormHelperText

• #5297 eb5850687 Thanks @TimKolberger! - Fixed an issue where the ModalFooter was out of the viewport for size="full".

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [801008e27, 3199b7242, 8a0e5bdbc, eb5850687]

@chakra-ui/[email protected]

Patch Changes

• #5228 f05f56b9a Thanks @seancwalsh! - Fix broken link in Tooltip's JSDoc comment

• Updated dependencies [801008e27, 8a0e5bdbc]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [d5461a452, 213f61026]

[email protected]

Patch Changes

• Updated dependencies

[email protected]

Patch Changes

• Updated dependencies

[email protected]

Patch Changes

• Updated dependencies

[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• #4835 12c31713c Thanks @igorwessel! - Upgrade @testing-library/react-hooks to test SSR. This was used to debug and fix issues with the useId hook.
• Updated dependencies