Updates to the PickerNetwork component to allow for access to the lab…

…el prop Text wrapper as well as removing the max width styles. Replacing some deprecated components in NewNetworkInfo modal
MetaMask · Oct 11, 2023 · 2532b37 · 2532b37
1 parent 6d793cf
commit 2532b37
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 24 deletions.
diff --git a/test/e2e/tests/add-custom-network.spec.js b/test/e2e/tests/add-custom-network.spec.js
@@ -458,7 +458,7 @@ describe('Custom network', function () {
           });
           // verify network switched
           const networkDisplayed = await driver.findElement({
-            tag: 'p',
+            tag: 'span',
             text: 'Arbitrum One',
           });
           assert.equal(

diff --git a/ui/components/component-library/picker-network/README.mdx b/ui/components/component-library/picker-network/README.mdx
@@ -16,14 +16,15 @@ The `PickerNetwork` is used for the action of changing a network.
 
 ### Label
 
-Use the `label` prop for the text content of the `PickerNetwork` component. For long labels set a `max-width` using a `className` and the text will truncate showing an ellipsis.
+Use the `label` prop for the text content of the `PickerNetwork` component. For long labels set a `max-width` using a `className` and the text will truncate showing an ellipsis. If the `src` prop is not set, the `label` prop will be used to generate fallback initial for `AvatarNetwork`.
 
 <Canvas>
   <Story id="components-componentlibrary-pickernetwork--label" />
 </Canvas>
 
 ```jsx
 import { PickerNetwork } from '../../ui/component-library';
+<PickerNetwork src="./images/avax-token.png" label="Avalanche C-Chain" />
 <PickerNetwork label="Arbitrum One" />
 <PickerNetwork label="Polygon Mainnet" />
 <PickerNetwork label="Optimism" />
@@ -32,15 +33,35 @@ import { PickerNetwork } from '../../ui/component-library';
 
 ### Src
 
-Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `avatarNetworkProps` to pass additional props to the `AvatarNetwork` component.
+Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `avatarNetworkProps` to pass additional props to the `AvatarNetwork` component. If the `src` prop is not set, the `label` prop will be used to generate fallback initial for `AvatarNetwork`.
 
 <Canvas>
   <Story id="components-componentlibrary-pickernetwork--src" />
 </Canvas>
 
 ```jsx
 import { PickerNetwork } from '../../ui/component-library';
-<PickerNetwork src="./images/arbitrum.svg" />
-<PickerNetwork src="./images/matic-token.png" />
-<PickerNetwork src="./images/optimism.svg" />
+<PickerNetwork src="./images/arbitrum.svg" label="Arbitrum One" />
+<PickerNetwork src="./images/matic-token.png" label="Polygon Mainnet" />
+<PickerNetwork src="./images/optimism.svg" label="Optimism" />
+```
+
+### Width
+
+The width of the `PickerNetwork` is set to auto by default. Use the style utility `width` prop with the `BlockSize` enum to set the width of the `PickerNetwork` component.
+
+<Canvas>
+  <Story id="components-componentlibrary-pickernetwork--width" />
+</Canvas>
+
+```jsx
+import { PickerNetwork } from '../../ui/component-library';
+import { BlockSize } from '../../../helpers/constants/design-system';
+
+<PickerNetwork src="./images/avax-token.png" label="Avalanche C-Chain" />;
+<PickerNetwork
+  src="./images/avax-token.png"
+  label="Avalanche C-Chain"
+  width={BlockSize.Full}
+/>;
 ```
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.tsx.snap
@@ -11,13 +11,13 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
     >
       I
     </div>
-    <p
+    <span
       class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
     >
       Imported
-    </p>
+    </span>
     <span
-      class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-icon-default"
+      class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-default"
       style="mask-image: url('./images/icons/arrow-down.svg');"
     />
   </button>

diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss
@@ -1,7 +1,6 @@
 .mm-picker-network {
   --picker-network-height: 32px;
 
-  max-width: fit-content;
   height: var(--picker-network-height);
 
   &:active {

diff --git a/ui/components/component-library/picker-network/picker-network.stories.tsx b/ui/components/component-library/picker-network/picker-network.stories.tsx
@@ -3,6 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
 import {
   Display,
   FlexDirection,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 
 import { Box } from '..';
@@ -31,23 +32,36 @@ export default {
   },
 } as Meta<typeof PickerNetwork>;
 
-export const DefaultStory = (args) => <PickerNetwork {...args} />;
+const Template = (args) => <PickerNetwork {...args} />;
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
 
 export const Label: StoryFn<typeof PickerNetwork> = (args) => (
-  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
-    <PickerNetwork {...args} label="Arbitrum One" />
-    <PickerNetwork {...args} label="Polygon Mainnet" />
-    <PickerNetwork {...args} label="Optimism" />
+  <Box
+    display={Display.InlineFlex}
+    flexDirection={FlexDirection.Column}
+    gap={2}
+  >
+    <PickerNetwork {...args} />
+    <PickerNetwork {...args} src="" label="Arbitrum One" />
+    <PickerNetwork {...args} src="" label="Polygon Mainnet" />
+    <PickerNetwork {...args} src="" label="Optimism" />
     <PickerNetwork
       {...args}
+      src=""
       label="BNB Smart Chain (previously Binance Smart Chain Mainnet)"
       style={{ maxWidth: '200px' }}
     />
   </Box>
 );
 
 export const Src: StoryFn<typeof PickerNetwork> = (args) => (
-  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
+  <Box
+    display={Display.InlineFlex}
+    flexDirection={FlexDirection.Column}
+    gap={2}
+  >
     <PickerNetwork {...args} label="Arbitrum One" src="./images/arbitrum.svg" />
     <PickerNetwork
       {...args}
@@ -58,4 +72,9 @@ export const Src: StoryFn<typeof PickerNetwork> = (args) => (
   </Box>
 );
 
-DefaultStory.storyName = 'Default';
+export const Width: StoryFn<typeof PickerNetwork> = (args) => (
+  <>
+    <PickerNetwork marginBottom={2} {...args} />
+    <PickerNetwork {...args} width={BlockSize.Full} />
+  </>
+);
diff --git a/ui/components/component-library/picker-network/picker-network.test.tsx b/ui/components/component-library/picker-network/picker-network.test.tsx
@@ -65,4 +65,17 @@ describe('PickerNetwork', () => {
     );
     expect(getByTestId('picker-network')).toHaveClass('test-class');
   });
+  it('should render with labelProps', () => {
+    const { getByTestId } = render(
+      <PickerNetwork
+        data-testid="picker-network"
+        label="test"
+        labelProps={{
+          'data-testid': 'picker-network-label',
+          className: 'test-class',
+        }}
+      />,
+    );
+    expect(getByTestId('picker-network-label')).toHaveClass('test-class');
+  });
 });
diff --git a/ui/components/component-library/picker-network/picker-network.tsx b/ui/components/component-library/picker-network/picker-network.tsx
@@ -30,6 +30,7 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
       avatarNetworkProps,
       iconProps,
       label,
+      labelProps,
       src,
       ...props
     }: PickerNetworkProps<C>,
@@ -56,14 +57,15 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
           size={AvatarNetworkSize.Xs}
           {...avatarNetworkProps}
         />
-        <Text ellipsis variant={TextVariant.bodySm}>
+        <Text as="span" ellipsis variant={TextVariant.bodySm} {...labelProps}>
           {label}
         </Text>
         <Icon
           className="mm-picker-network__arrow-down-icon"
           name={IconName.ArrowDown}
           color={IconColor.iconDefault}
           size={IconSize.Xs}
+          marginLeft="auto"
           {...iconProps}
         />
       </Box>

diff --git a/ui/components/component-library/picker-network/picker-network.types.ts b/ui/components/component-library/picker-network/picker-network.types.ts
@@ -4,6 +4,7 @@ import type {
 } from '../box';
 import { IconProps } from '../icon/icon.types';
 import { AvatarNetworkProps } from '../avatar-network/avatar-network.types';
+import { TextProps } from '../text';
 
 export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps {
   /**
@@ -26,6 +27,10 @@ export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps {
    * The text content of the PickerNetwork component
    */
   label: string;
+  /**
+   * Additional props to pass to the label wrapper Text component
+   */
+  labelProps?: TextProps<'span'>;
 }
 
 export type PickerNetworkProps<C extends React.ElementType> =

diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -216,13 +216,13 @@ exports[`App Header should match snapshot 1`] = `
           >
             C
           </div>
-          <p
+          <span
             class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-default"
           >
             Chain 5
-          </p>
+          </span>
           <span
-            class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-icon-default"
+            class="mm-box mm-picker-network__arrow-down-icon mm-icon mm-icon--size-xs mm-box--margin-left-auto mm-box--display-inline-block mm-box--color-icon-default"
             style="mask-image: url('./images/icons/arrow-down.svg');"
           />
         </button>

diff --git a/ui/components/ui/new-network-info/new-network-info.js b/ui/components/ui/new-network-info/new-network-info.js
@@ -9,15 +9,15 @@ import {
   AlignItems,
   Color,
   Display,
+  FlexDirection,
   FontWeight,
   TextAlign,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
 import { getCurrentNetwork, getUseTokenDetection } from '../../../selectors';
 import { setFirstTimeUsedNetwork } from '../../../store/actions';
-import { PickerNetwork, Text } from '../../component-library';
-import Box from '../box';
+import { PickerNetwork, Text, Box } from '../../component-library';
 import Button from '../button';
 import Popover from '../popover';
 
@@ -78,7 +78,11 @@ export default function NewNetworkInfo() {
           </Button>
         }
       >
-        <Box data-testid="new-network-info__wrapper">
+        <Box
+          data-testid="new-network-info__wrapper"
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+        >
           <Text
             variant={TextVariant.headingSm}
             as="h4"

diff --git a/ui/components/ui/new-network-info/new-network-info.stories.js b/ui/components/ui/new-network-info/new-network-info.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import NewNetworkInfo from '.';
+
+export default {
+  title: 'Components/UI/NewNetworkInfo',
+};
+
+export const DefaultStory = () => <NewNetworkInfo />;
+
+DefaultStory.storyName = 'Default';