feat(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-*`](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
chanzuckerberg · Mar 4, 2024 · 13fbc18 · 13fbc18
1 parent f1bf71e
commit 13fbc18
Show file tree

Hide file tree

Showing 37 changed files with 218 additions and 393 deletions.
diff --git a/.storybook/pages/WireframeDemo/WireframeDemo.tsx b/.storybook/pages/WireframeDemo/WireframeDemo.tsx
@@ -152,9 +152,9 @@ const StudentTab = ({
     )}
   >
     <div className={clsx(styles['watch-page__avatar'], 'h-10 w-10')}>
-      <Text size="sm">{studentName.slice(0, 1)}</Text>
+      <Text preset="body-sm">{studentName.slice(0, 1)}</Text>
     </div>
-    <Text className="!mt-2 truncate" size="xs">
+    <Text className="!mt-2 truncate" preset="body-xs">
       {studentName}
     </Text>
   </div>
@@ -249,12 +249,12 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
               <div
                 className={clsx(styles['watch-page__avatar'], 'mr-2 h-9 w-9')}
               >
-                <Text size="sm">M</Text>
+                <Text preset="body-sm">M</Text>
               </div>
 
               <div>
-                <Text size="sm">Mikaela</Text>
-                <Text size="xs">3d</Text>
+                <Text preset="body-sm">Mikaela</Text>
+                <Text preset="body-xs">3d</Text>
               </div>
             </div>
             <img
@@ -279,7 +279,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
             <div className={styles['watch-page__response']}>
               <Label htmlFor={responseTextareaId} text="Respond to Mikaela" />
               <textarea
-                className={clsx(styles['watch-page__textarea'], 'h-[9.25rem')}
+                className={clsx(styles['watch-page__textarea'], 'h-[9.25rem]')}
                 id={responseTextareaId}
                 onChange={handleTextareaChange}
                 placeholder="Type your response to Mikaela"
@@ -312,7 +312,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
             'm-4 h-[6.25rem] w-[6.25rem]',
           )}
         >
-          <Text size="lg">M</Text>
+          <Text preset="body-lg">M</Text>
         </div>
         <Link className="mb-4">
           <Heading as="h2" preset="headline-sm">
@@ -330,22 +330,22 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
             <thead>
               <tr>
                 <th>
-                  <Text size="xs">Questions received</Text>
+                  <Text preset="body-xs">Questions received</Text>
                 </th>
                 <th>
-                  <Text size="xs">Reflections submitted</Text>
+                  <Text preset="body-xs">Reflections submitted</Text>
                 </th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td>
-                  <Text className="text-center" size="lg">
+                  <Text className="text-center" preset="body-lg">
                     10
                   </Text>
                 </td>
                 <td>
-                  <Text className="text-center" size="lg">
+                  <Text className="text-center" preset="body-lg">
                     8
                   </Text>
                 </td>
@@ -355,7 +355,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
         </div>
 
         <div className={styles['watch-page__teacher-notes-heading']}>
-          <Text size="xs">Your personal notes</Text>
+          <Text preset="body-xs">Your personal notes</Text>
           <Tooltip
             childNotInteractive
             text={

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -316,7 +316,7 @@ export const UsingComplexHeaders: Story = {
       <>
         <Accordion.Row>
           <Accordion.Button>
-            <Text size="lg">
+            <Text preset="body-lg">
               <Icon
                 className="m-2"
                 name="check-circle"
@@ -335,7 +335,7 @@ export const UsingComplexHeaders: Story = {
         </Accordion.Row>
         <Accordion.Row>
           <Accordion.Button>
-            <Text size="lg">
+            <Text preset="body-lg">
               <Icon
                 className="m-2"
                 name="check-circle"
@@ -373,7 +373,7 @@ export const UsingNumberIconInHeaders: Story = {
           <Accordion.Button>
             <div className="flex flex-wrap items-center gap-2">
               <NumberIcon aria-label="Step 1" number={1} />
-              <Text size="lg">Step 1</Text>
+              <Text preset="body-lg">Step 1</Text>
             </div>
           </Accordion.Button>
           <Accordion.Panel>
@@ -387,7 +387,7 @@ export const UsingNumberIconInHeaders: Story = {
           <Accordion.Button>
             <div className="items flex flex-wrap items-center gap-2">
               <NumberIcon aria-label="Step 2" number={2} />
-              <Text size="lg">Step 2</Text>
+              <Text preset="body-lg">Step 2</Text>
             </div>
           </Accordion.Button>
           <Accordion.Panel>

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -1629,7 +1629,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
           class="heading heading--headline-md accordion-button__heading"
         >
           <p
-            class="text text--lg"
+            class="text text--body-lg"
           >
             <svg
               aria-hidden="true"
@@ -1681,7 +1681,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
           class="heading heading--headline-md accordion-button__heading"
         >
           <p
-            class="text text--lg"
+            class="text text--body-lg"
           >
             <svg
               aria-hidden="true"
@@ -1754,7 +1754,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
               1
             </span>
             <p
-              class="text text--lg"
+              class="text text--body-lg"
             >
               Step 1
             </p>
@@ -1803,7 +1803,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
               2
             </span>
             <p
-              class="text text--lg"
+              class="text text--body-lg"
             >
               Step 2
             </p>

diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -131,29 +131,21 @@ export const LoadingProfileCard: StoryObj<Args> = {
             {!isLoading && (
               <>
                 <Avatar size="lg" user={{ fullName: 'Josephine Smith' }} />
-                <Text
-                  className="mb-2 mt-2"
-                  variant="neutral-strong"
-                  weight="bold"
-                >
+                <Text className="mb-2 mt-2 text-neutral-strong">
                   Example Job Title
                 </Text>
-                <Text
-                  className="mb-2 mt-2"
-                  variant="neutral-strong"
-                  weight="bold"
-                >
+                <Text className="mb-2 mt-2 text-neutral-strong">
                   Example Company Name
                 </Text>
                 <Hr />
-                <Text className="mb-2 mt-2" variant="neutral-medium">
+                <Text className="mb-2 mt-2 text-neutral-default">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Mollitia dolorem doloribus laudantium magnam. Laboriosam!
                 </Text>
-                <Text className="mb-2 mt-2" variant="neutral-medium">
+                <Text className="mb-2 mt-2 text-neutral-default">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 </Text>
-                <Text className="mb-2 mt-2" variant="neutral-medium">
+                <Text className="mb-2 mt-2 text-neutral-default">
                   Lorem ipsum dolor sit amet.
                 </Text>
               </>

diff --git a/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap b/src/components/FieldNote/__snapshots__/FieldNote.test.ts.snap
@@ -44,7 +44,7 @@ exports[`<FieldNote /> WithText story renders snapshot 1`] = `
     class="max-w-xl"
   >
     <p
-      class="text text--body mb-6"
+      class="text text--body-md mb-6"
     >
       Here is a field note that involves:
     </p>

diff --git a/src/components/HorizontalStepper/HorizontalStepper.module.css b/src/components/HorizontalStepper/HorizontalStepper.module.css
@@ -91,6 +91,8 @@
 .horizontal-step__text {
   /* Hides text for smaller screen sizes. */
   display: none;
+  font-weight: var(--eds-font-weight-bold);
+
   @media all and (min-width: $eds-bp-md) {
     display: inline;
     /* Hides overflow text with ellipsis. */

diff --git a/src/components/HorizontalStepper/HorizontalStepper.tsx b/src/components/HorizontalStepper/HorizontalStepper.tsx
@@ -192,9 +192,7 @@ export const HorizontalStep = ({
       <Text
         as="span"
         className={styles['horizontal-step__text']}
-        size="sm"
-        variant="inherit"
-        weight="bold"
+        preset="body-sm"
       >
         {text}
       </Text>