Announcing @canva/app-ui-kit v4.0.0 with Localization 🌏!

Announcements
1

We are excited to announce the release of version 4.0.0 of the @canva/app-ui-kit!

This update introduces a massive amount of improvements, a big cleanup of old design system elements and most importantly the much anticipated, highly requested, Localization support in apps and localization across all UI Kit Components! :tada: :tada:

:rocket: The new additions in v4.0.0

  • Added localization support across all App UI Kit components.
    • As announced in the separate post Introducing Localization for Canva Apps 🌏! , Canva Apps Localization enables all messaging within apps to go through the Canva Translation process.
    • Additionally all auxiliary messaging that cannot be directly managed in components are also now automatically translated when respective languages are preferred.
    • Additionally added LTR (left-to-right) and RTL (right-to-left) content direction support to pair with the addition of Apps Localization.
  • Added the following new icons:
    • ArrowMultiDirectionalIcon, CopyPlusIcon, DatabaseIcon, LineWeightsIcon, MoveLayerDownIcon, MoveLayerUpIcon, SpacingIcon, TextSpacingIcon
  • New props to existing components:
    • Added a pressed prop to the Button component, for only “secondary” and “tertiary” variants.
    • Added a “contrast” option to the variant prop for the Button component.
  • Plus a bunch more improvements and fixes!

:stop_sign: Some important breaking changes to be aware of

With this new major version we are cleaning up a few component properties to keep in alignment with recent advancements of the rest of Canva and it’s design system.

For a full breakdown and a suggested migration strategy to each breaking change see the table below.

# Change Recommended Migration Strategy
1 Removed the "xlarge" size option from the Title and Text components, please use the "large" size instead. Before: 
<Title size="xlarge">Title</Title>
Now: 
<Title size="large">Title</Title>
2 Removed the "neutral" tone option from the Badge component, it is recommend to use the "contrast" tone instead. Before: 
<Badge tone="neutral">Badge</Badge>
Now: 
<Badge tone="contrast">Badge</Badge>
3 Removed the "large" size from the LoadingIndicator component. Before: 
<LoadingIndicator size="large" />
Now: 
<LoadingIndicator />
4 Removed the "center" align option from the TabList component. Before: 
<TabList align="center" />
Now: 
<TabList>
5 Removed the state prop from the PillsInput component value prop, the default state now becomes only "default". Before: 
<PillsInput
  value={[ { value: "..", state: "default" } ]}
/>
Now: 
<PillsInput
  value={[ { value: ".." } ]}
/>
6 Removed the tone prop from the ProgressBar component. Before: 
<ProgressBar tone="info" />
Now: 
<ProgressBar />
7 Removed the size prop from the Swatch component. Before: 
<Swatch fill={["#fff"]} size="small" />
Now: 
<Swatch fill={["#fff"]} />
8 Removed the MoreVerticalIcon icon, as outlined in a previous release, the MoreHorizontalIcon is recommended instead. Before: 
<MoreVerticalIcon />
Now: 
<MoreHorizontalIcon />
9 Changed the alt prop to be required for the ImageCard component. Before: 
<ImageCard thumbnailUrl="..." />
Now: 
<ImageCard thumbnailUrl="..." alt="Tree"/>

:thinking: Upgrade to v4.0.0

Simply run the following command in your project directory:

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

:link: More details

For more information about this release, please visit:

We value your feedback, it helps us improve the @canva/app-ui-kit further. If you have any questions or would like to share your experiences with this new version, please feel free to reach out to us.

Looking forward to seeing the amazing internationalized apps you’ll build! :heart:

3 Likes