Version 2.7.0

v2.7.0

@chakra-ui/accordion@2.2.0#

Minor Changes#

Patch Changes#

  • Updated dependencies

@chakra-ui/layout@2.2.0#

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/provider@2.3.0#

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#

@chakra-ui/react@2.7.0#

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#

@chakra-ui/dom-utils@2.1.0#

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/avatar@2.2.11#

Patch Changes#

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

  • Updated dependencies

@chakra-ui/css-reset@2.1.2#

Patch Changes#

@chakra-ui/focus-lock@2.0.17#

Patch Changes#

@chakra-ui/menu@2.1.15#

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/modal@2.2.12#

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/popover@2.1.12#

Patch Changes#

@chakra-ui/slider@2.0.25#

Patch Changes#

@chakra-ui/theme@3.1.2#

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/theme-tools@2.0.18#

Patch Changes#

@chakra-ui/toast@6.1.4#

Patch Changes#

@chakra-ui/tooltip@2.2.9#

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/styled-system@2.9.1#

Patch Changes#

@chakra-ui/system@2.5.8#

Patch Changes#

@chakra-ui/react-use-animation-state@2.0.9#

Patch Changes#

@chakra-ui/react-use-focus-effect@2.0.11#

Patch Changes#

@chakra-ui/next-js@2.1.4#

Patch Changes#

@chakra-ui/theme-utils@2.0.18#

Patch Changes#

@chakra-ui/test-utils@2.0.42#

Patch Changes#

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel