Skip to content

Latest commit

 

History

History
1082 lines (842 loc) · 38.5 KB

v1.8.0.mdx

File metadata and controls

1082 lines (842 loc) · 38.5 KB
title description releaseUrl releaseDate version
Version 1.8.0
Explore the changelog for Chakra UI version 1.8.0. Learn about the latest features, bug fixes, and improvements.
January 25, 2022
1.8.0

@chakra-ui/color-mode@1.4.0

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Introducing semantic tokens

    Semantic tokens provide the ability to create css variables which can change with a CSS condition.

    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        900: "#171923",
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="gray.900">will always be gray.900</Text>
      </ChakraProvider>
    )
    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        50: "#F7FAFC",
        900: "#171923",
      },
      semanticTokens: {
        colors: {
          text: {
            default: "gray.900",
            _dark: "gray.50",
          },
        },
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="text">
          will be gray.900 in light mode and gray.50 in dark mode
        </Text>
      </ChakraProvider>
    )
    import { extendTheme } from "@chakra-ui/react"
    
    const theme = extendTheme({
      colors: {
        red: {
          100: "#ff0010",
          400: "#ff0040",
          500: "#ff0050",
          700: "#ff0070",
          800: "#ff0080",
        },
      },
      semanticTokens: {
        colors: {
          error: "red.500", // create a token alias
          success: "red.100",
          primary: {
            // set variable conditionally with pseudo selectors like `_dark` and `_light`
            // use `default` to define fallback value
            default: "red.500",
            _dark: "red.400",
          },
          secondary: {
            default: "red.800",
            _dark: "red.700",
          },
        },
      },
    })

Patch Changes

@chakra-ui/hooks@1.8.0

Minor Changes

  • #5442 cbad002e7 Thanks @segunadebayo! - Add useAnimationState hook to help track motion component animations. Used in popopover and menu lazy modes

Patch Changes

@chakra-ui/number-input@1.4.0

Minor Changes

Patch Changes

  • #4982 e4f5ee819 Thanks @segunadebayo! - Fix issue where number input doesn't leave the spinning state when inc/dec button is disabled
  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/form-control@1.5.4
    • @chakra-ui/icon@2.0.1
    • @chakra-ui/counter@1.2.3

@chakra-ui/react@1.8.0

Minor Changes

Patch Changes

  • Updated dependencies [7a136f5a8, 1537a725f, 4944a4a2b, cbad002e7, 22171af7f, cbad002e7, 6e259a1f7, c393dd268, 787857861, 94c8be3cd, 1537a725f, c9c54aee1, 5a845d5f5, a5f3bfce8, e4f5ee819, da90855dd]:
    • @chakra-ui/number-input@1.4.0
    • @chakra-ui/theme@1.13.0
    • @chakra-ui/system@1.10.0
    • @chakra-ui/popover@1.11.2
    • @chakra-ui/menu@1.8.4
    • @chakra-ui/media-query@1.2.4
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/slider@1.5.4
    • @chakra-ui/button@1.5.3
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/checkbox@1.6.3
    • @chakra-ui/toast@1.5.2
    • @chakra-ui/accordion@1.4.4
    • @chakra-ui/alert@1.3.3
    • @chakra-ui/avatar@1.3.4
    • @chakra-ui/breadcrumb@1.3.2
    • @chakra-ui/close-button@1.2.3
    • @chakra-ui/control-box@1.1.2
    • @chakra-ui/editable@1.3.3
    • @chakra-ui/form-control@1.5.4
    • @chakra-ui/icon@2.0.1
    • @chakra-ui/image@1.1.3
    • @chakra-ui/input@1.3.4
    • @chakra-ui/layout@1.7.2
    • @chakra-ui/modal@1.10.5
    • @chakra-ui/pin-input@1.7.3
    • @chakra-ui/progress@1.2.2
    • @chakra-ui/provider@1.7.6
    • @chakra-ui/radio@1.4.5
    • @chakra-ui/select@1.2.4
    • @chakra-ui/skeleton@1.2.6
    • @chakra-ui/spinner@1.2.2
    • @chakra-ui/stat@1.2.3
    • @chakra-ui/switch@1.3.3
    • @chakra-ui/table@1.3.2
    • @chakra-ui/tabs@1.6.3
    • @chakra-ui/tag@1.2.3
    • @chakra-ui/textarea@1.2.4
    • @chakra-ui/tooltip@1.4.4
    • @chakra-ui/visually-hidden@1.1.2
    • @chakra-ui/counter@1.2.3
    • @chakra-ui/portal@1.3.3
    • @chakra-ui/react-env@1.1.2
    • @chakra-ui/live-region@1.1.2
    • @chakra-ui/transition@1.4.3

