Release 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)

[booc0mtaco]

As a part of this release, we will annotate the release notes with guidance on how to address any breaking changes. This could be as a set of summary blocks added to the release notes, OR as a link to the EDS repo Wiki detailing migration steps from 12 to 13.

[codecov]

Codecov Report

Merging #1723 (c5795a2) into main (b4eace2) will decrease coverage by 0.91%.
The diff coverage is 96.70%.

@@            Coverage Diff             @@
##             main    #1723      +/-   ##
==========================================
- Coverage   93.17%   92.27%   -0.91%     
==========================================
  Files         222      146      -76     
  Lines        2975     2575     -400     
  Branches      725      664      -61     
==========================================
- Hits         2772     2376     -396     
- Misses        187      198      +11     
+ Partials       16        1      -15     

Files Changed	Coverage Δ
src/components/Checkbox/index.ts	100.00% <ø> (ø)
...mponents/InlineNotification/InlineNotification.tsx	95.83% <ø> (ø)
src/components/Layout/Layout.tsx	100.00% <ø> (ø)
src/components/LayoutContainer/LayoutContainer.tsx	100.00% <ø> (ø)
...tLinelengthContainer/LayoutLinelengthContainer.tsx	57.14% <ø> (ø)
src/components/LayoutSection/LayoutSection.tsx	100.00% <ø> (ø)
src/components/Radio/Radio.tsx	100.00% <ø> (ø)
src/components/SearchBar/SearchBar.tsx	100.00% <ø> (ø)
src/components/Slider/Slider.tsx	88.46% <ø> (+1.92%)	⬆️
src/components/Table/Filters.tsx	79.62% <ø> (ø)
... and 16 more

... and 12 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[github-actions]

size-limit report 📦

Path	Size
components	95.49 KB (-14.73% 🔽)
styles	32.68 KB (-14.09% 🔽)

[jeremiah-clothier]

Is there anything specific to look over in this PR or since it's a collection of previously merged PRs not really?

[booc0mtaco]

Is there anything specific to look over in this PR or since it's a collection of previously merged PRs not really?

@jeremiah-clothier I'm adding in instructions to the summary above, explaining how to resolve any of the breaking changes. Once i finish that, if you could have a look and see if those read pretty clearly, that would be most helpful :D

For release PRs, the main thing is to verify the change log is correct and helpful

[jeremiah-clothier]

remove

okay @booc0mtaco feel free to ping me when all the instructions are added

[booc0mtaco]

@jeremiah-clothier all done. Let me know if any adjustments seem useful. I think I captured all the relevant details to mention from the individual PRs, and this release has as much of the breaking stuff as we could get together