From 6689f8b71d0a3bbba996fc30265afb47c9cc60f7 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Thu, 1 Dec 2022 09:26:31 -0800 Subject: [PATCH] Feat/16634/buttonicon housekeeping (#16666) * rename iconName prop * pixel update * updates to iconProps * arialabel to stories --- .../component-library/button-icon/README.mdx | 28 ++++++------- .../button-icon/button-icon.js | 13 ++++--- .../button-icon/button-icon.stories.js | 39 ++++++++++++------- .../button-icon/button-icon.test.js | 23 +++++------ ui/components/component-library/index.js | 2 +- 5 files changed, 59 insertions(+), 46 deletions(-) diff --git a/ui/components/component-library/button-icon/README.mdx b/ui/components/component-library/button-icon/README.mdx index a2f89fa09..eb32f2c6e 100644 --- a/ui/components/component-library/button-icon/README.mdx +++ b/ui/components/component-library/button-icon/README.mdx @@ -15,19 +15,21 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/ui-component -### Icon\* +### Icon Name\* -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. - + ```jsx import { ButtonIcon } from '../ui/component-library'; import { ICON_NAMES } from '../icon'; -; +; ``` ### Size @@ -50,8 +52,8 @@ Possible sizes include: import { SIZES } from '../../../helpers/constants/design-system'; import { ButtonIcon } from '../ui/component-library'; - - + + ``` ### 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'; - - + + ``` ### As @@ -87,8 +89,8 @@ Button `as` options: import { ButtonIcon } from '../ui/component-library'; - - + + ``` ### Href @@ -105,7 +107,7 @@ import { ButtonIcon } from '../ui/component-library'; ; @@ -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'; ; @@ -140,5 +142,5 @@ Use the boolean `disabled` prop to disable button ```jsx import { ButtonIcon } from '../ui/component-library'; -; +; ``` diff --git a/ui/components/component-library/button-icon/button-icon.js b/ui/components/component-library/button-icon/button-icon.js index 8d8ad11ca..580c66729 100644 --- a/ui/components/component-library/button-icon/button-icon.js +++ b/ui/components/component-library/button-icon/button-icon.js @@ -8,10 +8,11 @@ import { COLORS, DISPLAY, JUSTIFY_CONTENT, + SIZES, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box'; -import { Icon } from '../icon'; +import { Icon, ICON_NAMES } from '../icon'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; @@ -21,8 +22,8 @@ export const ButtonIcon = ({ className, color = COLORS.ICON_DEFAULT, href, - size = BUTTON_ICON_SIZES.LG, - icon, + size = SIZES.LG, + iconName, disabled, iconProps, ...props @@ -50,7 +51,7 @@ export const ButtonIcon = ({ href={href} {...props} > - + ); }; @@ -84,14 +85,14 @@ ButtonIcon.propTypes = { /** * 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: PropTypes.object, /** * 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)), /** diff --git a/ui/components/component-library/button-icon/button-icon.stories.js b/ui/components/component-library/button-icon/button-icon.stories.js index 32db51f96..ded756f03 100644 --- a/ui/components/component-library/button-icon/button-icon.stories.js +++ b/ui/components/component-library/button-icon/button-icon.stories.js @@ -58,9 +58,9 @@ export default { control: 'boolean', }, href: { - control: 'string', + control: 'text', }, - icon: { + iconName: { control: 'select', options: Object.values(ICON_NAMES), }, @@ -94,15 +94,18 @@ export default { export const DefaultStory = (args) => ; DefaultStory.args = { - icon: ICON_NAMES.CLOSE_OUTLINE, + iconName: ICON_NAMES.CLOSE_OUTLINE, ariaLabel: 'Close', }; DefaultStory.storyName = 'Default'; -export const Icon = (args) => ( - -); +export const IconName = (args) => ; + +IconName.args = { + iconName: ICON_NAMES.CLOSE_OUTLINE, + ariaLabel: 'Close', +}; export const Size = (args) => ( ( @@ -131,7 +134,7 @@ export const AriaLabel = (args) => ( <> @@ -140,7 +143,7 @@ export const AriaLabel = (args) => ( href="https://metamask.io/" target="_blank" color={COLORS.PRIMARY_DEFAULT} - icon={ICON_NAMES.EXPORT} + iconName={ICON_NAMES.EXPORT} ariaLabel="Visit MetaMask.io" {...args} /> @@ -149,28 +152,34 @@ export const AriaLabel = (args) => ( export const As = (args) => ( - + ); export const Href = (args) => ( - + ); Href.args = { + ariaLabel: 'Visit Metamask.io', href: 'https://metamask.io/', color: COLORS.PRIMARY_DEFAULT, }; export const Color = (args) => ( - + ); Color.args = { @@ -178,7 +187,7 @@ Color.args = { }; export const Disabled = (args) => ( - + ); Disabled.args = { diff --git a/ui/components/component-library/button-icon/button-icon.test.js b/ui/components/component-library/button-icon/button-icon.test.js index cb1521c64..be07763d6 100644 --- a/ui/components/component-library/button-icon/button-icon.test.js +++ b/ui/components/component-library/button-icon/button-icon.test.js @@ -2,6 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; import { COLORS } from '../../../helpers/constants/design-system'; +import { ICON_NAMES } from '..'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { ButtonIcon } from './button-icon'; @@ -10,7 +11,7 @@ describe('ButtonIcon', () => { const { getByTestId, container } = render( , ); @@ -24,7 +25,7 @@ describe('ButtonIcon', () => { , ); @@ -38,7 +39,7 @@ describe('ButtonIcon', () => { , ); @@ -50,13 +51,13 @@ describe('ButtonIcon', () => { const { getByTestId } = render( <> { const { getByTestId } = render( <> { , ); @@ -114,7 +115,7 @@ describe('ButtonIcon', () => { , @@ -127,7 +128,7 @@ describe('ButtonIcon', () => { const { getByTestId } = render( , @@ -138,7 +139,7 @@ describe('ButtonIcon', () => { it('should render with aria-label', () => { const { getByLabelText } = render( - , + , ); expect(getByLabelText('add')).toBeDefined(); diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index 2432305e7..01305770b 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -6,7 +6,7 @@ export { AvatarWithBadge } from './avatar-with-badge'; export { AvatarBase } from './avatar-base'; export { Button } from './button'; export { ButtonBase } from './button-base'; -export { ButtonIcon } from './button-icon'; +export { ButtonIcon, BUTTON_ICON_SIZES } from './button-icon'; export { ButtonLink } from './button-link'; export { ButtonPrimary } from './button-primary'; export { ButtonSecondary } from './button-secondary';