@chakra-ui/styled-system@1.17.0

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Introducing semantic tokens

    Semantic tokens provide the ability to create css variables which can change with a CSS condition.

    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        900: "#171923",
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="gray.900">will always be gray.900</Text>
      </ChakraProvider>
    )
    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        50: "#F7FAFC",
        900: "#171923",
      },
      semanticTokens: {
        colors: {
          text: {
            default: "gray.900",
            _dark: "gray.50",
          },
        },
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="text">
          will be gray.900 in light mode and gray.50 in dark mode
        </Text>
      </ChakraProvider>
    )
    import { extendTheme } from "@chakra-ui/react"
    
    const theme = extendTheme({
      colors: {
        red: {
          100: "#ff0010",
          400: "#ff0040",
          500: "#ff0050",
          700: "#ff0070",
          800: "#ff0080",
        },
      },
      semanticTokens: {
        colors: {
          error: "red.500", // create a token alias
          success: "red.100",
          primary: {
            // set variable conditionally with pseudo selectors like `_dark` and `_light`
            // use `default` to define fallback value
            default: "red.500",
            _dark: "red.400",
          },
          secondary: {
            default: "red.800",
            _dark: "red.700",
          },
        },
      },
    })
  • #5355 bb7eb18da Thanks @TimKolberger! - Export TypeScript types ResponsiveObject and ResponsiveArray

Patch Changes

@chakra-ui/system@1.10.0

Minor Changes

Patch Changes

  • #5374 5a845d5f5 Thanks @TimKolberger! - Updated type ThemingProps to allow string values for the props variant and size even on components which are not in the default theme.
  • Updated dependencies [1537a725f, 1537a725f, 3b4117781, bb7eb18da]:
    • @chakra-ui/styled-system@1.17.0
    • @chakra-ui/color-mode@1.4.0
    • @chakra-ui/utils@1.10.0

@chakra-ui/theme@1.13.0

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Introducing semantic tokens

    Semantic tokens provide the ability to create css variables which can change with a CSS condition.

    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        900: "#171923",
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="gray.900">will always be gray.900</Text>
      </ChakraProvider>
    )
    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        50: "#F7FAFC",
        900: "#171923",
      },
      semanticTokens: {
        colors: {
          text: {
            default: "gray.900",
            _dark: "gray.50",
          },
        },
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="text">
          will be gray.900 in light mode and gray.50 in dark mode
        </Text>
      </ChakraProvider>
    )
    import { extendTheme } from "@chakra-ui/react"
    
    const theme = extendTheme({
      colors: {
        red: {
          100: "#ff0010",
          400: "#ff0040",
          500: "#ff0050",
          700: "#ff0070",
          800: "#ff0080",
        },
      },
      semanticTokens: {
        colors: {
          error: "red.500", // create a token alias
          success: "red.100",
          primary: {
            // set variable conditionally with pseudo selectors like `_dark` and `_light`
            // use `default` to define fallback value
            default: "red.500",
            _dark: "red.400",
          },
          secondary: {
            default: "red.800",
            _dark: "red.700",
          },
        },
      },
    })
  • #5419 a5f3bfce8 Thanks @segunadebayo! - Add entrypoints to the different parts of the theme (colors, fonts, components, spacing, etc.)

    // Now you can use only colors from the theme
    import colors from "@chakra-ui/theme/foundations/colors"

    Here's a table of the theme parts and entrypoints

    Part Entrypoint
    components "@chakra-ui/theme/components"
    foundations "@chakra-ui/theme/foundations"
    colors "@chakra-ui/theme/foundations/colors"
    sizes "@chakra-ui/theme/foundations/sizes"
    spacing "@chakra-ui/theme/foundations/spacing"
    typography "@chakra-ui/theme/foundations/typography"
    radius "@chakra-ui/theme/foundations/radius"
    shadows "@chakra-ui/theme/foundations/shadows"
    transition "@chakra-ui/theme/foundations/transition"
    zIndex "@chakra-ui/theme/foundations/z-index"
    blur "@chakra-ui/theme/foundations/blur"
    borders "@chakra-ui/theme/foundations/borders"

Patch Changes

@chakra-ui/utils@1.10.0

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Add helper function flatten

    import { flatten } from "@chakra-ui/utils"
    
    flatten({ space: [0, 1, 2, 4, 8, 16, 32] })
    /** =>
    {
      "space.0": 0,
      "space.1": 1,
      "space.2": 2,
      "space.3": 4,
      "space.4": 8,
      "space.5": 16,
      "space.6": 32,
    }
    */

@chakra-ui/accordion@1.4.4

Patch Changes

  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/icon@2.0.1
    • @chakra-ui/transition@1.4.3

@chakra-ui/alert@1.3.3

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/icon@2.0.1

@chakra-ui/avatar@1.3.4

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/image@1.1.3

@chakra-ui/breadcrumb@1.3.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/button@1.5.3

Patch Changes

@chakra-ui/checkbox@1.6.3

Patch Changes

@chakra-ui/clickable@1.2.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/close-button@1.2.3

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/icon@2.0.1

