Skip to main content

Version 2.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​

On this page