Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Text)!: remove deprecated props #1873

Merged
merged 5 commits into from
Mar 4, 2024
Merged

Conversation

booc0mtaco
Copy link
Contributor

@booc0mtaco booc0mtaco commented Mar 1, 2024

Summary:

  • 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
  • refactor font usages in component styles

This removes many of the inlined usages of font tokens in favor of factoring thru Text. This avoids some over-application of typography and reduces the number of potentially cascading treatments in component containers

Test Plan:

  • Wrote automated tests
  • CI tests / new tests are not applicable
  • Manually tested my changes, but I want to keep the details secret
  • Manually tested my changes, and here are the details:
    • Create an alpha publish and try out in edu-stack or traject as a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.

Copy link

codecov bot commented Mar 1, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.88%. Comparing base (f1bf71e) to head (39fd73b).

Additional details and impacted files
@@            Coverage Diff             @@
##              v14    #1873      +/-   ##
==========================================
- Coverage   96.88%   96.88%   -0.01%     
==========================================
  Files         108      108              
  Lines        2122     2117       -5     
  Branches      550      546       -4     
==========================================
- Hits         2056     2051       -5     
  Misses         64       64              
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@booc0mtaco booc0mtaco force-pushed the aholloway/EFI-1645/Text branch from 5bdae9a to c05b765 Compare March 2, 2024 00:15
Copy link
Contributor

@ahuth ahuth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

- remove `size` prop

Instructions TBD

- remove `weight` prop

Instructions TBD

- remove `variant` prop

Instructions TBD

- update stories and examples
- update component usages in compositions
- refactor font usages in component styles
- Fixes for: Slider, PageLevelBanner, HorizontalStepper
@booc0mtaco booc0mtaco force-pushed the aholloway/EFI-1645/Text branch from c8d2aed to 3b3d5e7 Compare March 4, 2024 18:30
@booc0mtaco
Copy link
Contributor Author

decided not to refactor usages of font in component styles, to avoid unnecessary churn in the snapshots

- remove exported config
- remove usages of 'text-h1' in Slider stories
@booc0mtaco booc0mtaco force-pushed the aholloway/EFI-1645/Text branch from 7c6f8cd to 39fd73b Compare March 4, 2024 19:59
@booc0mtaco booc0mtaco marked this pull request as ready for review March 4, 2024 19:59
Copy link
Contributor

@ahuth ahuth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤘

@booc0mtaco booc0mtaco merged commit 13fbc18 into v14 Mar 4, 2024
8 checks passed
@booc0mtaco booc0mtaco deleted the aholloway/EFI-1645/Text branch March 4, 2024 20:14
@booc0mtaco booc0mtaco mentioned this pull request Mar 5, 2024
booc0mtaco added a commit that referenced this pull request Mar 5, 2024
## [14.0.0](v13.12.0...v14.0.0) (2024-03-05)

[Storybook](https://61313967cde49b003ae2a860-pjuqfmockf.chromatic.com/)

### ⚠ BREAKING CHANGES

* remove Grid and Section from exports (#1876)
* **Text:** remove deprecated props (#1873)
* **Heading:** remove deprecated props and refactor usages (#1872)
* **Link:** remove and reset deprecated props (#1871)
* **Select:** remove deprecated props (#1870)
* **Label:** remove deprecated props (#1868)
* **InputField:** remove unused prop requiredLabel (#1869)
* **InlineNotification:** remove deprecated props from component (#1867)
* **Card:** deprecate orientation prop (#1866)
* **Badge:** deprecate name prop on component (#1865)
* **Skeleton:** deprecate .Rect subcomponent mapping (#1864)
* **Tag:** remove deprecated props and update API (#1862)
* **Tooltip:** remove deprecated props (#1861)
* **Tabs:** combine Tab sub-component into Tabs
* remove deprecated components
* output a single, cjs build

### Features

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


### Bug Fixes

* output a single, cjs build ([523130e](523130e))
* remove unnecessary type definitions script ([be341c0](be341c0))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants