Releases: chanzuckerberg/edu-design-system
v13.0.0
c5795a2
booc0mtaco
Andrew Holloway
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, anddefault-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-...v12.4.2
359abb2
booc0mtaco
Andrew Holloway
v12.4.1
35707da
booc0mtaco
Andrew Holloway
v12.4.0
0eff439
booc0mtaco
Andrew Holloway
v12.3.0
1d6234d
booc0mtaco
Andrew Holloway
12.3.0 (2023-06-29)
Features
- breadcrumbs: allow custom separators (#1663) (1fe0e6c)
- button: create t3 token for border radius (#1665) (eadd005)
- icons: make icons rounded outline and add send, mail (#1669) (669d01c)
- tokens: add t2 color bg-brand-primary-subtle (#1668) (7137da6)
- typography: support typography theming (#1664) (3148751)
v12.2.0
73c40a8
booc0mtaco
Andrew Holloway
12.2.0 (2023-06-21)
Features
- deprecate color-other-eraser token (#1640) (55a78e2)
- Text: add support for caption-md and caption-lg (53fd4e0)
Bug Fixes
- allow all valid input types (#1648) (e674741)
- InputField: fix alignment and color for required marker (#1654) (1c3b1db)
- make menu, popover, select ssr friendly (#1660) (eac8829)
- Menu: reset menu item hover and defer to popover (#1653) (f329e4d)
- ProgressBar: align label and caption with design (#1655) (9de0d6b)
- Tooltip: use caption-lg for tooltip text (f0772c7)
v12.1.0
12.1.0 (2023-05-30)
Features
- add tier-3 tokens to DataBar and ProgressBar (#1628) (ca9da5b)
- apply advanced popover handling to select components (#1613) (b74b046)
- deprecate color highlight tokens (#1636) (8975315)
- Typography: add light weight type ramp entries (#1634) (1bb2b67)
Bug Fixes
- align token name with design (#1630) (cfd928a)
- Avatar: adjust the tier 2 token used in size 'sm' (#1627) (6d174d0)
- build: build type declarations separately (#1633) (4db2d74)
- drawer: handle clickoutside on slower active boolean (#1621) (c61508b)
- link deprecated border token to new token value (#1631) (e198667)
- use token name from design (#1629) (01b2ea8)
