Changelog

The latest changes to the App UI Kit.
  • 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);
}}
/>
diff
  • 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:

beforeafter
<Box background={1} /><Box background="canvas" />
<Box background={2} /><Box background="tabdock" />
<Box background={3} /><Box background="page" />
<Box background={4} /><Box background="surface" />

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

beforeafter
tokens.colorBackground1tokens.colorCanvas
tokens.colorBackground2tokens.colorTabdock
tokens.colorBackground3tokens.colorPage
tokens.colorBackground4tokens.colorSurface

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

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