Skip to content

Latest commit

 

History

History
110 lines (75 loc) · 3.07 KB

v2.2.0.mdx

File metadata and controls

110 lines (75 loc) · 3.07 KB
Raw
title description releaseUrl releaseDate version
Version 2.2.0
Explore the changelog for Chakra UI version 2.2.0. Learn about the latest features, bug fixes, and improvements.
June 6, 2022
2.2.0

Minor Changes

All components

  • Ensure components show focus outline only when interacting with the keyboard.

  • Migrate components to use _focusVisible instead of _focus selectors to indicate focus.

    🚨 NOTE: This might be a potential breaking change for consumers who use the extendTheme with the _focus styles. Kindly migrate to _focusVisible.

Checkbox 2.1.0

  • Remove annoying focus outline by leveraging focus visible
  • Track focus visible and add data-focus-visible to getCheckboxProps

Media Query 3.1.0

  • Add support for client-side rendered (CSR) apps to get the correct value on first render.

    Affected hooks: useMediaQuery, useBreakpoint, useBreakpointValue.

    These hooks are built work in server-side rendering (SSR) applications by default. You might notice a quick flash of incorrect media query value when you use them.

    If you're creating a CSR-only app, you can now leverage the ssr argument to get the correct value on first render.

    const [isMobile] = useMediaQuery("(max-width: 768px)", {
  // you can now pass `ssr: false`
  ssr: false,
})

const buttonSize = useBreakpointValue(
  { base: "sm", lg: "md" },
  // you can now pass `ssr: false`
  { ssr: false },
)

// you can now pass `ssr: false`
const breakpoint = useBreakpoint({ ssr: false })

Styled System 2.2.0

  • Add support for styling data-focus-visible using the _focusVisible pseudo prop

Theme 2.1.0

  • Remove annoying focus outline by leveraging focus visible

CLI 2.1.0

  • New --watch flag for the tokens command. You can specify a directory path to watch for changes.

    It defaults to the parent dir of <source>, e.g. src/theme/theme.ts => src/theme.

    > chakra-cli tokens src/theme/theme.ts --watch

> chakra-cli tokens --help
Usage: chakra-cli tokens [options] <source>

Options:
  --out <path>              output file e.g. node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts
  --strict-component-types  Generate strict types for props variant and size
  --watch [path]            Watch directory for changes and rebuild
  -h, --help                display help for command

Patch Changes

All components

  • Improve error messaging around style provider factory by creating a custom createStylesContext function.

CLI 2.1.0

  • Fixed an issue where the tokens command failed with SyntaxError: Undefined label 'e'.

Modal 2.0.3

  • Fix shifting screen when opening modal
  • Improve error messaging around style provider factory by creating a custom createStylesContext function

Radio 2.0.2

  • Fix a bug in chromium browsers where the modal position would change when focusing on the radio button in the modal which has some long content.