| title | description | releaseUrl | releaseDate | version |
|---|---|---|---|---|
Version 1.3.0 |
Explore the changelog for Chakra UI version 1.3.0. Learn about the latest features, bug fixes, and improvements. |
February 6, 2021 |
1.3.0 |
2eb58df12#3296 Thanks @mattwells19! - Resolved an issue where completing character entry inPinInputfailed to callonComplete.
-
408aaaace#3227 Thanks @TimKolberger! - Introducing a generic TypeScript typeChakraThemeto improve theextendThemefunction even further.import { extendTheme } from "@chakra-ui/react" export const customTheme = extendTheme({ // here you get autocomplete for // - existing definitions from the default theme // - new components (Single and MultiStyle) // - CSS definitions // - color hues // - etc. }) export type MyCustomTheme = typeof customTheme
You can get typesafe access to your custom theme like this:
import { useTheme } from "@chakra-ui/react" import { MyCustomTheme } from "./my-custom-theme" const MyComponent = () => { const customTheme = useTheme<MyCustomTheme>() //... }
0100edbf0#3232 Thanks @dodas! - Fixed issue inextendThemewhere overrides defined as function replaced all base styles defined as plain object.- Updated dependencies
[
a023a269f,ff4a36bca,f50934bdd,2861b613b,ff4a36bca,408aaaace,3aa2abb13,483687237,61962345c,2eb58df12]
-
a97e42568#3290 Thanks @TimKolberger! - Theme Typings: Add autocomplete for negative space values -
ff4a36bca#3245 Thanks @segunadebayo! - - Add support fortextStyleandlayerStylein styled-system package. This makes it possible to use them in the component theme,cssfunction, andsxprop as well.const theme = { textStyles: { caps: { fontWeight: "bold", fontSize: "24px", }, }, } const styles = css({ textStyle: "caps" })(theme)
This also works for component theme as well.
layerStyle,textStyleandapplycan now take responsive values as well.- Refactored
applyprop handling to use the style config pattern instead of add it imperatively.
- Refactored
-
ef34c10a0#3253 Thanks @TimKolberger! - Allow numbers forborderTopand provide autocomplete forfontWeightprop -
408aaaace#3227 Thanks @TimKolberger! - Introducing a generic TypeScript typeChakraThemeto improve theextendThemefunction even further.import { extendTheme } from "@chakra-ui/react" export const customTheme = extendTheme({ // here you get autocomplete for // - existing definitions from the default theme // - new components (Single and MultiStyle) // - CSS definitions // - color hues // - etc. }) export type MyCustomTheme = typeof customTheme
You can get typesafe access to your custom theme like this:
import { useTheme } from "@chakra-ui/react" import { MyCustomTheme } from "./my-custom-theme" const MyComponent = () => { const customTheme = useTheme<MyCustomTheme>() //... }
-
61962345c#3291 Thanks @dominictwlee! - Support negative scale values for css variables.
ff4a36bca#3245 Thanks @segunadebayo! - - Add support for responsive values when usingapply,textStyleandlayerStyle.
- Updated dependencies
[
ef34c10a0,a97e42568,ff4a36bca,ff4a36bca,408aaaace,483687237,9dc37ee37,61962345c]
-
408aaaace#3227 Thanks @TimKolberger! - Introducing a generic TypeScript typeChakraThemeto improve theextendThemefunction even further.import { extendTheme } from "@chakra-ui/react" export const customTheme = extendTheme({ // here you get autocomplete for // - existing definitions from the default theme // - new components (Single and MultiStyle) // - CSS definitions // - color hues // - etc. }) export type MyCustomTheme = typeof customTheme
You can get typesafe access to your custom theme like this:
import { useTheme } from "@chakra-ui/react" import { MyCustomTheme } from "./my-custom-theme" const MyComponent = () => { const customTheme = useTheme<MyCustomTheme>() //... }
-
a023a269f#3278 Thanks @dodas! - Fixed an issue where aTooltipwith negativeguttercauses flickering on hover. -
2861b613b#3251 Thanks @dodas! - Fixed an issue in Firefox whereInputoverflows it's flex container.
61962345c#3291 Thanks @dominictwlee! - Support negative scale values for css variables.
-
ff4a36bca#3245 Thanks @segunadebayo! - RemovedobjectAssignfunction in favor of using nativeObject.assignmethod. It is now supported in most browsersThis function is only used once in the
systempackage as well. This PR simply removes it to cut bundle size of utils. Less is more 😃. -
483687237#3283 Thanks @segunadebayo! - Update focus util to handle unsupported browsers (Safari), and ability to opt out ofrequestAnimationFrame
a97e42568#3290 Thanks @TimKolberger! - Theme Typings: Add autocomplete for negative space values
-
9dc37ee37#3280 Thanks @segunadebayo! - Fix issue where reading from localStorage maybe fail due to several reasons (SecurityError, Uncaught DOMException, TypeError, etc.)
- Updated dependencies
- Updated dependencies
-
3aa2abb13#3255 Thanks @dodas! - Fixed the typo inInputPropsinterface due to which theming types were not correct.
f50934bdd#3228 Thanks @TimKolberger! - Updated peer dependency version of @reach/alert to fix installation of @chakra-ui with npm v7- Updated dependencies
[
a023a269f,2861b613b,ff4a36bca,408aaaace,483687237,61962345c]
a023a269f#3278 Thanks @dodas! - Fixed an issue where aTooltipwith negativeguttercauses flickering on hover.- Updated dependencies
[
ff4a36bca,483687237,61962345c]