Announcing @canva/app-ui-kit v3.0.0 with New Exciting Components!

[Anto]

We are thrilled to announce the release of version 3.0.0 of the @canva/app-ui-kit. This major update comes with a bunch of much-anticipated new components ready to be used in your apps!

New Components

Here are some of the new additions to the toolkit:

• ColorSelector: The highly requested color selector is finally here!
• Alert: Introducing a new alert component for better user notifications.
• Slider: A slider component for better user numeric input.
• And much more, which you can find in the changelog.

Upgrade to v3.0.0

Simply run the following command in your project directory:

npm install @canva/app-ui-kit@latest

More Details

For more information about this release, please visit:

• npm package
• Changelog

Your Feedback

Your feedback is crucial for us to continue improving @canva/app-ui-kit. We would love to hear about your experiences with this new version, and we are here to assist with any questions you may have.

Looking forward to seeing the amazing projects you’ll create with these new components!

[Luke_Markham]

Nice one! I had a quick play around with the color selector in storybook, you can break it a little. Nothing major. Main thing is I can’t change the color cause I think the onChange handler isn’t set in the story. I had to run up an app and use the component there and write my own handler

const [color, setColor] = useState<string>('#ffffff')

return <ColorSelector color={color} setColor={(newColor) => setColor(newColor) } />

[Anto]

Thanks for testing our the new components @Luke_Markham!

This particular Story is a non-controlled variant, so it’s not functional and it’s there to demo the UI of the new component.

I do agree with you that I see the value in a fully controlled working story, so I’ll add that as well

In the meantime, there are a couple of examples that use it, so you can have a play around with them as well.

[ale_pixeltinkers]

There is a bug with the MultilineInput. If the prop autoGrow is active and in your app you unmount the component to change a screen and then go back a “ResizeObserver error” appears. This error started when updating to v3.0.0.

[Anto]

Hi @ale_pixeltinkers!

Thanks for reporting this bug! We’re working on a fix for this and will release a patched version as soon as it’s resolved.

In the meantime, if you don’t need any of the new components you can revert to an older version of the UI Kit.