Skip to content

Latest commit

 

History

History
960 lines (673 loc) · 41.7 KB

v1.4.0.mdx

File metadata and controls

960 lines (673 loc) · 41.7 KB
title description releaseUrl releaseDate version
Version 1.4.0
Explore the changelog for Chakra UI version 1.4.0. Learn about the latest features, bug fixes, and improvements.
March 21, 2021
1.4.0

@chakra-ui/popper@2.0.0

Major Changes

Patch Changes

@chakra-ui/checkbox@1.3.0

Minor Changes

Patch Changes

@chakra-ui/hooks@1.2.0

Minor Changes

  • e748219f3 Thanks @segunadebayo! - ### Pointer Events

    Add unified pointer event management utils and hook for interal use only.

    The hook is called usePointerEvent, it works pretty similar to useEventListener except that does two things:

    • Unifies the pointer event system and ensure that only one of onMouse*, onTouch*, or onPointer* handler runs
    • Provide event information about the pointer event like x and y position depending on the pointer type.

    Credits to framer-motion for doing the hard work for this utilities

    • Added useFocusOnPointerDown to get Safari to detect the correct event.relatedTarget when you blur a focused element.

    Focus Management

    Set preventScroll option to be true by default, setting focus on an element should happen without scrolling the page (in most cases).

    Set nextTick to undefined by default and update all components that use next tick to use { nextTick: true }.

Patch Changes

@chakra-ui/machine@1.1.0

Minor Changes

  • dc9bccfe3 Thanks @segunadebayo! - [Internal] Add support for controllable machines via the createControllableMachine and useControllableMachine hooks.

    This is an internal API not intended for public usage

@chakra-ui/menu@1.2.0

Minor Changes

Patch Changes

  • 91ef14839 #3583 Thanks @segunadebayo! - - Refactor arrow components to use data-popper-arrow and data-popper-arrow-inner to define the arrow elements. This is used within the modifiers to update the arrow styles/position positioning.

    • Change arrowSize and arrowShadowColor to use CSS custom properties instead of passing it to usePopper.

    • Update component themes to use --popper-arrow-bg to set the background for the popper's arrow element.

  • 9c143bfe5 Thanks @segunadebayo! - Update focus utils to use nextTick option since its default value is now false in the focus utils

    @internal use only

  • Updated dependencies [64e8466b5, e748219f3, 9c143bfe5, 91ef14839, 91ef14839]

@chakra-ui/modal@1.7.0

Minor Changes

Patch Changes

@chakra-ui/popover@1.3.0

Minor Changes

Patch Changes

  • 91ef14839 #3583 Thanks @segunadebayo! - - Refactor arrow components to use data-popper-arrow and data-popper-arrow-inner to define the arrow elements. This is used within the modifiers to update the arrow styles/position positioning.

    • Change arrowSize and arrowShadowColor to use CSS custom properties instead of passing it to usePopper.

    • Update component themes to use --popper-arrow-bg to set the background for the popper's arrow element.

  • 223e50b32 Thanks @segunadebayo! - Fix issue where popover doesn't close on trigger click when popover is open

  • Updated dependencies [64e8466b5, e748219f3, 9c143bfe5, 91ef14839, 91ef14839]

@chakra-ui/react@1.4.0

Minor Changes

Patch Changes

@chakra-ui/styled-system@1.9.0

Minor Changes

Patch Changes

  • c3dcaabbc #3615 Thanks @segunadebayo! - Fix: issue where responsive styles defined in textstyles not overriden wiht props.

    Fix: issue where toCSSVars omitted the transition tokens

  • 96139067d #3551 Thanks @segunadebayo! - - Fix: issue where RTL property keys are incorrect due to config.property mutation.

    • Fix: change mx and px to use logical properties. Instead of mapping to marginLeft and marginRight, it maps to marginInlineStart and marginInlineEnd. Same for px

  • Updated dependencies [e748219f3, 91ef14839]

@chakra-ui/system@1.5.0

Minor Changes

Patch Changes

@chakra-ui/toast@1.2.0

Minor Changes

Patch Changes

@chakra-ui/tooltip@1.2.0

Minor Changes

Patch Changes

  • 91ef14839 #3583 Thanks @segunadebayo! - - Refactor arrow components to use data-popper-arrow and data-popper-arrow-inner to define the arrow elements. This is used within the modifiers to update the arrow styles/position positioning.

    • Change arrowSize and arrowShadowColor to use CSS custom properties instead of passing it to usePopper.

    • Update component themes to use --popper-arrow-bg to set the background for the popper's arrow element.

  • Updated dependencies [e748219f3, 9c143bfe5, 91ef14839, 91ef14839]

@chakra-ui/transition@1.1.0

Minor Changes

Patch Changes

@chakra-ui/utils@1.4.0

