Changelog

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 Accordian 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

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:

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

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:

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

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

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