Road to Typescript Release

Published on May 16, 2020 by Segun Adebayo

Hey Chakra people,

I'm glad to let you know that we're now entering the final phase of the TypeScript release. It's been super challenging and took a lot of work + collaboration to get this working. If you contributed to this release and you're reading this, THANK YOU 💖.

Here's a detailed list of new features and breaking changes to expect in the next release.


New Features & Changes 🥳

  • Component Theming API: This is a simple way to style any components and its modifiers (sizes, variants, and color scheme) from the theme object or locally within a chakra factory function. To get an idea, see #695
  • Better Color Mode Support: We've fixed the bugs related to Color mode and it's now easy to persist color mode, set initial color mode, and lock specific components to a certain color mode.
  • Low-level Hooks: For some components, we'll give users access to their internal React hooks implementation to make it possible to create custom versions of the same component.
  • Better TypeScript support: This means all components have very good TypeScript support and most low-level components like Box, Flex, etc. will support the as prop and types will be extracted properly.


Breaking Changes 💣

Here are a few obvious breaking changes, in the docs we'll make sure we provide a detailed step-by-step migration plan.

  • We're renaming all variantColor prop to colorScheme to make it easier to understand that this prop represents a visual color style, not a css color attribute. For example, when I say "an outline button with a red color scheme", it's easier to picture what the button looks like without seeing the code or UI.
  • We're removing support for the size layout prop. We think the size prop should be constrained to only components (for now). The size prop has caused a lot of confusion in general because in some components it means the visual size, and in some, it means width+height. We recommend you use w or width and h or height as a replacement for size.
  • We're deprecating a few style props to reduce the general style props API surface. We'll document these in the docs.


Thank you and I can't wait to get this next release out into your hands so you can build your websites & apps even faster.

Cheers 🥂