Consolidated all component import paths (#17368)

MetaMask · Jan 25, 2023 · 1d1b751 · 1d1b751
1 parent 709d026
commit 1d1b751
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 23 deletions.
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
@@ -37,7 +37,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 
 <ButtonBase size={SIZES.AUTO} />
 <ButtonBase size={SIZES.SM} />
@@ -55,7 +55,7 @@ Use boolean `block` prop to quickly enable a full width block button
 
 ```jsx
 import { DISPLAY } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 
 <ButtonBase>Default Button</ButtonBase>
 <ButtonBase block>Block Button</ButtonBase>
@@ -77,7 +77,7 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 
 
 <ButtonBase as="button">Button Element</ButtonBase>
@@ -95,7 +95,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 
 <ButtonBase href="/metamask">Anchor Element</ButtonBase>;
 ```
@@ -109,7 +109,7 @@ Use the boolean `disabled` prop to disable button
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 
 <ButtonBase disabled>Disabled Button</ButtonBase>;
 ```
@@ -123,7 +123,7 @@ Use the boolean `loading` prop to set loading spinner
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 
 <ButtonBase loading>Loading Button</ButtonBase>;
 ```
@@ -137,7 +137,7 @@ Use the `iconName` prop and the `ICON_NAMES` object from `./ui/components/compon
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/components/component-library';
+import { ButtonBase } from '../../component-library';
 import { ICON_NAMES } from '../icon';
 
 <ButtonBase icon={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>;

diff --git a/ui/components/component-library/button-primary/README.mdx b/ui/components/component-library/button-primary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonPrimary } from '../../ui/components/component-library';
+import { ButtonPrimary } from '../../component-library';
 
 <ButtonPrimary size={SIZES.SM} />
 <ButtonPrimary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
 </Canvas>
 
 ```jsx
-import { ButtonPrimary } from '../../ui/components/component-library';
+import { ButtonPrimary } from '../../component-library';
 
 <ButtonPrimary>Normal</ButtonPrimary>
 <ButtonPrimary danger>Danger</ButtonPrimary>

diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonSecondary } from '../../ui/components/component-library';
+import { ButtonSecondary } from  '../../component-library';
 
 <ButtonSecondary size={SIZES.SM} />
 <ButtonSecondary size={SIZES.MD} />
@@ -50,8 +50,7 @@ Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
 </Canvas>
 
 ```jsx
-import { ButtonSecondary } from '../../ui/components/component-library';
-
+import { ButtonSecondary } from  '../../component-library';
 <ButtonSecondary>Normal</ButtonSecondary>
 <ButtonSecondary danger>Danger</ButtonSecondary>
 ```
diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
@@ -29,7 +29,7 @@ Optional: `TEXT_VARIANTS` from ./text object can also be used.
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { TEXT } from '../../../helpers/constants/design-system';
 
 <Text variant={TEXT.DISPLAY_MD}>display-md</Text>
@@ -54,7 +54,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { COLORS } from '../../../helpers/constants/design-system';
 
 <Text color={COLORS.TEXT_DEFAULT}>
@@ -111,7 +111,7 @@ Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/consta
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
 
 <Text fontWeight={FONT_WEIGHT.NORMAL}>
@@ -137,7 +137,7 @@ Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { FONT_STYLE } from '../../../helpers/constants/design-system';
 
 <Text fontStyle={FONT_STYLE.NORMAL}>
@@ -157,7 +157,7 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
@@ -180,7 +180,7 @@ Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_ALIGN.LEFT}>
@@ -209,7 +209,7 @@ Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/co
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
 
 <div
@@ -237,7 +237,7 @@ Use the boolean `ellipsis` prop to change the if the `Text` component to have an
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 
 <div
   style={{
@@ -260,7 +260,7 @@ Use the `as` prop to change the root html element of the `Text` component
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/components/component-library';
+import { Text } from '../../component-library';
 
 <Text as="dd">dd</Text>
 <Text as="div">div</Text>
@@ -308,7 +308,7 @@ Use the `textDirection` prop and the `TEXT_DIRECTIONS` object from `./text.const
 </Canvas>
 
 ```jsx
-import { Text, TEXT_DIRECTIONS } from '../../ui/components/component-library';
+import { Text, TEXT_DIRECTIONS } from '../../component-library';
 
 <Text textDirection={TEXT_DIRECTIONS.LEFT_TO_RIGHT}>
   This is left to right (ltr) for English and most languages

diff --git a/ui/pages/settings/info-tab/info-tab.component.js b/ui/pages/settings/info-tab/info-tab.component.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '../../../components/ui/button';
-import { Tag } from '../../../components/component-library/tag';
+import { Tag } from '../../../components/component-library';
 
 import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common';
 import { isBeta } from '../../../helpers/utils/build-types';