feat: add background-muted color to design system #29117

georgewrmarshall · 2024-12-11T22:02:24Z

Description

This PR adds support for the new background-muted color introduced in @metamask/design-tokens v4.2.0.

Related issues

Fixes: N/A

Manual testing steps

Open Storybook
Navigate to Box component stories
Verify new background-muted color appears in BackgroundColor story
Verify color applies correctly when selected

Screenshots/Recordings

Before

before720.mov

After

after720.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension 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

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-12-11T22:02:37Z

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 · 2024-12-11T22:03:39Z

ui/components/component-library/box/box.stories.tsx

+      <Box padding={3} backgroundColor={BackgroundColor.backgroundMuted}>
+        <Text color={TextColor.textDefault}>
+          BackgroundColor.backgroundMuted
+        </Text>
+      </Box>


Updating Box component stories

georgewrmarshall · 2024-12-11T22:35:53Z

...onents/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap

@@ -150,7 +150,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"


Updates toggle button color which uses the JSinCSS tokens

metamaskbot · 2024-12-11T23:10:40Z

Builds ready [54bf90e]

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, 6
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1673 ± 51 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1502	1902	1676	105	51
		domContentLoaded	1484	1849	1645	100	48
		load	1509	1902	1673	106	51
		domInteractive	24	86	44	20	10
		backgroundConnect	7	65	32	20	9
		firstReactRender	16	97	50	32	15
		getState	5	71	16	18	9
		initialActions	0	1	0	0	0
		loadScripts	1086	1398	1241	79	38
		setupStore	6	81	19	24	11
		uiStartup	1683	2543	1966	265	127

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 1.81 KiB (0.02%)
common: 74 Bytes (0.00%)

metamaskbot · 2024-12-12T21:09:24Z

Builds ready [526b29f]

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, 6
- common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1771 ± 66 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1573	2076	1778	139	67
		domContentLoaded	1523	2048	1742	136	65
		load	1574	2118	1771	138	66
		domInteractive	26	166	50	33	16
		backgroundConnect	7	69	25	18	9
		firstReactRender	16	82	43	26	12
		getState	4	78	24	24	11
		initialActions	0	0	0	0	0
		loadScripts	1142	1604	1317	122	59
		setupStore	6	52	11	10	5
		uiStartup	1799	2374	2024	162	78

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 74 Bytes (0.00%)

georgewrmarshall requested review from a team as code owners December 11, 2024 22:02

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

georgewrmarshall self-assigned this Dec 11, 2024

metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Dec 11, 2024

georgewrmarshall commented Dec 11, 2024

View reviewed changes

georgewrmarshall force-pushed the fix/design-tokens-4.2 branch from 652af13 to 8579798 Compare December 11, 2024 22:09

chore: updating design tokens and adding background muted

8074ac3

georgewrmarshall force-pushed the fix/design-tokens-4.2 branch from 8579798 to 8074ac3 Compare December 11, 2024 22:11

georgewrmarshall mentioned this pull request Dec 11, 2024

feat: cross-chain swaps ui re-design #28373

Merged

7 tasks

brianacnguyen previously approved these changes Dec 11, 2024

View reviewed changes

georgewrmarshall dismissed brianacnguyen’s stale review via 7707eb7 December 11, 2024 22:24

georgewrmarshall requested a review from brianacnguyen December 11, 2024 22:27

georgewrmarshall force-pushed the fix/design-tokens-4.2 branch from 7707eb7 to 122ad28 Compare December 11, 2024 22:34

georgewrmarshall requested a review from a team as a code owner December 11, 2024 22:34

georgewrmarshall commented Dec 11, 2024

View reviewed changes

chore: updating failing snapshots

54bf90e

georgewrmarshall force-pushed the fix/design-tokens-4.2 branch from 122ad28 to 54bf90e Compare December 11, 2024 22:38

brianacnguyen approved these changes Dec 12, 2024

View reviewed changes

vinnyhoward approved these changes Dec 12, 2024

View reviewed changes

georgewrmarshall added this pull request to the merge queue Dec 12, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 12, 2024

Merge branch 'main' into fix/design-tokens-4.2

526b29f

georgewrmarshall added this pull request to the merge queue Dec 12, 2024

Merged via the queue into main with commit ea75bf8 Dec 12, 2024
77 checks passed

georgewrmarshall deleted the fix/design-tokens-4.2 branch December 12, 2024 21:47

github-actions bot locked and limited conversation to collaborators Dec 12, 2024

metamaskbot added the release-12.10.2 Issue or pull request that will be included in release 12.10.2 label Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add background-muted color to design system #29117

feat: add background-muted color to design system #29117

georgewrmarshall commented Dec 11, 2024 •

edited

Loading

github-actions bot commented Dec 11, 2024

georgewrmarshall Dec 11, 2024

georgewrmarshall Dec 11, 2024

metamaskbot commented Dec 11, 2024

metamaskbot commented Dec 12, 2024

		@@ -150,7 +150,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
		style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"

feat: add background-muted color to design system #29117

feat: add background-muted color to design system #29117

Conversation

georgewrmarshall commented Dec 11, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 11, 2024

georgewrmarshall Dec 11, 2024

Choose a reason for hiding this comment

georgewrmarshall Dec 11, 2024

Choose a reason for hiding this comment

metamaskbot commented Dec 11, 2024

metamaskbot commented Dec 12, 2024

georgewrmarshall commented Dec 11, 2024 •

edited

Loading