chore: updating old button and removing deprecated disabled colors by georgewrmarshall · Pull Request #24970 · MetaMask/metamask-extension

georgewrmarshall · 2024-05-31T23:03:15Z

Description

This pull request removes the primary-disabled and error-disabled colors in preparation for upgrading to design token v4. The updates include modifications to the old button component, and the removal of these colors from styles and helpers.

Related issues

Fixes: #24962 #24963

Manual testing steps

Go to the storybook build of this PR
Go to the old button component and check that it works as expected for all types in disabled state
Search for deprecated instances of primary-disabled and error-disabled to ensure none remain

Screenshots/Recordings

Before

before720.mov

After

after720.mov

Pre-merge author checklist

I’ve followed MetaMask Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2024-05-31T23:03:28Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

…sabled colors

georgewrmarshall · 2024-05-31T23:20:17Z

.storybook/3.COLORS.stories.mdx

+  --color-border-primary-hover: var(--color-primary-default-hover);

  .btn-primary {
    background-color: var(--color-background-primary);


Updating color documentation

Before

color.docs720.mov

After

after720.mov

georgewrmarshall · 2024-05-31T23:23:02Z

ui/components/ui/button/buttons.scss

  &[disabled] {
    cursor: auto;
-    opacity: 0.5;
+    opacity: var(--opacity-disabled);


Uses the global opacity token which = 0.5

https://github.com/MetaMask/metamask-extension/blob/develop/ui/components/component-library/component-library-components.scss#L10

georgewrmarshall · 2024-05-31T23:27:41Z

ui/components/ui/button/buttons.scss

  }
-
-  &--disabled,
-  &[disabled] {
-    opacity: 1;
-    color: var(--color-error-disabled);
-  }
 }


Warning disabled works as expected checking local branch against develop branch GitHub storybook

warning720.mov

georgewrmarshall · 2024-05-31T23:28:50Z

ui/css/design-system/_colors.scss

  'primary-alternative': --color-primary-alternative,
  'primary-muted': --color-primary-muted,
  'primary-inverse': --color-primary-inverse,
-  'primary-disabled': --color-primary-disabled,


No instances of primary-disabled exists

georgewrmarshall · 2024-05-31T23:29:12Z

ui/css/design-system/_colors.scss

  'error-alternative': --color-error-alternative,
  'error-muted': --color-error-muted,
  'error-inverse': --color-error-inverse,
-  'error-disabled': --color-error-disabled,


No instances of error-disabled exist in code base

georgewrmarshall · 2024-05-31T23:29:45Z

ui/helpers/constants/design-system.ts

  primaryAlternative = 'primary-alternative',
  primaryMuted = 'primary-muted',
  primaryInverse = 'primary-inverse',
-  primaryDisabled = 'primary-disabled',


No instances of primaryDisabled used in codebase

georgewrmarshall · 2024-05-31T23:30:04Z

ui/helpers/constants/design-system.ts

  errorAlternative = 'error-alternative',
  errorMuted = 'error-muted',
  errorInverse = 'error-inverse',
-  errorDisabled = 'error-disabled',


no instances of errorDisabled used in code base

georgewrmarshall · 2024-05-31T23:32:27Z

ui/components/ui/button/buttons.scss

 .btn-secondary {
  color: var(--color-primary-default);
-  border: 1px solid var(--color-primary-muted);
+  border: 1px solid var(--color-primary-default);
  background-color: var(--color-background-default);

  &:hover {
    border-color: var(--color-primary-default);
  }

  &:active {
-    background: var(--color-primary-muted);
+    color: var(--color-primary-inverse);
+    background: var(--color-primary-default);
    border-color: var(--color-primary-default);
  }
-
-  &--disabled,
-  &[disabled] {
-    opacity: 1;
-    color: var(--color-primary-muted);
-  }
 }


Checking secondary type button local build against develop github storybook works as expected

after.secondary720.mov

georgewrmarshall · 2024-05-31T23:35:53Z

ui/components/ui/button/buttons.scss

-    opacity: 1;
-    color: var(--color-text-muted);
+    opacity: var(--opacity-disabled);


Button default adheres to design system standards and works as expected when comparing against develop github storybook

after.default720.mov

georgewrmarshall · 2024-05-31T23:35:55Z

ui/components/ui/button/buttons.scss

-
-  &--disabled,
-  &[disabled] {
-    opacity: 1;
-    border-color: var(--color-error-disabled);
-    background-color: var(--color-error-disabled);
-  }


