-
Notifications
You must be signed in to change notification settings - Fork 4
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
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
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. |
5bdae9a
to
c05b765
Compare
There was a problem hiding this 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
c8d2aed
to
3b3d5e7
Compare
decided not to refactor usages of |
- remove exported config - remove usages of 'text-h1' in Slider stories
7c6f8cd
to
39fd73b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤘
## [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))
Summary:
size
propThe
size
prop, being redundant, is now replaced by the more expressivepreset
prop, which contains all the semantic (tier-2) tokens by name. Each of thesize
values corresponds to a specific and existingpreset
value, listed in the following table:size
preset
In usages of
size
, you can remove the prop. If there is no preset defined for the instance ofText
, you can use the table above to replace thesize
prop and value with the equivalent preset.weight
propInstead of specifying
weight
on any instance ofText
, you can instead use utility classes or styles to add an override tofont-weight
. Thepreset
values specify weight in addition tofont-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.variant
propvariant
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 eachvariant
value, the equivalent token to use can be found in the following table:variant
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 addingclassName="text-neutral-default"
or usingcolor: var(--eds-theme-color-text-neutral-default)
in a stylesheet.fontSize
from default tailwind configThe existing tailwind config is redundant, as it only partially overlaps the more expressive
preset
field onText
, and lacks the precision of the typography tokens. Along with cleaning up these settings, we also remove a mismatch betweenText
andHeading
(which did not sync up with the associatedpreset
s of either component). This restores the default values provided by tailwind.refactor font usages in component stylesThis 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 containersTest Plan:
edu-stack
ortraject
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.