Update Design Tokens & Add New Text Variants (#19853)

* update button font weight to medium * update design-tokens and add new Text medium * undo button base weight change * fix unused import * update snapshot * fix yarn dedupe * update readme
2024-12-22 09:23:21 +01:00 · 2023-06-30 11:35:43 -07:00 · 2023-06-30 11:35:43 -07:00 · a41219ceb8
commit a41219ceb8
parent 8404b8a3fc
10 changed files with 48 additions and 9 deletions
--- a/.storybook/3.COLORS.stories.mdx
+++ b/.storybook/3.COLORS.stories.mdx
@ -50,7 +50,13 @@ Theme colors are color agnostic, semantically neutral and theme compatible desig
 ```css
 /** Backgrounds */
 var(--color-background-default)
+var(--color-background-default-hover)
+var(--color-background-default-pressed)
 var(--color-background-alternative)
+var(--color-background-alternative-hover)
+var(--color-background-alternative-pressed)
+var(--color-background-hover)
+var(--color-background-pressed)

 /** Text */
 var(--color-text-default)
--- a/package.json
+++ b/package.json
@ -230,7 +230,7 @@
    "@metamask/browser-passworder": "^4.1.0",
    "@metamask/contract-metadata": "^2.3.1",
    "@metamask/controller-utils": "^4.0.1",
-    "@metamask/design-tokens": "^1.9.0",
+    "@metamask/design-tokens": "^1.12.0",
    "@metamask/desktop": "^0.3.0",
    "@metamask/eth-json-rpc-middleware": "^11.0.0",
    "@metamask/eth-keyring-controller": "^10.0.1",
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@ -8,7 +8,7 @@ import { Text } from '../text';

 import {
  AlignItems,
-  DISPLAY,
+  Display,
  JustifyContent,
  TextColor,
  TextVariant,
@ -65,7 +65,7 @@ export const ButtonBase = ({
        className,
      )}
      disabled={disabled}
-      display={DISPLAY.INLINE_FLEX}
+      display={Display.InlineFlex}
      justifyContent={JustifyContent.center}
      alignItems={AlignItems.center}
      borderRadius={BorderRadius.pill}
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@ -31,9 +31,12 @@ Use the `variant` prop and the `TextVariant` enum from `./ui/helpers/constants/d
 - TextVariant.bodyLgMedium (default renders as `p` tag)
 - TextVariant.bodyMd (default renders as `p` tag)
 - TextVariant.bodyMdBold (default renders as `p` tag)
+- TextVariant.bodyMdMedium (default renders as `p` tag)
 - TextVariant.bodySm (default renders as `p` tag)
+- TextVariant.bodySmMedium (default renders as `p` tag)
 - TextVariant.bodySmBold (default renders as `p` tag)
 - TextVariant.bodyXs (default renders as `p` tag)
+- TextVariant.bodyXsMedium (default renders as `p` tag)
 - TextVariant.inherit (default renders as `span` tag)

 <Canvas>
@ -51,9 +54,12 @@ import { TextVariant } from '../../../helpers/constants/design-system';
 <Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
 <Text variant={TextVariant.bodyMd}>body-md</Text>
 <Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
+<Text variant={TextVariant.bodyMdMedium}>body-md-medium</Text>
 <Text variant={TextVariant.bodySm}>body-sm</Text>
+<Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
 <Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
 <Text variant={TextVariant.bodyXs}>body-xs</Text>
+<Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
 <Text variant={TextVariant.inherit}>inherit</Text>
 ```

--- a/ui/components/component-library/text/snapshots/text.test.tsx.snap
+++ b/ui/components/component-library/text/snapshots/text.test.tsx.snap
@ -32,6 +32,11 @@ exports[`Text should render the Text with proper variant class name 1`] = `
  >
    body-md
  </p>
+  <p
+    class="box mm-text mm-text--body-md-medium box--flex-direction-row box--color-text-default"
+  >
+    body-md-medium
+  </p>
  <p
    class="box mm-text mm-text--body-md-bold box--flex-direction-row box--color-text-default"
  >
@ -42,6 +47,11 @@ exports[`Text should render the Text with proper variant class name 1`] = `
  >
    body-sm
  </p>
+  <p
+    class="box mm-text mm-text--body-sm-medium box--flex-direction-row box--color-text-default"
+  >
+    body-sm-medium
+  </p>
  <p
    class="box mm-text mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
  >
@ -52,5 +62,10 @@ exports[`Text should render the Text with proper variant class name 1`] = `
  >
    body-xs
  </p>
+  <p
+    class="box mm-text mm-text--body-xs-medium box--flex-direction-row box--color-text-default"
+  >
+    body-xs-medium
+  </p>
 </div>
 `;
--- a/ui/components/component-library/text/text.scss
+++ b/ui/components/component-library/text/text.scss
@ -4,7 +4,7 @@
 $text-variants: (
  display: ("md"),
  heading: ( "sm", "md", "lg"),
-  body: ("xs", "sm", "sm-bold", "md", "md-bold", "lg-medium"),
+  body: ("xs", "xs-medium", "sm", "sm-medium", "sm-bold", "md", "md-medium", "md-bold", "lg-medium"),
 );

 // Variable output mixin
--- a/ui/components/component-library/text/text.test.tsx
+++ b/ui/components/component-library/text/text.test.tsx
@ -76,10 +76,13 @@ describe('Text', () => {
        <Text variant={TextVariant.headingSm}>heading-sm</Text>
        <Text variant={TextVariant.bodyLgMedium}>body-lg-medium</Text>
        <Text variant={TextVariant.bodyMd}>body-md</Text>
+        <Text variant={TextVariant.bodyMdMedium}>body-md-medium</Text>
        <Text variant={TextVariant.bodyMdBold}>body-md-bold</Text>
        <Text variant={TextVariant.bodySm}>body-sm</Text>
+        <Text variant={TextVariant.bodySmMedium}>body-sm-medium</Text>
        <Text variant={TextVariant.bodySmBold}>body-sm-bold</Text>
        <Text variant={TextVariant.bodyXs}>body-xs</Text>
+        <Text variant={TextVariant.bodyXsMedium}>body-xs-medium</Text>
      </>,
    );

@ -89,10 +92,13 @@ describe('Text', () => {
    expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm');
    expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium');
    expect(getByText('body-md')).toHaveClass('mm-text--body-md');
+    expect(getByText('body-md-medium')).toHaveClass('mm-text--body-md-medium');
    expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold');
    expect(getByText('body-sm')).toHaveClass('mm-text--body-sm');
+    expect(getByText('body-sm-medium')).toHaveClass('mm-text--body-sm-medium');
    expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold');
    expect(getByText('body-xs')).toHaveClass('mm-text--body-xs');
+    expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium');
    expect(container).toMatchSnapshot();
  });

--- a/ui/components/component-library/text/text.types.ts
+++ b/ui/components/component-library/text/text.types.ts
@ -86,9 +86,12 @@ export interface TextProps extends BoxProps {
   * `headingSm` large screen: 18px / small screen: 16px,
   * `bodyLgMedium` large screen: 18px / small screen: 16px,
   * `bodyMd` large screen: 16px / small screen: 14px,
+   * `bodyMdMedium` large screen: 16px / small screen: 14px,
   * `bodyMdBold` large screen: 16px / small screen: 14px,
   * `bodySm` large screen: 14px / small screen: 12px,
+   * `bodySmMedium` large screen: 14px / small screen: 12px,
   * `bodySmBold` large screen: 14px / small screen: 12px,
+   * `bodyXsMedium` large screen: 12px / small screen: 10px,
   * `bodyXs` large screen: 12px / small screen: 10px,
   * `inherit`
   */
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@ -187,10 +187,13 @@ export enum TextVariant {
  headingSm = 'heading-sm',
  bodyLgMedium = 'body-lg-medium',
  bodyMd = 'body-md',
+  bodyMdMedium = 'body-md-medium',
  bodyMdBold = 'body-md-bold',
  bodySm = 'body-sm',
+  bodySmMedium = 'body-sm-medium',
  bodySmBold = 'body-sm-bold',
  bodyXs = 'body-xs',
+  bodyXsMedium = 'body-xs-medium',
  inherit = 'inherit',
 }

--- a/yarn.lock
+++ b/yarn.lock
@ -4024,10 +4024,10 @@ __metadata:
  languageName: node
  linkType: hard

-"@metamask/design-tokens@npm:^1.6.0, @metamask/design-tokens@npm:^1.9.0":
-  version: 1.11.1
-  resolution: "@metamask/design-tokens@npm:1.11.1"
-  checksum: 38677f66167861826c35f7b0e6efc3c69269178e3dad5de41a9c9a7925dfb1f560f673e02a51acd7f7983762546130132f83dcaefe8ab47e16301775cff0b968
+"@metamask/design-tokens@npm:^1.12.0, @metamask/design-tokens@npm:^1.6.0":
+  version: 1.12.0
+  resolution: "@metamask/design-tokens@npm:1.12.0"
+  checksum: 9b6c5485c846171aa7fcef03cbe93b4d94ffaa76faf953aa27a689fd3d494438cd657de6ea1aa5a40cc2af15dcf10f8dd860fd3d90f5e9806807e37020bdccd9
  languageName: node
  linkType: hard

@ -24489,7 +24489,7 @@ __metadata:
    "@metamask/browser-passworder": ^4.1.0
    "@metamask/contract-metadata": ^2.3.1
    "@metamask/controller-utils": ^4.0.1
-    "@metamask/design-tokens": ^1.9.0
+    "@metamask/design-tokens": ^1.12.0
    "@metamask/desktop": ^0.3.0
    "@metamask/eslint-config": ^9.0.0
    "@metamask/eslint-config-jest": ^9.0.0