Button danger primary works as expected checking local branch storybook against develop github storybook

after.danger720.mov

georgewrmarshall · 2024-05-31T23:37:59Z

ui/components/ui/button/buttons.scss

 input[type="submit"][disabled] {
  cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--opacity-disabled);


var(--opacity-disabled) = 0.5

https://github.com/MetaMask/metamask-extension/blob/develop/ui/components/component-library/component-library-components.scss#L10

georgewrmarshall · 2024-05-31T23:38:02Z

ui/components/ui/button/buttons.scss

-    opacity: 1;
    pointer-events: none;
-    color: var(--color-primary-disabled);


Button link works as expected when comparing local against develop github storybook

link.after720.mov

georgewrmarshall · 2024-05-31T23:38:41Z

ui/components/ui/button/buttons.scss

-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-primary-disabled);
-      color: var(--color-primary-disabled);
-    }
-


duplicate CSS

georgewrmarshall · 2024-05-31T23:38:49Z

ui/components/ui/button/buttons.scss

-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-border-muted);
-      color: var(--color-text-muted);
-    }
-


duplicate CSS

georgewrmarshall · 2024-05-31T23:38:53Z

ui/components/ui/button/buttons.scss

-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-error-disabled);
-      color: var(--color-error-disabled);
-    }
-


duplicate CSS

georgewrmarshall · 2024-05-31T23:38:57Z

ui/components/ui/button/buttons.scss

-    &--disabled,
-    &[disabled] {
-      background-color: var(--color-primary-disabled);
-    }
-


duplicate CSS

georgewrmarshall · 2024-05-31T23:39:02Z

ui/components/ui/button/buttons.scss

-    &--disabled,
-    &[disabled] {
-      background-color: var(--color-error-disabled);
-    }
-


duplicate CSS

georgewrmarshall · 2024-05-31T23:39:09Z

ui/components/ui/button/buttons.scss

-    opacity: 1;
    pointer-events: none;
-    color: var(--color-primary-disabled);


duplicate CSS

codecov · 2024-05-31T23:50:53Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.70%. Comparing base (0b0bf11) to head (0c23ef4).
Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24970      +/-   ##
===========================================
- Coverage    65.70%   65.70%   -0.00%     
===========================================
  Files         1366     1366              
  Lines        54361    54359       -2     
  Branches     14141    14141              
===========================================
- Hits         35716    35713       -3     
- Misses       18645    18646       +1

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

metamaskbot · 2024-06-01T00:03:47Z

Builds ready [0c23ef4]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (50 ± 3 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	71	109	83	10	5
		domContentLoaded	9	20	11	2	1
		load	42	63	50	6	3
		domInteractive	9	20	11	2	1

georgewrmarshall added the team-design-system All issues relating to design system in Extension label May 31, 2024

georgewrmarshall self-assigned this May 31, 2024

chore: updating old button and removing primaru-disabled and error-di…

e09b865

…sabled colors

georgewrmarshall force-pushed the remove-primary-disabled-color branch from a9936a9 to e09b865 Compare May 31, 2024 23:13

docs: updating color docs with new tokens

0c23ef4

georgewrmarshall commented May 31, 2024

View reviewed changes

georgewrmarshall marked this pull request as ready for review May 31, 2024 23:45

georgewrmarshall requested a review from a team as a code owner May 31, 2024 23:45

georgewrmarshall requested a review from brianacnguyen May 31, 2024 23:48

brianacnguyen approved these changes Jun 3, 2024

View reviewed changes

sahar-fehri approved these changes Jun 4, 2024

View reviewed changes

georgewrmarshall merged commit 88b0fdb into develop Jun 4, 2024

georgewrmarshall deleted the remove-primary-disabled-color branch June 4, 2024 17:52

github-actions bot locked and limited conversation to collaborators Jun 4, 2024

metamaskbot added the release-11.18.0 label Jun 4, 2024

gauthierpetetin added the release-12.0.0 Issue or pull request that will be included in release 12.0.0 label Jun 6, 2024

Conversation

georgewrmarshall commented May 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented May 31, 2024

Uh oh!

georgewrmarshall May 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Before

After

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented May 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

metamaskbot commented Jun 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

georgewrmarshall commented May 31, 2024 •

edited

Loading

georgewrmarshall May 31, 2024 •

edited

Loading

codecov bot commented May 31, 2024 •

edited

Loading