Releases: chanzuckerberg/edu-design-system
@chanzuckerberg/[email protected]
v15.0.0
15.0.0 (2024-06-20)
⚠ BREAKING CHANGES
- TextareaField: introduce 2.0 component (#1911)
- Card: introduce 2.0 component (#1908)
- Modal: introduce 2.0 component (#1907)
- Toast: introduce 2.0 component (#1906)
- Tooltip: introduce 2.0 component (#1905)
- BannerNotification: introduce 2.0 component (#1904)
- InlineNotification: introduce 2.0 component (#1903)
- Accordion: introduce 2.0 component (#1901)
- Select: introduce 2.0 component (#1899)
- config: use literal values in style-dictionary config (#1900)
- InputField: introduce 2.0 component (#1898)
- Checkbox: introduce 2.0 component (#1897)
- Radio: introduce 2.0 component (#1895)
- Menu: introduce 2.0 component (#1894)
- TabGroup: introduce 2.0 component (#1892)
- NumberIcon: introduce 2.0 component (#1891)
- Link: introduce v2.0 component (#1890)
- Button: introduce v2.0 component (#1889)
- tokens: remove units from design system tokens (#1912)
- Icon: introduce 2.0 component (#1925)
- adjust responsive and spacing tokens/config (#1933)
- AppNotification: introduce 2.0 component (#1945)
- ToastNotification: rename from Toast to ToastNotification (#1944)
- typography: update typography tokens and fonts (#1942)
- FieldLabel: introduce 2.0 component (#1953)
- LoadingIndicator: introduce 2.0 component (#1963)
- update tier 1 and 2 typography tokens (#1969)
- move from isWarning and isError to status prop (#1973)
- pre-cleanup changes to prepare for v15 (#1992)
Features
- Accordion: introduce 2.0 component (#1901) (cf2086b)
- add new v2.0 component tokens (#1888) (3607a5d)
- BannerNotification: introduce 2.0 component (#1904) (cda9e4b)
- Button: introduce v2.0 component (#1889) (a6b446f)
- Card: introduce 2.0 component (#1908) (cd21b49)
- Checkbox: introduce 2.0 component (#1897) (f3fc767)
- config: use literal values in style-dictionary config (#1900) (e470f4b)
- InlineNotification: introduce 2.0 component (#1903) (7bff52d)
- InputField: introduce 2.0 component (#1898) (a3d3984)
- Link: introduce v2.0 component (#1890) (bdce10a)
- Menu: introduce 2.0 component (#1894) (3f540f9)
- Modal: introduce 2.0 component (#1907) (d14c963)
- NumberIcon: introduce 2.0 component (#1891) (cc7e140)
- Radio: introduce 2.0 component (#1895) (8ef797f)
- Select: introduce 2.0 component (#1899) (1164b90)
- TabGroup: introduce 2.0 component (#1892) (e952d33)
- TextareaField: introduce 2.0 component (#1911) (a68a255)
- Toast: introduce 2.0 component (#1906) (8bce819)
- Tooltip: introduce 2.0 component (#1905) (ded98b2)
- add support for extended nav and action components (#1918) (f4a541e)
- tokens: remove units from design system tokens (#1912) (ab666cf)
- Icon: introduce 2.0 component (#1925) (3e40638)
- adjust responsive and spacing tokens/config (#1933) (b19e453)
- AppNotification: introduce 2.0 component (#1945) (489e8d9)
- ToastNotification: rename from Toast to ToastNotification (#1944) (07284c2)
- typography: update typography tokens and fonts (#1942) (3140996)
- Link: allow nodes to be used in link body (#1950) (01970a2)
- allow react nodes on subtitle (#1954) (fc6bb78)
- FieldLabel: introduce 2.0 component (#1953) (6198b9e)
- add eds-migrate command (b45061e)
- tokens: add border-utility-inteactive-secondary tokens (#1959) (72daa0b)
- add
eds-migrate
script for running codemods on major version upgrades (#1951) (109a0e5) - LoadingIndicator: introduce 2.0 component (#1963) (26faab7)
- LoadingIndicator: update stroke width in Button (#1964) (bac3594)
- Menu: set new default for menu trigger (#1965) (24815c2)
- Select: support horizontal labels (#1962) ([675ad5f](https://github.com/...
v14.0.0
14.0.0 (2024-03-05)
⚠ BREAKING CHANGES
remove Grid and Section from exports (#1876)
- these two are marked as deprecated so remove them
- they are, however, still used in the documentation pages
- redo the imports in those story pages to allow for this
- update snapshots for PopoverContainer
Text: remove deprecated props (#1873)
- remove
size
prop
The size
prop, being redundant, is now replaced by the more expressive preset
prop, which contains all the semantic (tier-2) tokens by name. Each of the size
values corresponds to a specific and existing preset
value, listed in the following table:
size |
preset |
---|---|
body | body-md |
xs | body-xs |
sm | body-sm |
md | body-md |
lg | body-lg |
caption-md | caption-md |
caption-lg | caption-lg |
overline | overline |
callout | body-sm |
In usages of size
, you can remove the prop. If there is no preset defined for the instance of Text
, you can use the table above to replace the size
prop and value with the equivalent preset.
- remove
weight
prop
Instead of specifying weight
on any instance of Text
, you can instead use utility classes or styles to add an override to font-weight
. The preset
values specify weight in addition to font-size
, line-height
, and other details so overrides like this should be rare.
One example to apply this weight override is to use font-*
or use the relevant CSS properties to adjust the weight.
- remove
variant
prop
variant
overlapped with the utility classes, and served as a namespaced subset of the actual color tokens, in some cases changing the name of the token in the API. We remove variant in favor of utility classes, similar to weight adjustments. For each variant
value, the equivalent token to use can be found in the following table:
variant |
equivalent EDS token |
---|---|
error | --eds-theme-color-text-utility-error |
neutral-subtle | --eds-theme-color-text-neutral-subtle |
neutral-medium | --eds-theme-color-text-neutral-default |
neutral-strong | --eds-theme-color-text-neutral-strong |
brand | --eds-theme-color-text-brand-default |
info | --eds-color-info-700 |
inherit | this is the default behavior now |
success | --eds-theme-color-text-utility-success |
warning | --eds-theme-color-text-utility-warning |
white | --eds-theme-color-text-neutral-default-inverse |
Use the following table to match design intent to code equivalent, referencing the table above. For example, if the code currently uses variant="neutral-medium"
, convert by removing that, and adding className="text-neutral-default"
or using color: var(--eds-theme-color-text-neutral-default)
in a stylesheet.
- remove partial definition of
fontSize
from default tailwind config
The existing tailwind config is redundant, as it only partially overlaps the more expressive preset
field on Text
, and lacks the precision of the typography tokens. Along with cleaning up these settings, we also remove a mismatch between Text
and Heading
(which did not sync up with the associated preset
s of either component). This restores the default values provided by tailwind.
- update stories and examples
- update component usages in compositions
- repair WireframeDemo page
- apply snapshot regressions on several components
- update stacked cards table example
- remove fontSize config from tailwind.config.ts
Heading: remove deprecated props and refactor usages (#1872)
- remove
size
prop (in favor ofas
)
size
, marked as deprecated before, is now removed from Heading
. Instead of size
, you can now use combinations of as
and preset
to get access to both default and custom typography presets. Here's the mapping for the <h*>
tags to the preset
:
size => as |
default preset |
---|---|
h1 | headline-lg |
h2 | headline-md |
h3 | headline-sm |
h4 | title-md |
h5 | title-sm |
h6 | title-xs |
h7 | (this has been removed entirely) |
If you used any of the size
values that map to the HTML heading tags, you can update the prop name from size
to as
. If preset
is specified, and it matches the default value from the table above, you can remove preset
.
If you used any of the size
values that map to existing presets, you can update the prop name from size
to preset
. Before, the component would convert the size
value to a relevant default as
tag. You can use the inverse of the table (reading right to left) to determine which as
tag to use if one is not provided.
NOTE: as
now has a default value of "h1"
. You will get accessibility errors if as
is not provided in the latter cases.
- remove
variant
prop (in favor of utility classes)
The variant
prop did some of the work of a utility class, by mapping key values to color token usages. However, these named variants didn't match the token naming scheme, and did not provide a set of values that spanned the full set of possible use cases. With this change, we remove this prop, allowing Heading
to inherit color like normal. Internal components that need to specify a color can now do so in component styles, and this makes it easier to customize the color of any heading using component or utility class values.
variant |
EDS Token Used |
---|---|
error | --eds-theme-color-text-utility-error |
brand | --eds-theme-color-text-brand-default |
info | --eds-color-info-700 |
inherit | none (this is the default behavior) |
neutral-subtle | --eds-theme-color-text-neutral-subtle |
neutral-medium | --eds-theme-color-text-neutral-default |
neutral-strong | --eds-theme-color-text-neutral-strong |
success | --eds-theme-color-text-utility-success |
warning | --eds-theme-color-text-utility-warning |
white | --eds-theme-color-text-neutral-default-inverse` |
When removing variant
you can use the table above to refactor to the desired utility class, token, or custom class. Refer to this document for the names of tailwind classes to convert to if used.
Examples
<Heading ... variant="error">
=>:
<Heading ... className="text-utility-error">
<div className="text-utility-error"><Heading ...></div>
NOTE: variant="info"
used a tier-1 token directly, which is a violation. Since this is no longer provided internally, this is a reminder that only tier 2 and above tokens should be used in styling and design.
- refactor usages in composed components
Some composed components used or borrowed from the Heading component API. You will see no changes in the following components' usages:
- PageLevelBanner
- Section (to be deprecated)
- Tabs
Heading
and Modal
Modal
has one change to its API in support of this cleanup. Instead of specifying size
like before, we now use preset
(which comes from Heading
). By default, Modal
instances use h2
for the level in their titles. Again, you can reference the table above under Heading
for how to update the prop value once moving over to preset
.
- update documentation and stories
- update Heading usages in demo
- add default story
- fix style regressions by updating any usages (chromatic should have 0 diffs)
Link: remove and reset deprecated props (#1871)
- restore
size
to available
This is used sparingly, but will be used more effectively in the future.
- remove
fullWidth
from component
This is a holdover from linkages to Button
, so removing now that link
is its own component. Use utility classes to alter layout.
Select: remove deprecated props (#1870)
- remove
variant
from component
variant
was partially implemented and inconsistent with other
components which have control for display width (they use boolean
fullWidth
). Remove this prop, and rely on utility classes for width
control.
- remove redundant alignment prop `optionsAlign'
Consumers should use the placement
prop to control how to display the
popover. All popover-components share the same API for placement, as
determined by PopperJS.
When using left
, you can set placement="bottom-start
and when using
right
, you can set placement="bottom-end
. See more documentation at
Label: remove deprecated props (#1868)
- remove
requiredLabel
from component - remove
optionalLabel
from component
neither of these are used, and removing them adds clarity and simplicity
to the component.
Also added an additional story to the component documentation for
clarity.
InputField: remove unused prop requiredLabel (#1869)
- This property is unconnected from the input field, and not used.
InlineNotification: remove deprecated props from component (#1867)
- remove
inactive
prop from component
This had been marked as deprecated, so now removing. As of today, it is
not used in any components, and likely too sp...
v13.12.0
v13.11.0
v13.10.0
v13.9.0
13.9.0 (2024-01-19)
Features
- Avatar: adjust typography usages and sizing for icons (#1830) (7da31e6)
- InlineNotification: remove deprecated variants (#1833) (cfcf1fa)
- Label: mark optional as deprecated (#1832) (8067082)
- tokens: output token literal values in a new tailwind config file (#1828) (08fa1c4)