fix: update segmented `tab` styling #29652

matteoscurati · 2025-01-13T09:15:59Z

Description

This PR updates the style of the ui/components/ui/tabs/tabs.component.js component and removes some custom classes used to override the style in various parts of the site (particularly on the home page and the notifications page). This ensures a consistent style for the tabs.

Related issues

Original request: #26190

Manual testing steps

The tabs tested are those indicated in this issue: #28910. However, some of them seem to no longer be in use (for example, the “snap” tab in the permissions page should no longer exist, as it now has its own dedicated page).

Screenshots/Recordings

Before

After

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 (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 · 2025-01-13T09:16:14Z

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.

matteoscurati · 2025-01-13T09:23:26Z

ui/components/ui/tabs/tab/index.scss

+    font-weight: 500;
+  }
+
+  &--single {


I’ve added this style to update the appearance in case a tab list has only one tab

metamaskbot · 2025-01-13T10:15:02Z

Builds ready [7a8dd9a]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1790 ± 94 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1481	2234	1788	186	89
		domContentLoaded	1473	2222	1767	189	91
		load	1483	2307	1790	195	94
		domInteractive	22	65	37	11	6
		backgroundConnect	10	84	24	21	10
		firstReactRender	17	86	43	24	12
		getState	5	62	21	20	10
		initialActions	0	1	0	0	0
		loadScripts	1057	1689	1303	152	73
		setupStore	7	55	13	14	7
		uiStartup	1667	2581	2047	216	104

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

background: 0 Bytes (0.00%)
ui: 84 Bytes (0.00%)
common: 27 Bytes (0.00%)

metamaskbot · 2025-01-15T09:27:54Z

Builds ready [65564b8]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1848 ± 66 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	383	2097	1633	497	239
		domContentLoaded	1617	2085	1811	139	67
		load	1637	2100	1848	137	66
		domInteractive	26	101	53	25	12
		backgroundConnect	7	74	34	24	12
		firstReactRender	16	98	35	25	12
		getState	6	72	21	20	9
		initialActions	0	0	0	0	0
		loadScripts	1153	1592	1363	118	57
		setupStore	6	57	17	17	8
		uiStartup	1889	2446	2123	164	79

Bundle size diffs

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

metamaskbot · 2025-01-16T15:24:02Z

Builds ready [3cc080a]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1585 ± 41 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1469	1897	1588	92	44
		domContentLoaded	1458	1814	1566	80	39
		load	1469	1849	1585	84	41
		domInteractive	25	71	39	16	8
		backgroundConnect	8	44	20	13	6
		firstReactRender	15	95	34	26	12
		getState	4	51	12	15	7
		initialActions	0	1	0	0	0
		loadScripts	1057	1396	1162	78	37
		setupStore	6	72	21	24	11
		uiStartup	1676	2240	1874	164	79

Bundle size diffs

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

metamaskbot · 2025-01-20T15:57:35Z

Builds ready [a64d59b]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1685 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1466	2038	1692	130	62
		domContentLoaded	1459	1933	1659	120	58
		load	1467	2022	1685	129	62
		domInteractive	24	78	36	14	7
		backgroundConnect	5	94	28	27	13
		firstReactRender	15	101	51	34	16
		getState	5	88	16	22	11
		initialActions	0	1	0	0	0
		loadScripts	1070	1373	1220	86	41
		setupStore	6	64	20	21	10
		uiStartup	1675	2665	2061	251	121

Bundle size diffs

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

metamaskbot · 2025-01-24T16:21:48Z

Builds ready [1fb3e90]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1807 ± 96 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1529	2508	1804	199	96
		domContentLoaded	1519	2413	1782	185	89
		load	1531	2526	1807	200	96
		domInteractive	24	93	42	19	9
		backgroundConnect	11	102	27	22	10
		firstReactRender	16	104	41	27	13
		getState	6	85	26	25	12
		initialActions	0	0	0	0	0
		loadScripts	1070	1840	1303	165	79
		setupStore	8	63	22	19	9
		uiStartup	1778	3077	2118	265	127

Bundle size diffs

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

fix: 💄 update segmented tab styling

7c9c1e6

matteoscurati self-assigned this Jan 13, 2025

metamaskbot added the team-notifications Notifications team label Jan 13, 2025

matteoscurati commented Jan 13, 2025

View reviewed changes

matteoscurati added 2 commits January 13, 2025 10:30

fix: 🚨 fix lint error

205c1e5

test: ✅ update two snapshots

7a8dd9a

Merge branch 'main' into fix/update-segmented-tab-styling

65564b8

Merge branch 'main' into fix/update-segmented-tab-styling

3cc080a

matteoscurati mentioned this pull request Jan 16, 2025

[Design Quality]: Update segmented tab styling #26190

Closed

Merge branch 'main' into fix/update-segmented-tab-styling

a64d59b

matteoscurati added 2 commits January 24, 2025 15:16

Merge branch 'main' into fix/update-segmented-tab-styling

58e969a

Merge branch 'main' into fix/update-segmented-tab-styling

1fb3e90

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update segmented `tab` styling #29652

fix: update segmented `tab` styling #29652

matteoscurati commented Jan 13, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Jan 13, 2025

matteoscurati Jan 13, 2025

metamaskbot commented Jan 13, 2025

metamaskbot commented Jan 15, 2025

metamaskbot commented Jan 16, 2025

metamaskbot commented Jan 20, 2025

metamaskbot commented Jan 24, 2025

fix: update segmented tab styling #29652

Are you sure you want to change the base?

fix: update segmented tab styling #29652

Conversation

matteoscurati commented Jan 13, 2025 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jan 13, 2025

matteoscurati Jan 13, 2025

Choose a reason for hiding this comment

metamaskbot commented Jan 13, 2025

metamaskbot commented Jan 15, 2025

metamaskbot commented Jan 16, 2025

metamaskbot commented Jan 20, 2025

metamaskbot commented Jan 24, 2025

fix: update segmented `tab` styling #29652

fix: update segmented `tab` styling #29652

matteoscurati commented Jan 13, 2025 •

edited by github-actions bot

Loading