Version 2.4.2

v2.4.2

@chakra-ui/styled-system@2.4.0#

Minor Changes#

  • #5701 eb3bfe66d Thanks @lexanth! - Add the flag --strict-token-types for @chakra-ui/cli tokens to generate strict types for theme tokens (e.g. color, spacing)

    chakra-cli tokens --strict-token-types
    // before
    <Box padding="abc" />
    // valid type, but "abc" is not available in the theme
    

    // after
    <Box padding="abc" /> // invalid
    // Type '"abc"' is not assignable to type '"1" | "2" | ... | undefined'.

  • 1a4dad7a4 Thanks @segunadebayo! - Add support for textIndent style prop

@chakra-ui/cli@2.2.0#

Minor Changes#

  • #5701 eb3bfe66d Thanks @lexanth! - Add the flag --strict-token-types for @chakra-ui/cli tokens to generate strict types for theme tokens (e.g. color, spacing)

    chakra-cli tokens --strict-token-types
    // before
    <Box padding="abc" />
    // valid type, but "abc" is not available in the theme
    

    // after
    <Box padding="abc" /> // invalid
    // Type '"abc"' is not assignable to type '"1" | "2" | ... | undefined'.

@chakra-ui/accordion@2.1.4#

Patch Changes#

@chakra-ui/alert@2.0.13#

Patch Changes#

@chakra-ui/button@2.0.13#

Patch Changes#

  • #6886 9e3d91fd7 Thanks @SpencerDuball! - Added support for orientation prop in the ButtonGroup component.

    This makes it possible to now have vertical button groups when isAttached is set to true.

    <ButtonGroup isAttached orientation="vertical">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
      <Button>Button 4</Button>
    </ButtonGroup>

  • Updated dependencies

@chakra-ui/checkbox@2.2.5#

Patch Changes#

@chakra-ui/close-button@2.0.13#

Patch Changes#

@chakra-ui/editable@2.0.16#

Patch Changes#

@chakra-ui/form-control@2.0.13#

Patch Changes#

@chakra-ui/icon@3.0.13#

Patch Changes#

@chakra-ui/icons@2.0.13#

Patch Changes#

@chakra-ui/input@2.0.14#

Patch Changes#

  • Updated dependencies

@chakra-ui/layout@2.1.11#

Patch Changes#

@chakra-ui/menu@2.1.5#

Patch Changes#

  • #7032 f84891b10 Thanks @anubra266! - Add support for setting the initially focused menu programmatically

    const Example = () => {
      const itemRef = useRef(null)
      return (
        <Menu initialFocusRef={itemRef}>
          <MenuButton>Welcome</MenuButton>
          <MenuList>
            <MenuItem>Menu 1</MenuItem>
            <MenuItem ref={itemRef}>Menu 2</MenuItem>
            <MenuItem>Menu 3</MenuItem>
          </MenuList>
        </Menu>
      )
    }

  • Updated dependencies

@chakra-ui/modal@2.2.4#

Patch Changes#

@chakra-ui/number-input@2.0.14#

Patch Changes#

@chakra-ui/popover@2.1.4#

Patch Changes#

@chakra-ui/popper@3.0.10#

Patch Changes#

@chakra-ui/provider@2.0.24#

Patch Changes#

  • Updated dependencies

@chakra-ui/radio@2.0.14#

Patch Changes#

  • #7026 dcc23d1e2 Thanks @ArthurPedroti! - Update type of value and defaultValue to string instead of string | number. This reflects the internal implementation

  • Updated dependencies [67ef76e32]

@chakra-ui/react@2.4.2#

Patch Changes#

  • #6997 4d5501b82 Thanks @anubra266! - Add ChakraBaseProvider, a minimal version of ChakraProvider that supplies just the theme tokens, and ignores components.

    Historically, one of the biggest causes of the large initial JS payload is the size of the component themes. With this approach, you get to apply the theme for just the component you need by using extendBaseTheme.

    Base theme refers to the minimal theme for just the design tokens

    import { ChakraBaseProvider, extendBaseTheme } from "@chakra-ui/react"
    import { Button } from "@chakra-ui/theme/components"
    

    const theme = extendBaseTheme({
      components: {
        Button,
      },
    })
    

    function App() {
      return (
        <ChakraBaseProvider theme={theme}>
          <Component {...pageProps} />
        </ChakraBaseProvider>
      )
    }

  • Updated dependencies [eb3bfe66d, 4d5501b82, 1a4dad7a4, f84891b10, eb82598c2, 9e3d91fd7, dcc23d1e2, 8c2af79fa, 36ac52021, bf7704112]

