Changelog

• 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 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.

• Reduced the size of the HorizontalCard thumbnail to match other card components

• Updated labels on CheckboxGroup, Checkbox, FormField, RadioGroup and Switch to allow for React.ReactNode

• Set the default delimiters for PillsInput to be [',', ';', ' ']
• 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.

• 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.

• 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.

• 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 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.

• 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 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.

• 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.

• 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 Localization support across all App UI Kit components.
  • With the introduction of Canva 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 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.

In your webpack.config.js:

1. Add the optimize module to the webpack import:

- const { DefinePlugin } = require("webpack");
+ const { DefinePlugin, optimize } = require("webpack");

1. In the plugins add the chunk limit before buildDevConfig is called. Modify the plugins definition:

plugins: [
  new DefinePlugin({
    BACKEND_HOST: JSON.stringify(backendHost),
  }),
+ new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
],

• Added the following components:
  • DateInput
  • FlyoutMenu
  • FlyoutMenuDivider
  • FlyoutMenuItem
  • InputPill
  • PillsInput
  • Scrollable

• Fixed the heading size of the Accordion component.

• 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.

• Updated the onClick and ariaLabel props to now be optional for the ImageCard, AudioCard, VideoCard and EmbedCard components.

• 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.

• MoreVerticalIcon is now deprecated, it is no longer recommended for use and will be removed in a future release. Use MoreHorizontalIcon instead.

• 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.

• Updated React version to v18.3.1 in Peer Dependencies.

• 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.

• 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.

• 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.

• 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.

• The following icons:
  • FlagIcon
  • LightBulbIcon

• 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 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.

• The Button component now has an alignment prop.

• Reduced bundle size by over 7% by optimizing dependencies and implementing tree-shaking, resulting in faster loading times and improved performance.

• The following components:
  • Badge
  • Carousel
  • ClearDecorator
  • Masonry
  • Pill
• The following icons:
  • ExportIcon
  • EyeIcon
  • FlipHorizontalIcon
  • FlipVerticalIcon
  • FolderIcon
  • GridIcon
  • InfoIcon
  • ListBulletLtrIcon
  • RedoIcon
  • SlidersIcon
  • TransparencyIcon
  • UndoIcon

• 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 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.

• The following components:
  • AudioCard
  • AudioContextProvider
  • EmbedCard
  • ImageCard
  • Link
  • TypographyCard
  • VideoCard
• The following icons:
  • LockOpenIcon
  • LockClosedIcon

• 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.

• The spacing of the FormField component, ensuring consistency with the rest of the components.

• The following components:
  • Alert
  • CharacterCountDecorator
  • ColorSelector
  • Slider
  • Swatch
  • Switch
  • WordCountDecorator
• A number of new icons.

• Breaking: Made the second argument to the onChange callback of the MultilineInput component optional.

Example update in consumer code:

<MultilineInput
  onChange={(value, event) => {
+   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.

• 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.

• 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:

Any references to the following color tokens should be renamed accordingly:

Any references to the following CSS variables should be renamed accordingly:

• 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 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.

• onChange prop in RadioGroup component is now optional to align with the other form components.

• Initial package release