Skip to content

chore: removing deprecated button color css variables#25125

Merged
georgewrmarshall merged 2 commits intodevelopfrom
remove-deprecated-button-colors
Jun 7, 2024
Merged

chore: removing deprecated button color css variables#25125
georgewrmarshall merged 2 commits intodevelopfrom
remove-deprecated-button-colors

Conversation

@georgewrmarshall
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall commented Jun 6, 2024

Description

This pull request removes the deprecated button component colors in preparation for upgrading to design token v4.

Open in GitHub Codespaces

Related issues

Fixes: #24965

Manual testing steps

  1. Go the storybook build of this PR or pull this branch and run yarn storybook
  2. Check the Shadows documentation to ensure primary and error shadows work as expected
  3. Search ButtonPrimary and ButtonSecondary
  4. Hover over the button components and make sure the shadows are present

Screenshots/Recordings

Before/After scereenshots/recordings in code comments for easier review and context

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.

@georgewrmarshall georgewrmarshall self-assigned this Jun 6, 2024
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jun 6, 2024

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.

@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system in Extension label Jun 6, 2024
Comment on lines +4 to +6
box-shadow:
var(--shadow-size-sm)
var(--color-primary-shadow);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Searching --component-button-primary-shadow returns no results

Screenshot 2024-06-06 at 2 57 13 PM

Comment on lines +18 to +20
box-shadow:
var(--shadow-size-sm)
var(--color-error-shadow);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Searching --component-button-danger-shadow returns no results

Screenshot 2024-06-06 at 2 58 06 PM

var(--color-error-shadow);
}

&:active {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shadows for the ButtonPrimary component work as expected

Before

before.primary720.mov

After

after.primary720.mov

box-shadow:
var(--shadow-size-sm)
var(--color-error-shadow);
}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before

Shadows for the ButtonSecondary component work as expected

Before

before.secondary720.mov

After

after.secondary.mov

boxShadow: 'var(--shadow-size-sm) var(--color-error-shadow)',
backgroundColor: 'var(--color-error-default)',
color: 'var(--color-error-inverse)',
}}
Copy link
Copy Markdown
Contributor Author

@georgewrmarshall georgewrmarshall Jun 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updating shadow docs: there will be a future update where we change:

  • --color-error-shadow to --color-shadow-error
  • --color-primary-shadow to --color-shadow-primary

But that will happen in the PR that upgrades to design tokens v4.

Before

before.shadows720.mov

After

after.shadows720.mov

@georgewrmarshall georgewrmarshall marked this pull request as ready for review June 6, 2024 22:16
@georgewrmarshall georgewrmarshall requested review from a team as code owners June 6, 2024 22:16
@georgewrmarshall georgewrmarshall added the needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. label Jun 6, 2024
@codecov
Copy link
Copy Markdown

codecov bot commented Jun 6, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.66%. Comparing base (a7fbbd3) to head (ce1b375).
Report is 3 commits behind head on develop.

Additional details and impacted files
@@           Coverage Diff            @@
##           develop   #25125   +/-   ##
========================================
  Coverage    65.66%   65.66%           
========================================
  Files         1359     1359           
  Lines        54014    54014           
  Branches     14015    14015           
========================================
  Hits         35464    35464           
  Misses       18550    18550           

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

height: 100,
backgroundColor: 'var(--color-primary-default)',
boxShadow: 'var(--shadow-size-lg) var(--color-primary-shadow',
boxShadow: 'var(--shadow-size-lg) var(--color-primary-shadow)',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yikes

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [ce1b375]
Page Load Metrics (134 ± 167 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint801038973
domContentLoaded9151111
load461653134349167
domInteractive9151111
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 0 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@georgewrmarshall georgewrmarshall merged commit ddf0e93 into develop Jun 7, 2024
@georgewrmarshall georgewrmarshall deleted the remove-deprecated-button-colors branch June 7, 2024 19:54
@github-actions github-actions bot locked and limited conversation to collaborators Jun 7, 2024
@metamaskbot metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. release-12.1.0 Issue or pull request that will be included in release 12.1.0 team-design-system All issues relating to design system in Extension

Projects

None yet

Development

Successfully merging this pull request may close these issues.

chore: remove all instances of component-button colors

4 participants