m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

UX: Multichain: Set a maximum width on the network picker (#18731)

Browse Source 
* 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>
This commit is contained in:
David Walsh 2023-04-28 12:20:55 -05:00 committed by GitHub
parent a9243077b4
commit 27b2993cae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/components/component-library/picker-network/README.mdx
View File

@ -18,7 +18,7 @@ The `PickerNetwork` accepts all props below as well as all [Box](/docs/component
### Label
Use the `label` prop for the text content of the `PickerNetwork` component
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" />
@ -29,6 +29,7 @@ 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
@ -44,4 +45,4 @@ import { PickerNetwork } from '../../ui/component-library';
<PickerNetwork src="./images/arbitrum.svg" />
<PickerNetwork src="./images/matic-token.png" />
<PickerNetwork src="./images/optimism.svg" />
```
```

5
ui/components/component-library/picker-network/picker-network.stories.js
View File

@ -38,6 +38,11 @@ export const Label = (args) => (
<PickerNetwork {...args} label="Arbitrum One" />
<PickerNetwork {...args} label="Polygon Mainnet" />
<PickerNetwork {...args} label="Optimism" />
<PickerNetwork
{...args}
label="BNB Smart Chain (previously Binance Smart Chain Mainnet)"
style={{ maxWidth: '200px' }}
/>
</Box>
);

2
ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
View File

@ -9,7 +9,7 @@ exports[`App Header should match snapshot 1`] = `
class="box multichain-app-header__lock-contents box--padding-2 box--display-flex box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-background-default"
>
<button
class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
class="box mm-picker-network multichain-app-header__contents__network-picker box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"

1
ui/components/multichain/app-header/app-header.js
View File

@ -309,6 +309,7 @@ export const AppHeader = ({ onClick }) => {
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={() => dispatch(toggleNetworkMenu())}
className="multichain-app-header__contents__network-picker"
/>
<MetafoxLogo
unsetIconHeight

4
ui/components/multichain/app-header/app-header.scss
View File

@ -29,6 +29,10 @@
width: $width-screen-lg-min;
}
&__network-picker {
max-width: 200px;
}
&--avatar-network {
padding: 0; // TODO: Remove once https://github.com/MetaMask/metamask-extension/pull/17006 is merged
}