@chakra-ui/select@2.0.14#

Patch Changes#

  • Updated dependencies

@chakra-ui/slider@2.0.14#

Patch Changes#

@chakra-ui/stat@2.0.13#

Patch Changes#

@chakra-ui/switch@2.0.17#

Patch Changes#

  • Updated dependencies

@chakra-ui/tag@2.0.13#

Patch Changes#

@chakra-ui/textarea@2.0.14#

Patch Changes#

  • Updated dependencies

@chakra-ui/theme@2.2.2#

Patch Changes#

  • #6997 4d5501b82 Thanks @anubra266! - Add ChakraBaseProvider, a minimal version of ChakraProvider that supplies just the theme tokens, and ignores components.

    Historically, one of the biggest causes of the large initial JS payload is the size of the component themes. With this approach, you get to apply the theme for just the component you need by using extendBaseTheme.

    Base theme refers to the minimal theme for just the design tokens

    import { ChakraBaseProvider, extendBaseTheme } from "@chakra-ui/react"
    import { Button } from "@chakra-ui/theme/components"
    

    const theme = extendBaseTheme({
      components: {
        Button,
      },
    })
    

    function App() {
      return (
        <ChakraBaseProvider theme={theme}>
          <Component {...pageProps} />
        </ChakraBaseProvider>
      )
    }

  • #7023 eb82598c2 Thanks @anubra266! - Fix issue where modal dialog scrolls beyond the content in Safari.

  • #6886 9e3d91fd7 Thanks @SpencerDuball! - Added support for orientation prop in the ButtonGroup component.

    This makes it possible to now have vertical button groups when isAttached is set to true.

    <ButtonGroup isAttached orientation="vertical">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
      <Button>Button 4</Button>
    </ButtonGroup>

  • bf7704112 Thanks @segunadebayo! - Fixed console warning with Tabs when using the enclosed variant.

  • Updated dependencies [c9f976d67]

@chakra-ui/theme-tools@2.0.14#

Patch Changes#

@chakra-ui/toast@4.0.4#

Patch Changes#

@chakra-ui/tooltip@2.2.2#

Patch Changes#

@chakra-ui/system@2.3.4#

Patch Changes#

@chakra-ui/react-types@2.0.5#

Patch Changes#

@chakra-ui/theme-utils@2.0.5#

Patch Changes#

  • #6997 4d5501b82 Thanks @anubra266! - Add ChakraBaseProvider, a minimal version of ChakraProvider that supplies just the theme tokens, and ignores components.

    Historically, one of the biggest causes of the large initial JS payload is the size of the component themes. With this approach, you get to apply the theme for just the component you need by using extendBaseTheme.

    Base theme refers to the minimal theme for just the design tokens

    import { ChakraBaseProvider, extendBaseTheme } from "@chakra-ui/react"
    import { Button } from "@chakra-ui/theme/components"
    

    const theme = extendBaseTheme({
      components: {
        Button,
      },
    })
    

    function App() {
      return (
        <ChakraBaseProvider theme={theme}>
          <Component {...pageProps} />
        </ChakraBaseProvider>
      )
    }

  • Updated dependencies [eb3bfe66d, 4d5501b82, 1a4dad7a4, eb82598c2, 9e3d91fd7, bf7704112]

@chakra-ui/gatsby-plugin@3.0.7#

Patch Changes#

@chakra-ui/props-docs@2.0.26#

Patch Changes#

@chakra-ui/storybook-addon@4.0.14#

Patch Changes#

  • Updated dependencies

@chakra-ui/test-utils@2.0.26#

Patch Changes#

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel