Feat/13662 box design token updates #13725

georgewrmarshall · 2022-02-23T01:55:04Z

Fixes: #13662
Dependencies: #13657

TO DO

Merge Installing design tokens and writing docs in storybook #13657
Update design-tokens to v1.3.0

Explanation: Updating Box component to use new design token colors and updating documentation in storybook

Manual testing steps:

Check latest storybook build and view Box story
OR
run yarn setup && yarn storybook
Go to Box and use background color and border color controls http://localhost:6006/?path=/story/ui-components-ui-box-box-stories-js--default-story&globals=theme:dark
Go to Box / BackgroundColor story http://localhost:6006/?path=/story/ui-components-ui-box-box-stories-js--background-color&globals=theme:dark use theme changer to view dark theme colors
Go to Box docs to read added documentation http://localhost:6006/?path=/docs/ui-components-ui-box-box-stories-js--background-color

Screenshots

Ready for storybook darkmode when 13651 is merged

github-actions · 2022-02-23T01:55:18Z

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 · 2022-02-23T02:05:30Z

ui/components/ui/box/README.mdx

+| width           | Object.values(BLOCK_SIZES)          | -                  |
+| height          | Object.values(BLOCK_SIZES)          | -                  |
+| backgroundColor | Object.values(COLORS)               | -                  |
+| className       | string                              |                    |


Had to add the args table manually here as the storybook ArgsTable component doesn't like line 67 - 79 in box.js for some reason

metamaskbot · 2022-02-23T02:47:15Z

Builds ready [693a30f]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1066 ± 13 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	1113	563	463	223
		domContentLoaded	1012	1119	1061	26	13
		load	1020	1119	1066	26	13
		domInteractive	1012	1119	1061	26	13

highlights:

storybook

metamaskbot · 2022-02-24T01:31:49Z

Builds ready [5f87a03]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1162 ± 32 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	65	1215	484	465	223
		domContentLoaded	1028	1293	1160	65	31
		load	1028	1313	1162	66	32
		domInteractive	1028	1293	1160	65	31

highlights:

storybook

metamaskbot · 2022-02-25T00:30:03Z

Builds ready [b706fca]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1174 ± 52 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	77	1193	587	485	233
		domContentLoaded	1067	1499	1170	108	52
		load	1067	1508	1174	109	52
		domInteractive	1067	1499	1170	108	52

highlights:

storybook

… use implementation in #13651

brad-decker

👏🏻

metamaskbot · 2022-02-25T02:52:38Z

Builds ready [afdd719]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1471 ± 90 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	86	1425	649	524	251
		domContentLoaded	1194	1810	1468	189	91
		load	1203	1810	1471	187	90
		domInteractive	1194	1810	1468	189	91

highlights:

storybook

metamaskbot · 2022-02-25T07:14:43Z

Builds ready [7c97654]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
build viz: Build System
code coverage: Report
storybook: Storybook
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- phishing-detect: phishing-detect
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1122 ± 34 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	1370	550	527	253
		domContentLoaded	1053	1379	1121	71	34
		load	1054	1379	1122	72	34
		domInteractive	1053	1379	1121	71	34

highlights:

storybook

georgewrmarshall added area-documentation Issues relating to documentation, in the codebase and off. area-UI Relating to the user interface. type-story labels Feb 23, 2022

georgewrmarshall self-assigned this Feb 23, 2022

georgewrmarshall commented Feb 23, 2022

View reviewed changes

georgewrmarshall force-pushed the feat/13662-box-design-token-updates branch from 693a30f to 5f87a03 Compare February 24, 2022 00:52

georgewrmarshall marked this pull request as ready for review February 24, 2022 04:03

georgewrmarshall requested a review from a team as a code owner February 24, 2022 04:03

georgewrmarshall requested review from jpuri, brad-decker, darkwing and GuillaumeRx and removed request for jpuri February 24, 2022 04:03

darkwing previously approved these changes Feb 24, 2022

View reviewed changes

georgewrmarshall dismissed darkwing’s stale review via b706fca February 24, 2022 23:51

georgewrmarshall requested a review from darkwing February 25, 2022 02:05

georgewrmarshall added 5 commits February 25, 2022 12:37

Updating Box component and adding dark theme to storybook toolbar

b1b3795

Updating box props table manually

6d977f7

Fixing linting issues

63f5d89

Updating design-tokens to v.1.3.0

4d61e73

Reverting theme/background changes in .storybook/preview.js so we can…

39241a2

… use implementation in #13651

georgewrmarshall force-pushed the feat/13662-box-design-token-updates branch from b706fca to 39241a2 Compare February 25, 2022 02:12

Updating yarn.lock

afdd719

brad-decker previously approved these changes Feb 25, 2022

View reviewed changes

Updating titles

7c97654

georgewrmarshall dismissed brad-decker’s stale review via 7c97654 February 25, 2022 06:28

georgewrmarshall requested a review from brad-decker February 25, 2022 06:30

georgewrmarshall mentioned this pull request Feb 25, 2022

Typography design token color and docs update #13758

Merged

1 task

darkwing approved these changes Feb 25, 2022

View reviewed changes

brad-decker approved these changes Mar 1, 2022

View reviewed changes

georgewrmarshall merged commit 0244c62 into develop Mar 1, 2022

georgewrmarshall deleted the feat/13662-box-design-token-updates branch March 1, 2022 18:23

github-actions bot locked and limited conversation to collaborators Mar 1, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/13662 box design token updates #13725

Feat/13662 box design token updates #13725

georgewrmarshall commented Feb 23, 2022 •

edited

Loading

github-actions bot commented Feb 23, 2022

georgewrmarshall Feb 23, 2022

metamaskbot commented Feb 23, 2022

metamaskbot commented Feb 24, 2022

metamaskbot commented Feb 25, 2022

brad-decker left a comment

metamaskbot commented Feb 25, 2022

metamaskbot commented Feb 25, 2022

Feat/13662 box design token updates #13725

Feat/13662 box design token updates #13725

Conversation

georgewrmarshall commented Feb 23, 2022 • edited Loading

Screenshots

github-actions bot commented Feb 23, 2022

georgewrmarshall Feb 23, 2022

Choose a reason for hiding this comment

metamaskbot commented Feb 23, 2022

highlights:

metamaskbot commented Feb 24, 2022

highlights:

metamaskbot commented Feb 25, 2022

highlights:

brad-decker left a comment

Choose a reason for hiding this comment

metamaskbot commented Feb 25, 2022

highlights:

metamaskbot commented Feb 25, 2022

highlights:

georgewrmarshall commented Feb 23, 2022 •

edited

Loading