Skip to content

Latest commit

 

History

History
492 lines (337 loc) · 18.1 KB

v1.7.4.mdx

File metadata and controls

492 lines (337 loc) · 18.1 KB
Raw
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.
January 4, 2022
1.7.4

@chakra-ui/storybook-addon@1.0.0

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/layout@1.7.0

Minor Changes

@chakra-ui/styled-system@1.16.0

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/system@1.9.0

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

@chakra-ui/cli@1.7.0

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

@chakra-ui/accordion@1.4.3

Patch Changes

@chakra-ui/avatar@1.3.2

Patch Changes

  • Updated dependencies

@chakra-ui/button@1.5.2

Patch Changes

@chakra-ui/checkbox@1.6.2

Patch Changes

@chakra-ui/color-mode@1.3.3

Patch Changes

@chakra-ui/counter@1.2.2

Patch Changes

@chakra-ui/editable@1.3.2

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/form-control@1.5.3

Patch Changes

@chakra-ui/hooks@1.7.2

Patch Changes

@chakra-ui/image@1.1.2

Patch Changes

@chakra-ui/input@1.3.3

Patch Changes

  • Updated dependencies

@chakra-ui/media-query@1.2.3

Patch Changes

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

@chakra-ui/menu@1.8.3

Patch Changes

@chakra-ui/modal@1.10.3

Patch Changes

@chakra-ui/number-input@1.3.3

Patch Changes

@chakra-ui/pin-input@1.7.2

Patch Changes

@chakra-ui/popover@1.11.1

Patch Changes

@chakra-ui/portal@1.3.2

Patch Changes

@chakra-ui/provider@1.7.4

Patch Changes

@chakra-ui/radio@1.4.4

Patch Changes

@chakra-ui/react@1.7.4

Patch Changes

@chakra-ui/select@1.2.3

Patch Changes

  • Updated dependencies

@chakra-ui/skeleton@1.2.4

Patch Changes

@chakra-ui/slider@1.5.3

Patch Changes

@chakra-ui/switch@1.3.2

Patch Changes

@chakra-ui/tabs@1.6.2

Patch Changes

@chakra-ui/textarea@1.2.3

Patch Changes

  • Updated dependencies

@chakra-ui/theme@1.12.3

Patch Changes

@chakra-ui/toast@1.5.1

Patch Changes

@chakra-ui/tooltip@1.4.3

Patch Changes

@chakra-ui/props-docs@1.0.42

Patch Changes

create-react-app-ts@1.1.5

Patch Changes

  • Updated dependencies

gatsby-starter-default@0.3.5

Patch Changes

  • Updated dependencies

chakra-nextjs@1.1.5

Patch Changes

  • Updated dependencies

chakra-nextjs-ts@1.1.5

Patch Changes

  • Updated dependencies

@chakra-ui/test-utils@1.1.4

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