Adding `TextFieldBase` component #16043

georgewrmarshall · 2022-09-30T18:52:20Z

Explanation

Adding TextFieldBase component as a base for all text type components. Borrowed some architectural decisions from material ui

Architecture

The TextFieldBase component is made up of 2 components the wrapping <Box /> and <Text /> components. The Box contains all of the visual css and allows for right and left accessories to be placed outside of the html input element. The html input element is the root element of the Text component. In a previous PR I forwarded refs to both Box and Text to allow for focusing during the onClick on the wrapping Box component. This allows for the input to look focused while maintaining the left and right accessories to be focusable using the keyboard and maintaining accessibility

tabbing.mov

More Information

Fixes #15099
Figma link

Screenshots/Screencaps

text-field-base.mov

Manual Testing Steps

Go to the latest build of storybook on this PR

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

github-actions · 2022-09-30T18:52:33Z

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.

ui/components/component-library/base-avatar/base-avatar.scss

ui/components/component-library/text-field-base/README.mdx

ui/components/component-library/text-field-base/text-field-base.js

ui/components/component-library/text-field-base/text-field-base.stories.js

metamaskbot · 2022-10-06T03:49:25Z

Builds ready [61a10d3]

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 (2347 ± 90 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	88	161	112	19	9
		domContentLoaded	1649	2544	2323	194	93
		load	1711	2544	2347	187	90
		domInteractive	1649	2544	2323	194	93

highlights:

storybook

metamaskbot · 2022-10-06T05:02:04Z

Builds ready [dc06a8d]

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 (2244 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	88	2168	213	449	216
		domContentLoaded	1878	2377	2214	115	55
		load	1878	2399	2244	112	54
		domInteractive	1878	2377	2214	115	55

highlights:

storybook

metamaskbot · 2022-10-06T06:54:54Z

Builds ready [ee76b6c]

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 (2378 ± 68 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	143	116	14	7
		domContentLoaded	2109	2640	2362	134	64
		load	2109	2653	2378	141	68
		domInteractive	2109	2639	2362	134	64

highlights:

storybook

brad-decker

Awesome

garrettbear · 2022-10-06T17:03:28Z

ui/components/component-library/text-field-base/README.mdx

+<TextFieldBase
+  placeholder="MetaMask"
+  rightAccessory={
+    // TODO: replace with ButtonIcon


georgewrmarshall self-assigned this Sep 30, 2022

georgewrmarshall added area-UI Relating to the user interface. team-design-system All issues relating to design system in Extension IA/NAV DO-NOT-MERGE Pull requests that should not be merged labels Sep 30, 2022

georgewrmarshall commented Sep 30, 2022

View reviewed changes

ui/components/component-library/base-avatar/base-avatar.scss Outdated Show resolved Hide resolved

georgewrmarshall commented Sep 30, 2022

View reviewed changes

ui/components/component-library/text-field-base/README.mdx Outdated Show resolved Hide resolved

georgewrmarshall commented Sep 30, 2022

View reviewed changes

ui/components/component-library/text-field-base/text-field-base.js Outdated Show resolved Hide resolved

This was referenced Oct 3, 2022

Forward refs to Box and Text components #16060

Closed

forwarding refs to Box and Text component #16062

Merged

georgewrmarshall force-pushed the feat/15099/base-input branch 3 times, most recently from 79138ed to fbdad7e Compare October 4, 2022 21:08

georgewrmarshall changed the title ~~Adding TextInputBase component (WIP)~~ Adding TextInputBase component Oct 4, 2022

georgewrmarshall requested review from garrettbear, brad-decker and NidhiKJha October 4, 2022 21:12

georgewrmarshall marked this pull request as ready for review October 4, 2022 21:12

georgewrmarshall requested a review from a team as a code owner October 4, 2022 21:12

garrettbear reviewed Oct 4, 2022

View reviewed changes

ui/components/component-library/text-field-base/text-field-base.stories.js Outdated Show resolved Hide resolved

georgewrmarshall added 6 commits October 5, 2022 12:16

Adding TextInputBase component

963c5bb

Removing keyup and keydown props, tests and docs

ea87976

removing showClear from stories

9770c08

removing unneeded css

3c1c32b

simplifying uncontrolled vs controlled to work

df4635a

Fortifying maxLength test

4277417

georgewrmarshall force-pushed the feat/15099/base-input branch from fbdad7e to 4277417 Compare October 5, 2022 19:17

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

georgewrmarshall requested a review from garrettbear October 5, 2022 19:20

Lint fix for test

61a10d3

georgewrmarshall added 2 commits October 5, 2022 20:57

Doc, style and prop updates

dc06a8d

Updating constant names with 'base'

eeb8b96

georgewrmarshall added 2 commits October 5, 2022 22:49

Adding a background color

21fd101

Adding a background color to input

ee76b6c

georgewrmarshall mentioned this pull request Oct 6, 2022

Adding TextField component #16105

Merged

6 tasks

georgewrmarshall changed the title ~~Adding TextInputBase component~~ Adding TextFieldBase component Oct 6, 2022

brad-decker approved these changes Oct 6, 2022

View reviewed changes

garrettbear reviewed Oct 6, 2022

View reviewed changes

garrettbear approved these changes Oct 6, 2022

View reviewed changes

georgewrmarshall merged commit 055a7c5 into develop Oct 6, 2022

georgewrmarshall deleted the feat/15099/base-input branch October 6, 2022 19:41

github-actions bot locked and limited conversation to collaborators Oct 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding `TextFieldBase` component #16043

Adding `TextFieldBase` component #16043

georgewrmarshall commented Sep 30, 2022 •

edited

Loading

github-actions bot commented Sep 30, 2022

metamaskbot commented Oct 6, 2022

metamaskbot commented Oct 6, 2022

metamaskbot commented Oct 6, 2022

brad-decker left a comment

garrettbear Oct 6, 2022

Adding TextFieldBase component #16043

Adding TextFieldBase component #16043

Conversation

georgewrmarshall commented Sep 30, 2022 • edited Loading

Explanation

Architecture

More Information

Screenshots/Screencaps

Manual Testing Steps

Pre-Merge Checklist

+ If there are functional changes:

github-actions bot commented Sep 30, 2022

metamaskbot commented Oct 6, 2022

highlights:

metamaskbot commented Oct 6, 2022

highlights:

metamaskbot commented Oct 6, 2022

highlights:

brad-decker left a comment

Choose a reason for hiding this comment

garrettbear Oct 6, 2022

Choose a reason for hiding this comment

Adding `TextFieldBase` component #16043

Adding `TextFieldBase` component #16043

georgewrmarshall commented Sep 30, 2022 •

edited

Loading