Skip to content

Latest commit

 

History

History
881 lines (617 loc) · 37 KB

v1.4.2.mdx

File metadata and controls

881 lines (617 loc) · 37 KB
Raw
title description releaseUrl releaseDate version
Version 1.4.2
Explore the changelog for Chakra UI version 1.4.2. Learn about the latest features, bug fixes, and improvements.
March 30, 2021
1.4.2

@chakra-ui/accordion@1.2.0

Minor Changes

Patch Changes

@chakra-ui/alert@1.2.0

Minor Changes

Patch Changes

@chakra-ui/avatar@1.2.0

Minor Changes

Patch Changes

@chakra-ui/breadcrumb@1.2.0

Minor Changes

Patch Changes

@chakra-ui/button@1.2.0

Minor Changes

Patch Changes

@chakra-ui/checkbox@1.4.0

Minor Changes

  • b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

  • 69ae9f68e Thanks @segunadebayo! - - Add getRootProps to usecheckbox hook to manage props passed to checkbox container.

    • Forward onFocus and onBlur props to the input element for better integration with form libraries.

    • Ensure the checkbox works when the root element is not label. This helps to fix the current accessibility issues with the Switch component.

Patch Changes

@chakra-ui/clickable@1.1.0

Minor Changes

Patch Changes

@chakra-ui/counter@1.1.0

Minor Changes

Patch Changes

@chakra-ui/descendant@1.1.0

Minor Changes

Patch Changes

@chakra-ui/editable@1.2.0

Minor Changes

Patch Changes

@chakra-ui/form-control@1.3.0

Minor Changes

  • b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

  • fa9350eff #3689 Thanks @segunadebayo! - Refactor useFormControlProvider to return prop getters getHelpTextProps, getErrorMessageProps, and getRootProps.

    Detect helper text and error message using ref callback instead of useLayoutEffect

    Create useFormControlProps to provide a way to get the resolved form control props isInvalid, isDisabled, instead of HTML attributes. This will make it easier to integrate with number-input, checkbox, and switch.

    Update aria-describedby id to include feedbackId only when isInvalid is true,

Patch Changes

@chakra-ui/hooks@1.3.0

Minor Changes

Patch Changes

  • 623e782e8 #3408 Thanks @dodas! - useControllableState: The onChange callback will be called only if the new value isn't equal to the current one.
  • Updated dependencies [a58b724e9, b724a9dd9]

@chakra-ui/input@1.2.0

Minor Changes

Patch Changes

@chakra-ui/layout@1.4.0

Minor Changes

Patch Changes

@chakra-ui/machine@1.2.0

Minor Changes

@chakra-ui/menu@1.3.0

Minor Changes

Patch Changes

@chakra-ui/modal@1.8.0

Minor Changes

Patch Changes

@chakra-ui/number-input@1.2.0

Minor Changes

Patch Changes

  • fa9350eff #3689 Thanks @segunadebayo! - ### useNumberInput

    • Forward aria-* props to the input element.
    • Fix issue where onChange was called on mount.
    • Fix issue where onBlur was called twice.
    • Memoize all callback props onFocus, onBlur, getAriaValueText
    • Refactor implicit useFormControl logic to be called from NumberInput instead.
    • Call setFocused.on with ReactDOM.flushSync to prevent concurrent mode issue where setting state in onFocus affects onChange event handler.

  • Updated dependencies [623e782e8, a58b724e9, f9b1a2a9b, b724a9dd9, 3cc77ce60, fa9350eff, 428593906]

@chakra-ui/pin-input@1.5.0

Minor Changes

Patch Changes

@chakra-ui/popover@1.4.0

Minor Changes

Patch Changes

@chakra-ui/portal@1.2.0

Minor Changes

Patch Changes

@chakra-ui/radio@1.3.0

Minor Changes

Patch Changes

@chakra-ui/react-utils@1.1.0

Minor Changes

Patch Changes

@chakra-ui/slider@1.2.0

Minor Changes

Patch Changes

@chakra-ui/styled-system@1.10.0

