v13.0.0

[booc0mtaco]

13.0.0 (2023-08-14)

Review the text next to each breaking change for suggestions on how to transform your existing code for compatibility with this version.

⚠ BREAKING CHANGES

link: remove text-link tokens for link t3 tokens (#1639)

The following tokens have been removed, and their usages have been replaced:

• --eds-theme-color-text-link-brand
• --eds-theme-color-text-link-neutral

New tokens were added in 12.x versions, and are proper tier-2 tokens, which supersede these. For reference they are:

• --eds-theme-color-text-neutral-* (includes, neutral, strong, default, and default-inverse)
• --eds-theme-color-text-brand-default

Check the relevant figma files and ZH documentation on what values should be set for the tokens above

colors: remove old colors and convert to input and show figma token (#1711)

Many color tokens were long-ago deprecated. They are now being removed to simplify the token set and align with the latest foundation and component files.

This includes the following:

• --eds-color-highlight-*
• --eds-color-info-*

If you spot any of these in design files, consult with the design team about cleanup.

remove deprecated dropdown (#1657)

The Dropdown component is now being removed, to be replaced by the more feature-rich Menu and Select components.

banner: remove component (#1702)

The Banner component was not available in design, as it had been removed some time ago. So we remove it in this release. No designs should use this component. Instead, refer to the InlineNotification or Toast components.

remove legacy tokens and typography mixins (#1709)

We remove the remaining legacy tokens from EDS, and the legacy Typography @mixins. Examples include:

• --legacy-color-*
• --legacy-size-*

These were not being used in any internal components, and should not be used in any product-specific recipes. If they were, work with design to find a supported alternative for those tokens.

Along with those removals, we replace all calls to mixins with equivalent font: CSS properties. The mixins were NOT exported, but this does enable the use of typography tokens in custom recipes if needed.

-@mixin eds-typography-preset-001;
+font: var(--eds-typography-preset-001);

Grid: remove top-level sub-component(s) (#1703)

If you are importing any Grid sub-components in your code, you can remove the import

-import GridItem from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<GridItem>{...}</GridItem>
+<Grid.Item>{...}</Grid.Item>

dragdrop: remove top level subcomponents (#1697)

If you are importing any DragDrop sub-components in your code, you can remove the import

-import DragDropContainerHeader from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<DragDropContainerHeader>{...}</DragDropContainerHeader>
+<DragDrop.ContainerHeader>{...}</DragDrop.ContainerHeader>

Fieldset: remove top-level sub-component(s) (#1695)

If you are importing any Fieldset sub-components in your code, you can remove the import

-import FieldsetItems from '@chanzuckerberg/eds';
-import FieldsetLegend from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<FieldsetItems>{...}</FieldsetItems>
+<Fieldset.Items>{...}</Fieldset.Items>
-<FieldsetLegend>{...}</FieldsetLegend>
+<Fieldset.Legend>{...}</Fieldset.Legend>

HorizontalStepper: remove top-level sub-component(s) (#1696)

If you are importing any HorizontalStepper sub-components in your code, you can remove the import

-import HorizontalStep from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<HorizontalStep>{...}</HorizontalStep>
+<HorizontalStepper.Step>{...}</HorizontalStepper.Step>

Card: remove top-level sub-component(s) (#1692)

If you are importing any Card sub-components in your code, you can remove the import

-import CardHeader from '@chanzuckerberg/eds';
-import CardBody from '@chanzuckerberg/eds';
-import CardFooter from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<CardHeader>{...}</CardHeader>
+<Card.Header>{...}</Card.Header>
-<CardBody>{...}</CardBody>
+<Card.Body>{...}</Card.Body>
-<CardFooter>{...}</CardFooter>
+<Card.Footer>{...}</Card.Footer>

checkbox: remove top level subcomponents (#1693)

If you are importing any Checkbox sub-components in your code, you can remove the import

-import CheckboxInput from '@chanzuckerberg/eds';
-import CheckboxLabel from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<CheckboxInput>{...}</CheckboxInput>
+<Checkbox.Input>{...}</Checkbox.Input>
-<CheckboxLabel>{...}</CheckboxLabel>
+<Checkbox.Label>{...}</Checkbox.Label>

radio: remove top level subcomponents (#1690)

If you are importing any Radio sub-components in your code, you can remove the import

-import RadioInput from '@chanzuckerberg/eds';
-import RadioLabel from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<RadioInput>{...}</RadioInput>
+<Radio.Input>{...}</Radio.Input>
-<RadioLabel>{...}</RadioLabel>
+<Radio.Label>{...}</Radio.Label>

DataBar: remove top-level sub-component(s) (#1686)

If you are importing any DataBar sub-components in your code, you can remove the import

-import DataBarSegment from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<DataBarSegment>{...}</DataBarSegment>
+<DataBar.Segment>{...}</DataBar.Segment>

Modal: remove top-level sub-component(s) (#1689)

If you are importing any Modal sub-components in your code, you can remove the import

-import ModalTitle from '@chanzuckerberg/eds';
-import MobalBody from '@chanzuckerberg/eds';
-import ModalFooter from '@chanzuckerberg/eds';
-import ModalHeader from '@chanzuckerberg/eds';
-import ModalStepper from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<ModalTitle>{...}</ModalTitle>
+<Modal.Title>{...}</Modal.Title>
-<ModalBody>{...}</ModalBody>
+<Modal.Body>{...}</Modal.Body>
-<ModalFooter>{...}</ModalFooter>
+<Modal.Footer>{...}</Modal.Footer>
-<ModalHeader>{...}</ModalHeader>
+<Modal.Header>{...}</Modal.Header>
-<ModalStepper>{...}</ModalStepper>
+<Modal.Stepper>{...}</Modal.Stepper>

searchbar: remove top level subcomponents (#1687)

If you are importing the SearchButton or SearchField in your code, you can remove the import

- import SearchButton from '@chanzuckerberg/eds';
- import SearchField from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<SearchButton>{...}</SearchButton>
+<SearchBar.Button>{...}</SearchBar.Button>
-<SearchField>{...}</SearchField>
+<SearchBar.Field>{...}</SearchBar.Field>

table: remove top-level sub-components (#1685)

If you are importing any Table sub-components in your code, you can remove the import

-import TableRow from '@chanzuckerberg/eds';
-import TableCell from '@chanzuckerberg/eds';
-import TableBody from '@chanzuckerberg/eds';
-import TableCaption from '@chanzuckerberg/eds';
-import TableHeader from '@chanzuckerberg/eds';
-import TableHeaderCell from '@chanzuckerberg/eds';
-import TableFooter from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<TableRow>{...}</TableRow>
+<Table.Row>{...}</Table.Row>
-<TableBody>{...}</TableBody>
+<Table.Body>{...}</Table.Body>
-<TableFooter>{...}</TableFooter>
+<Table.Footer>{...}</Table.Footer>
-<TableHeader>{...}</TableHeader>
+<Table.Header>{...}</Table.Header>
-<TableHeaderCell>{...}</TableHeaderCell>
+<Table.HeaderCell>{...}</Table.HeaderCell>
-<TableCaption>{...}</TableCaption>
+<Table.Caption>{...}</Table.Caption>
-<TableCell>{...}</TableCell>
+<Table.Cell>{...}</Table.Cell>

toolbar:remove component (#1683)

Toolbar was removed, as it had no corresponding designs, and prescribed a layout that is more likely to be product specific. If there is a strong design and rationale for a new toolbar, it may re-emerge as a standalone component, composed of various EDS sub-components.

If using toolbar, consider replacing with equivalent TailwindCSS Layout classes:

-<Toolbar className="!mb-4" variant="bare"></Toolbar>
+<div className="mb-4 flex items-center gap-4"></div>

-<ToolbarItem></ToolbarItem>
+<div className="ml-auto"></div>

Breadcrumbs: remove top-level sub-component (#1680)

If you are importing the BreadcrumbsItem in your code, you can remove the import

- import BreadcrumbsItem from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<BreadcrumbsItem>{...}</BreadcrumbsItem>
+<Breadcrumbs.Item>{...}</Breadcrumbs.Item>

timelinenav: remove top-level sub-component (#1681)

If you are importing the TimelineNavPanel in your code, you can remove the import

- import TimelineNavPanel from '@chanzuckerberg/eds';

... and replace references to the sub-component with the following:

-<TimelineNavPanel>{...}</TimelineNavPanel>
+<TimelineNav.Panel>{...}</TimelineNav.Panel>

Features

• Breadcrumbs: remove top-level sub-component (#1680) (669081d)
• Card: remove top-level sub-component(s) (#1692) (7ec01f4)
• checkbox: remove top level subcomponents (#1693) (87b12e8)
• DataBar: remove top-level sub-component(s) (#1686) (b4b9276)
• dragdrop: remove top level subcomponents (#1697) (b4fd00c)
• Fieldset: remove top-level sub-component(s) (#1695) (0c8280d)
• Grid: remove top-level sub-component(s) (#1703) (c8925c9)
• HorizontalStepper: remove top-level sub-component(s) (#1696) (188fd99)
• Layout: mark layout components as deprecated (#1700) (930a369)
• Modal: remove top-level sub-component(s) (#1689) (8743e62)
• radio: remove top level subcomponents (#1690) (82da617)
• remove legacy tokens and typography mixins (#1709) (ec3e819)
• searchbar: remove top level subcomponents (#1687) (d13bb6c)
• table: remove top-level sub-components (#1685) (742a530)
• timelinenav: remove top-level sub-component (#1681) (f46eca7)

Bug Fixes

• Avatar: support display names using emoji and multi-byte (#1716) (1294022)

• update token exports (#1722) (982c55f)

• banner: remove component (#1702) (356550c)

• colors: remove old colors and convert to input and show figma token (#1711) (c9a5079)

• link: remove text-link tokens for link t3 tokens (#1639) (d35cfe4)

• remove deprecated dropdown (#1657) (26d1694)

• toolbar: remove component (#1683) (bd47899)

---

This discussion was created from the release v13.0.0.