@chanzuckerberg/eds@15.2.0

15.2.0 (2024-07-25)

Storybook

Features

• Fieldset: update styles to support new 2.0 components (#2023) (e542b32)

Bug Fixes

• Button: update typography tokens to match design (#2019) (3b94114)
• InputField: align text content with inputWithin spacing (#2020) (e87767b)

v15.1.0

15.1.0 (2024-07-15)

Storybook

Features

• add runtime warning/errors to components (#2007) (661130b)
• InputField: add show/hide button for password field type (#2006) (52d9ca0)
• Modal: add height property to modal API (#2011) (8d0c68f)

Bug Fixes

• Icon: update pencil icon to latest design (#2016) (cb8d1a7)
• Link: apply font weight to standalone sizes (#2015) (2e47271)
• Select: expose generic types to allow by to pass type checks (#2008) (421c91b)

@chanzuckerberg/eds@v15.0.1

15.0.1 (2024-07-02)

Storybook

Bug Fixes

• P in P (#1999) (7566e2c)
• Table: allow nodes in header cells (#2001) (e471fad)

v15.0.0

15.0.0 (2024-06-20)

Storybook

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

Storybook

⚠ 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 presets 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 of as)

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

https://popper.js.org/docs/v2/constructors/#options

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

13.12.0 (2024-03-04)

Storybook

Features

• export ClickableStyleProps (#1860) (0d1b49e)
• Select: add support for required in overline (#1855) (6e44566)

Bug Fixes

• lodash tree shaking (#1852) (f55f9cb)
• Select: add max height for Select.Options (#1858) (24ed8bc)

v13.11.0

13.11.0 (2024-02-20)

Storybook

Features

• script: add import from figma script (#1844) (9ed90e5)
• Select: enable multi-select (ced70d5)
• Select: add handling for long text in select field (7c79a6e)

Bug Fixes

• PopoverListItem: adjust size of list item when selected (0496f56)
• Select: set trigger type to button to prevent submits (#1843) (d7ea037)

v13.10.0

13.10.0 (2024-02-01)

Storybook

Features

• Select: add ability to handle click and change event handlers (#1839) (54a3de8)
• Select: add support for label prop (#1837) (c032ff2)

v13.9.0

13.9.0 (2024-01-19)

Storybook

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)

Bug Fixes

• InputField: mark unused prop as deprecated (#1831) (622abfb)
• Select: update incorrect documentation (#1825) (94aace5)

v13.8.1

13.8.1 (2024-01-04)

Storybook

• Dependency updates
• Token refactoring