Skip to content

Latest commit

 

History

History
333 lines (237 loc) · 11.7 KB

v1.6.2.mdx

File metadata and controls

333 lines (237 loc) · 11.7 KB
Raw
title description releaseUrl releaseDate version
Version 1.6.2
Explore the changelog for Chakra UI version 1.6.2. Learn about the latest features, bug fixes, and improvements.
May 18, 2021
1.6.2

@chakra-ui/machine@1.4.0

Minor Changes

  • 1d8f8e2d0 Thanks @segunadebayo! - > This is an internal package

    • Add support for state tags and pure transition function
    • Return service in useMachine
    • Add machine status to Machine class
    • Add support for or, and and not guard composition for better DX.

@chakra-ui/styled-system@1.11.0

Minor Changes

  • 773497896 #3997 Thanks @segunadebayo! - Ring styles

    Added ring style props to make it easier to style an element's focus ring shadows. Props are ring, ringColor, ringOffset, and ringOffsetColor.

    // adds a 2px box-shadow with `gray.400` color
<Box ring="2px" ringColor="gray.400">
  Sample
</Box>

// adds main box-shadow + offset box-shadow
<Box ring="2px" ringColor="gray.400" ringOffset="3px" ringOffsetColor="white">
 Sample
</Box>

    Filter styles

    Added css variable based API to apply css filter properties (blur, backdrop-blur) to an element. Props are filter, blur, sepia, brightness, invert, saturation, backdropFilter, backdropBlur, sepia, saturation, etc.

    To use this API, you'll need to set filter to auto, same for backdropFilter.

    // adds a 3px blur filter to this element
<Image src="boruto.png" filter="auto" blur="3px" />

// adds a 3px blur and 40% saturation filter to this element
<Image src="boruto.png" filter="auto" blur="3px" saturation={0.4} />

    Transform styles

    Added css variable based API to apply css transform properties (translateX, translateY, scale, etc.). Props are translateX, translateY, rotate, scaleX, scaleY, and scale.

    To use this API, you'll need to set transform to auto or auto-gpu (for the GPU accelerated version).

    <Circle transform="auto" translateX="4" _hover={{ translateX: "8" }}>
  <CheckIcon />
</Circle>

    • Add mixBlendMode, backgroundBlendMode, and bgBlendMode props to apply blend modes to elements

    • Automatic wrapping of backgroundImage or bgImage props with url() so you can just pass the image URL directly.

    // You can now do this!
<Box bgImage="naruto.png" />

// This still works
<Box bgImage="url(naruto.png)" />

    • text decoration styles: Added textDecorationColor, textDecorationLine, textDecorationStyles style props.

    • Add isolation style prop to create a new stacking context.

    High Contrast Mode

    Fixed issue where setting outline:0 or outline:none and using box-shadow for focus outlines don't work in high-contrast mode.

    To fix this, we've added outline: 2px solid transparent whenever you set outline:0 to make your components work in high-constrast mode by default.

    Learn more

    • Fix the _dark pseudo props to map to .chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark].

    • Added _light pseudo props to map to .chakra-ui-light &, [data-theme=light] &, &[data-theme=light] for users that prefer to start with dark mode.

    • Added overscroll, overscrollX, and overscrollY style prop to manage overscroll behavior of an container

@chakra-ui/theme@1.9.0

Minor Changes

  • 4f1cf6d6b #3997 Thanks @segunadebayo! - Add blur token values for filter and backdropFilter

    {
  "none": 0,
  "sm": "4px",
  "base": "8px",
  "md": "12px",
  "lg": "16px",
  "xl": "24px",
  "2xl": "40px",
  "3xl": "64px"
}

@chakra-ui/accordion@1.3.2

Patch Changes

  • Updated dependencies [c1f8d90ad]:
    • @chakra-ui/transition@1.3.1

@chakra-ui/form-control@1.3.6

Patch Changes

@chakra-ui/input@1.2.6

Patch Changes

  • Updated dependencies [620f0b7d7]:
    • @chakra-ui/form-control@1.3.6

@chakra-ui/menu@1.6.2

Patch Changes

@chakra-ui/modal@1.8.6

Patch Changes

  • Updated dependencies [c1f8d90ad]:
    • @chakra-ui/transition@1.3.1

@chakra-ui/number-input@1.2.6

Patch Changes

  • 4a7f8dab7 Thanks @segunadebayo! - Fix warning with scroll listener when allowMouseWheel is passed

  • Updated dependencies [620f0b7d7]:

    • @chakra-ui/form-control@1.3.6

@chakra-ui/radio@1.3.6

Patch Changes

  • f4ad5c7dd Thanks @segunadebayo! - Fix issue where Radio or useRadio gets non-unique id when wrapped within FormControl.
  • Updated dependencies [620f0b7d7]:
    • @chakra-ui/form-control@1.3.6

@chakra-ui/react@1.6.2

Patch Changes

  • ddd5ef4a1 #3985 Thanks @TimKolberger! - ChakraProvider now accepts the prop cssVarsRoot which defaults to :host, :root.
  • Updated dependencies [4f1cf6d6b, e190ce1b3, 8dc0622e8, ddd5ef4a1, f4ad5c7dd, c1f8d90ad, 620f0b7d7, 4a7f8dab7]:
    • @chakra-ui/theme@1.9.0
    • @chakra-ui/menu@1.6.2
    • @chakra-ui/system@1.6.6
    • @chakra-ui/radio@1.3.6
    • @chakra-ui/transition@1.3.1
    • @chakra-ui/form-control@1.3.6
    • @chakra-ui/number-input@1.2.6
    • @chakra-ui/toast@1.2.7
    • @chakra-ui/accordion@1.3.2
    • @chakra-ui/input@1.2.6
    • @chakra-ui/modal@1.8.6
    • @chakra-ui/select@1.1.10
    • @chakra-ui/skeleton@1.1.13
    • @chakra-ui/textarea@1.1.10

@chakra-ui/select@1.1.10

Patch Changes

  • Updated dependencies [620f0b7d7]:
    • @chakra-ui/form-control@1.3.6

@chakra-ui/skeleton@1.1.13

Patch Changes

  • Updated dependencies [ddd5ef4a1]:
    • @chakra-ui/system@1.6.6

@chakra-ui/system@1.6.6

Patch Changes

@chakra-ui/textarea@1.1.10

Patch Changes

  • Updated dependencies [620f0b7d7]:
    • @chakra-ui/form-control@1.3.6

@chakra-ui/toast@1.2.7

Patch Changes

  • Updated dependencies [4f1cf6d6b, c1f8d90ad]:
    • @chakra-ui/theme@1.9.0
    • @chakra-ui/transition@1.3.1

@chakra-ui/transition@1.3.1

Patch Changes

@chakra-ui/gatsby-plugin@2.0.1

Patch Changes

@chakra-ui/props-docs@1.0.27

Patch Changes

  • Updated dependencies [773497896, ddd5ef4a1]:
    • @chakra-ui/styled-system@1.11.0
    • @chakra-ui/react@1.6.2

@chakra-ui/test-utils@1.0.27

Patch Changes

  • Updated dependencies [ddd5ef4a1]:
    • @chakra-ui/react@1.6.2

@chakra-ui/docs@1.2.6

Patch Changes

  • Updated dependencies [ddd5ef4a1]:
    • @chakra-ui/react@1.6.2
    • @chakra-ui/props-docs@1.0.27