ADS Components (Design token support)

Figma Resource

<Version 2.0.14>

❖ Atlassian navigation

• Added boolean prop to control the visibility of <NotificationIndicator>

• Reordered properties to match the element ordering in the component

• Surfaced nested component properties of subcomponents

• Removed redundant state property as it only has a single state

———

<Version 2.0.13>

❖ Button

• Fixed incorrect hover and press color tokens applied to compact danger button variants

• Added missing prototype states to subtle icon button variants

• Removed incorrect prototype interactions applied to some disabled button variants

• Disabled ‘Reset scroll position’ from all prototyping interactions

❖ Tooltip

Removed redundant ‘overflow=[true|false]` property as overflow is now handled natively via Figma’s text truncation functionality

❖ Breadcrumb

Fixed inconsistently named <BreadcrumbItem> children in sticker sheet examples

———

<Version 2.0.12>

❖ Range

Updated scaling of slider to ‘scale’ to fix resizing bug.

———

<Version 2.0.11>

❖ Dropdown menu

• Renamed component from `Dropdown` to `Dropdown menu` to match implementation

• Updated `spacing=cosy` prop to `spacing=cozy` to match implementation

———

<Version 2.0.10>

❖ Form

• <Message>: Added text property to make editing easier for makers

• <Field>: Surfaced <Message> text property in <Field> so it can be edited directly without having to select the child component first

❖ Tooltip

• Surfaced <TooltipPrimitive> text property in the parent tooltip component to make editing easier for makers

• Added max-widths to variants to match implementation

• Removed redundant smaller width variant now that max-widths are in place

❖ Onboarding (Benefits modal)

Removed `✏️ <ModalBody>` text property to skirt around a Figma bug that prevent makers from applying variables to sub-selections of text

❖ Dropdown menu

Added a simple version of dropdown menu for a common use case

———

<Version 2.0.9>


♥ General

This update incorporates the latest updates from ADS Design Tokens v1.13.1 which adds 6 new color.background.brand tokens, and aligns the version number with the NPM code package


❖ Tooltip

Surfaced nested tooltip and slot properties to make editing easier for makers without having to select nested elements

———

This huge v2.0.0 release brings support for Figma Variables, unlocking native mode switching in our components.

Dark mode component variants have been removed, and are now handled via variables and mode switching.

In addition, we’ve overhauled our component layouts and component naming structure to improve clarity, consistency, and the user experience associated with browsing and inserting components.

———

Atlassian’s themed component pack, powered by design tokens. This includes all of our molecular components – small pieces of our foundations library all merged together to create useful, reusable components. You’ll want this and the ADS Foundations (Beta) and ADS Foundations: Design Tokens (Beta) libraries to get started.


Contributors

Dan Hoolahan, Lewis Healey, Luke Underwood, Mitch Gavan, Andi Yao, Tony Wang, Eleni Misthos, Anton Serous, Jesse Bauer, Jocelyn Wong, Stephen Mok, Tamarah Walsh, Dafne Guerra Rodriguez, Daniel Del Core, Deborah Lindberg, Jennie Yip, Maria Christley