Version 2.2.0

v2.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 })

  copy

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

  copy

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.