v2.4.2.mdx

title	description	releaseUrl	releaseDate	version
Version 2.4.2	Explore the changelog for Chakra UI version 2.4.2. Learn about the latest features, bug fixes, and improvements.	chakra-ui#6989	November 29, 2022	2.4.2

@chakra-ui/[email protected]

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/[email protected]

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/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

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/[email protected]

Patch Changes

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa, 67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• #6981 8c2af79fa Thanks @anubra266! - Add support for styling the Icon component from the theme object.

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

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/[email protected]

Patch Changes

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa, 67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

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/[email protected]

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/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• #6979 36ac52021 Thanks @Tisks! - Expose SliderActions and SliderState types to improve documentation

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [8c2af79fa]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

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/[email protected]

Patch Changes

• #7019 c9f976d67 Thanks @anubra266! - Replace tinycolor package with color2k for smaller bundle size

@chakra-ui/[email protected]

Patch Changes

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

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [67ef76e32]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [eb3bfe66d, 4d5501b82, 1a4dad7a4]

@chakra-ui/[email protected]

Patch Changes

• #7046 67ef76e32 Thanks @cschroeter! - Fixes a problem where types were not exported correctly

@chakra-ui/[email protected]

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/[email protected]

Patch Changes

• 143641b8e Thanks @segunadebayo! - Fix peer dependency range to support latest version of Gatsby

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [eb3bfe66d, 4d5501b82, 1a4dad7a4]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

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