@chakra-ui/control-box@1.1.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/counter@1.2.3

Patch Changes

@chakra-ui/editable@1.3.3

Patch Changes

@chakra-ui/react-env@1.1.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/focus-lock@1.2.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/form-control@1.5.4

Patch Changes

@chakra-ui/icon@2.0.1

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/icons@1.1.3

Patch Changes

  • Updated dependencies []:
    • @chakra-ui/icon@2.0.1

@chakra-ui/image@1.1.3

Patch Changes

@chakra-ui/input@1.3.4

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/form-control@1.5.4

@chakra-ui/layout@1.7.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/icon@2.0.1

@chakra-ui/live-region@1.1.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/media-query@1.2.4

Patch Changes

@chakra-ui/menu@1.8.4

Patch Changes

  • #5442 cbad002e7 Thanks @segunadebayo! - Fix issue where the content of a lazy popover or menu gets unmounted before (framer-motion) animation ends leading to a janky user experience.
  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/clickable@1.2.2
    • @chakra-ui/transition@1.4.3

@chakra-ui/modal@1.10.5

Patch Changes

  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/close-button@1.2.3
    • @chakra-ui/portal@1.3.3
    • @chakra-ui/focus-lock@1.2.2
    • @chakra-ui/transition@1.4.3

@chakra-ui/pin-input@1.7.3

Patch Changes

@chakra-ui/popover@1.11.2

Patch Changes

  • #5442 cbad002e7 Thanks @segunadebayo! - Fix issue where the content of a lazy popover or menu gets unmounted before (framer-motion) animation ends leading to a janky user experience.
  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/close-button@1.2.3

@chakra-ui/portal@1.3.3

Patch Changes

@chakra-ui/progress@1.2.2

Patch Changes

  • Updated dependencies [1537a725f, ebf1d98be]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/theme-tools@1.3.2

@chakra-ui/provider@1.7.6

Patch Changes

@chakra-ui/radio@1.4.5

Patch Changes

  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/form-control@1.5.4
    • @chakra-ui/visually-hidden@1.1.2

@chakra-ui/select@1.2.4

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/form-control@1.5.4

@chakra-ui/skeleton@1.2.6

Patch Changes

@chakra-ui/skip-nav@1.2.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/slider@1.5.4

Patch Changes

@chakra-ui/spinner@1.2.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/visually-hidden@1.1.2

@chakra-ui/stat@1.2.3

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/icon@2.0.1
    • @chakra-ui/visually-hidden@1.1.2

@chakra-ui/switch@1.3.3

Patch Changes

  • Updated dependencies [1537a725f, c9c54aee1]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/checkbox@1.6.3

@chakra-ui/table@1.3.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/tabs@1.6.3

Patch Changes

@chakra-ui/tag@1.2.3

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/icon@2.0.1

@chakra-ui/textarea@1.2.4

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/form-control@1.5.4

@chakra-ui/theme-tools@1.3.2

Patch Changes

  • #5241 ebf1d98be Thanks @timonweber! - Allow style function types to be part of StyleConfig and MultiStyleConfig types to reflect the possible usage of style functions instead of style objects.
  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/toast@1.5.2

Patch Changes

@chakra-ui/tooltip@1.4.4

Patch Changes

  • Updated dependencies [cbad002e7, 6e259a1f7, 1537a725f]:
    • @chakra-ui/hooks@1.8.0
    • @chakra-ui/utils@1.10.0
    • @chakra-ui/visually-hidden@1.1.2
    • @chakra-ui/portal@1.3.3

@chakra-ui/transition@1.4.3

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/visually-hidden@1.1.2

Patch Changes

  • Updated dependencies [1537a725f]:
    • @chakra-ui/utils@1.10.0

@chakra-ui/cli@1.7.1

Patch Changes

  • #5372 472612e7a Thanks @selbekk! - Update README to reflect the change of the default --out path to node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts

  • Updated dependencies [1537a725f]:

    • @chakra-ui/utils@1.10.0

@chakra-ui/props-docs@1.0.44

Patch Changes

create-react-app-ts@1.1.7

Patch Changes

  • Updated dependencies [1b31b374c]:
    • @chakra-ui/react@1.8.0

gatsby-starter-default@0.3.7

Patch Changes

  • Updated dependencies [1b31b374c]:
    • @chakra-ui/react@1.8.0

chakra-nextjs@1.1.7

Patch Changes

  • Updated dependencies [1b31b374c]:
    • @chakra-ui/react@1.8.0

chakra-nextjs-ts@1.1.7

Patch Changes

  • Updated dependencies [1b31b374c, ebf1d98be]:
    • @chakra-ui/react@1.8.0
    • @chakra-ui/theme-tools@1.3.2
    • @chakra-ui/icons@1.1.3

@chakra-ui/test-utils@1.1.6

Patch Changes

  • Updated dependencies [1b31b374c]:
    • @chakra-ui/react@1.8.0