fix(Button): update typography tokens to match design (#2019)

- create missing button small token and use in component - truncate some button labels in stories - update snapshots
chanzuckerberg · Jul 17, 2024 · 3b94114 · 3b94114
1 parent d76d5bb
commit 3b94114
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 36 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -132,8 +132,9 @@
   "eds-theme-typography-overline-sm": "var(--eds-typography-preset-012)",
   "eds-theme-typography-callout": "var(--eds-typography-preset-002-light)",
   "eds-theme-typography-breadcrumb": "var(--eds-typography-preset-009)",
-  "eds-theme-typography-button-lg": "var(--eds-typography-preset-006)",
-  "eds-theme-typography-button-md": "var(--eds-typography-preset-006)",
+  "eds-theme-typography-button-lg": "var(--eds-typography-preset-005)",
+  "eds-theme-typography-button-md": "var(--eds-typography-preset-005)",
+  "eds-theme-typography-button-sm": "var(--eds-typography-preset-009)",
   "eds-theme-typography-button-label": "var(--eds-typography-preset-006)",
   "eds-theme-typography-button-label-sm": "var(--eds-typography-preset-008-bold)",
   "eds-theme-typography-form-label": "var(--eds-typography-preset-006)",

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -87,8 +87,7 @@
 
 .button--sm {
   padding: calc(var(--eds-size-half) / 16 * 1rem) 1.33333333rem;
-  /* TODO: need eds-theme-typography-button-sm => preset-009 */
-  font: var(--eds-typography-preset-009);
+  font: var(--eds-theme-typography-button-sm);
 
   min-width: calc(var(--eds-size-6) / 16 * 1rem);
   max-width: calc(var(--eds-size-24) / 16 * 1rem);;

diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -226,7 +226,7 @@ export const WithHorizontalPrimaryButton: Story = {
           <ButtonGroup>
             {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
             <Button onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
           </ButtonGroup>
         </Card.Footer>
@@ -264,7 +264,7 @@ export const TopStripe: Story = {
           <ButtonGroup>
             {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
             <Button onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
           </ButtonGroup>
         </Card.Footer>
@@ -296,7 +296,7 @@ export const CustomTopStripe: Story = {
           <ButtonGroup>
             {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
             <Button onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
           </ButtonGroup>
         </Card.Footer>
@@ -327,7 +327,7 @@ export const BackgroundCallout: Story = {
           <ButtonGroup>
             {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
             <Button onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
           </ButtonGroup>
         </Card.Footer>

diff --git a/src/components/Card/__snapshots__/Card.test.ts.snap b/src/components/Card/__snapshots__/Card.test.ts.snap
@@ -87,7 +87,7 @@ exports[`<Card /> BackgroundCallout story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
       </div>
@@ -387,7 +387,7 @@ exports[`<Card /> CustomTopStripe story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
       </div>
@@ -576,7 +576,7 @@ exports[`<Card /> TopStripe story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
       </div>
@@ -894,7 +894,7 @@ exports[`<Card /> WithHorizontalPrimaryButton story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
       </div>

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -63,7 +63,7 @@ export const Default: Story = {
       <Modal.Footer>
         <ButtonGroup>
           <Button onClick={() => {}} rank="primary">
-            Primary Action
+            Primary
           </Button>
           <Button onClick={() => {}} rank="secondary">
             Secondary
@@ -170,7 +170,7 @@ export const WithLongTextScrollable: StoryObj<InteractiveArgs> = {
       <Modal.Footer>
         <ButtonGroup>
           <Button onClick={() => {}} rank="primary">
-            Primary Action
+            Primary
           </Button>
           <Button onClick={() => {}} rank="secondary">
             Secondary
@@ -215,7 +215,7 @@ export const ContentDefault: Story = {
         <Modal.Footer>
           <ButtonGroup>
             <Button onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
             <Button onClick={() => {}} rank="secondary">
               Secondary
@@ -301,7 +301,7 @@ export const LayoutVertical: Story = {
         <Modal.Footer>
           <ButtonGroup buttonLayout="vertical">
             <Button isFullWidth onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
             <Button isFullWidth onClick={() => {}} rank="secondary">
               Secondary
@@ -344,7 +344,7 @@ export const LayoutVerticalWithTertiary: Story = {
         <Modal.Footer>
           <ButtonGroup buttonLayout="vertical">
             <Button isFullWidth onClick={() => {}} rank="primary">
-              Primary Action
+              Primary
             </Button>
             <Button isFullWidth onClick={() => {}} rank="tertiary">
               Tertiary

diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`Modal ContentDefault story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -164,7 +164,7 @@ exports[`Modal Default story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
         <button
@@ -263,7 +263,7 @@ exports[`Modal HighEmphasis story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
         <button
@@ -348,7 +348,7 @@ exports[`Modal Large story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -432,7 +432,7 @@ exports[`Modal LargeAuto story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -516,7 +516,7 @@ exports[`Modal LargeMax story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -600,7 +600,7 @@ exports[`Modal LayoutVertical story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -684,7 +684,7 @@ exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -768,7 +768,7 @@ exports[`Modal Mobile story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -852,7 +852,7 @@ exports[`Modal MobileLandscape story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -936,7 +936,7 @@ exports[`Modal Small story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -1020,7 +1020,7 @@ exports[`Modal Tablet story renders snapshot 1`] = `
         <span
           class="button__text"
         >
-          Primary Action
+          Primary
         </span>
       </button>
       <button
@@ -1238,7 +1238,7 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
           <span
             class="button__text"
           >
-            Primary Action
+            Primary
           </span>
         </button>
         <button

diff --git a/src/design-tokens/tier-3-component/buttons-typography.json b/src/design-tokens/tier-3-component/buttons-typography.json
@@ -4,10 +4,13 @@
       "typography": {
         "button": {
           "lg": {
-            "value": "var(--eds-typography-preset-006)"
+            "value": "var(--eds-typography-preset-005)"
           },
           "md": {
-            "value": "var(--eds-typography-preset-006)"
+            "value": "var(--eds-typography-preset-005)"
+          },
+          "sm": {
+            "value": "var(--eds-typography-preset-009)"
           },
           "label": {
             "@": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -287,8 +287,9 @@
   --eds-theme-typography-form-label: var(--eds-typography-preset-006);
   --eds-theme-typography-button-label-sm: var(--eds-typography-preset-008-bold); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-typography-button-label: var(--eds-typography-preset-006); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-theme-typography-button-md: var(--eds-typography-preset-006);
-  --eds-theme-typography-button-lg: var(--eds-typography-preset-006);
+  --eds-theme-typography-button-sm: var(--eds-typography-preset-009);
+  --eds-theme-typography-button-md: var(--eds-typography-preset-005);
+  --eds-theme-typography-button-lg: var(--eds-typography-preset-005);
   --eds-theme-typography-breadcrumb: var(--eds-typography-preset-009);
   --eds-theme-typography-callout: var(--eds-typography-preset-002-light);
   --eds-theme-typography-overline-sm: var(--eds-typography-preset-012);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -262,8 +262,9 @@
         "callout": "var(--eds-typography-preset-002-light)",
         "breadcrumb": "var(--eds-typography-preset-009)",
         "button": {
-          "lg": "var(--eds-typography-preset-006)",
-          "md": "var(--eds-typography-preset-006)",
+          "lg": "var(--eds-typography-preset-005)",
+          "md": "var(--eds-typography-preset-005)",
+          "sm": "var(--eds-typography-preset-009)",
           "label": {
             "@": "var(--eds-typography-preset-006)",
             "sm": "var(--eds-typography-preset-008-bold)"