🎁 Unwrapping the Fifth festive release for 2024: Canva App UI Kit Enhancements!

[MattB]

We’re thrilled to announce a stocking full of new Canva App UI Kit features and enhancements to make your developer experience merry and bright! Let’s unwrap what’s inside:

Canva App UI Kit Storybook i18n Support

Switch seamlessly between localized and non-localized source code for components in the Canva App Ui Kit Storybook with the new i18n Toolbar dropdown.

As a reminder, from Ui Kit v4.0.0 we introduced Apps Localisation support, where localization support is now included out of the box and Canva can perform translations for apps that have successfully completed the app review process and have leveraged the react-intl library and specified all strings and messages with the FormattedMessage or formatMessage(..) patterns.

i18n Dropdown : ✔️ With apps localization	i18n Dropdown : ❌ Without apps localization

Developers can now view source code that either follows or skips i18n patterns. Pick the flavor that works best for you, because nothing says holiday cheer like flexibility in your workflow!

v4.5.0 of the @canva/app-ui-kit

Our latest release today is brimming with enhancements, featuring new props added to your favorite components. These updates will bring even more sparkle to your Canva Apps!

A few highlights include:

• Added a triggerMode prop to the ColorSelector component. Enabling the rendering of a AddColorButton as a trigger.
• Added thumbnailPadding and thumbnailBackground props to ImageCard to allow for custom svg support on the ImageCard component.
• Added a labelMarker prop to the FormField component. When provided, it renders a marker next to the label (e.g. “optional”).
• Plus a bunch more improvements and fixes.

For a full breakdown, see the changelog entry for v4.5.0.

Upgrade to v4.5.0, simply run the following command in your project directory:

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

New Canva App UI Kit Storybook Patterns

Discover 3 fresh new common UI patterns and functionalities perfect for your next app:

🎁 Surface Header
🎁 Credit Counter
🎁 Icon Button with Flyout Menu

Get creative and let these patterns light up your apps like a Christmas tree!

How to Access your presents

Ready to dive in? Here’s how:

• Canva App UI Kit v4.5.0 Change Log
• Explore the Storybook i18n toggle
• Examples of new Storybook patterns

With all these new features, we’re here to make your holiday season a little brighter and your apps merrier.

Stay tuned for more s dropping throughout this week!

Happy holidays!!