Road to TypeScript Release

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.

Timeline

We’re looking to complete this before the end of May but we’ll need all the help we can get. The worst-case scenario is the end of June if all goes well.

Now we need your help

It’s a lot of work the team has put into this release, now that we’re pretty close to “DONE”, we need some help to get us to the finish line.

If you feel you’re able to give us 30minutes - 1 hour of your time over the next 1-2 weeks, please let me know. Thanks in advance 💖

Here are some areas we need help with:

• Setup the build, test, and release pipeline using Github Actions.
• Write rich, interactive docs and tutorials for the next release (I’ll walk you through this part)
• Write translations once we’ve made progress with the English translation
• Review code against issues and ensure we’ve fixed most of the issues
• Revamp the website’s interface and experience to make it super easy to find/explore components.

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 🥂

[with-heart]

We’re planning on releasing an alpha version sometime in the next week or two if all goes according to plan. We definitely want to get this in front of the community so we can gather feedback and work through any issues before releasing to the public.

[with-heart]

So excited! There is so much additional quality coming in the next release! Chakra keeps getting better and better. Thanks for all of your hard work @segunadebayo.

I’ll commit to working on documentation and tutorials, reviewing code, fixing bugs, and working on the website interface and experience. I’m also happy to help anyone that would like to get involved!