Update Text import paths: /ui #20076

georgewrmarshall · 2023-07-18T15:17:05Z

Explanation

Currently, there are deprecated instances of the Text component that use the JavaScript version of the Box component. This PR updates those deprecated import paths to the new component in the ui/components/ui folder as well as snapshots. There should be no visual or component API difference between the two. Just className changes which will touch many snapshots

Part of Update deprecated Text import paths #19986

Dependency: Updating Text component to use TS Box #19949

Screenshots/Screencaps

I have added Before/After screencasts to ensure no visual regressions have occurred to components with some significant updates other than snapshot updates in the code comments

Manual Testing Steps

Go to the latest build of storybook in this PR
Check all components don't have visual regressions against the hosted storybook GitHub page

Pre-merge author checklist

I've clearly explained:
- What problem this PR is solving
- How this problem was solved
- How reviewers can test my changes
Sufficient automated test coverage has been added

Pre-merge reviewer checklist

Manual testing (e.g. pull and build branch, run in browser, test code being changed)
PR is linked to the appropriate GitHub issue
IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

github-actions · 2023-07-18T15:17:16Z

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.

codecov · 2023-07-18T15:44:33Z

Codecov Report

Merging #20076 (875ae63) into develop (8f8613a) will decrease coverage by 0.01%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop   #20076      +/-   ##
===========================================
- Coverage    69.46%   69.46%   -0.01%     
===========================================
  Files          992      992              
  Lines        37452    37452              
  Branches     10042    10042              
===========================================
- Hits         26015    26013       -2     
- Misses       11437    11439       +2

Impacted Files	Coverage Δ
...nts/app/custom-spending-cap/custom-spending-cap.js	`78.41% <ø> (ø)`
ui/components/ui/callout/callout.js	`61.11% <ø> (ø)`
...precated-test-networks/deprecated-test-networks.js	`83.33% <ø> (ø)`
ui/components/ui/editable-label/editable-label.js	`60.87% <ø> (ø)`
...-text-container/export-text-container.component.js	`100.00% <ø> (ø)`
ui/components/ui/form-field/form-field.js	`94.59% <ø> (ø)`
ui/components/ui/icon-button/icon-button.js	`87.50% <ø> (ø)`
ui/components/ui/menu/menu-item.js	`87.50% <ø> (ø)`
...components/ui/new-network-info/new-network-info.js	`76.32% <ø> (ø)`
ui/components/ui/nft-info/nft-info.js	`0.00% <ø> (ø)`
... and 5 more

... and 1 file with indirect coverage changes

metamaskbot · 2023-07-18T15:53:17Z

Builds ready [ccafb3a]

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

