mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
de4cf0a7e5
* ButtonBase ellipsis update Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> Update ui/components/multichain/account-picker/index.js Co-authored-by: Garrett Bear <gwhisten@gmail.com> * buttonbase updates to fix ellipsis * multichain support * remove multichain * code cleanup * clean up * component clean up * span update * fix snapshots * fix snapshot * Updating ButtonBase to reduce html to a minimum but ensure all functionality still works (#18210) * fix color and disable * remove unused css * Update ui/components/component-library/button-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * fix e2e test from button update * update e2e test from button base update --------- Co-authored-by: David Walsh <davidwalsh83@gmail.com> Co-authored-by: George Marshall <george.marshall@consensys.net>
149 lines
4.4 KiB
Plaintext
149 lines
4.4 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
|
|
import { ButtonLink } from './button-link';
|
|
import { ButtonBase } from '../button-base';
|
|
|
|
# ButtonLink
|
|
|
|
The `ButtonLink` is an extension of `ButtonBase` to support link styles
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonlink--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
The `ButtonLink` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) and [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
|
|
|
|
<ArgsTable of={ButtonLink} />
|
|
|
|
The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
|
|
|
|
<ArgsTable of={ButtonBase} />
|
|
|
|
### Size
|
|
|
|
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `Size.auto`.
|
|
|
|
Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `Size`
|
|
|
|
Possible sizes include:
|
|
|
|
- `Size.auto` sets the height to auto but retains `ButtonLink` font-size
|
|
- `Size.SM` 32px
|
|
- `Size.MD` 40px
|
|
- `Size.LG` 48px
|
|
- `Size.inherit` inherits the font-size of the parent element. Used for inline links in paragraphs.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonlink--size-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Size } from '../../../helpers/constants/design-system';
|
|
import { ButtonLink, Text, TextVariant } from '../../component-library';
|
|
|
|
<ButtonLink size={Size.auto}>
|
|
Auto (default)
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.SM}>
|
|
Small
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.MD}>
|
|
Medium
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.LG}>
|
|
Large
|
|
</ButtonLink>
|
|
|
|
<Text variant={TextVariant.bodyLgMedium}>
|
|
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
|
|
</Text>
|
|
<Text variant={TextVariant.bodyMd}>
|
|
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
|
|
</Text>
|
|
<Text variant={TextVariant.bodySm}>
|
|
Inherits the font-size of the parent element. <ButtonLink size={Size.inherit}>Learn more</ButtonLink>
|
|
</Text>
|
|
|
|
<Text variant={TextVariant.bodyXs}>
|
|
Inherits the font-size of the parent element and example with override for a success color.
|
|
<ButtonLink size={Size.inherit}>Learn more</ButtonLink>
|
|
</Text>
|
|
```
|
|
|
|
### Danger
|
|
|
|
Use the `danger` boolean prop to change the `ButtonLink` to danger color.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonlink--danger" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonLink } from '../../component-library';
|
|
|
|
<ButtonLink>Normal</ButtonLink>
|
|
<ButtonLink danger>Danger</ButtonLink>
|
|
```
|
|
|
|
### Href
|
|
|
|
When an `href` prop is passed it will change the element to an anchor(`a`) tag.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonlink--href" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonLink } from '../../component-library';
|
|
|
|
<ButtonLink href="/">Href example</ButtonLink>;
|
|
```
|
|
|
|
### External Link
|
|
|
|
When an `externalLink` prop is passed it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes.
|
|
|
|
`rel="noreferrer noopener"` is used in links to prevent security vulnerabilities that can be exploited by malicious websites. It disables the window.opener property and prevents the new page from sending the referrer information, providing an additional layer of security.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonlink--external-link" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonLink } from '../../component-library';
|
|
|
|
<ButtonLink href="https://metamask.io" externalLink>
|
|
Anchor element with external link
|
|
</ButtonLink>;
|
|
```
|
|
|
|
### Hit area
|
|
|
|
The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `Size.auto` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-buttonlink--hit-area" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ButtonLink } from '../../component-library';
|
|
|
|
<ButtonLink paddingLeft={4} paddingRight={4}>
|
|
Auto (default)
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.SM} paddingLeft={4} paddingRight={4}>
|
|
Small
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.MD} paddingLeft={4} paddingRight={4}>
|
|
Medium
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.LG} paddingLeft={4} paddingRight={4}>
|
|
Large
|
|
</ButtonLink>
|
|
<ButtonLink size={Size.LG} block>
|
|
Large block
|
|
</ButtonLink>
|
|
```
|