Skip to content

Latest commit

 

History

History
1023 lines (714 loc) · 41.4 KB

v2.2.0.mdx

File metadata and controls

1023 lines (714 loc) · 41.4 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

@chakra-ui/checkbox@2.1.0

Minor Changes

Patch Changes

@chakra-ui/media-query@3.1.0

Minor Changes

  • #6157 95bcaf1ff Thanks @segunadebayo! - 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 })

Patch Changes

@chakra-ui/react@2.2.0

Minor Changes

  • #6153 400a2091a Thanks @segunadebayo! - - 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.

Patch Changes

@chakra-ui/styled-system@2.2.0

Minor Changes

Patch Changes

@chakra-ui/theme@2.1.0

Minor Changes

Patch Changes

@chakra-ui/cli@2.1.0

Minor Changes

  • #6117 154fee7f1 Thanks @TimKolberger! - 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

storybook-addon@2.0.6

Patch Changes

@chakra-ui/accordion@2.0.3

Patch Changes

@chakra-ui/alert@2.0.2

Patch Changes

@chakra-ui/anatomy@2.0.1

Patch Changes

@chakra-ui/avatar@2.0.3

Patch Changes

@chakra-ui/breadcrumb@2.0.2

Patch Changes

@chakra-ui/button@2.0.2

Patch Changes

@chakra-ui/clickable@2.0.2

Patch Changes

@chakra-ui/close-button@2.0.2

Patch Changes

@chakra-ui/color-mode@2.0.4

Patch Changes

@chakra-ui/control-box@2.0.2

Patch Changes

@chakra-ui/counter@2.0.2

Patch Changes

@chakra-ui/css-reset@2.0.1

Patch Changes

@chakra-ui/descendant@3.0.2

Patch Changes

@chakra-ui/editable@2.0.2

Patch Changes

@chakra-ui/react-env@2.0.2

Patch Changes

@chakra-ui/focus-lock@2.0.3

Patch Changes

@chakra-ui/form-control@2.0.2

Patch Changes

@chakra-ui/hooks@2.0.2

Patch Changes

@chakra-ui/icon@3.0.2

Patch Changes

@chakra-ui/icons@2.0.2

Patch Changes

@chakra-ui/image@2.0.3

Patch Changes

@chakra-ui/input@2.0.2

Patch Changes

@chakra-ui/layout@2.0.2

Patch Changes

@chakra-ui/live-region@2.0.2

Patch Changes

@chakra-ui/menu@2.0.3

Patch Changes

@chakra-ui/modal@2.0.3

Patch Changes

@chakra-ui/number-input@2.0.2

Patch Changes

@chakra-ui/pin-input@2.0.3

Patch Changes

@chakra-ui/popover@2.0.2

Patch Changes

@chakra-ui/popper@3.0.2

Patch Changes

@chakra-ui/portal@2.0.2

Patch Changes

@chakra-ui/progress@2.0.2

Patch Changes

@chakra-ui/provider@2.0.5

Patch Changes

@chakra-ui/radio@2.0.2

Patch Changes

@chakra-ui/react-utils@2.0.1

Patch Changes

@chakra-ui/select@2.0.2

Patch Changes

@chakra-ui/skeleton@2.0.5

Patch Changes

@chakra-ui/skip-nav@2.0.2

Patch Changes

@chakra-ui/slider@2.0.2

Patch Changes

@chakra-ui/spinner@2.0.2

Patch Changes

@chakra-ui/stat@2.0.2

Patch Changes

@chakra-ui/switch@2.0.3

Patch Changes

@chakra-ui/system@2.1.2

Patch Changes

@chakra-ui/table@2.0.2

Patch Changes

@chakra-ui/tabs@2.0.3

Patch Changes

@chakra-ui/tag@2.0.2

Patch Changes

@chakra-ui/textarea@2.0.3

Patch Changes

@chakra-ui/theme-tools@2.0.2

Patch Changes

@chakra-ui/toast@2.0.6

Patch Changes

@chakra-ui/tooltip@2.0.2

Patch Changes

@chakra-ui/transition@2.0.2

Patch Changes

@chakra-ui/utils@2.0.2

Patch Changes

@chakra-ui/visually-hidden@2.0.2

Patch Changes

@chakra-ui/babel-plugin@1.0.3

Patch Changes

@chakra-ui/cra-template@2.0.2

Patch Changes

@chakra-ui/cra-template-typescript@2.0.2

Patch Changes

@chakra-ui/gatsby-plugin@3.0.1

Patch Changes

@chakra-ui/props-docs@2.0.6

Patch Changes

@chakra-ui/storybook-addon@4.0.0

Patch Changes

create-react-app-ts@2.0.6

Patch Changes

gatsby-starter-default@1.0.6

Patch Changes

chakra-nextjs@2.0.6

Patch Changes

chakra-nextjs-ts@2.0.6

Patch Changes

vite-ts@1.0.1

Patch Changes

@chakra-ui/test-utils@2.0.6

Patch Changes