Release v14.0.0 #1879
Merged
Release v14.0.0 #1879
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Rollup already generates the type declarations.
Only produce one build
- 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.
- update imports, tests, and usages in Tabs - update usage in WireframeDemo - clean up snapshots
feat!: remove deprecated components
- 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
- 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.
- `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
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.
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.
) - 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.
- This property is unconnected from the input field, and not used.
- 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.
- 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
- 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.
- 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](https://chanzuckerberg.github.io/edu-design-system/?path=/story/design-tokens-tier-2-usage-colors--text) 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)
- 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-*`](https://tailwindcss.com/docs/font-weight#setting-the-font-weight) 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](https://chanzuckerberg.github.io/edu-design-system/?path=/story/design-tokens-tier-2-usage-colors--text) 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
- 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
- Grid - Toast
See #1878 for details
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1879 +/- ##
==========================================
+ Coverage 92.62% 96.87% +4.24%
==========================================
Files 148 106 -42
Lines 2862 2113 -749
Branches 780 546 -234
==========================================
- Hits 2651 2047 -604
+ Misses 195 64 -131
+ Partials 16 2 -14 ☔ View full report in Codecov by Sentry. |
size-limit report 📦
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
14.0.0 (2024-03-05)
Storybook
⚠ BREAKING CHANGES
Features
Bug Fixes