v14.0.0

[booc0mtaco]

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	Cell
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 specific a use case to
warrant the additional complexity. Usages of this should be removed from
code and associated designs.

• remove yield variant

Removing this variant, as it overlaps with the usage of the "warning"
prop, but is a different color and treatment. For users of the value,
designs and code should move to the "warning" value.

Card: deprecate orientation prop (#1866)

This prop was marked as deprecated so removing in this PR. Instead, rely
on consumers to provide any orientation and padding desired on the
sub-components.

Anyone using orientation="horizontal" can replace this with, e.g.,
TailwindCSS utility class flex-row or a similar class definition on
the container.

Badge: deprecate name prop on component (#1865)

Removing this prop name for consistency with other components. The
practice is that any component using another component in a prop should
use a camelCase version of the component's name. Because both were
supported, users of the now-removed name component can change the prop
to icon without any issue.

Skeleton: deprecate .Rect subcomponent mapping (#1864)

• Skeleton provides the same functionality as .Rect so simplify by
  removing this abstraction.

In each case, Skeleton.Rect can be replaced with Skeleton and retain
the same functionality.

• update storybook doc.s

Tag: remove deprecated props and update API (#1862)

• remove deprecated value "yield" from variant list

We had both "warning" and "yield" as possible values for this
component's variants, which was confusing. Going forward, we will start
with just "warning", and remove this option from the component list. If
using "yield", please consider using "warning" instead, or some other
treatment.

• change "icon" prop to be of type IconName to be consistent with all
  other components

This syncs up the headless Icon handling across all components, meaning
that the names and possible values are determined by the mapped icons,
and not any possible ReactNode instance. For consumers, replace any
usages of <Icon /> with the string provided to this cmoponent. Any
other nodes used will have to be removed.

• tidy up usage of <Text /> and typography handling

simplify the handling of type in this component by moving to use
preset instead of the more <font> like weight and size props, which
will also be removed.

• update tests, snapshots, and usages.

Tooltip: remove deprecated props (#1861)

• remove align prop, in place of the better-named placement prop

This has been marked as deprecated for a while now, so cleaning up the
code associated with this. In order to address in a consuming project,
you can replace align with placement in all use cases (this was
happening internally already).

• remove variant prop

The prop was used for a partially-implemented handling of light/dark
mode, and had been marked as deprecated. Removing now, making usage of
the light token values as the current, and only, option.

• clean up documentation, stoybook config, and test snapshots

Tabs: combine Tab sub-component into Tabs

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

-import Tab from '@chanzuckerberg/eds';

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

-<Tab>{...}</Tab>
+<Tabs.Tab>{...}</Tabs.Tab>

• update imports, tests, and usages in Tabs
• update usage in WireframeDemo
• clean up snapshots

remove deprecated components

• DataBar
• DragDrop
• Drawer
• DrawerBody
• DrawerFooter
• DrawerHeader
• FiltersButton
• FiltersCheckboxField
• FiltersDrawer
• FiltersPopover
• Layout
• LayoutContainer
• LayoutLinelengthContainer
• LayoutSection
• PageHeader
• Panel
• Score
• TimelineNav

This includes all tests, usages in implementation examples, and stories.

output a single, cjs build

Supporting both cjs and esm is painful. esm is the future, but let's simplify
the EDS build for now, and then update to esm at some point in the future.

For more information: #1856

Features

• Badge: deprecate name prop on component (#1865) (cff5d5e)
• Card: deprecate orientation prop (#1866) (bb160c1)
• Heading: remove deprecated props and refactor usages (#1872) (a5d6f76)
• InlineNotification: remove deprecated props from component (#1867) (efc6b43)
• InputField: remove unused prop requiredLabel (#1869) (f9d73dd)
• Label: remove deprecated props (#1868) (907cc39)
• Link: remove and reset deprecated props (#1871) (552945a)
• remove deprecated components (2538aa6)
• remove Grid and Section from exports (#1876) (a0ec79a)
• Select: remove deprecated props (#1870) (e0ad463)
• Skeleton: deprecate .Rect subcomponent mapping (#1864) (9d3ffec)
• Tabs: combine Tab sub-component into Tabs (0479863)
• Tag: remove deprecated props and update API (#1862) (dbfbaa3)
• Text: remove deprecated props (#1873) (13fbc18)
• Tooltip: remove deprecated props (#1861) (d444607)

Bug Fixes

• output a single, cjs build (523130e)
• remove unnecessary type definitions script (be341c0)

---

This discussion was created from the release v14.0.0.