1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/picker-network
David Walsh 27b2993cae
UX: Multichain: Set a maximum width on the network picker (#18731)
* UX: Multichain: Set a maximum width on the network picker

* Fix jest

* Document the max-width

* Adding code example to README

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
2023-04-28 12:20:55 -05:00
..
__snapshots__ update text component color to use box color (#18246) 2023-03-23 13:00:37 -07:00
index.js Added Picker Network Component (#16340) 2022-11-09 16:31:51 -08:00
picker-network.js Updating icon imports to TS version in component-library folder (#18449) 2023-04-05 09:11:10 -07:00
picker-network.scss updated background color for picker network (#16466) 2022-11-18 22:29:25 +05:30
picker-network.stories.js UX: Multichain: Set a maximum width on the network picker (#18731) 2023-04-28 12:20:55 -05:00
picker-network.test.js Fixing prop type errors in components and tests (#17704) 2023-02-14 11:34:19 -06:00
README.mdx UX: Multichain: Set a maximum width on the network picker (#18731) 2023-04-28 12:20:55 -05:00

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import { PickerNetwork } from './picker-network';

# PickerNetwork

The `PickerNetwork` is used for the action of changing a network.

<Canvas>
  <Story id="components-componentlibrary-pickernetwork--default-story" />
</Canvas>

## Props

The `PickerNetwork` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.

<ArgsTable of={PickerNetwork} />

### 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.

<Canvas>
  <Story id="components-componentlibrary-pickernetwork--label" />
</Canvas>

```jsx
import { PickerNetwork } from '../../ui/component-library';
<PickerNetwork label="Arbitrum One" />
<PickerNetwork label="Polygon Mainnet" />
<PickerNetwork label="Optimism" />
<PickerNetwork label="BNB Smart Chain (previously Binance Smart Chain Mainnet)" style={{ maxWidth: '200px' }} />
```

### Src

Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `avatarNetworkProps` to pass additional props to the `AvatarNetwork` component.

<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" />
```