m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Feat/16634/buttonicon housekeeping (#16666)

Browse Source 
* rename iconName prop

* pixel update

* updates to iconProps

* arialabel to stories
This commit is contained in:
Garrett Bear 2022-12-01 09:26:31 -08:00 committed by GitHub
parent 1007930078
commit 6689f8b71d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/components/component-library/button-icon/README.mdx
View File

@ -15,19 +15,21 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/ui-component
<ArgsTable of={ButtonIcon} /> <ArgsTable of={ButtonIcon} />
### Icon<span style={{ color: 'red' }}>\*</span> ### Icon Name<span style={{ color: 'red' }}>\*</span>
Use the required `icon` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon. Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
Use the [IconSearch](/story/ui-components-component-library-icon-icon-stories-js--default-story) story to find the icon you want to use.
<Canvas> <Canvas>
<Story id="ui-components-component-library-button-icon-button-icon-stories-js--icon" /> <Story id="ui-components-component-library-button-icon-button-icon-stories-js--icon-name" />
</Canvas> </Canvas>
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
import { ICON_NAMES } from '../icon'; import { ICON_NAMES } from '../icon';
<ButtonIcon icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />; <ButtonIcon iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />;
``` ```
### Size ### Size
@ -50,8 +52,8 @@ Possible sizes include:
import { SIZES } from '../../../helpers/constants/design-system'; import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon size={SIZES.SM} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/> <ButtonIcon size={SIZES.SM} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
<ButtonIcon size={SIZES.LG} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/> <ButtonIcon size={SIZES.LG} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
``` ```
### Aria Label ### Aria Label
@ -66,8 +68,8 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon as="button" icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/> <ButtonIcon as="button" iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" icon={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/> <ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
``` ```
### As ### As
@ -87,8 +89,8 @@ Button `as` options:
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon as="button" icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/> <ButtonIcon as="button" iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" icon={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/> <ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
``` ```
### Href ### Href
@ -105,7 +107,7 @@ import { ButtonIcon } from '../ui/component-library';
<ButtonIcon <ButtonIcon
href="https://metamask.io/" href="https://metamask.io/"
target="_blank" target="_blank"
icon={ICON_NAMES.EXPORT} iconName={ICON_NAMES.EXPORT}
color={COLORS.PRIMARY_DEFAULT} color={COLORS.PRIMARY_DEFAULT}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
@ -123,7 +125,7 @@ Use the `color` prop and the `COLORS` object to change the color of the `ButtonI
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon <ButtonIcon
icon={ICON_NAMES.EXPORT} iconName={ICON_NAMES.EXPORT}
color={COLORS.PRIMARY_DEFAULT} color={COLORS.PRIMARY_DEFAULT}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
/>; />;
@ -140,5 +142,5 @@ Use the boolean `disabled` prop to disable button
```jsx ```jsx
import { ButtonIcon } from '../ui/component-library'; import { ButtonIcon } from '../ui/component-library';
<ButtonIcon icon={ICON_NAMES.CLOSE_OUTLINE} disabled ariaLabel="Close" />; <ButtonIcon iconName={ICON_NAMES.CLOSE_OUTLINE} disabled ariaLabel="Close" />;
``` ```

13
ui/components/component-library/button-icon/button-icon.js
View File

@ -8,10 +8,11 @@ import {
COLORS, COLORS,
DISPLAY, DISPLAY,
JUSTIFY_CONTENT, JUSTIFY_CONTENT,
SIZES,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { Icon } from '../icon'; import { Icon, ICON_NAMES } from '../icon';
import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { BUTTON_ICON_SIZES } from './button-icon.constants';
@ -21,8 +22,8 @@ export const ButtonIcon = ({
className, className,
color = COLORS.ICON_DEFAULT, color = COLORS.ICON_DEFAULT,
href, href,
size = BUTTON_ICON_SIZES.LG, size = SIZES.LG,
icon, iconName,
disabled, disabled,
iconProps, iconProps,
...props ...props
@ -50,7 +51,7 @@ export const ButtonIcon = ({
href={href} href={href}
{...props} {...props}
> >
<Icon name={icon} size={size} {...iconProps} /> <Icon name={iconName} size={size} {...iconProps} />
</Box> </Box>
); );
}; };
@ -84,14 +85,14 @@ ButtonIcon.propTypes = {
/** /**
* The name of the icon to display. Should be one of ICON_NAMES * The name of the icon to display. Should be one of ICON_NAMES
*/ */
icon: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable iconName: PropTypes.oneOf(ICON_NAMES).isRequired,
/** /**
* iconProps accepts all the props from Icon * iconProps accepts all the props from Icon
*/ */
iconProps: PropTypes.object, iconProps: PropTypes.object,
/** /**
* The size of the ButtonIcon. * The size of the ButtonIcon.
* Possible values could be 'SIZES.SM', 'SIZES.LG', * Possible values could be 'SIZES.SM' 24px, 'SIZES.LG' 32px,
*/ */
size: PropTypes.oneOf(Object.values(BUTTON_ICON_SIZES)), size: PropTypes.oneOf(Object.values(BUTTON_ICON_SIZES)),
/** /**

39
ui/components/component-library/button-icon/button-icon.stories.js
View File

@ -58,9 +58,9 @@ export default {
control: 'boolean', control: 'boolean',
}, },
href: { href: {
control: 'string', control: 'text',
}, },
icon: { iconName: {
control: 'select', control: 'select',
options: Object.values(ICON_NAMES), options: Object.values(ICON_NAMES),
}, },
@ -94,15 +94,18 @@ export default {
export const DefaultStory = (args) => <ButtonIcon {...args} />; export const DefaultStory = (args) => <ButtonIcon {...args} />;
DefaultStory.args = { DefaultStory.args = {
icon: ICON_NAMES.CLOSE_OUTLINE, iconName: ICON_NAMES.CLOSE_OUTLINE,
ariaLabel: 'Close', ariaLabel: 'Close',
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const Icon = (args) => ( export const IconName = (args) => <ButtonIcon {...args} />;
<ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />
); IconName.args = {
iconName: ICON_NAMES.CLOSE_OUTLINE,
ariaLabel: 'Close',
};
export const Size = (args) => ( export const Size = (args) => (
<Box <Box
@ -114,14 +117,14 @@ export const Size = (args) => (
<ButtonIcon <ButtonIcon
{...args} {...args}
size={SIZES.SM} size={SIZES.SM}
icon={ICON_NAMES.CLOSE_OUTLINE} iconName={ICON_NAMES.CLOSE_OUTLINE}
ariaLabel="Close" ariaLabel="Close"
/> />
<ButtonIcon <ButtonIcon
{...args} {...args}
size={SIZES.LG} size={SIZES.LG}
color={COLORS.PRIMARY} color={COLORS.PRIMARY}
icon={ICON_NAMES.CLOSE_OUTLINE} iconName={ICON_NAMES.CLOSE_OUTLINE}
ariaLabel="Close" ariaLabel="Close"
/> />
</Box> </Box>
@ -131,7 +134,7 @@ export const AriaLabel = (args) => (
<> <>
<ButtonIcon <ButtonIcon
as="button" as="button"
icon={ICON_NAMES.CLOSE_OUTLINE} iconName={ICON_NAMES.CLOSE_OUTLINE}
ariaLabel="Close" ariaLabel="Close"
{...args} {...args}
/> />
@ -140,7 +143,7 @@ export const AriaLabel = (args) => (
href="https://metamask.io/" href="https://metamask.io/"
target="_blank" target="_blank"
color={COLORS.PRIMARY_DEFAULT} color={COLORS.PRIMARY_DEFAULT}
icon={ICON_NAMES.EXPORT} iconName={ICON_NAMES.EXPORT}
ariaLabel="Visit MetaMask.io" ariaLabel="Visit MetaMask.io"
{...args} {...args}
/> />
@ -149,28 +152,34 @@ export const AriaLabel = (args) => (
export const As = (args) => ( export const As = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}> <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
<ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} /> <ButtonIcon
{...args}
iconName={ICON_NAMES.CLOSE_OUTLINE}
ariaLabel="close"
/>
<ButtonIcon <ButtonIcon
as="a" as="a"
href="#" href="#"
{...args} {...args}
color={COLORS.PRIMARY_DEFAULT} color={COLORS.PRIMARY_DEFAULT}
icon={ICON_NAMES.EXPORT} iconName={ICON_NAMES.EXPORT}
ariaLabel="demo"
/> />
</Box> </Box>
); );
export const Href = (args) => ( export const Href = (args) => (
<ButtonIcon icon={ICON_NAMES.EXPORT} {...args} target="_blank" /> <ButtonIcon iconName={ICON_NAMES.EXPORT} {...args} target="_blank" />
); );
Href.args = { Href.args = {
ariaLabel: 'Visit Metamask.io',
href: 'https://metamask.io/', href: 'https://metamask.io/',
color: COLORS.PRIMARY_DEFAULT, color: COLORS.PRIMARY_DEFAULT,
}; };
export const Color = (args) => ( export const Color = (args) => (
<ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} /> <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="close" />
); );
Color.args = { Color.args = {
@ -178,7 +187,7 @@ Color.args = {
}; };
export const Disabled = (args) => ( export const Disabled = (args) => (
<ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} /> <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="close" />
); );
Disabled.args = { Disabled.args = {

23
ui/components/component-library/button-icon/button-icon.test.js
View File

@ -2,6 +2,7 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { COLORS } from '../../../helpers/constants/design-system'; import { COLORS } from '../../../helpers/constants/design-system';
import { ICON_NAMES } from '..';
import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { BUTTON_ICON_SIZES } from './button-icon.constants';
import { ButtonIcon } from './button-icon'; import { ButtonIcon } from './button-icon';
@ -10,7 +11,7 @@ describe('ButtonIcon', () => {
const { getByTestId, container } = render( const { getByTestId, container } = render(
<ButtonIcon <ButtonIcon
data-testid="button-icon" data-testid="button-icon"
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -24,7 +25,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
as="a" as="a"
data-testid="button-icon" data-testid="button-icon"
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -38,7 +39,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
href="/metamask" href="/metamask"
data-testid="button-icon" data-testid="button-icon"
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -50,13 +51,13 @@ describe('ButtonIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<ButtonIcon <ButtonIcon
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
size={BUTTON_ICON_SIZES.SM} size={BUTTON_ICON_SIZES.SM}
data-testid={BUTTON_ICON_SIZES.SM} data-testid={BUTTON_ICON_SIZES.SM}
/> />
<ButtonIcon <ButtonIcon
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
size={BUTTON_ICON_SIZES.LG} size={BUTTON_ICON_SIZES.LG}
data-testid={BUTTON_ICON_SIZES.LG} data-testid={BUTTON_ICON_SIZES.LG}
@ -75,13 +76,13 @@ describe('ButtonIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<> <>
<ButtonIcon <ButtonIcon
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
color={COLORS.ICON_DEFAULT} color={COLORS.ICON_DEFAULT}
data-testid={COLORS.ICON_DEFAULT} data-testid={COLORS.ICON_DEFAULT}
/> />
<ButtonIcon <ButtonIcon
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
color={COLORS.ERROR_DEFAULT} color={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT} data-testid={COLORS.ERROR_DEFAULT}
@ -101,7 +102,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
data-testid="classname" data-testid="classname"
className="mm-button-icon--test" className="mm-button-icon--test"
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
/>, />,
); );
@ -114,7 +115,7 @@ describe('ButtonIcon', () => {
<ButtonIcon <ButtonIcon
disabled disabled
data-testid="disabled" data-testid="disabled"
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
/> />
</>, </>,
@ -127,7 +128,7 @@ describe('ButtonIcon', () => {
const { getByTestId } = render( const { getByTestId } = render(
<ButtonIcon <ButtonIcon
data-testid="icon" data-testid="icon"
icon="add-square-filled" iconName={ICON_NAMES.ADD_SQUARE_FILLED}
ariaLabel="add" ariaLabel="add"
iconProps={{ 'data-testid': 'button-icon' }} iconProps={{ 'data-testid': 'button-icon' }}
/>, />,
@ -138,7 +139,7 @@ describe('ButtonIcon', () => {
it('should render with aria-label', () => { it('should render with aria-label', () => {
const { getByLabelText } = render( const { getByLabelText } = render(
<ButtonIcon icon="add-square-filled" ariaLabel="add" />, <ButtonIcon iconName={ICON_NAMES.ADD_SQUARE_FILLED} ariaLabel="add" />,
); );
expect(getByLabelText('add')).toBeDefined(); expect(getByLabelText('add')).toBeDefined();

2
ui/components/component-library/index.js
View File

@ -6,7 +6,7 @@ export { AvatarWithBadge } from './avatar-with-badge';
export { AvatarBase } from './avatar-base'; export { AvatarBase } from './avatar-base';
export { Button } from './button'; export { Button } from './button';
export { ButtonBase } from './button-base'; export { ButtonBase } from './button-base';
export { ButtonIcon } from './button-icon'; export { ButtonIcon, BUTTON_ICON_SIZES } from './button-icon';
export { ButtonLink } from './button-link'; export { ButtonLink } from './button-link';
export { ButtonPrimary } from './button-primary'; export { ButtonPrimary } from './button-primary';
export { ButtonSecondary } from './button-secondary'; export { ButtonSecondary } from './button-secondary';