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#

@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#

@chakra-ui/anatomy@2.0.6#

Patch Changes#

@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#

@chakra-ui/menu@2.0.12#

Patch Changes#

@chakra-ui/pin-input@2.0.12#

Patch Changes#

@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#

@chakra-ui/slider@2.0.10#

Patch Changes#

@chakra-ui/system@2.2.8#

Patch Changes#

@chakra-ui/tabs@2.1.1#

Patch Changes#

@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#

@chakra-ui/toast@3.0.8#

Patch Changes#

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

Patch Changes#

@chakra-ui/event-utils@2.0.4#

Patch Changes#

@chakra-ui/gatsby-plugin@3.0.6#

Patch Changes#

@chakra-ui/props-docs@2.0.16#

Patch Changes#

@chakra-ui/storybook-addon@4.0.10#

Patch Changes#

@chakra-ui/test-utils@2.0.16#

Patch Changes#

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel