Version 2.6.0

New Component#

Stepper#

Introduce new Stepper component to model sequencial steps in a process.

<Stepper index={activeStep}>
  {steps.map((step, index) => (
    <Step key={index}>
      <StepIndicator>
        <StepStatus
          complete={<StepIcon />}
          incomplete={<StepNumber />}
          active={<StepNumber />}
        />
      </StepIndicator>

      <Box>
        <StepTitle>{step.title}</StepTitle>
        <StepDescription>{step.description}</StepDescription>
      </Box>

      <StepSeparator />
    </Step>
  ))}
</Stepper>

Minor Changes#

Editable#

Adds finalFocusRef and onBlur to Editable component

Theme#

Add semantic tokens for inverse text and subtle text

Styled System#

• Add support for native aspectRatio style prop

  <Box aspectRatio="16/9" />

  copy

• Add support for nested semantic tokens in theme. It is now possible to declare semantic tokens by nesting objects.

  BEFORE:

  const theme = {
    semanticTokens: {
      colors: {
        "background.pressed.base": { default: "blue.800", _dark: "blue.300" },
        "background.pressed.subtle": { default: "blue.300", _dark: "blue.700" },
      },
    },
  }

  copy

  AFTER:

  const theme = {
    semanticTokens: {
      colors: {
        background: {
          pressed: {
            base: { default: "blue.800", _dark: "blue.300" },
            subtle: { default: "blue.300", _dark: "blue.700" },
          },
        },
      },
    },
  }

  copy

  This allows for cleaner grouping and organization of tokens.

• Add _horizontal and _vertical pseudo props to style orientation data attributes

  <Box _horizontal={{ width: "2px" }} _vertical={{ height: "4px" }} />

  copy

Patch Changes#

Theme#

• Fix issue where breadcrumb separator current page link is styled incorrectly
• Fix issue where modal content is cut off when it has overflowing content and isCentered is set to true

useOutsideClick#

Fix issue where outside click doesn't get triggered on context menu click outside.

Avatar#

• Respect crossOrigin property in useImage

• Fix issue where initials was not correctly computed when name includes a middle name like "Sage Naruto Manich"

Checkbox#

• Fix issue where scroll is hijacked when the menu and checkbox is opened.
• Fix issue where checkbox initially animates when checked

Icons#

• Fix issue where SpinnerIcon id causes accessibility violation

Image#

• Respect crossOrigin property in useImage

Menu#

• Fix issue where scroll is hijacked when the menu and checkbox is opened.
• Fix vertical alignment of menu icon wrapper to ensure consistent UI

Toast#

Update element types for toast list and item to apply appropriate accessibility roles

Next-js#

• Add loading props to the @chakra-ui/next-js.
• Fix issue where some next/image props were not forwarded to the underlying component.

Gatsby Plugin 3.1.3#

Reverts the use of the baseTheme in the plugin

With the added features of extendBaseTheme and ChakraBaseProvider, it was determined that the provider is considered unnecessary.

Custom theming is to be expected for components when there are no defaults rendered.

For Gatsby, this means that the plugin can be reverted back to it's original setup, and still be able to accept extendBaseTheme to reduce the payload of the component themes when customizing them.