From 2532b3762a95cd4445233a69ede6a7645ec760e7 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Wed, 11 Oct 2023 17:26:01 +0200
Subject: [PATCH] Updates to the PickerNetwork component to allow for access to
 the label prop Text wrapper as well as removing the max width styles.
 Replacing some deprecated components in NewNetworkInfo modal

---
 test/e2e/tests/add-custom-network.spec.js     |  2 +-
 .../picker-network/README.mdx                 | 31 ++++++++++++++---
 .../picker-network.test.tsx.snap              |  6 ++--
 .../picker-network/picker-network.scss        |  1 -
 .../picker-network/picker-network.stories.tsx | 33 +++++++++++++++----
 .../picker-network/picker-network.test.tsx    | 13 ++++++++
 .../picker-network/picker-network.tsx         |  4 ++-
 .../picker-network/picker-network.types.ts    |  5 +++
 .../__snapshots__/app-header.test.js.snap     |  6 ++--
 .../ui/new-network-info/new-network-info.js   | 10 ++++--
 .../new-network-info.stories.js               | 10 ++++++
 11 files changed, 97 insertions(+), 24 deletions(-)
 create mode 100644 ui/components/ui/new-network-info/new-network-info.stories.js

diff --git a/test/e2e/tests/add-custom-network.spec.js b/test/e2e/tests/add-custom-network.spec.js
index 82233d09b34b..c4c3c3c1a31c 100644
--- 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
index 2e31576f8f8b..74481d251a95 100644
--- a/ui/components/component-library/picker-network/README.mdx
+++ b/ui/components/component-library/picker-network/README.mdx
@@ -16,7 +16,7 @@ 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" />
@@ -24,6 +24,7 @@ Use the `label` prop for the text content of the `PickerNetwork` component. For
 
 ```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,7 +33,7 @@ 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" />
@@ -40,7 +41,27 @@ Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `ava
 
 ```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
index 2b2226998a18..0827e30f349a 100644
--- 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
index 1e2e58cf083e..72fba5d389d6 100644
--- 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
index be2629223525..91536945bc1c 100644
--- 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,15 +32,24 @@ 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' }}
     />
@@ -47,7 +57,11 @@ export const Label: StoryFn<typeof PickerNetwork> = (args) => (
 );
 
 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
index f0a5da9d4d2c..a942276c4ab0 100644
--- 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
index 282269b00b8d..fd2a2a78b8bc 100644
--- 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,7 +57,7 @@ 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
@@ -64,6 +65,7 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
           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
index 48d97be43c9d..4946f38ad4f4 100644
--- 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
index 67d265f76e1e..f27c1db843a3 100644
--- 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
index fac443c44c00..ab58bbced971 100644
--- a/ui/components/ui/new-network-info/new-network-info.js
+++ b/ui/components/ui/new-network-info/new-network-info.js
@@ -9,6 +9,7 @@ import {
   AlignItems,
   Color,
   Display,
+  FlexDirection,
   FontWeight,
   TextAlign,
   TextVariant,
@@ -16,8 +17,7 @@ import {
 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
new file mode 100644
index 000000000000..9d70ef07b5f0
--- /dev/null
+++ 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';