Added Tag Url Component #16159

NidhiKJha · 2022-10-11T09:45:53Z

Fixes [Ext Nav] Create component: TagUrl #15104

After

Without CTA

With CTA

Overflow Text

Manual Testing Steps

Storybook

Go to the latest build of the storybook in this PR
Search for TagUrl in component-library
Check the stories, controls, and documentation

Pre-Merge Checklist

PR template is filled out
IF this PR fixes a bug, a test that would have caught the bug has been added
PR is linked to the appropriate GitHub issue
PR has been added to the appropriate release Milestone

+ If there are functional changes:

Manual testing complete & passed
"Extension QA Board" label has been applied

georgewrmarshall

Great start, realize it's a draft but left a comment regarding the structure

ui/components/component-library/tag-url/tag-url.js

metamaskbot · 2022-10-13T18:10:05Z

Builds ready [d432db9]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2350 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	89	296	114	43	20
		domContentLoaded	2183	2582	2329	114	55
		load	2183	2603	2350	121	58
		domInteractive	2183	2582	2329	114	55

highlights:

storybook

metamaskbot · 2022-10-14T13:07:40Z

Builds ready [0c7b309]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2241 ± 114 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	87	194	116	26	13
		domContentLoaded	1697	2805	2225	233	112
		load	1697	2805	2241	237	114
		domInteractive	1697	2805	2225	233	112

highlights:

storybook

metamaskbot · 2022-10-14T18:11:33Z

Builds ready [2b437fe]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2382 ± 79 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	85	2258	220	468	225
		domContentLoaded	2136	2710	2367	165	79
		load	2139	2710	2382	165	79
		domInteractive	2136	2710	2367	165	79

highlights:

storybook

georgewrmarshall

Looking good. I was playing around with removing some styles in favour of box props. It should make it more responsive

Heres the branch https://github.com/MetaMask/metamask-extension/tree/fix-15104-suggestions

suggestions.mov

ui/components/component-library/tag-url/tag-url.scss

ui/components/component-library/tag-url/README.mdx

ui/components/component-library/tag-url/tag-url.js

georgewrmarshall

Looking really good! A few tiny things that I've changed my mind about apologies! It maybe in future that we need to extend this component so we can change they type of action button but we can cross that bridge when we get to it.

ui/components/component-library/tag-url/README.mdx

ui/components/component-library/tag-url/tag-url.js

ui/components/component-library/tag-url/tag-url.stories.js

ui/components/component-library/tag-url/README.mdx

georgewrmarshall

Looking good. Just need to get build to pass

metamaskbot · 2022-11-02T08:45:22Z

Builds ready [0520209]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2428 ± 142 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	163	123	18	8
		domContentLoaded	1926	2957	2407	300	144
		load	1926	2957	2428	297	142
		domInteractive	1926	2957	2407	300	144

highlights:

storybook

metamaskbot · 2022-11-07T15:04:34Z

Builds ready [dbd945d]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2224 ± 109 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	145	114	14	7
		domContentLoaded	1814	2568	2197	223	107
		load	1833	2669	2224	226	109
		domInteractive	1814	2568	2197	223	107

highlights:

storybook

georgewrmarshall

Looking great! Was just going over the house keeping criteria. Could we add some stories for label and src?

metamaskbot · 2022-11-08T16:55:37Z

Builds ready [1342296]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2393 ± 152 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	105	2503	252	517	248
		domContentLoaded	1760	2770	2362	316	152
		load	1778	2932	2393	317	152
		domInteractive	1760	2770	2362	316	152

highlights:

storybook

georgewrmarshall

LGTM!

georgewrmarshall

one nit but not blocking

ui/components/component-library/tag-url/tag-url.stories.js

metamaskbot · 2022-11-09T15:41:30Z

Builds ready [4a51501]

builds: chrome, firefox, opera
builds (beta): chrome, firefox, opera
builds (flask): chrome, firefox, opera
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
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2560 ± 303 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	96	1068	215	280	134
		domContentLoaded	1861	4211	2537	630	303
		load	1862	4211	2560	631	303
		domInteractive	1861	4211	2537	630	303

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

background: 5906 bytes
ui: 12717 bytes
common: 4237 bytes

highlights:

storybook

github-actions · 2022-11-10T00:41:56Z

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.

metamaskbot · 2022-11-10T01:13:34Z

