Trick or Treat! 🎃 Announcing @canva/app-ui-kit v4.2.0 with HorizontalCard!

Announcements
1

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

This update introduces a bunch of improvements, a new icon, updates to existing component and much more! :tada: :tada:

:rocket: The new additions in v4.2.0

  • New components added!

    Get started with playing around with HorizontalCard:

    import { FolderIcon, HorizontalCard } from "@canva/app-ui-kit";
// ...
<HorizontalCard
  title="Horizontal Card with Custom Icon"
  description="This is a Horizontal Card description"
  thumbnail={{ icon: () => <FolderIcon /> }}
/>

    Also look up a bunch of different other HorizontalCard scenarios in the app-ui-kit Horizontal Card storybook.

  • Added the following new icon:

    • ImageIcon

  • New props to existing components:

    • Added a topEnd prop (with visibility control) to the AudioCard component, to add an icon button decorator to the top end corner of the card.

      image
      image622×276 38.9 KB

    • Added a "small" size for the Pill component.

  • Updated the TabPanel and TabPanels flex grow behavior to always fill to outer Tabs height regardless if is “fill”, “fixed” or “auto”. Resolves an issue where the TabPanel content was not filling the height of the Tabs component.

  • Plus a bunch more improvements and fixes!

:thinking: Upgrade to v4.2.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:

Once again we really 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!

:jack_o_lantern: :card_index: :camera: :loud_sound: :top: :end: :pill: :heart:

4 Likes
Announcing @canva/app-ui-kit v3.6.0 with Tabs!
2

HorizontalCard FTW! Thanks for this :slight_smile:

1 Like