Version 2.3.0

v2.3.0

@chakra-ui/avatar@2.1.0#

Minor Changes#

e8f634e0d Thanks @segunadebayo! - Add support for changing avatar badge placement.

The badge placement can be set to top-start, top-end, bottom-start or bottom-end.
```
<Avatar
  name="Uchiha Itachi"
  src="https://uinames.com/api/photos/female/18.jpg"
>
  <AvatarBadge placement="top-start" />
</Avatar>
```

Patch Changes#

Updated dependencies

@chakra-ui/react@2.3.0#

Minor Changes#

e8f634e0d Thanks @segunadebayo! - Add support for changing avatar badge placement.

The badge placement can be set to top-start, top-end, bottom-start or bottom-end.
```
<Avatar
  name="Uchiha Itachi"
  src="https://uinames.com/api/photos/female/18.jpg"
>
  <AvatarBadge placement="top-start" />
</Avatar>
```

Patch Changes#

Updated dependencies [dda7d71bb, 5e6c3fd65, e8f634e0d, 5bacbdc2c, 8b0bd0d58, 0cae42007, 872c0ccf5, ac6a00aea]

@chakra-ui/styled-system@2.3.0#

Minor Changes#

#6221 872c0ccf5 Thanks @segunadebayo! - Add defineStyle and defineStyleConfig to improve the TypeScript authoring experience of style objects and single part component themes.

import { defineStyleConfig, defineStyle } from "@chakra-ui/styled-system"

// authoring style objects
const style = defineStyle({
  marginTop: "20px",
})

// authoring style configs for single part component
const button = defineStyleConfig({
  baseStyle: {},
  variants: {},
  defaultProps: {},
})

Add createMultiStyleConfigHelpers factory that provides functions that help improve the TypeScript authoring experience of multipart component themes.

import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-sytem"

// create scoped helpers for that defined parts
const helpers = createMultiStyleConfigHelpers(["button", "label"])
const { definePartsStyle, defineMultiStyleConfig } = helpers

// authoring styles for each part
const outlineVariant = definePartsStyle({
  button: {},
  label: {},
})

// authoring styles for multipart component
const accordion = defineMultiStyleConfig({
  baseStyle: {
    button: {},
    label: {},
  },
  variants: {
    outline: outlineVariant,
  },
})

Patch Changes#

#6559 0cae42007 Thanks @segunadebayo! - Refactors the theme to use design tokens and css variables as much as possible.

Improve support for 100vh values by using a polyfill css variable --chakra-vh.

@chakra-ui/accordion@2.0.12#

Patch Changes#

Updated dependencies [260076e2a]

@chakra-ui/anatomy@2.0.6#

Patch Changes#

5e6c3fd65 Thanks @segunadebayo! - Allow slider mark to be themable
#6221 872c0ccf5 Thanks @segunadebayo! - Update package to use styled-system as dependency

@chakra-ui/css-reset@2.0.6#

Patch Changes#

#6559 0cae42007 Thanks @segunadebayo! - Refactors the theme to use design tokens and css variables as much as possible.

Improve support for 100vh values by using a polyfill css variable --chakra-vh.

@chakra-ui/descendant@3.0.9#

Patch Changes#

#6573 260076e2a Thanks @EduSantosBrito! - Fix issue where generic type contraints throws in TypeScript 4.8+

@chakra-ui/menu@2.0.12#

Patch Changes#

Updated dependencies [260076e2a]

@chakra-ui/pin-input@2.0.12#

Patch Changes#

Updated dependencies [260076e2a]

@chakra-ui/provider@2.0.15#

Patch Changes#

#6559 0cae42007 Thanks @segunadebayo! - Refactors the theme to use design tokens and css variables as much as possible.

Improve support for 100vh values by using a polyfill css variable --chakra-vh.
Updated dependencies [0cae42007]

@chakra-ui/select@2.0.10#

Patch Changes#

dda7d71bb Thanks @segunadebayo! - Fix issue where select theme throws when "field" part is not defined
Updated dependencies

@chakra-ui/skeleton@2.0.15#

Patch Changes#

#6221 872c0ccf5 Thanks @segunadebayo! - Refactor to use the new helpers from styled-system package
Updated dependencies

@chakra-ui/slider@2.0.10#

Patch Changes#

5e6c3fd65 Thanks @segunadebayo! - Allow slider mark to be themable
Updated dependencies

@chakra-ui/system@2.2.8#

Patch Changes#

Updated dependencies [0cae42007, 872c0ccf5]

@chakra-ui/tabs@2.1.1#

Patch Changes#

ac6a00aea Thanks @segunadebayo! - Fix key warning for tabs component
Updated dependencies [260076e2a]

@chakra-ui/theme@2.1.9#

Patch Changes#

e8f634e0d Thanks @segunadebayo! - Add support for changing avatar badge placement.

The badge placement can be set to top-start, top-end, bottom-start or bottom-end.
```
<Avatar
  name="Uchiha Itachi"
  src="https://uinames.com/api/photos/female/18.jpg"
>
  <AvatarBadge placement="top-start" />
</Avatar>
```
5bacbdc2c Thanks @segunadebayo! - Refactor alert theme to use css variables
#6559 0cae42007 Thanks @segunadebayo! - Refactors the theme to use design tokens and css variables as much as possible.

Improve support for 100vh values by using a polyfill css variable --chakra-vh.
#6221 872c0ccf5 Thanks @segunadebayo! - Refactor to use the new helpers from styled-system package
Updated dependencies [5e6c3fd65, 872c0ccf5, 872c0ccf5]

@chakra-ui/theme-tools@2.0.11#

Patch Changes#

#6221 872c0ccf5 Thanks @segunadebayo! - Refactored code to use from styled-system package
Updated dependencies [5e6c3fd65, 872c0ccf5]

@chakra-ui/toast@3.0.8#

Patch Changes#

8b0bd0d58 Thanks @segunadebayo! - Fix issue where toast double update doesn't work
Updated dependencies [e8f634e0d, 5bacbdc2c, 0cae42007, 872c0ccf5]

@chakra-ui/react-use-pan-event@2.0.4#

Patch Changes#

Updated dependencies [7000bb5fe]

@chakra-ui/event-utils@2.0.4#

Patch Changes#

7000bb5fe Thanks @segunadebayo! - Fix regression in addPointerEvent utility

@chakra-ui/gatsby-plugin@3.0.6#

Patch Changes#

#6584 ababbde39 Thanks @nikolovlazar! - Removed default value of portalZIndex

@chakra-ui/props-docs@2.0.16#

Patch Changes#

Updated dependencies [e8f634e0d, 0cae42007, 872c0ccf5]

@chakra-ui/storybook-addon@4.0.10#

Patch Changes#

#6580 c22fa1a87 Thanks @itkrt2y! - remove an unused dependency
Updated dependencies

@chakra-ui/test-utils@2.0.16#

Patch Changes#

Updated dependencies [e8f634e0d, 5bacbdc2c, 0cae42007, 872c0ccf5]