Builds ready [e956d46]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (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
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2654 ± 209 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	102	873	186	170	82
		domContentLoaded	2150	4012	2639	440	211
		load	2150	4012	2654	435	209
		domInteractive	2150	4012	2639	440	211

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

background: 5914 bytes
ui: 18055 bytes
common: 4237 bytes

highlights:

storybook

Updated

NidhiKJha requested a review from a team as a code owner October 11, 2022 09:45

NidhiKJha requested a review from georgewrmarshall October 11, 2022 09:45

NidhiKJha added team-design-system All issues relating to design system in Extension DO-NOT-MERGE Pull requests that should not be merged IA/NAV labels Oct 11, 2022

georgewrmarshall reviewed Oct 11, 2022

View reviewed changes

ui/components/component-library/tag-url/tag-url.js Outdated Show resolved Hide resolved

NidhiKJha marked this pull request as draft October 11, 2022 19:37

NidhiKJha force-pushed the fix-15104 branch from 619c7c4 to b6bab09 Compare October 13, 2022 10:02

NidhiKJha changed the title ~~(WIP 👷‍♀️) Added Tag Url Component~~ Added Tag Url Component Oct 13, 2022

NidhiKJha marked this pull request as ready for review October 13, 2022 17:09

NidhiKJha requested a review from garrettbear October 13, 2022 17:10

NidhiKJha force-pushed the fix-15104 branch from d432db9 to 0c7b309 Compare October 14, 2022 12:08

NidhiKJha requested a review from georgewrmarshall October 14, 2022 14:13

NidhiKJha removed the DO-NOT-MERGE Pull requests that should not be merged label Oct 14, 2022

NidhiKJha force-pushed the fix-15104 branch from 579c812 to c3f6402 Compare October 14, 2022 17:09

georgewrmarshall reviewed Oct 16, 2022

View reviewed changes

ui/components/component-library/tag-url/tag-url.scss Outdated Show resolved Hide resolved

ui/components/component-library/tag-url/README.mdx Outdated Show resolved Hide resolved

ui/components/component-library/tag-url/README.mdx Outdated Show resolved Hide resolved

NidhiKJha force-pushed the fix-15104 branch from 2b437fe to 2f74d15 Compare October 25, 2022 17:46

NidhiKJha requested a review from georgewrmarshall October 25, 2022 17:51

darkwing previously requested changes Oct 25, 2022

View reviewed changes

ui/components/component-library/tag-url/README.mdx Outdated Show resolved Hide resolved

ui/components/component-library/tag-url/README.mdx Outdated Show resolved Hide resolved

ui/components/component-library/tag-url/tag-url.js Show resolved Hide resolved

NidhiKJha requested a review from darkwing October 25, 2022 18:47

georgewrmarshall requested changes Oct 27, 2022

View reviewed changes

NidhiKJha requested a review from georgewrmarshall October 28, 2022 14:13

georgewrmarshall reviewed Oct 28, 2022

View reviewed changes

ui/components/component-library/tag-url/README.mdx Outdated Show resolved Hide resolved

NidhiKJha requested a review from georgewrmarshall October 28, 2022 14:54

georgewrmarshall reviewed Nov 2, 2022

View reviewed changes

NidhiKJha requested a review from georgewrmarshall November 2, 2022 12:04

NidhiKJha added 8 commits November 7, 2022 19:32

updated prop names

2144f0e

updated story

e90097b

fixed typo in test file

be8e6fd

updated lock icon rendering and icon color

ffed3c0

updated lock icon prop

e921b89

updated README

08816d9

updated tests for tag url

9d8f4ea

added snapshot testing

dbd945d

NidhiKJha force-pushed the fix-15104 branch from 85ce819 to dbd945d Compare November 7, 2022 14:02

georgewrmarshall reviewed Nov 7, 2022

View reviewed changes

updated Readme for tag url

6849770

NidhiKJha requested a review from georgewrmarshall November 8, 2022 15:52

georgewrmarshall previously approved these changes Nov 8, 2022

View reviewed changes

georgewrmarshall reviewed Nov 8, 2022

View reviewed changes

ui/components/component-library/tag-url/tag-url.stories.js Outdated Show resolved Hide resolved

updated label as per src

fbc5081

NidhiKJha dismissed georgewrmarshall’s stale review via fbc5081 November 9, 2022 16:57

NidhiKJha force-pushed the fix-15104 branch from 4a51501 to fbc5081 Compare November 9, 2022 16:57

georgewrmarshall approved these changes Nov 9, 2022

View reviewed changes

garrettbear approved these changes Nov 10, 2022

View reviewed changes

Merge branch 'develop' into fix-15104

e956d46

NidhiKJha merged commit 4a247a9 into develop Nov 10, 2022

NidhiKJha deleted the fix-15104 branch November 10, 2022 03:45

github-actions bot locked and limited conversation to collaborators Nov 10, 2022

georgewrmarshall assigned NidhiKJha Jun 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Tag Url Component #16159

Added Tag Url Component #16159

NidhiKJha commented Oct 11, 2022 •

edited

Loading

georgewrmarshall left a comment

metamaskbot commented Oct 13, 2022

metamaskbot commented Oct 14, 2022

metamaskbot commented Oct 14, 2022

georgewrmarshall left a comment

georgewrmarshall left a comment

georgewrmarshall left a comment

metamaskbot commented Nov 2, 2022

metamaskbot commented Nov 7, 2022

georgewrmarshall left a comment

metamaskbot commented Nov 8, 2022

georgewrmarshall left a comment

georgewrmarshall left a comment

metamaskbot commented Nov 9, 2022

github-actions bot commented Nov 10, 2022

metamaskbot commented Nov 10, 2022

Added Tag Url Component #16159

Added Tag Url Component #16159

Conversation

NidhiKJha commented Oct 11, 2022 • edited Loading

After

Without CTA

With CTA

Overflow Text

Manual Testing Steps

Pre-Merge Checklist

+ If there are functional changes:

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 13, 2022

highlights:

metamaskbot commented Oct 14, 2022

highlights:

metamaskbot commented Oct 14, 2022

highlights:

georgewrmarshall left a comment

Choose a reason for hiding this comment

georgewrmarshall left a comment

Choose a reason for hiding this comment

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Nov 2, 2022

highlights:

metamaskbot commented Nov 7, 2022

highlights:

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Nov 8, 2022

highlights:

georgewrmarshall left a comment

Choose a reason for hiding this comment

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Nov 9, 2022

highlights:

github-actions bot commented Nov 10, 2022

metamaskbot commented Nov 10, 2022

highlights:

NidhiKJha commented Oct 11, 2022 •

edited

Loading