Minor Changes

  • 32e79f835 #3648 Thanks @segunadebayo! - Add support for css variable tokens. This means you can create a css variable and reference value in the tokens.

    // We're convert `colors.red.200` to `var(--chakra-colors-red-200)`
<Box
  sx={{
    "--banner-color": "colors.red.200",
    "& .banner": {
      bg: "var(--banner-color)",
    },
  }}
/>

    You can also add fallback values in event the token doesn't exist:

    <Box
  sx={{
    // evaluates to #fff if `colors.red.1000` doesn't exists in theme map
    "--banner-color": "colors.red.1000, #fff",
    "& .banner": {
      bg: "var(--banner-color)",
    },
  }}
/>

    This opens new possbilities with css variables, for example you can apply responsive token values like you would with style props.

    TypeScript support for this is still WIP

    <Box
  sx={{
    "--banner-color": ["colors.red.200", "colors.pink.400"],
    "& .banner": {
      bg: "var(--banner-color)",
    },
  }}
/>

Patch Changes

@chakra-ui/switch@1.2.0

Minor Changes

  • eed076c4b #3678 Thanks @segunadebayo! - - Fix use getRootProps from useCheckbox for the root element and memoize styles

    • Add support for children prop as a way to add an accessible label.

  • b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

Patch Changes

@chakra-ui/system@1.6.0

Minor Changes

Patch Changes

@chakra-ui/tabs@1.3.0

Minor Changes

Patch Changes

@chakra-ui/theme@1.8.0

Minor Changes

  • aba02eab1 #3678 Thanks @segunadebayo! - ### Switch

    • Add container part
    • Use css vars to handle styles
    • Fix rtl issue

    Stats and Table

    • Fix rtl issue

    • Remove 0 token value from spacing tokens. 0 maps to 0 and there's no need to create a css custom property for that.

Patch Changes

@chakra-ui/tooltip@1.3.0

Minor Changes

Patch Changes

@chakra-ui/utils@1.5.0

Minor Changes

  • a58b724e9 Thanks @segunadebayo! - Add withFlushSync function wrapper to help resolve concurrent mode and onFocus state issues.

    This is a temp fix until the issue is fixed in React.

  • b724a9dd9 #3674 Thanks @codebender828! - Extract all React based utilities and types into @chakra-ui/react-utils

@chakra-ui/close-button@1.1.4

Patch Changes

@chakra-ui/color-mode@1.1.3

Patch Changes

@chakra-ui/control-box@1.0.7

Patch Changes

@chakra-ui/focus-lock@1.1.3

Patch Changes

@chakra-ui/icon@1.1.4

Patch Changes

@chakra-ui/icons@1.0.8

Patch Changes

  • Updated dependencies

@chakra-ui/image@1.0.10

Patch Changes

@chakra-ui/live-region@1.0.7

Patch Changes

@chakra-ui/media-query@1.0.8

Patch Changes

@chakra-ui/popper@2.0.1

Patch Changes

@chakra-ui/progress@1.1.4

Patch Changes

@chakra-ui/react@1.4.2

Patch Changes

@chakra-ui/select@1.1.4

Patch Changes

@chakra-ui/skeleton@1.1.7

Patch Changes

@chakra-ui/skip-nav@1.1.4

Patch Changes

@chakra-ui/spinner@1.1.4

Patch Changes

@chakra-ui/stat@1.1.4

Patch Changes

@chakra-ui/table@1.1.4

Patch Changes

@chakra-ui/tag@1.1.4

Patch Changes

@chakra-ui/textarea@1.1.4

Patch Changes

@chakra-ui/theme-tools@1.1.2

Patch Changes

@chakra-ui/toast@1.2.1

Patch Changes

@chakra-ui/transition@1.1.1

Patch Changes

@chakra-ui/visually-hidden@1.0.7

Patch Changes

@chakra-ui/props-docs@1.0.21

Patch Changes

@chakra-ui/docs@1.2.0

Minor Changes

Patch Changes

@chakra-ui/test-utils@1.0.21

Patch Changes

  • Updated dependencies