> ## Documentation Index > Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt > Use this file to discover all available pages before exploring further. # Changelog The latest changes to the App UI Kit. ## 5.15.0 - 2026-10-06 ### Changed * The `AppUiProvider` component's return type is now `React.ReactNode` instead of `React.JSX.Element`, reflecting that it renders nothing until the app theme is ready. No change required for consumers. * Some components in `styles.css` now use CSS cascade layers where the browser supports them, with a fallback for browsers that do not. ### Fixed * Restored the `Checkbox` pressed state: the grey ring shown while a checkbox is being pressed is back after being lost in an earlier token migration. * Fixed the `tooltipAlignment` prop of `TruncatedText` being ignored. * The `Carousel` component now returns focus to a scroll button after it is pressed when no carousel item can take focus, for example when the items are images. Focus used to stay on the carousel root, which has no visible outline. If the pressed button has unmounted at the end of the carousel, the opposite button takes focus. * The `Carousel` component no longer moves keyboard focus outside the carousel when paging after its scroll container or content rendered in a portal has focus. * The `ImageCard` component no longer briefly flashes its placeholder when `thumbnailUrl` changes to an image that is already loaded. ### Other * Renames the "Canva Apps SDK" to be the "Canva Developers SDK", with these packages belonging to the "apps inside Canva" part of the new combined Developers SDK. ## 5.14.3 - 2026-09-03 ### Fixed * The `Avatar` component now correctly renders a circular keyboard focus outline when displaying initials. ## 5.14.2 - 2026-09-02 ### Fixed * Viewport-adaptive components such as `Flyout` and `Select` now switch between desktop and mobile layouts using slightly more precise breakpoint ranges. * The `SegmentedControl` component no longer loses its selected label on iOS when a parent element moves. * Fixed a 5.14.1 regression where visually hidden text (e.g. on `Link`) could cause a second page-level scrollbar. ## 5.14.1 - 2026-08-26 ### Fixed * Input components now respond to the user's account high-contrast setting. * The `Select` component now restores vertical spacing around option group dividers, which had previously collapsed to the height of the divider line. * The `FlyoutMenu` component now keeps the submenu open when moving the cursor towards it, even when the menu opens to the left. This improves pointer detection for left-opening menus. * Fixed an issue in the `FlyoutMenu` component where keyboard navigation did not scroll to active menu items. * The `Avatar` component now applies the same font-smoothing as `Text` components, improving visual consistency. * The `Swatch` component types `SwatchProps`, `TouchOrMouseEvent`, `SwatchColor`, and `SwatchVariant` are now accessible for import from the App UI Kit. * The `Slider` component now correctly syncs the numeric input with the controlled value when a change is rejected, ensuring consistent behavior. * Fixed an issue in the `Masonry` component where hiding a virtualized masonry (e.g., `display: none` on an ancestor) caused its vertical offset to be measured as 0, resulting in off-screen rows being mounted. * Replaced Noto Sans Arabic with IBM Plex Sans Arabic in our default font stack to better match the look and feel of Canva fonts. ## 5.14.0 - 2026-07-29 ### Changed * The `Avatar` component now displays one character instead of two when abbreviating Chinese, Japanese, or Korean names. * The `Carousel` component now makes out-of-view items inert only while the user is navigating with the keyboard when `outOfViewItemBehavior` is set to `'inert'`. * The `Button` loading state now uses a shimmer animation instead of a spinner by default. No consumer action is required. ### Fixed * The `Columns` component now applies spacing correctly when a `Column` is wrapped in another element. * The `FlyoutMenu` component's scroll position no longer jumps when scrolling quickly. * Date formatting now consistently uses the Gregorian calendar across browsers for the `ar-SA` locale. ## 5.13.0 - 2026-07-15 ### Added * Added a `ref` property to the `VideoCard` component to enable programmatic control of preview playback. ### Changed * When `MenuDivider` renders with a text child element, it now has less vertical padding. Minor visual changes apply, including where it is used for group headings in the `Select` component. ### Fixed * Fixed a rendering issue in the `TabList` component for overflow scroll arrows. * The `Link` component's pressed-state now correctly displays on hover-capable devices. ## 5.12.0 - 2026-07-02 ### Changed * On mobile, the `Select` and `CustomizableSelect` components now show short lists (6 or fewer options) as a flyout instead of a sheet. Searchable and longer lists still use a sheet. * The `Select` component now uses an improved focus-management pattern in sheet mode so it works better with screen readers. * The `Button` loading shimmer animation has been refined. Minor visual changes may appear. * The `PillsInput` loading state now uses a shimmer effect instead of a spinner animation. ### Fixed * The `LoadingIndicator` is centered again, fixing a regression in 5.11.0 where it was left-aligned. * The `Select` component now correctly scrolls the sheet menu to the active option when it is opened. * Fixed an issue in the `FlyoutMenu` component where closing the menu with the Tab key caused multiple tab jumps. * The `SegmentedControl` component now keeps the divider visible when hovering over a disabled item, instead of fading it out. * The `PillsInput` component now sets `aria-invalid` on the input when the `error` prop is set, improving screen-reader accessibility. * Fixed an issue preventing the background gradient of the `ColorSelector` showing the full value range. Minor visual changes apply. * Fixed scroll padding in mobile sheet surfaces (such as `Select` and `FlyoutMenu`) so scrolling works as expected with sticky headers and footers. ## 5.11.0 - 2026-06-18 ### Deprecated * Deprecated the `className` prop on `Box` and the `CustomizableSelect` trigger/item. These props will be removed in a future major release. Prefer design tokens and layout props, or wrap it in a standard HTML element if you need custom CSS classes. ### Added * Added `stylexjs/stylex` as a dependency, some internal components now transition to use stylex. No impact to external consumers. ### Changed * Small visual change to the `MusicIcon`. * Migrated `react-measure` dependency to an internal measure module, no external impact expected. ### Fixed * Fixed an issue with the `FlyoutMenu` component where extra, unknown props were being passed to DOM nodes, potentially causing unexpected behavior. This change prevents unknown props from being passed to DOM nodes. ## 5.10.0 - 2026-06-03 ### Changed * App UI Kit components now apply minor visual changes for Canva's modernised UI refresh. Apps on `v5.8.0` and above should have already had these changes rolled out slowly over the recent weeks. Changes include updated border radius, tactility / micro-interaction, refined elevation, and improved dark mode. * Behavioral improvement to the `Carousel` component, the ScrollButton no longer impacts the layout surrounding the Carousel. No visual change but the clickable area of the button is slightly shifted. ### Added * Added `@canva/app-ui-kit/icons` entrypoint for importing App UI Kit icons separately from the main package. ### Fixed * Fixed the searchable `Select` components focus ring to appear on the trigger instead of the search input, matching the behavior of non-searchable selects. ## 5.9.0 - 2026-05-20 ### Changed * The `Select` component's search input is now borderless in desktop mode and gains a shadow on scroll in sheet mode. * The `Select` component's default popover width now adjusts to fit its content while ensuring it is at least as wide as the trigger element. The `stretch` prop no longer enforces a `40u` minimum width. * Increased the max height of the `Select` popover menu to `260px`. * Increased spacing in `SearchInputMenu` and `Menu` components when using an optional `MenuDivider`. This change may result in minor visual differences. * Minor change to the `colorActionOverlayBgHovered`, `colorContentSubtlestFg`, and `colorControlBg` tokens for dark mode modernization. * Upgraded `mobx` dependency to `6.15.1`. ### Fixed * Fixed a visual bug affecting the positioning of nested `FlyoutMenu` components. * Fixed an invalid `aria-label` on the `` rendered by `CharacterCountDecorator`. The component now uses visually hidden components to announce `"{count} out of {max} characters used"` for screen readers, while hiding the `count/max` visual from assistive technologies via `aria-hidden`. ## 5.8.0 - 2026-04-30 ### Changed * The `Avatar` component now uses the WCAG 2.0 algorithm for selecting contrasting background colors, improving accessibility. Minor visual changes are expected for Avatars without photos. * The `HtmlPreview` component now fills its container and scrolls natively, resolving ResizeObserver loops and double-scrollbar issues. To control dimensions, wrap it in a sized element. * The background color of form input fields has been updated to use new color tokens. In dark mode, inputs will now appear darker. Minor visual changes are expected. * The `Badge` component now allows the `ariaLabel` prop to be optional for circle badges. Previously, `ariaLabel` was required when `shape="circle"` to ensure accessibility. Consumers can now handle accessible labeling via parent elements instead. * The `PillsInput` component now returns focus to the text input after all pills are removed or cleared, improving accessibility by maintaining the correct focus order. * The `ProgressBar` component's default gradient fill colors have been adjusted to improve accessibility with better contrast ratios. Minor visual changes are expected. * The `MenuDivider` component now has `role="none"` instead of the implicit `role="separator"`. This change addresses accessibility concerns and aligns with best practices for menu elements. ### Added * Added `secondary` and `tertiary` variants for small-sized `Button` components with labels. ### Fixed * Fixed the `Select` component emitting an `aria-controls` attribute that referenced the dropdown menu even when the menu was not mounted, which caused invalid accessibility references. `aria-controls` is now only set while the menu is open. ## 5.7.0 - 2026-03-05 ### Changed * The `Box` component's foreground color has been updated when the background is set to `canvas`, `tabdock`, `page`, `surface`, or `neutralLow`. There may be minor visual changes. * The `Text` component's line height for size `large` has been adjusted from 26px to 24px to align proportionally with other sizes. Minor visual changes should affect whitespace only. * `TestAppUiProvider` now supports an option to disable animations for testing purposes. * The `SurfaceHeader` component now uses a larger size for the back icon, resulting in minor visual changes. ## 5.6.0 - 2026-02-19 ### Changed * Internal updates to css color token values, very minor visual regressions may appear. * Updated the `colorUiOverlayBg` color token value to be slightly darker in dark mode. * `Flyout` trigger has internal markup changes, removed an outer div wrapper from the `Flyout` component, no layout impact or regressions are expected. * Flyout component internal behavior change, header content (title, description) now defaults to center alignment for mobile sheet view to align to the rest of Canva. * Changes the line height of the `Title` component in size "large", from 32px to 30px on viewports \<600px, and 42px to 40px on larger viewports. Visual changes are minor and affect whitespace only. * Updated internal `Title` font weights for most `Title` sizes, large/medium/small titles from 700 to 600. No change required for consumers of the Title component, minimal visual shifts are expected affecting horizontal whitespace only. * Added better viewport safe-area detection to pinned elements, like the `Flyout` or `FlyoutMenu`. ### Added * Added a `HtmlPreview` component that can be used to display HTML in the `previewUi` of content publisher intent apps. ### Fixed * Fixed an issue where the `Text` component font weight would behave differently than expected when when using a 'b' or 'strong' tag. They will now be 600 weight like the usual `bold` variant of that component. * Fixed an issue with the `Carousel` and `Tabs` components would render incorrectly not follow the global ltr / rtl directions. * Fixed an issue where the `PillsInput` remove button isn't being triggered when `maxRows` is set and content is scrollable. ## 5.5.0 - 2026-01-14 ### Changed * Reverted `Checkbox` component to use `box-shadow` spread animation for checked/indeterminate states. The previous `background-color` workaround was for an [iOS 26.1 Beta WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=300477) that has since been fixed in the stable release. No code changes required - this is a visual implementation detail. * Made the `Flyout` component popover and sheet appearances have the same DOM structure on first paint. * Updated CSS tokens used in various components. Expect very slight visual updates. ### Fixed * Fixed the `Slider` component briefly flashing with the fill bar at 100% when first loading. * Fixed the `Card` component fixed focus outline not visible on Safari. * Fixed carousel items not properly applying item width when they have fluid content. ## 5.4.0 - 2025-12-19 ### Changed * Updated `react` and `react-dom` peer dependency requirement to `^19.2.3` from `^19.2.1`. * Updated `mobx` peer dependency requirement to `^6.13.5` from `^6.13.3`. * Updated CSS tokens used in `AudioCard`, expect very slight visual updates. ### Fixed * Fixed `Carousel` snapping not working with virtualized items. * Fixed a bug where the `Carousel` component would crash upon unmount. * Fixed `onScroll` being called incorrectly in edge cases for the `Scrollable` component. It's now only called on scroll events. ## 5.3.0 - 2025-12-10 ### Changed * Updated `react` and `react-dom` peer dependencies to `^19.2.1`. * `Carousel` component improvements: * Items that are not fully visible are now marked as `inert` by default. This means their elements and descendants won't be tabbable or interactive until they are fully visible. A new prop `outOfViewItemBehavior` has been added to opt out of this behavior. * Accessibility skip links have been disabled by default if the "inert" `outOfViewItemBehavior` is selected (or defaulted), otherwise become enabled if "none" behavior is selected. * Updated the scroll buttons to have smoother animations, and updated the buttons to have circle buttons. * Updated item visibility thresholds to improve stability and usability. * Updated internal shadow colors, small variations in shadows can be expected. ### Added * Introduced the `SurfaceHeader` component. * Added a `trigger` prop to the `FlyoutMenu` component, enabling any React.ReactNode to be a FlyoutMenu trigger. * Added a `variant` prop to the `LinkButton` component, supporting either `regular` (default) or `critical`. ### Fixed * Fixed a focus abandonment issue occurring when a focused carousel item becomes inert as the container is scrolled with arrow keys. * Fixed an issue in cards where card content was sometimes leaking outside the selection border. * Fixed a bug that produced focus jumps when navigating carousels with items wider than the container. ## 5.2.1 - 2025-11-11 ### Fixed * Fixed `ColorSelector` component which stopped working in development mode, due to [a regression in React 19.2](https://github.com/facebook/react/issues/34840). ## 5.2.0 - 2025-10-22 ### Changed * Updated the README to reference canva.dev docs for design tokens. ### Fixed * `Carousel`'s scroll button control now takes item gaps into account * Fixed a couple of iOS 26.1 beta bugs impacting `FlyoutMenu`, `Flyout`,`Select`, `CustomizableSelect` and `ColorSelector` components. * The top edge of the `Sheet` component would change position when the virtual keyboard is open. * Regression affecting transition of full height `Sheet`s when virtual keyboard opens. ## 5.1.0 - 2025-10-14 ### Changed * Changed `react` and `react-dom` peer dependency versions to 19.2.0. ### Added * Added `onPlay`, `onPause`, and `onEnded` callbacks to the `AudioCard` component. ### Fixed * Fixed an [IOS 26.1 beta bug](https://bugs.webkit.org/show_bug.cgi?id=300477), which broke the way the box-shadow was applied to `Checkbox` to cover the entire area. Replaced it with background color. * Fixed a bug where one `AudioCard` component unmounting would stop all currently playing `AudioCard`s. * Restored missing colorControlBorder token. * Updated the colorControlBorderHovered semantic token to be correct in dark mode. ## 5.0.2 - 2025-10-08 ### Added * Added `elevationSurfaceFloatingBg` token for use as a background (surface) color. It is the preferred migration for the colorSurface token that was removed in v5. ### Fixed * Fixed a bug where the wrong ref could be returned for the `SearchInputMenu` component. ## 5.0.1 - 2025-09-30 ### Removed * **Breaking:** Added React 19 as a peer dependency and dropped React 18 support. * **Breaking:** Remove tone property from InputPill component * **Breaking:** Removed the default `colorSurface` background color styling for the global `html` tag. * **Breaking:** Removed the deprecated `title` prop in the `Link` component. Use `tooltipLabel` instead. ### Changed * **Breaking:** Implemented new design token system. See [App UI Kit v4 to v5 Migration Guide](https://www.canva.dev/docs/apps/app-ui-kit-v5-migration/) for more information on upgrading. * **Breaking:** The `source` parameter of the `onChange` callback for the `ColorSelector` component is now optional. The migration is to check for undefined values in the callback handler. * **Breaking:** The default value for the `alignY` property of `Column` is now `stretch`. To continue using the old implicit behavior, set it to `start` explicitly. * **Breaking:** Replaced `Pill` and `InputPill` `truncateText` prop with new `maxWidth` prop. The new prop better describes its functionality, and represents its size in a more explicit manner. * **Breaking:** Changed the `size` property for the `Pill` component to be consistent with `Button` size variants. To retain the old "small" Pill size, use the new "xsmall" variant. * **Breaking:** `Pill` now uses a round shape to match Canva styling. ### Added * Added load callbacks to the media cards - `onImageLoad` to `ImageCard`, `onImageLoad` and `onVideoLoad` to `VideoCard` and `onImageLoad` and `onAudioLoad` to `AudioCard` * Added `onTimeUpdate` callback to receive ontimeupdate events for the `Audio Card` * Added new `LinkButton` component for in-app actions that do not need to open URLs. * Added `type=multi` property to enable multiple selections for the `Select` component. ### Fixed * Resolved an issue with color-scheme CSS that broke dark mode. * Fixed a bug where `ProgressBar` always had 0 width when rendered in a flex container. ## 4.10.0 - 2025-06-25 ### Deprecated * Deprecated `title` prop in the `Link` component. Use the newly added `tooltipLabel` prop instead. ### Added * Added the following components: * `TimeInput` * `CustomizableSelect` * Added the following icons: * `TeamIcon` * Added a `time` mode to the `DateTime` component. * Added a `ref` property to the `AudioCard` component to enable programmatic control. ## 4.9.0 - 2025-04-29 ### Added * Add `onScroll` prop for `Scrollable` component * Add `video/x-msvideo` as an accepted video mime-type for the `VideoCard` component * Add `description` and `content` props to the `AudioCard` component ### Fixed * Fixed a bug where the `VideoCard` and `EmbedCard` components were not correctly applying the `borderRadius` prop ## 4.8.0 - 2025-02-20 ### Changed * Changed the behavior of the `Image`, `Video` and `Embed` Cards to display the loading screen within the border rather than obscuring it. ### Added * Added `inline-flex` as a display option for the `Box` component. * Added `bottomEnd` and `bottomEndVisibility` props to `HorizontalCard`. ## 4.7.1 - 2025-01-29 ### Fixed * Fixed an issue where the `TruncatedText` component was not exported, making it unavailable for use. ## 4.7.0 - 2025-01-21 ### Added * Introduced the `TruncatedText` component ### Fixed * `AudioCard` now stops the audio from playing when the component unmounts ## 4.6.0 - 2025-01-08 ### Changed * Updated the `Button` component to use `rem` for width and height instead of pixel values, ensuring the container scales appropriately when text scales due to browser or OS settings. * Adjusted all form input components to use `rem` sizes, enabling them to adapt to text scaling via browser or OS settings. ### Added * Introduced a `wrapInset` prop for the `Badge` component, with a `-1u` value to improve the appearance and spacing of badges wrapped around icons. ```tsx ``` ### Fixed * Resolved an issue with the `AudioCard` component where the pause button would incorrectly stop the track instead of pausing it. * Fixed a bug where content with scrollbars in the `TabPanel` component would not scale to the correct height. * Prevented the `PillsInput` remove button's `onRemoveClick` event from bubbling up and inadvertently triggering the pill's `onClick` event. ## 4.5.0 - 2024-12-18 ### Added * Added a `triggerMode` prop to the `ColorSelector` component. Enabling the rendering of a `AddColorButton` as a trigger. * Added a `onDeleteColor` prop to the `ColorSelector` component, when a callback is provided it adds a delete button in the picker flyout. * Added a `onOpen` and `onClose` prop to the `ColorSelector` component. * Added a `labelMarker` prop to the `FormField` component. When provided, it renders a marker next to the label (e.g. "optional"). * Added `thumbnailPadding` and `thumbnailBackground` props to `ImageCard` to allow for custom svg support on the `ImageCard` component. ### Fixed * Fixed an issue where the text in the `Pill` and `InputPill` components would overflow incorrectly when `truncate` was set to `false`. No considerable visual changes are expected, but a minor width change may be present for truncated pills. * Fixed an issue where arrow navigation in the `FlyoutMenu` component would not focus in some scenarios of nested FlyoutMenus. * Other minor fixes and improvements. ## 4.4.0 - 2024-11-26 ### Changed * Reduced the size of the HorizontalCard thumbnail to match other card components ### Added * Updated labels on `CheckboxGroup`, `Checkbox`, `FormField`, `RadioGroup` and `Switch` to allow for React.ReactNode ### Fixed * Set the default delimiters for `PillsInput` to be \[`','`, `';'`, `'\t'`] * Updated `AppUiProvider` component to support multiple mounts. * Fixed broken paste behavior when string without delimiters are pasted into `PillsInput` * Fixed `Tab` contents display when overflowing as it would squash its contents. ## 4.3.0 - 2024-11-13 ### Added * Added screen reader announcements for `PillsInput`. * Added the following icons: * `LayoutIcon` * `ChartLineIcon` * `GlobeIcon` * Added the ability to group options in the `Select` component. * Added a `description` prop to the `Checkbox`, `CheckboxGroup` and `RadioGroup` components. ## 4.2.0 - 2024-10-30 ### Added * Added the following components: * `HorizontalCard` * Added the following icons: * `ImageIcon` * 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. * Added a `"small"` size for the `Pill` component. * Added improved `onDrag` behaviour to the `Audio`, `Video`, `Embed`, and `Image` Cards. They now hide their preview automatically when dragging (if dragging is enabled) and the preview is used as the drag image under the mouse cursor. * Added a peer dependency on Mobx `v6.13.3` or later, due to an incompatibility with prior patches that would make components fail to update correctly. ### Changed * 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. ### Fixed * Fixed an issue where the text was being truncated for the `FlyoutMenu` component's trigger button. * Fixed an issue where the `FlyoutMenu` component was flickering on open due to React v18 changes. * Other minor fixes and improvements. ## 4.1.0 - 2024-10-14 ### Added * Added a `showTooltip` prop to the `Pill` component. * Added a `thumbnailAspectRatio` prop to the `ImageCard`, which can be used with `thumbnailHeight` and the `Carousel` component to make carousels of fixed-height thumbnails with variable widths. ### Fixed * Fixed an issue where the `Button` tooltipDescription was not being used by screen readers. * Fixed an issue where a disabled `AudioCard` could be dragged. * Fixed a Safari display problem for `Tab` labels. * Fixed a layout issue to the FileInput in button mode that caused multiple scrollbars in apps. ## 4.0.0 - 2024-09-23 ### Removed * **Breaking:** Removed the "xlarge" `size` option from the `Title` and `Text` components, please use the "large" size instead. * **Breaking:** Removed the "neutral" `tone` option from the `Badge` component, it is recommend to use the "contrast" tone instead. * **Breaking:** Removed the "large" `size` from the `LoadingIndicator` component. * **Breaking:** Removed the "center" `align` option from the `TabList` component. * **Breaking:** Removed the `state` prop from the `InputPill` component, the default state now becomes only "default". * **Breaking:** Removed the `tone` prop from the `ProgressBar` component. * **Breaking:** Removed the `size` prop from the `Swatch` component. * **Breaking:** Removed the `MoreVerticalIcon` icon, as outlined in a previous release, the `MoreHorizontalIcon` is recommended instead. ### Changed * **Breaking:** Changed the `alt` prop to be required for the `ImageCard` component. * Updated the styling of the `Slider` component, the shadow on the slider knob is now removed when in a "disabled" state. * Updated the behavior of the `NumberInput` component, a decimal (".") is now permitted as the first character. ### Added * Added Localization support across all App UI Kit components. * With the introduction of Canva [Apps Localization](https://www.canva.dev/docs/apps/localization/), all messaging within apps can now go through the Canva Translation process. * Additionally all auxiliary messaging that cannot be directly managing 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 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. * Added the following icons: * `ArrowMultiDirectionalIcon` * `CopyPlusIcon` * `DatabaseIcon` * `LineWeightsIcon` * `MoveLayerDownIcon` * `MoveLayerUpIcon` * `SpacingIcon` * `TextSpacingIcon` ### Fixed * Fixed an issue with the `Tabs` components where the `Tab` tooltip would snap to the start when the `TabList` component had the `align` prop set to "stretch". * Fixed an issue where the `PillsInput` component would not display a grayed background when the `disabled` prop was set to true. * Other minor fixes and improvements. **Note:** Canva's app submission process requires a single app bundle. Implementing localization might increase the size of the app and cause webpack to split the bundle into multiple chunks. If this happens, you can force webpack to emmit a single bundle [using the LimitChunkCountPlugin](https://www.canva.dev/docs/apps/localization/migrate-an-existing-app/#step-4-configure-webpack-chunk-limit): In your `webpack.config.js`: 1. Add the `optimize` module to the `webpack` import: ```diff - const { DefinePlugin } = require("webpack"); + const { DefinePlugin, optimize } = require("webpack"); ``` 2. In the `plugins` add the chunk limit before buildDevConfig is called. Modify the plugins definition: ```diff plugins: [ new DefinePlugin({ BACKEND_HOST: JSON.stringify(backendHost), }), + new optimize.LimitChunkCountPlugin({ maxChunks: 1 }), ], ``` ## 3.8.0 - 2024-08-05 ### Added * Added the following components: * `DateInput` * `FlyoutMenu` * `FlyoutMenuDivider` * `FlyoutMenuItem` * `InputPill` * `PillsInput` * `Scrollable` ### Fixed * Fixed the heading size of the `Accordion` component. ## 3.7.0 - 2024-07-23 ### Added * Added the following components: * `Accordion` * `AccordionItem` * `Flyout` * `Menu` * `MenuDivider` * `MenuItem` * `SearchInputMenu` * Added the following icons: * `DatabaseIcon` * `StarFilledIcon` * `StarIcon` * `TableMergedHeaderCellsIcon` * Added a `TestAppUiProvider` component for use when testing `@canva/app-ui-kit` components in test environments such as Jest. * Added a `size` prop to the `Button` component for tertiary icon buttons. * Added a `selectable`, `selected`, and `disabled` prop to the `AudioCard` component. * Added a `loading` prop to the `AudioCard`, `EmbedCard`, `ImageCard`, `TypographyCard`, and `VideoCard` components. ### Changed * Updated the `onClick` and `ariaLabel` props to now be optional for the `ImageCard`, `AudioCard`, `VideoCard` and `EmbedCard` components. ### Fixed * Fixed an issue in the `Slider` component where the handle overlay was getting cut off by the number input. * Fixed an issue where screen readers were double announcing labels to RadioGroups. * Other minor fixes and improvements. ### Deprecated * `MoreVerticalIcon` is now deprecated, it is no longer recommended for use and will be removed in a future release. Use `MoreHorizontalIcon` instead. ## 3.6.0 - 2024-07-01 ### Added * Added the following components: * `Tab` * `TabList` * `Tabs` * `TabPanel` * `TabPanels` * Added the following icons: * `CalendarIcon` * `MaximizeIcon` * `MinimizeIcon` * `MoreHorizontalIcon` * `MoreVerticalIcon` * `StrikethroughIcon` * Added a `disabled` prop to the `ColorSelector` component. * Added a `tooltipLabel` prop to the `Badge` component. * Added a `selected` prop to the `Button` component. * Added a `searchable` prop to the Form `Select` component to allow searching for options. * Added a `thumbnailHeight`, `selectable`, `selected`, and `disabled` prop to the `VideoCard` and `EmbedCard` components. * Added a `bottomEnd` and `bottomEndVisibility` prop for adding card decorators to the `AudioCard`, `EmbedCard`, `ImageCard`, and `VideoCard` components. ### Changed * Updated React version to `v18.3.1` in Peer Dependencies. ### Fixed * Fixed an issue where the `MultilineInput` component scroll positioning was resetting on input value change. * Fixed an issue where closing the `Select` component on touch devices resulted in the options menu reopening. * Fixed an issue with our build process to remove esm syntax from our cjs output. * Other minor fixes and improvements. ## 3.5.1 - 2024-05-08 ### Added * The following components: * `Avatar` * `AvatarGroup` * `AvatarPlaceholder` * The following icons: * `LinkIcon` * `FileTextIcon` * Added a new `contrast` tone variant for the `Badge` component, along with TSDoc comments explaining the meaning of each `tone`. * Added a new `neutral` tone variant for the `Alert` component. * Added a new `disabled` prop to the `ImageCard` component. ### Changed * Fixed `WordCountDecorator` displaying incorrect ARIA label. * Update the `colorTabdock` token value ever so slightly. * Render a truncated file name in `FileInputItem` when file name is too long, and show the full file name in a tooltip instead. * Visual changes to `Pill` component selected and disabled states. * Visual updates to the `Slider` component. ### Fixed * Links with the `OpenInNewTab` icon no longer leave the icon 'hanging' on a new line. * Fixed the `Link` component with `target="_blank"` letting punctuation drop onto a new line. * Fixed a stacking context issue in `Carousel` component causing its buttons to be rendered above flyouts. ## 3.4.0 - 2024-03-18 ### Added * The following icons: * `FlagIcon` * `LightBulbIcon` ### Changed * The `Badge` component now has a `wrapInset` prop. * The `Box` component now has display and flexbox related props. * The `ImageCard` component now has `selectable` and `selected` props. ### Fixed * Fixed the text in the `SegmentedControl` component where active items were not rendering in the right tone. * Fixes a stacking context issue in `SegmentedControl` causing its buttons to be rendered above flyouts. * Fixed disabled `Select` displaying option lists using arrow keys. ## 3.3.0 - 2024-02-27 ### Added * The `Button` component now has an `alignment` prop. ## 3.2.0 - 2024-02-13 ### Improvements * Reduced bundle size by over 7% by optimizing dependencies and implementing tree-shaking, resulting in faster loading times and improved performance. ### Added * The following components: * `Badge` * `Carousel` * `ClearDecorator` * `Masonry` * `Pill` * The following icons: * `ExportIcon` * `EyeIcon` * `FlipHorizontalIcon` * `FlipVerticalIcon` * `FolderIcon` * `GridIcon` * `InfoIcon` * `ListBulletLtrIcon` * `RedoIcon` * `SlidersIcon` * `TransparencyIcon` * `UndoIcon` ### Changed * The `Box` component now has a `className` prop. * The `Button` component now has `iconPosition` and `tooltipLabel` props. * The `EmbedCard` component `title` prop is now optional. * The `Select` component options now has `description`, `disabled` and `Icon` props. * The `Swatch` component now has an `onDelete` prop. * The `TextInput` component now has `start` and `end` props. * The `TypographyCard` component now has an `onHover` effect. * The `VideoCard` component now has a `borderRadius` prop. * Add `onBlur` and `onFocus` props to the following components: `Checkbox`, `CheckboxGroup`, `MultilineInput`, `NumberInput`, `TextInput`, `RadioGroup`, `SegmentedControl`, `Select`, `Switch`. * Add `onKeyDown` prop to the following components: `MultilineInput`, `NumberInput`, `TextInput`. * Updated primitive color scale, lighter colors are now more vibrant with less murky tones. Darker colors are lighter and more muted. ### Fixed * Fixed `Slider` tab order to be `label`, `slider`, `input`. This fixes a bug where the `Slider` was being rendered on top of other components. * Other minor fixes and improvements. ## 3.1.0 - 2023-12-12 ### Added * The following components: * `AudioCard` * `AudioContextProvider` * `EmbedCard` * `ImageCard` * `Link` * `TypographyCard` * `VideoCard` * The following icons: * `LockOpenIcon` * `LockClosedIcon` **Note:** With the addition of the various `Card` components, the equivalent `Draggable` components, such as `DraggableImage`, have been removed from the [starter kit](https://github.com/canva-sdks/canva-apps-sdk-starter-kit). ### Changed * The `Button` component now has an `ariaLabel` and `icon` prop. * The `Grid` component now has an `alignX` prop. * The `Swatch` component now has a `tooltipLabel` prop. * Renamed the `colorTypographyQuaternary` token to `colorTypographyPlaceholder`. ### Fixed * The spacing of the `FormField` component, ensuring consistency with the rest of the components. ## 3.0.0 - 2023-11-02 ### Added * The following components: * `Alert` * `CharacterCountDecorator` * `ColorSelector` * `Slider` * `Swatch` * `Switch` * `WordCountDecorator` * A number of new icons. ### Changed * **Breaking:** Made the second argument to the `onChange` callback of the `MultilineInput` component optional. Example update in consumer code: ```diff { + if (event == null) { + return; + } const cursorPosition = event.target.selectionStart; handleChangeAtCursorPosition(value, cursorPosition); }} /> ``` * The `Button` component now accepts a `type` prop. This prop can be set to `"submit"`, `"button"`, or `"reset"`. The default value is `"button"`. * The `TextInput` component now accepts a `type` prop. This prop can be set to `"search"`, `"tel"`, `"text"`, or `"url"`. The default value is `"text"`. * The `MultilineInput` component now accepts a `footer` prop. You can use this prop to decorate the input with the `CharacterCountDecorator` or `WordCountDecorator` components. ## 2.0.0 - 2023-09-14 ### Removed * **Breaking:** Removed default reset styles, including `* { margin: 0 }`. Apps may need to update to add these styles back in to maintain current styling: ``` * { margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } ``` * **Breaking:** Removed `disableBubbles` prop from `ProgressBar` component. The bubble effect is now always enabled. Any usages of the `disableBubbles` prop will need to be removed. ### Changed * **Breaking:** Renamed background color tokens. All usages must be updated to use the new name. The `Box` component's `background` prop has changed and should be renamed accordingly: | before | after | | ------------------------ | ------------------------------ | | `` | `` | | `` | `` | | `` | `` | | `` | `` | Any references to the following color tokens should be renamed accordingly: | before | after | | ----------------------- | ------------------- | | tokens.colorBackground1 | tokens.colorCanvas | | tokens.colorBackground2 | tokens.colorTabdock | | tokens.colorBackground3 | tokens.colorPage | | tokens.colorBackground4 | tokens.colorSurface | Any references to the following CSS variables should be renamed accordingly: | before | after | | --------------------------- | ---------------------- | | --ui-kit-color-background-1 | --ui-kit-color-canvas | | --ui-kit-color-background-2 | --ui-kit-color-tabdock | | --ui-kit-color-background-3 | --ui-kit-color-page | | --ui-kit-color-background-4 | --ui-kit-color-surface | ### Added * Added new `Grid` layout component for displaying content in a grid. * Added and edited prop documentation across multiple files, to clarify language and provide more context. ### Fixed * Fixed disabled CSS bug in `Select` component. * Fixed alignment of `Checkbox` with its label. * Fixed `MultilineInput` textarea not auto-growing when wordbreaks occur from resizing. * Validates input when using `FileInput` selector. When using the OS provided selector to choose files, users could override filetype restrictions. * Other small bug fixes and improvements. ### Other * `onChange` prop in `RadioGroup` component is now optional to align with the other form components. ## 1.0.0 ### Added * Initial package release