Page Load Metrics (1403 ± 27 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	102	165	116	14	6
		domContentLoaded	1339	1581	1403	57	27
		load	1339	1581	1403	57	27
		domInteractive	1339	1581	1403	57	27

Bundle size diffs

background: 0 bytes
ui: -1821 bytes
common: 0 bytes

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

georgewrmarshall · 2023-07-18T20:32:40Z

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -24,7 +24,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
              >
                <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                  for="custom-spending-cap"
                  tag="label"


this shouldn't be passed to the html element

georgewrmarshall · 2023-07-18T20:33:48Z

ui/components/ui/logo/logo.stories.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';

 import { BackgroundColor } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';

 import Card from '../card';
 import Box from '../box';


Use Box from component-library

georgewrmarshall · 2023-07-18T20:35:40Z

ui/components/ui/review-spending-cap/review-spending-cap.js

@@ -3,8 +3,14 @@ import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
 import Box from '../box';


Use Box from component-library

georgewrmarshall · 2023-07-18T21:53:51Z

ui/components/app/custom-spending-cap/custom-spending-cap.js

-import { ButtonLink, Icon, IconName } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonLink, Icon, IconName, Text } from '../../component-library';
+
 import {
  AlignItems,
  TextAlign,


No visual regressions

georgewrmarshall · 2023-07-18T21:55:10Z

ui/components/ui/callout/callout.js

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import InfoIconInverted from '../icon/info-icon-inverted.component';
 import { Severity, TextColor } from '../../../helpers/constants/design-system';
 import { MILLISECOND } from '../../../../shared/constants/time';
-import { ButtonIcon, IconName, IconSize } from '../../component-library';
-import { Text } from '../../component-library/text/deprecated';
+import { ButtonIcon, IconName, IconSize, Text } from '../../component-library';

 /**
 * @deprecated `<Callout />` has been deprecated in favor of the `<BannerAlert />`


No visual regressions

georgewrmarshall · 2023-07-18T21:58:59Z

ui/components/ui/editable-label/editable-label.js

+  IconName,
+  Text,
+  Box,
+} from '../../component-library';

 export default class EditableLabel extends Component {
  static propTypes = {


No visual regressions

georgewrmarshall · 2023-07-18T22:00:00Z

ui/components/ui/export-text-container/export-text-container.component.js

-        display={DISPLAY.FLEX}
-        justifyContent={JustifyContent.CENTER}
+        display={Display.Flex}
+        justifyContent={JustifyContent.center}
        className="notranslate"
        variant={TextVariant.bodyLgMedium}
        data-testid="srp_text"


georgewrmarshall · 2023-07-18T22:01:48Z

ui/components/ui/form-field/form-field.js

                  as="h6"
+                  variant={TextVariant.bodySm}
                  color={TextColor.textAlternative}
                  display={Display.InlineBlock}
                >


georgewrmarshall · 2023-07-18T22:12:34Z

ui/components/ui/icon-button/icon-button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';
 import { TextVariant } from '../../../helpers/constants/design-system';
 import Tooltip from '../tooltip/tooltip';



georgewrmarshall · 2023-07-18T22:14:34Z

ui/components/ui/nft-info/nft-info.js

-            {t('view')}
-          </Text>
+        <Button className="nft-info__button" variant={BUTTON_VARIANT.LINK}>
+          {t('view')}
        </Button>
      </Box>
    </Box>


georgewrmarshall · 2023-07-18T22:15:58Z

ui/components/ui/numeric-input/numeric-input.component.js

@@ -6,7 +6,7 @@ import {
  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { DECIMAL_REGEX } from '../../../../shared/constants/tokens';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';

 export default function NumericInput({
  detailText = '',


georgewrmarshall · 2023-07-18T22:17:12Z

ui/components/ui/popover/popover.component.js

+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';

 const defaultHeaderProps = {
  padding: [6, 4, 4],


georgewrmarshall · 2023-07-18T22:18:03Z

ui/components/ui/radio-group/radio-group.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
 import { Color, TextVariant } from '../../../helpers/constants/design-system';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';

 function Connector({ isFirst, isLast }) {
  if (isFirst) {


![Uploading Screenshot 2023-07-18 at 3.17.46 PM.png…]()

georgewrmarshall · 2023-07-18T22:18:58Z

ui/components/ui/slider/slider.component.js

@@ -9,7 +9,7 @@ import {
 } from '../../../helpers/constants/design-system';

 import InfoTooltip from '../info-tooltip/info-tooltip';
-import { Text } from '../../component-library/text/deprecated';
+import { Text } from '../../component-library';

 const styles = {
  root: {


georgewrmarshall · 2023-07-18T22:37:42Z

ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap

@@ -49,8 +49,7 @@ exports[`Add Network Modal should render 1`] = `
              class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
            >
              <h6
-                class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                tag="label"


removes prop being passed down to html attribute

georgewrmarshall · 2023-07-18T22:37:55Z

ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap

@@ -58,8 +58,7 @@ exports[`Onboarding Create Password Render should match snapshot 1`] = `
                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
              >
                <h6
-                  class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
-                  tag="label"
+                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"


removes prop being passed down to html attribute

metamaskbot · 2023-07-19T02:52:34Z

Builds ready [875ae63]

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

Page Load Metrics (1563 ± 103 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	102	198	129	24	11
		domContentLoaded	1413	2374	1563	214	103
		load	1413	2374	1563	214	103
		domInteractive	1413	2374	1563	214	103

Bundle size diffs

background: 0 bytes
ui: -2146 bytes
common: 0 bytes

test/e2e/tests/custom-token-add-approve.spec.js

georgewrmarshall self-assigned this Jul 18, 2023

georgewrmarshall added the team-design-system All issues relating to design system in Extension label Jul 18, 2023

georgewrmarshall mentioned this pull request Jul 18, 2023

Update deprecated Text import paths #19986

Closed

georgewrmarshall force-pushed the part/19986/update-text-import-paths-ui branch from b704a97 to ccafb3a Compare July 18, 2023 15:21

georgewrmarshall commented Jul 18, 2023

View reviewed changes

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap Show resolved Hide resolved

garrettbear previously approved these changes Jul 18, 2023

View reviewed changes

georgewrmarshall marked this pull request as ready for review July 18, 2023 17:51

georgewrmarshall requested review from a team as code owners July 18, 2023 17:51

georgewrmarshall commented Jul 18, 2023

View reviewed changes

georgewrmarshall dismissed garrettbear’s stale review via 6d14e81 July 18, 2023 21:09

georgewrmarshall force-pushed the part/19986/update-text-import-paths-ui branch 7 times, most recently from cd83d39 to 661641f Compare July 18, 2023 21:50

georgewrmarshall commented Jul 18, 2023

View reviewed changes

georgewrmarshall requested a review from garrettbear July 18, 2023 22:19

georgewrmarshall force-pushed the part/19986/update-text-import-paths-ui branch 2 times, most recently from 40c6f62 to 23696d1 Compare July 18, 2023 22:34

georgewrmarshall commented Jul 18, 2023

View reviewed changes

Updating Text import paths in ui folder

05f6764

georgewrmarshall force-pushed the part/19986/update-text-import-paths-ui branch from 173a3e6 to 05f6764 Compare July 19, 2023 01:58

Updating snapshot

875ae63

georgewrmarshall requested a review from DDDDDanica July 19, 2023 17:11

DDDDDanica reviewed Jul 19, 2023

View reviewed changes

test/e2e/tests/custom-token-add-approve.spec.js Show resolved Hide resolved

DDDDDanica approved these changes Jul 19, 2023

View reviewed changes

Mrtenz approved these changes Jul 19, 2023

View reviewed changes

garrettbear approved these changes Jul 19, 2023

View reviewed changes

garrettbear merged commit f9649a2 into develop Jul 19, 2023

garrettbear deleted the part/19986/update-text-import-paths-ui branch July 19, 2023 17:55

github-actions bot locked and limited conversation to collaborators Jul 19, 2023

metamaskbot added the release-10.36.0 Issue or pull request that will be included in release 10.36.0 label Jul 19, 2023

Gudahtt added release-11.1.0 Issue or pull request that will be included in release 11.1.0 and removed release-10.36.0 Issue or pull request that will be included in release 10.36.0 labels Sep 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Text import paths: /ui #20076

Update Text import paths: /ui #20076

georgewrmarshall commented Jul 18, 2023 •

edited

Loading

github-actions bot commented Jul 18, 2023

codecov bot commented Jul 18, 2023 •

edited

Loading

metamaskbot commented Jul 18, 2023

georgewrmarshall Jul 18, 2023 •

edited

Loading

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

georgewrmarshall Jul 18, 2023

metamaskbot commented Jul 19, 2023

		@@ -3,8 +3,14 @@ import PropTypes from 'prop-types';
		import { I18nContext } from '../../../contexts/i18n';
		import Box from '../box';

Update Text import paths: /ui #20076

Update Text import paths: /ui #20076

Conversation

georgewrmarshall commented Jul 18, 2023 • edited Loading

Explanation

Screenshots/Screencaps

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jul 18, 2023

codecov bot commented Jul 18, 2023 • edited Loading

Codecov Report

metamaskbot commented Jul 18, 2023

georgewrmarshall Jul 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metamaskbot commented Jul 19, 2023

georgewrmarshall commented Jul 18, 2023 •

edited

Loading

codecov bot commented Jul 18, 2023 •

edited

Loading

georgewrmarshall Jul 18, 2023 •

edited

Loading