From 94292fadc97df255cb68f80375d060e594b7b498 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Wed, 5 Apr 2023 08:37:09 -0700 Subject: [PATCH 01/15] Small update to badgewrapper story (#18450) --- .../badge-wrapper/badge-wrapper.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx index 35fc575c0..9c91fe7e0 100644 --- a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx +++ b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx @@ -88,7 +88,7 @@ export const DefaultStory = Template.bind({}); DefaultStory.storyName = 'Default'; -export const Children = () => ( +export const Children: ComponentStory = () => ( ( ); -export const Badge = () => ( +export const Badge: ComponentStory = () => ( ( ); -export const Position = () => ( +export const Position: ComponentStory = () => ( ( ); -export const PositionObj = () => ( +export const PositionObj: ComponentStory = () => ( ( ); -export const AnchorElementShape = () => ( +export const AnchorElementShape: ComponentStory = () => ( Date: Wed, 5 Apr 2023 09:11:10 -0700 Subject: [PATCH 02/15] Updating icon imports to TS version in component-library folder (#18449) --- .../avatar-base/avatar-base.stories.js | 4 +- .../avatar-favicon/avatar-favicon.js | 6 +-- .../component-library/avatar-icon/README.mdx | 18 +++---- .../avatar-icon/avatar-icon.js | 48 +++++++++---------- .../avatar-icon/avatar-icon.stories.js | 35 +++++++------- .../avatar-icon/avatar-icon.test.js | 20 ++++---- .../component-library/banner-alert/README.mdx | 4 +- .../banner-alert/banner-alert.js | 14 +++--- .../banner-alert/banner-alert.stories.js | 5 +- .../component-library/banner-base/README.mdx | 8 ++-- .../banner-base/banner-base.js | 4 +- .../banner-base/banner-base.stories.js | 9 ++-- .../banner-base/banner-base.test.js | 6 +-- .../component-library/banner-tip/README.mdx | 6 +-- .../banner-tip/banner-tip.stories.js | 7 ++- .../component-library/button-base/README.mdx | 20 ++++---- .../button-base/button-base.js | 25 +++++----- .../button-base/button-base.stories.js | 20 ++++---- .../button-base/button-base.test.js | 6 +-- .../component-library/button-icon/README.mdx | 34 ++++++------- .../button-icon/button-icon.js | 6 +-- .../button-icon/button-icon.stories.js | 32 +++++++------ .../button-icon/button-icon.test.js | 24 +++++----- .../button-link/button-link.stories.js | 6 +-- .../button-link/button-link.test.js | 4 +- .../button-primary/button-primary.stories.js | 6 +-- .../button-primary/button-primary.test.js | 7 +-- .../button-secondary.stories.js | 6 +-- .../button-secondary/button-secondary.test.js | 7 +-- .../component-library/button/README.mdx | 10 ++-- .../button/button.stories.js | 10 ++-- .../component-library/button/button.test.js | 4 +- .../form-text-field/README.mdx | 10 ++-- .../form-text-field.stories.js | 11 +++-- .../component-library/help-text/README.mdx | 7 ++- .../help-text/help-text.stories.js | 7 ++- .../help-text/help-text.test.js | 7 ++- .../component-library/label/README.mdx | 7 ++- .../component-library/label/label.stories.js | 8 ++-- .../component-library/label/label.test.js | 4 +- .../picker-network/picker-network.js | 8 ++-- .../component-library/tag-url/tag-url.js | 10 ++-- .../text-field-search/text-field-search.js | 7 ++- .../component-library/text-field/README.mdx | 12 ++--- .../text-field/text-field.stories.js | 17 +++---- 45 files changed, 259 insertions(+), 277 deletions(-) diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js index e30109eae..49cc6b8d3 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.js +++ b/ui/components/component-library/avatar-base/avatar-base.stories.js @@ -10,7 +10,7 @@ import { import Box from '../../ui/box/box'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { Icon, IconName } from '..'; import README from './README.mdx'; import { AvatarBase } from './avatar-base'; import { AVATAR_BASE_SIZES } from './avatar-base.constants'; @@ -124,7 +124,7 @@ export const Children = (args) => ( backgroundColor={BackgroundColor.infoMuted} borderColor={BorderColor.infoMuted} > - + ); diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js index d7833298f..ab8607fa0 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.js +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { AvatarBase } from '../avatar-base'; import Box from '../../ui/box/box'; -import { ICON_NAMES, Icon } from '../icon/deprecated'; +import { IconName, Icon } from '../icon'; import { BorderColor, Size, @@ -43,7 +43,7 @@ export const AvatarFavicon = ({ /> ) : ( @@ -55,22 +55,22 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library'; ### Icon Name\* -Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library` to select icon +Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. - + ```jsx -import { AvatarIcon, ICON_NAMES } from '../ui/component-library'; +import { AvatarIcon, IconName } from '../ui/component-library'; - - - - - + + + + + ``` ### Color and Background Color diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js index 1c63eb48b..a8f36e063 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.js @@ -14,7 +14,7 @@ import { import Box from '../../ui/box/box'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { IconName, Icon } from '../icon'; import { AvatarBase } from '../avatar-base'; import { AVATAR_ICON_SIZES } from './avatar-icon.constants'; @@ -27,39 +27,37 @@ export const AvatarIcon = ({ iconProps, iconName, ...props -}) => { - return ( - ( + + - - - ); -}; + {...iconProps} + /> + +); AvatarIcon.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 IconName */ - iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, + iconName: PropTypes.oneOf(Object.values(IconName)).isRequired, /** * Props for the icon inside AvatarIcon. All Icon props can be used */ - iconProps: PropTypes.shape(Icon.PropTypes), + iconProps: PropTypes.object, /** * The size of the AvatarIcon * Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.js b/ui/components/component-library/avatar-icon/avatar-icon.stories.js index d7fa0194f..a32e8f284 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.stories.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.stories.js @@ -10,7 +10,7 @@ import { import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import README from './README.mdx'; import { AvatarIcon, AVATAR_ICON_SIZES } from '.'; @@ -35,7 +35,6 @@ const marginSizeControlOptions = [ export default { title: 'Components/ComponentLibrary/AvatarIcon', - component: AvatarIcon, parameters: { docs: { @@ -44,7 +43,7 @@ export default { }, argTypes: { iconName: { - options: Object.values(ICON_NAMES), + options: Object.values(IconName), control: 'select', }, size: { @@ -89,7 +88,7 @@ export default { }; const Template = (args) => { - return ; + return ; }; export const DefaultStory = Template.bind({}); @@ -107,80 +106,82 @@ export const SizeStory = (args) => ( SizeStory.storyName = 'Size'; SizeStory.args = { - iconName: ICON_NAMES.CONFIRMATION, + iconName: IconName.Confirmation, }; -export const IconName = (args) => ( +export const IconNameStory = (args) => ( ); +IconNameStory.storyName = 'Icon Name'; + export const ColorAndBackgroundColor = (args) => ( diff --git a/ui/components/component-library/avatar-icon/avatar-icon.test.js b/ui/components/component-library/avatar-icon/avatar-icon.test.js index 8c81baa3f..9b065d19b 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.test.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { BackgroundColor, IconColor, @@ -13,7 +13,7 @@ describe('AvatarIcon', () => { it('should render correctly', () => { const { getByTestId, container } = render( , ); @@ -25,27 +25,27 @@ describe('AvatarIcon', () => { const { getByTestId } = render( <> @@ -71,7 +71,7 @@ describe('AvatarIcon', () => { it('should render with added classname', () => { const { getByTestId } = render( , @@ -82,7 +82,7 @@ describe('AvatarIcon', () => { it('should render with icon', () => { const { getByTestId } = render( , ); @@ -93,7 +93,7 @@ describe('AvatarIcon', () => { it('should render with success color icon and background color', () => { const { getByTestId } = render( ```jsx -import { BannerAlert, ICON_NAMES } from '../../component-library'; +import { BannerAlert, IconName } from '../../component-library'; console.log('ButtonLink actionButtonOnClick demo')} > diff --git a/ui/components/component-library/banner-alert/banner-alert.js b/ui/components/component-library/banner-alert/banner-alert.js index 31a248c59..60e114f8f 100644 --- a/ui/components/component-library/banner-alert/banner-alert.js +++ b/ui/components/component-library/banner-alert/banner-alert.js @@ -2,14 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; -import { BannerBase } from '..'; +import { BannerBase, Icon, IconName, IconSize } from '..'; import { BackgroundColor, IconColor, SEVERITIES, - Size, } from '../../../helpers/constants/design-system'; import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants'; @@ -23,23 +21,23 @@ export const BannerAlert = ({ switch (severity) { case SEVERITIES.DANGER: return { - name: ICON_NAMES.DANGER, + name: IconName.Danger, color: IconColor.errorDefault, }; case SEVERITIES.WARNING: return { - name: ICON_NAMES.WARNING, + name: IconName.Warning, color: IconColor.warningDefault, }; case SEVERITIES.SUCCESS: return { - name: ICON_NAMES.CONFIRMATION, + name: IconName.Confirmation, color: IconColor.successDefault, }; // Defaults to SEVERITIES.INFO default: return { - name: ICON_NAMES.INFO, + name: IconName.Info, color: IconColor.primaryDefault, }; } @@ -61,7 +59,7 @@ export const BannerAlert = ({ return ( } + startAccessory={} backgroundColor={severityBackground()} paddingLeft={2} className={classnames( diff --git a/ui/components/component-library/banner-alert/banner-alert.stories.js b/ui/components/component-library/banner-alert/banner-alert.stories.js index 757a2792a..beda29eb6 100644 --- a/ui/components/component-library/banner-alert/banner-alert.stories.js +++ b/ui/components/component-library/banner-alert/banner-alert.stories.js @@ -7,8 +7,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ButtonLink, ButtonPrimary } from '..'; -import { ICON_NAMES } from '../icon/deprecated'; +import { ButtonLink, ButtonPrimary, IconName } from '..'; import README from './README.mdx'; import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.'; @@ -165,7 +164,7 @@ ActionButton.args = { actionButtonLabel: 'Action', actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonProps: { - endIconName: ICON_NAMES.ARROW_2_RIGHT, + endIconName: IconName.Arrow2Right, }, children: 'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName', diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx index 3fce695a7..a6711ee97 100644 --- a/ui/components/component-library/banner-base/README.mdx +++ b/ui/components/component-library/banner-base/README.mdx @@ -81,13 +81,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas ```jsx -import { BannerBase, ICON_NAMES } from '../../component-library'; +import { BannerBase, IconName } from '../../component-library'; console.log('ButtonLink actionButtonOnClick demo')} > @@ -129,11 +129,11 @@ Use the `startAccessory` prop to add components such as icons or fox image to th ```jsx import { Size } from '../../../helpers/constants/design-system'; import { BannerBase } from '../../component-library'; -import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Icon, IconName } from '../../component-library'; } + startAccessory={} > The info icon on the left is passed through the startAccessory prop ; diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js index 62a5e2445..5f9dcc28e 100644 --- a/ui/components/component-library/banner-base/banner-base.js +++ b/ui/components/component-library/banner-base/banner-base.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { ButtonIcon, ButtonLink, Text } from '..'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '../icon'; import Box from '../../ui/box'; @@ -72,7 +72,7 @@ export const BannerBase = ({ , + startAccessory: , }; DefaultStory.storyName = 'Default'; @@ -144,7 +143,7 @@ ActionButton.args = { actionButtonLabel: 'Action', actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonProps: { - endIconName: ICON_NAMES.ARROW_2_RIGHT, + endIconName: IconName.Arrow2Right, }, children: 'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName', @@ -182,5 +181,5 @@ StartAccessory.args = { title: 'Start accessory demo', children: 'The info icon on the left is passed through the startAccessory prop', - startAccessory: , + startAccessory: , }; diff --git a/ui/components/component-library/banner-base/banner-base.test.js b/ui/components/component-library/banner-base/banner-base.test.js index 7ea2705cb..17f4643b3 100644 --- a/ui/components/component-library/banner-base/banner-base.test.js +++ b/ui/components/component-library/banner-base/banner-base.test.js @@ -4,7 +4,7 @@ import React from 'react'; import { renderWithUserEvent } from '../../../../test/lib/render-helpers'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { Icon, IconName } from '..'; import { BannerBase } from './banner-base'; describe('BannerBase', () => { @@ -58,7 +58,7 @@ describe('BannerBase', () => { title="Action prop demo" actionButtonLabel="Action" actionButtonProps={{ - endIconName: ICON_NAMES.ARROW_2_RIGHT, + endIconName: IconName.Arrow2Right, 'data-testid': 'action', className: 'mm-banner-base__action', }} @@ -78,7 +78,7 @@ describe('BannerBase', () => { const { getByTestId } = render( + } />, ); diff --git a/ui/components/component-library/banner-tip/README.mdx b/ui/components/component-library/banner-tip/README.mdx index e92bc9519..051cd6f4d 100644 --- a/ui/components/component-library/banner-tip/README.mdx +++ b/ui/components/component-library/banner-tip/README.mdx @@ -107,13 +107,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas ```jsx -import { BannerTip, ICON_NAMES } from '../../component-library'; +import { BannerTip, IconName } from '../../component-library'; console.log('ButtonLink actionButtonOnClick demo')} @@ -157,7 +157,7 @@ Use the `startAccessory` prop to pass a ReactNode to the start of the `BannerTip import { BannerTip } from '../../component-library'; } + startAccessory={} title="StartAccessory" > This is a demo of startAccessory override. diff --git a/ui/components/component-library/banner-tip/banner-tip.stories.js b/ui/components/component-library/banner-tip/banner-tip.stories.js index 30180e0cc..117a9e1b0 100644 --- a/ui/components/component-library/banner-tip/banner-tip.stories.js +++ b/ui/components/component-library/banner-tip/banner-tip.stories.js @@ -5,8 +5,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; -import { ButtonLink, ButtonPrimary } from '..'; +import { ButtonLink, ButtonPrimary, Icon, IconName } from '..'; import README from './README.mdx'; import { BannerTip, BannerTipLogoType } from '.'; @@ -141,7 +140,7 @@ ActionButton.args = { actionButtonLabel: 'Action', actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'), actionButtonProps: { - iconName: ICON_NAMES.ARROW_2_RIGHT, + iconName: IconName.Arrow2Right, iconPositionRight: true, }, children: @@ -176,7 +175,7 @@ export const StartAccessory = (args) => { return ( } + startAccessory={} title="StartAccessory" onClose={() => console.log('close button clicked')} > diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx index 00098b473..2aeca22fc 100644 --- a/ui/components/component-library/button-base/README.mdx +++ b/ui/components/component-library/button-base/README.mdx @@ -144,7 +144,7 @@ import { ButtonBase } from '../../component-library'; ### Icon Name -Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object from `./ui/components/component-library` to select icon. +Use the `startIconName` and/or `endIconName` prop with the `IconName` enum from `./ui/components/component-library` to select icon. @@ -152,9 +152,9 @@ Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object f ```jsx import { ButtonBase } from '../../component-library'; -import { ICON_NAMES } from '../icon'; +import { IconName } from '../icon'; -Button; +Button; ``` @@ -163,9 +163,9 @@ import { ICON_NAMES } from '../icon'; ```jsx import { ButtonBase } from '../../component-library'; -import { ICON_NAMES } from '../icon'; +import { IconName } from '../icon'; -Button; +Button; ``` ### RTL @@ -177,18 +177,18 @@ For RTL language support use the `textDirection` prop. ```jsx -import { ButtonBase, ICON_NAMES, TextDirection } from '../../component-library'; +import { ButtonBase, IconName, TextDirection } from '../../component-library'; <> Button Demo Button Demo diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js index a9b60a265..21a9e681d 100644 --- a/ui/components/component-library/button-base/button-base.js +++ b/ui/components/component-library/button-base/button-base.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Box from '../../ui/box'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { IconName, Icon, IconSize } from '../icon'; import { Text } from '../text'; import { @@ -12,7 +12,6 @@ import { JustifyContent, TextColor, TextVariant, - Size, BorderRadius, BackgroundColor, IconColor, @@ -75,7 +74,7 @@ export const ButtonBase = ({ {startIconName && ( )} @@ -160,26 +159,26 @@ ButtonBase.propTypes = { externalLink: PropTypes.bool, /** * Add icon to start (left side) of button text passing icon name - * The name of the icon to display. Should be one of ICON_NAMES + * The name of the icon to display. Should be one of IconName */ - startIconName: PropTypes.oneOf(Object.values(ICON_NAMES)), + startIconName: PropTypes.oneOf(Object.values(IconName)), /** * iconProps accepts all the props from Icon */ - startIconProps: PropTypes.shape(Icon.PropTypes), + startIconProps: PropTypes.object, /** * Add icon to end (right side) of button text passing icon name - * The name of the icon to display. Should be one of ICON_NAMES + * The name of the icon to display. Should be one of IconName */ - endIconName: PropTypes.oneOf(Object.values(ICON_NAMES)), + endIconName: PropTypes.oneOf(Object.values(IconName)), /** * iconProps accepts all the props from Icon */ - endIconProps: PropTypes.shape(Icon.PropTypes), + endIconProps: PropTypes.object, /** * iconLoadingProps accepts all the props from Icon */ - iconLoadingProps: PropTypes.shape(Icon.PropTypes), + iconLoadingProps: PropTypes.object, /** * Boolean to show loading spinner in button */ diff --git a/ui/components/component-library/button-base/button-base.stories.js b/ui/components/component-library/button-base/button-base.stories.js index 302aed58e..6be335435 100644 --- a/ui/components/component-library/button-base/button-base.stories.js +++ b/ui/components/component-library/button-base/button-base.stories.js @@ -7,8 +7,8 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { TextDirection } from '..'; -import { ICON_NAMES } from '../icon/deprecated'; +import { TextDirection, IconName } from '..'; + import { BUTTON_BASE_SIZES } from './button-base.constants'; import { ButtonBase } from './button-base'; import README from './README.mdx'; @@ -59,11 +59,11 @@ export default { }, startIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), }, endIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), }, loading: { control: 'boolean', @@ -177,13 +177,13 @@ Loading.args = { }; export const StartIconName = (args) => ( - + Button ); export const EndIconName = (args) => ( - + Button ); @@ -192,15 +192,15 @@ export const Rtl = (args) => ( Button Demo Button Demo diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js index 6008ed167..6e3a3bf43 100644 --- a/ui/components/component-library/button-base/button-base.test.js +++ b/ui/components/component-library/button-base/button-base.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { BUTTON_BASE_SIZES } from './button-base.constants'; import { ButtonBase } from './button-base'; @@ -125,9 +125,9 @@ describe('ButtonBase', () => { const { getByTestId } = render( , ); diff --git a/ui/components/component-library/button-icon/README.mdx b/ui/components/component-library/button-icon/README.mdx index c41f088ae..33a712d7c 100644 --- a/ui/components/component-library/button-icon/README.mdx +++ b/ui/components/component-library/button-icon/README.mdx @@ -17,19 +17,19 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-u ### Icon Name\* -Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon. +Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon. Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. - + ```jsx import { ButtonIcon } from '../ui/component-library'; -import { ICON_NAMES } from '../icon'; +import { IconName } from '../icon'; -; +; ``` ### Size @@ -52,8 +52,8 @@ Possible sizes include: import { Size } from '../../../helpers/constants/design-system'; import { ButtonIcon } from '../ui/component-library'; - - + + ``` ### Aria Label @@ -65,12 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil ```jsx -import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { ButtonIcon, IconName } from '../ui/component-library'; import { Color } from '../../../helpers/constants/design-system'; - - + + ``` ### As @@ -87,12 +87,12 @@ Button `as` options: ```jsx -import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { ButtonIcon, IconName } from '../ui/component-library'; import { Color } from '../../../helpers/constants/design-system'; - - + + ``` ### Href @@ -104,13 +104,13 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag. ```jsx -import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { ButtonIcon, IconName } from '../ui/component-library'; import { Color } from '../../../helpers/constants/design-system'; ; @@ -125,11 +125,11 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc ```jsx -import { ButtonIcon, ICON_NAMES } from '../ui/component-library'; +import { ButtonIcon, IconName } from '../ui/component-library'; import { Color } from '../../../helpers/constants/design-system'; ; @@ -146,5 +146,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 043d59655..2428aedf6 100644 --- a/ui/components/component-library/button-icon/button-icon.js +++ b/ui/components/component-library/button-icon/button-icon.js @@ -13,7 +13,7 @@ import { } from '../../../helpers/constants/design-system'; import Box from '../../ui/box'; -import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { Icon, IconName } from '../icon'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; @@ -84,9 +84,9 @@ ButtonIcon.propTypes = { */ href: PropTypes.string, /** - * The name of the icon to display. Should be one of ICON_NAMES + * The name of the icon to display. Should be one of IconName */ - iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired, + iconName: PropTypes.oneOf(Object.values(IconName)).isRequired, /** * iconProps accepts all the props from Icon */ 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 4c07aac7e..a86ad8312 100644 --- a/ui/components/component-library/button-icon/button-icon.stories.js +++ b/ui/components/component-library/button-icon/button-icon.stories.js @@ -7,7 +7,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { ButtonIcon } from './button-icon'; import README from './README.mdx'; @@ -62,7 +62,7 @@ export default { }, iconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), }, size: { control: 'select', @@ -94,19 +94,21 @@ export default { export const DefaultStory = (args) => ; DefaultStory.args = { - iconName: ICON_NAMES.CLOSE, + iconName: IconName.Close, ariaLabel: 'Close', }; DefaultStory.storyName = 'Default'; -export const IconName = (args) => ; +export const IconNameStory = (args) => ; -IconName.args = { - iconName: ICON_NAMES.CLOSE, +IconNameStory.args = { + iconName: IconName.Close, ariaLabel: 'Close', }; +IconNameStory.storyName = 'IconName'; + export const SizeStory = (args) => ( ( @@ -136,7 +138,7 @@ export const AriaLabel = (args) => ( <> @@ -145,7 +147,7 @@ export const AriaLabel = (args) => ( href="https://metamask.io/" target="_blank" color={Color.primaryDefault} - iconName={ICON_NAMES.EXPORT} + iconName={IconName.Export} ariaLabel="Visit MetaMask.io" {...args} /> @@ -154,20 +156,20 @@ export const AriaLabel = (args) => ( export const As = (args) => ( - + ); export const Href = (args) => ( - + ); Href.args = { @@ -177,7 +179,7 @@ Href.args = { }; export const ColorStory = (args) => ( - + ); ColorStory.storyName = 'Color'; @@ -186,7 +188,7 @@ ColorStory.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 a9e4fd6d9..236c258a8 100644 --- a/ui/components/component-library/button-icon/button-icon.test.js +++ b/ui/components/component-library/button-icon/button-icon.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; import { IconColor } from '../../../helpers/constants/design-system'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { ButtonIcon } from './button-icon'; @@ -11,7 +11,7 @@ describe('ButtonIcon', () => { const { getByTestId, container } = render( , ); @@ -25,7 +25,7 @@ describe('ButtonIcon', () => { , ); @@ -39,7 +39,7 @@ describe('ButtonIcon', () => { , ); @@ -51,13 +51,13 @@ describe('ButtonIcon', () => { const { getByTestId } = render( <> { const { getByTestId } = render( <> { , ); @@ -115,7 +115,7 @@ describe('ButtonIcon', () => { , @@ -128,7 +128,7 @@ describe('ButtonIcon', () => { const { getByTestId } = render( , @@ -139,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/button-link/button-link.stories.js b/ui/components/component-library/button-link/button-link.stories.js index b9eacd3ed..2ceaf4851 100644 --- a/ui/components/component-library/button-link/button-link.stories.js +++ b/ui/components/component-library/button-link/button-link.stories.js @@ -9,7 +9,7 @@ import { TextColor, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { Text } from '../text'; import { ButtonLink } from './button-link'; import { BUTTON_LINK_SIZES } from './button-link.constants'; @@ -73,12 +73,12 @@ export default { }, startIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), table: { category: 'button base props' }, }, endIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), table: { category: 'button base props' }, }, startIconProps: { diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js index 5c1b68579..0f82c7652 100644 --- a/ui/components/component-library/button-link/button-link.test.js +++ b/ui/components/component-library/button-link/button-link.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; import { Size } from '../../../helpers/constants/design-system'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { ButtonLink } from './button-link'; import { BUTTON_LINK_SIZES } from './button-link.constants'; @@ -82,7 +82,7 @@ describe('ButtonLink', () => { }); it('should render with icon', () => { const { container } = render( - , + , ); const icons = container.getElementsByClassName('mm-icon').length; diff --git a/ui/components/component-library/button-primary/button-primary.stories.js b/ui/components/component-library/button-primary/button-primary.stories.js index d3a0bb3ff..c668153ee 100644 --- a/ui/components/component-library/button-primary/button-primary.stories.js +++ b/ui/components/component-library/button-primary/button-primary.stories.js @@ -5,7 +5,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { ButtonPrimary } from './button-primary'; import README from './README.mdx'; @@ -63,12 +63,12 @@ export default { }, startIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), table: { category: 'button base props' }, }, endIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), table: { category: 'button base props' }, }, startIconProps: { diff --git a/ui/components/component-library/button-primary/button-primary.test.js b/ui/components/component-library/button-primary/button-primary.test.js index b16c7c36f..192e872dd 100644 --- a/ui/components/component-library/button-primary/button-primary.test.js +++ b/ui/components/component-library/button-primary/button-primary.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { ButtonPrimary } from './button-primary'; import { BUTTON_PRIMARY_SIZES } from './button-primary.constants'; @@ -90,10 +90,7 @@ describe('ButtonPrimary', () => { }); it('should render with icon', () => { const { container } = render( - , + , ); const icons = container.getElementsByClassName('mm-icon').length; diff --git a/ui/components/component-library/button-secondary/button-secondary.stories.js b/ui/components/component-library/button-secondary/button-secondary.stories.js index 6e4a0c445..94166d359 100644 --- a/ui/components/component-library/button-secondary/button-secondary.stories.js +++ b/ui/components/component-library/button-secondary/button-secondary.stories.js @@ -5,7 +5,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { ButtonSecondary } from './button-secondary'; import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants'; import README from './README.mdx'; @@ -62,12 +62,12 @@ export default { }, startIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), table: { category: 'button base props' }, }, endIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), table: { category: 'button base props' }, }, startIconProps: { diff --git a/ui/components/component-library/button-secondary/button-secondary.test.js b/ui/components/component-library/button-secondary/button-secondary.test.js index 06a331a59..0529664cd 100644 --- a/ui/components/component-library/button-secondary/button-secondary.test.js +++ b/ui/components/component-library/button-secondary/button-secondary.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { ButtonSecondary } from './button-secondary'; import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants'; @@ -94,10 +94,7 @@ describe('ButtonSecondary', () => { }); it('should render with icon', () => { const { container } = render( - , + , ); const icons = container.getElementsByClassName('mm-icon').length; diff --git a/ui/components/component-library/button/README.mdx b/ui/components/component-library/button/README.mdx index 59d869f5d..0e1527ff7 100644 --- a/ui/components/component-library/button/README.mdx +++ b/ui/components/component-library/button/README.mdx @@ -175,7 +175,7 @@ import { Button } from '../ui/component-library'; ### Icon Name -Use the `startIconName` and/or `endIconName` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon. +Use the `startIconName` and/or `endIconName` prop and the `IconName` enum from `./ui/components/component-library/icon` to select icon. Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. @@ -185,9 +185,9 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto ```jsx import { Button } from '../ui/component-library'; -import { ICON_NAMES } from '../icon'; +import { IconName } from '../icon'; -; +; ``` @@ -196,7 +196,7 @@ import { ICON_NAMES } from '../icon'; ```jsx import { Button } from '../ui/component-library'; -import { ICON_NAMES } from '../icon'; +import { IconName } from '../icon'; -; +; ``` diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js index 0e80573ce..e85d37fa6 100644 --- a/ui/components/component-library/button/button.stories.js +++ b/ui/components/component-library/button/button.stories.js @@ -6,7 +6,7 @@ import { Size, TextVariant, } from '../../../helpers/constants/design-system'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants'; import Box from '../../ui/box/box'; import { Text } from '../text'; @@ -66,11 +66,11 @@ export default { }, startIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), }, endIconName: { control: 'select', - options: Object.values(ICON_NAMES), + options: Object.values(IconName), }, startIconProps: { control: 'object', @@ -214,13 +214,13 @@ Loading.args = { }; export const StartIconName = (args) => ( - ); export const EndIconName = (args) => ( - ); diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js index af974d796..1fd245238 100644 --- a/ui/components/component-library/button/button.test.js +++ b/ui/components/component-library/button/button.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '../icon/deprecated'; +import { IconName } from '..'; import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants'; import { Button } from './button'; @@ -134,7 +134,7 @@ describe('Button', () => { const { getByTestId } = render(