Minor Changes

  • e748219f3 Thanks @segunadebayo! - ### Pointer Events

    Add unified pointer event management utils and hook for interal use only.

    The hook is called usePointerEvent, it works pretty similar to useEventListener except that does two things:

    • Unifies the pointer event system and ensure that only one of onMouse*, onTouch*, or onPointer* handler runs
    • Provide event information about the pointer event like x and y position depending on the pointer type.

    Credits to framer-motion for doing the hard work for this utilities

    • Added useFocusOnPointerDown to get Safari to detect the correct event.relatedTarget when you blur a focused element.

    Focus Management

    Set preventScroll option to be true by default, setting focus on an element should happen without scrolling the page (in most cases).

    Set nextTick to undefined by default and update all components that use next tick to use { nextTick: true }.

  • 91ef14839 #3583 Thanks @segunadebayo! - Add getCSSVar function to resolve token values and return the css variable reference instead of the actual value. It does a lookup against theme.__cssMap.

    const value = getCSSVar(theme, "colors", "blue.500")
// => "var(--chakra-colors-blue.500)"

const value = getCSSVar(theme, "colors", "tomato")
// => "tomato" // since tomato doesn't exist in theme colors

@chakra-ui/cli@1.3.0

Minor Changes

Patch Changes

@chakra-ui/cra-template@1.1.0

Minor Changes

@chakra-ui/cra-template-typescript@1.1.0

Minor Changes

@chakra-ui/accordion@1.1.4

Patch Changes

@chakra-ui/alert@1.1.3

Patch Changes

@chakra-ui/avatar@1.1.4

Patch Changes

@chakra-ui/breadcrumb@1.1.3

Patch Changes

@chakra-ui/button@1.1.4

Patch Changes

@chakra-ui/clickable@1.0.6

Patch Changes

@chakra-ui/close-button@1.1.3

Patch Changes

@chakra-ui/color-mode@1.1.2

Patch Changes

@chakra-ui/control-box@1.0.6

Patch Changes

@chakra-ui/counter@1.0.9

Patch Changes

@chakra-ui/descendant@1.0.9

Patch Changes

@chakra-ui/editable@1.1.3

Patch Changes

@chakra-ui/focus-lock@1.1.2

Patch Changes

@chakra-ui/form-control@1.2.3

Patch Changes

@chakra-ui/icon@1.1.3

Patch Changes

@chakra-ui/icons@1.0.7

Patch Changes

  • Updated dependencies

@chakra-ui/image@1.0.9

Patch Changes

@chakra-ui/input@1.1.4

Patch Changes

@chakra-ui/layout@1.3.3

Patch Changes

@chakra-ui/live-region@1.0.6

Patch Changes

@chakra-ui/media-query@1.0.7

Patch Changes

@chakra-ui/number-input@1.1.3

Patch Changes

@chakra-ui/pin-input@1.4.2

Patch Changes

@chakra-ui/portal@1.1.3

Patch Changes

@chakra-ui/progress@1.1.3

Patch Changes

@chakra-ui/radio@1.2.5

Patch Changes

@chakra-ui/select@1.1.3

Patch Changes

@chakra-ui/skeleton@1.1.5

Patch Changes

@chakra-ui/skip-nav@1.1.3

Patch Changes

@chakra-ui/slider@1.1.3

Patch Changes

@chakra-ui/spinner@1.1.3

Patch Changes

@chakra-ui/stat@1.1.3

Patch Changes

@chakra-ui/switch@1.1.5

Patch Changes

@chakra-ui/table@1.1.3

Patch Changes

@chakra-ui/tabs@1.2.1

Patch Changes

@chakra-ui/tag@1.1.3

Patch Changes

@chakra-ui/textarea@1.1.3

Patch Changes

@chakra-ui/theme@1.7.1

Patch Changes

  • 96139067d #3551 Thanks @segunadebayo! - NumberInput: add root to parts, leverage css variables and update styles to be rtl friendly.

  • 91ef14839 #3583 Thanks @segunadebayo! - - Refactor arrow components to use data-popper-arrow and data-popper-arrow-inner to define the arrow elements. This is used within the modifiers to update the arrow styles/position positioning.

    • Change arrowSize and arrowShadowColor to use CSS custom properties instead of passing it to usePopper.

    • Update component themes to use --popper-arrow-bg to set the background for the popper's arrow element.

  • eece70293 #3622 Thanks @TimKolberger! - - Added typings for the theme prop in ThemingPropsThunk and export a standalone type ThemeComponentProps

    import { ThemeComponentProps } from "@chakra-ui/react"

function baseStyle(props: ThemeComponentProps) {
  return {
    boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05) ${props.theme.colors.whiteAlpha[500]}`,
  }
}

  • Updated dependencies [e748219f3, 91ef14839]

@chakra-ui/theme-tools@1.1.1

Patch Changes

@chakra-ui/visually-hidden@1.0.6

Patch Changes

@chakra-ui/gatsby-plugin@1.0.2

Patch Changes

  • efd32c982 Thanks @segunadebayo! - - Update peer-dependency for gatsby
    • Remove @chakra-ui/theme from peer-dependency. The theme already exists in @chakra-ui/react

@chakra-ui/props-docs@1.0.19

Patch Changes

create-react-app-ts@1.1.0

Minor Changes

Patch Changes

gatsby-starter-default@0.2.0

Minor Changes

Patch Changes

chakra-nextjs@1.1.0

Minor Changes

Patch Changes

chakra-nextjs-ts@1.1.0

Minor Changes

Patch Changes

@chakra-ui/test-utils@1.0.19

Patch Changes

@chakra-ui/docs@1.1.7

Patch Changes