v2.7.0.mdx

title	description	releaseUrl	releaseDate	version
Version 2.7.0	Explore the changelog for Chakra UI version 2.7.0. Learn about the latest features, bug fixes, and improvements.	chakra-ui#7640	May 31, 2023	2.7.0

@chakra-ui/[email protected]

Minor Changes

• #7631 2347e3306 Thanks @FredPerr! - Fixed AccordionIconProps failure with 'as' prop

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Minor Changes

• c31df5a4b Thanks @segunadebayo! - - Add new Indicator layout component. Useful for positioning an element in the corners of another element.

  For example, let's say you want to position a notification badge in the top end corner of a box. You can use the Indicator component to achieve this.

  <Box position="relative" width="80px" height="80px" bg="gray.50">
    <Indicator placement="top-end">
      <Circle size="5" bg="red.100">
        3
      </Circle>
    </Indicator>
  </Box>

  • Refactored the Stack and Wrap components to use the flex gap instead of the owl selector & > * ~ * for spacing.

    This fixes an issue where you can't use raw text nodes as a child of the Stack or Wrap component.

Patch Changes

• Updated dependencies

@chakra-ui/[email protected]

Minor Changes

• 3a164da59 Thanks @segunadebayo! - Add support for disabling global styles via the disableGlobalStyle prop on the ChakraProvider.

  This is useful for scenarios where user needs to scope all global styles + css reset to a specific element.

  import { ChakraProvider } from "@chakra-ui/react"
  
  function App() {
    return (
      <ChakraProvider disableGlobalStyle>
        <App />
      </ChakraProvider>
    )
  }

Patch Changes

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

• Updated dependencies [38acfe89c]

@chakra-ui/[email protected]

Minor Changes

• c31df5a4b Thanks @segunadebayo! - - Add new Indicator layout component. Useful for positioning an element in the corners of another element.

  For example, let's say you want to position a notification badge in the top end corner of a box. You can use the Indicator component to achieve this.

  <Box position="relative" width="80px" height="80px" bg="gray.50">
    <Indicator placement="top-end">
      <Circle size="5" bg="red.100">
        3
      </Circle>
    </Indicator>
  </Box>

  • Refactored the Stack and Wrap components to use the flex gap instead of the owl selector & > * ~ * for spacing.

    This fixes an issue where you can't use raw text nodes as a child of the Stack or Wrap component.

Patch Changes

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

• Updated dependencies [9d0b311b1, c6d523ced, 0167b68a8, c121c35c0, 3a164da59, 148c66bc6, 16c0ab7ec, c31df5a4b, c4fcc2a43, 148c66bc6, 38acfe89c, 6f9eb3518, 2347e3306, 0bec820bd]

@chakra-ui/[email protected]

Minor Changes

• 0bec820bd Thanks @segunadebayo! - Fix issue where closeOnScroll doesn't work when tooltip trigger's scrolling parent is not the root document

@chakra-ui/[email protected]

Patch Changes

• c121c35c0 Thanks @segunadebayo! - Force release avatar package to reflect Array.at refactoring

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

@chakra-ui/[email protected]

Patch Changes

• 148c66bc6 Thanks @segunadebayo! - Upgrade focus-trap package to fix regression with return focus and initial focus ref.
• Updated dependencies [0bec820bd]

@chakra-ui/[email protected]

Patch Changes

• 6f9eb3518 Thanks @segunadebayo! - Fix issue where keyboard events don't work reliably when a MenuItem contains a Dialog or similar interactive element.
• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• #7338 0167b68a8 Thanks @bertho-zero! - Exports modalManager and returns the index of the modal from useModal to allow creating custom components similar to modals
• Updated dependencies [148c66bc6]

@chakra-ui/[email protected]

Patch Changes

• 148c66bc6 Thanks @segunadebayo! - Fix issues due to framer-motion upgrade

• Updated dependencies

@chakra-ui/[email protected]

Patch Changes

• c4fcc2a43 Thanks @segunadebayo! - Fix issue where range slider mark is not connected to theme

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

@chakra-ui/[email protected]

Patch Changes

• #7590 9d0b311b1 Thanks @dvartic! - Add explicit color attribute on buttons to ensure consistency across light and dark modes.

  **🚨 Potentially Breaking Change 🚨 **

  If your button component code relies on inheriting color on buttons, consider adding an explicit color.

• #7671 c6d523ced Thanks @kashikarparth! - Fix issue where excess label looks inconsistent with the avatar initials for xs and 2xs sizes

• 16c0ab7ec Thanks @segunadebayo! - Refactor input theme to use css var instead of resolving to raw value

• Updated dependencies [16c0ab7ec]

@chakra-ui/[email protected]

Patch Changes

• 16c0ab7ec Thanks @segunadebayo! - Add getColorVar function to get color css variable from theme object

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [9d0b311b1, c6d523ced, 16c0ab7ec, 38acfe89c]

@chakra-ui/[email protected]

Patch Changes

• 0bec820bd Thanks @segunadebayo! - Fix issue where closeOnScroll doesn't work when tooltip trigger's scrolling parent is not the root document
• Updated dependencies [0bec820bd]

@chakra-ui/[email protected]

Patch Changes

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

@chakra-ui/[email protected]

Patch Changes

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

• Updated dependencies [38acfe89c]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [0bec820bd]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [0bec820bd]

@chakra-ui/[email protected]

Patch Changes

• 5a755971a Thanks @segunadebayo! - Add isExternal to Link component

• 38acfe89c Thanks @segunadebayo! - Bump emotion version to 11.11.x to support css cascade layers

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [9d0b311b1, c6d523ced, 16c0ab7ec, 38acfe89c]

@chakra-ui/[email protected]

Patch Changes

• Updated dependencies [9d0b311b1, c6d523ced, 3a164da59, 16c0ab7ec, 38acfe89c]