Picker network updates

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(

test/e2e/tests/custom-rpc-history.spec.js

@@ -70,7 +70,7 @@ describe('Stores custom RPC history', function () {
           '.networks-tab__add-network-form-footer .btn-primary',
         );
 
-        await driver.findElement({ text: networkName, tag: 'p' });
+        await driver.findElement({ text: networkName, tag: 'span' });
       },
     );
   });

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}
+/>;
 ```

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>

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 {

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} />
+  </>
+);

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');
+  });
 });

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>

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> =

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>

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"

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';