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

Updating icon imports to TS version in component-library folder (#18449)

Browse Source
This commit is contained in:
George Marshall 2023-04-05 09:11:10 -07:00 committed by GitHub
parent 94292fadc9
commit 4ce605f514
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 259 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/component-library/avatar-base/avatar-base.stories.js
View File

@ -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}
>
<Icon name={ICON_NAMES.USER} color={Color.infoDefault} />
<Icon name={IconName.User} color={Color.infoDefault} />
</AvatarBase>
</Box>
);

6
ui/components/component-library/avatar-favicon/avatar-favicon.js
View File

@ -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 = ({
/>
) : (
<Icon
name={ICON_NAMES.GLOBAL}
name={IconName.Global}
color={IconColor.iconDefault}
size={size}
{...fallbackIconProps}
@ -65,7 +65,7 @@ AvatarFavicon.propTypes = {
/**
* Props for the fallback icon. All Icon props can be used
*/
fallbackIconProps: PropTypes.shape(Icon.PropTypes),
fallbackIconProps: PropTypes.object,
/**
* The size of the AvatarFavicon
* Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px

18
ui/components/component-library/avatar-icon/README.mdx
View File

@ -44,7 +44,7 @@ Defaults to `Size.MD`
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
import { AvatarIcon, IconName } from '../ui/component-library';
<AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} />
@ -55,22 +55,22 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
### Icon Name<span style={{ color: 'red' }}>\*</span>
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.
<Canvas>
<Story id="components-componentlibrary-avataricon--icon-name" />
<Story id="components-componentlibrary-avataricon--icon-name-story" />
</Canvas>
```jsx
import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
import { AvatarIcon, IconName } from '../ui/component-library';
<AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} />
<AvatarIcon iconName={ICON_NAMES.CONFIRMATION} />
<AvatarIcon iconName={ICON_NAMES.INFO} />
<AvatarIcon iconName={ICON_NAMES.WARNING} />
<AvatarIcon iconName={ICON_NAMES.DANGER} />
<AvatarIcon iconName={IconName.SwapHorizontal} />
<AvatarIcon iconName={IconName.Confirmation} />
<AvatarIcon iconName={IconName.Info} />
<AvatarIcon iconName={IconName.Warning} />
<AvatarIcon iconName={IconName.Danger} />
```
### Color and Background Color

48
ui/components/component-library/avatar-icon/avatar-icon.js
View File

@ -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 (
<AvatarBase
}) => (
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color}
backgroundColor={backgroundColor}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...props}
>
<Icon
color={IconColor.inherit}
name={iconName}
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color}
backgroundColor={backgroundColor}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...props}
>
<Icon
color={IconColor.inherit}
name={iconName}
size={size}
{...iconProps}
/>
</AvatarBase>
);
};
{...iconProps}
/>
</AvatarBase>
);
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

35
ui/components/component-library/avatar-icon/avatar-icon.stories.js
View File

@ -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 <AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} {...args} />;
return <AvatarIcon iconName={IconName.SwapHorizontal} {...args} />;
};
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) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarIcon
color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted}
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
{...args}
/>
<AvatarIcon
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
iconName={ICON_NAMES.CONFIRMATION}
iconName={IconName.Confirmation}
{...args}
/>
<AvatarIcon
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted}
iconName={ICON_NAMES.INFO}
iconName={IconName.Info}
{...args}
/>
<AvatarIcon
color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted}
iconName={ICON_NAMES.WARNING}
iconName={IconName.Warning}
{...args}
/>
<AvatarIcon
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
iconName={ICON_NAMES.DANGER}
iconName={IconName.Danger}
{...args}
/>
</Box>
);
IconNameStory.storyName = 'Icon Name';
export const ColorAndBackgroundColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarIcon
color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted}
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
{...args}
/>
<AvatarIcon
color={IconColor.primaryInverse}
backgroundColor={BackgroundColor.primaryDefault}
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
{...args}
/>
<AvatarIcon
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
iconName={ICON_NAMES.CONFIRMATION}
iconName={IconName.Confirmation}
{...args}
/>
<AvatarIcon
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted}
iconName={ICON_NAMES.INFO}
iconName={IconName.Info}
{...args}
/>
<AvatarIcon
color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted}
iconName={ICON_NAMES.WARNING}
iconName={IconName.Warning}
{...args}
/>
<AvatarIcon
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
iconName={ICON_NAMES.DANGER}
iconName={IconName.Danger}
{...args}
/>
</Box>

20
ui/components/component-library/avatar-icon/avatar-icon.test.js
View File

@ -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(
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
data-testid="avatar-icon"
/>,
);
@ -25,27 +25,27 @@ describe('AvatarIcon', () => {
const { getByTestId } = render(
<>
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.XS}
data-testid={AVATAR_ICON_SIZES.XS}
/>
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.SM}
data-testid={AVATAR_ICON_SIZES.SM}
/>
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.MD}
data-testid={AVATAR_ICON_SIZES.MD}
/>
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.LG}
data-testid={AVATAR_ICON_SIZES.LG}
/>
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.XL}
data-testid={AVATAR_ICON_SIZES.XL}
/>
@ -71,7 +71,7 @@ describe('AvatarIcon', () => {
it('should render with added classname', () => {
const { getByTestId } = render(
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
className="mm-avatar-icon--test"
data-testid="classname"
/>,
@ -82,7 +82,7 @@ describe('AvatarIcon', () => {
it('should render with icon', () => {
const { getByTestId } = render(
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
iconProps={{ 'data-testid': 'avatar-icon' }}
/>,
);
@ -93,7 +93,7 @@ describe('AvatarIcon', () => {
it('should render with success color icon and background color', () => {
const { getByTestId } = render(
<AvatarIcon
iconName={ICON_NAMES.SWAP_HORIZONTAL}
iconName={IconName.SwapHorizontal}
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
data-testid="success"

4
ui/components/component-library/banner-alert/README.mdx
View File

@ -118,13 +118,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
</Canvas>
```jsx
import { BannerAlert, ICON_NAMES } from '../../component-library';
import { BannerAlert, IconName } from '../../component-library';
<BannerAlert
title="Action prop demo"
actionButtonLabel="Action"
actionButtonProps={{
endIconName: ICON_NAMES.ARROW_2_RIGHT,
endIconName: IconName.Arrow2Right,
}}
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
>

14
ui/components/component-library/banner-alert/banner-alert.js
View File

@ -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 (
<BannerBase
startAccessory={<Icon size={Size.LG} {...severityIcon()} />}
startAccessory={<Icon size={IconSize.Lg} {...severityIcon()} />}
backgroundColor={severityBackground()}
paddingLeft={2}
className={classnames(

5
ui/components/component-library/banner-alert/banner-alert.stories.js
View File

@ -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',

8
ui/components/component-library/banner-base/README.mdx
View File

@ -81,13 +81,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
</Canvas>
```jsx
import { BannerBase, ICON_NAMES } from '../../component-library';
import { BannerBase, IconName } from '../../component-library';
<BannerBase
title="Action prop demo"
actionButtonLabel="Action"
actionButtonProps={{
endIconName: ICON_NAMES.ARROW_2_RIGHT,
endIconName: IconName.Arrow2Right,
}}
actionButtonOnClick={() => 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';
<BannerBase
title="Start accessory demo"
startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />}
startAccessory={<Icon name={IconName.Info} size={IconSize.Lg} />}
>
The info icon on the left is passed through the startAccessory prop
</BannerBase>;

4
ui/components/component-library/banner-base/banner-base.js
View File

@ -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 = ({
<ButtonIcon
className="mm-banner-base__close-button"
marginLeft="auto"
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
size={Size.SM}
ariaLabel="Close" // TODO: i18n
onClick={onClose}

9
ui/components/component-library/banner-base/banner-base.stories.js
View File

@ -1,8 +1,7 @@
import React from 'react';
import { useState } from '@storybook/addons';
import { Size } from '../../../helpers/constants/design-system';
import { ButtonLink, ButtonPrimary } from '..';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { ButtonLink, ButtonPrimary, Icon, IconName, IconSize } from '..';
import { BannerBase } from './banner-base';
import README from './README.mdx';
@ -96,7 +95,7 @@ DefaultStory.args = {
title: 'Title is sentence case no period',
children: "Description shouldn't repeat title. 1-3 lines.",
actionButtonLabel: 'Action',
startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />,
startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
};
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: <Icon name={ICON_NAMES.INFO} size={Size.LG} />,
startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
};

6
ui/components/component-library/banner-base/banner-base.test.js
View File

@ -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(
<BannerBase
startAccessory={
<Icon data-testid="start-accessory" name={ICON_NAMES.ADD_SQUARE} />
<Icon data-testid="start-accessory" name={IconName.AddSquare} />
}
/>,
);

6
ui/components/component-library/banner-tip/README.mdx
View File

@ -107,13 +107,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
</Canvas>
```jsx
import { BannerTip, ICON_NAMES } from '../../component-library';
import { BannerTip, IconName } from '../../component-library';
<BannerTip
title="Action prop demo"
actionButtonLabel="Action"
actionButtonProps={{
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
icon: IconName.Arrow2Right, // TODO: change to iconName
iconPositionRight: true,
}}
actionButtonOnClick={() => 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';
<BannerTip
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
startAccessory={<Icon name={IconName.Messages} />}
title="StartAccessory"
>
This is a demo of startAccessory override.

7
ui/components/component-library/banner-tip/banner-tip.stories.js
View File

@ -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 (
<BannerTip
{...args}
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
startAccessory={<Icon name={IconName.Messages} />}
title="StartAccessory"
onClose={() => console.log('close button clicked')}
>

20
ui/components/component-library/button-base/README.mdx
View File

@ -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.
<Canvas>
<Story id="components-componentlibrary-buttonbase--start-icon-name" />
@ -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';
<ButtonBase startIconName={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>;
<ButtonBase startIconName={IconName.AddSquare}>Button</ButtonBase>;
```
<Canvas>
@ -163,9 +163,9 @@ import { ICON_NAMES } from '../icon';
```jsx
import { ButtonBase } from '../../component-library';
import { ICON_NAMES } from '../icon';
import { IconName } from '../icon';
<ButtonBase endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</ButtonBase>;
<ButtonBase endIconName={IconName.Arrow2Right}>Button</ButtonBase>;
```
### RTL
@ -177,18 +177,18 @@ For RTL language support use the `textDirection` prop.
</Canvas>
```jsx
import { ButtonBase, ICON_NAMES, TextDirection } from '../../component-library';
import { ButtonBase, IconName, TextDirection } from '../../component-library';
<>
<ButtonBase
startIconName={ICON_NAMES.ADD_SQUARE}
endIconName={ICON_NAMES.ARROW_2_RIGHT}
startIconName={IconName.AddSquare}
endIconName={IconName.Arrow2Right}
>
Button Demo
</ButtonBase>
<ButtonBase
startIconName={ICON_NAMES.ADD_SQUARE}
endIconName={ICON_NAMES.ARROW_2_RIGHT}
startIconName={IconName.AddSquare}
endIconName={IconName.Arrow2Right}
textDirection={TextDirection.RightToLeft}
>
Button Demo

25
ui/components/component-library/button-base/button-base.js
View File

@ -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 && (
<Icon
name={startIconName}
size={Size.SM}
size={IconSize.Sm}
marginInlineEnd={1}
{...startIconProps}
color={loading ? IconColor.transparent : startIconProps?.color}
@ -102,7 +101,7 @@ export const ButtonBase = ({
{endIconName && (
<Icon
name={endIconName}
size={Size.SM}
size={IconSize.Sm}
marginInlineStart={1}
{...endIconProps}
color={loading ? IconColor.transparent : endIconProps?.color}
@ -111,9 +110,9 @@ export const ButtonBase = ({
{loading && (
<Icon
className="mm-button-base__icon-loading"
name={ICON_NAMES.LOADING}
name={IconName.Loading}
color={color}
size={Size.MD}
size={IconSize.Md}
{...iconLoadingProps}
/>
)}
@ -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
*/

20
ui/components/component-library/button-base/button-base.stories.js
View File

@ -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) => (
<ButtonBase {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
<ButtonBase {...args} startIconName={IconName.AddSquare}>
Button
</ButtonBase>
);
export const EndIconName = (args) => (
<ButtonBase {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
<ButtonBase {...args} endIconName={IconName.Arrow2Right}>
Button
</ButtonBase>
);
@ -192,15 +192,15 @@ export const Rtl = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<ButtonBase
{...args}
startIconName={ICON_NAMES.ADD_SQUARE}
endIconName={ICON_NAMES.ARROW_2_RIGHT}
startIconName={IconName.AddSquare}
endIconName={IconName.Arrow2Right}
>
Button Demo
</ButtonBase>
<ButtonBase
{...args}
startIconName={ICON_NAMES.ADD_SQUARE}
endIconName={ICON_NAMES.ARROW_2_RIGHT}
startIconName={IconName.AddSquare}
endIconName={IconName.Arrow2Right}
textDirection={TextDirection.RightToLeft}
>
Button Demo

6
ui/components/component-library/button-base/button-base.test.js
View File

@ -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(
<ButtonBase
data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE}
startIconName={IconName.AddSquare}
startIconProps={{ 'data-testid': 'start-button-icon' }}
endIconName={ICON_NAMES.ADD_SQUARE}
endIconName={IconName.AddSquare}
endIconProps={{ 'data-testid': 'end-button-icon' }}
/>,
);

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

@ -17,19 +17,19 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-u
### Icon Name<span style={{ color: 'red' }}>\*</span>
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.
<Canvas>
<Story id="components-componentlibrary-buttonicon--icon-name" />
<Story id="components-componentlibrary-buttonicon--icon-name-story" />
</Canvas>
```jsx
import { ButtonIcon } from '../ui/component-library';
import { ICON_NAMES } from '../icon';
import { IconName } from '../icon';
<ButtonIcon iconName={ICON_NAMES.CLOSE} ariaLabel="Close" />;
<ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
```
### Size
@ -52,8 +52,8 @@ Possible sizes include:
import { Size } from '../../../helpers/constants/design-system';
import { ButtonIcon } from '../ui/component-library';
<ButtonIcon size={Size.SM} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon size={Size.LG} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon size={Size.SM} iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon size={Size.LG} iconName={IconName.Close} ariaLabel="Close"/>
```
### Aria Label
@ -65,12 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
</Canvas>
```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
```
### As
@ -87,12 +87,12 @@ Button `as` options:
</Canvas>
```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
```
### Href
@ -104,13 +104,13 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas>
```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon
href="https://metamask.io/"
target="_blank"
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io"
/>;
@ -125,11 +125,11 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc
</Canvas>
```jsx
import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
import { ButtonIcon, IconName } from '../ui/component-library';
import { Color } from '../../../helpers/constants/design-system';
<ButtonIcon
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
color={Color.primaryDefault}
ariaLabel="Visit MetaMask.io"
/>;
@ -146,5 +146,5 @@ Use the boolean `disabled` prop to disable button
```jsx
import { ButtonIcon } from '../ui/component-library';
<ButtonIcon iconName={ICON_NAMES.CLOSE} disabled ariaLabel="Close" />;
<ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
```

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

@ -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
*/

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

@ -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) => <ButtonIcon {...args} />;
DefaultStory.args = {
iconName: ICON_NAMES.CLOSE,
iconName: IconName.Close,
ariaLabel: 'Close',
};
DefaultStory.storyName = 'Default';
export const IconName = (args) => <ButtonIcon {...args} />;
export const IconNameStory = (args) => <ButtonIcon {...args} />;
IconName.args = {
iconName: ICON_NAMES.CLOSE,
IconNameStory.args = {
iconName: IconName.Close,
ariaLabel: 'Close',
};
IconNameStory.storyName = 'IconName';
export const SizeStory = (args) => (
<Box
display={DISPLAY.FLEX}
@ -117,14 +119,14 @@ export const SizeStory = (args) => (
<ButtonIcon
{...args}
size={Size.SM}
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
ariaLabel="Close"
/>
<ButtonIcon
{...args}
size={Size.LG}
color={Color.primaryDefault}
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
ariaLabel="Close"
/>
</Box>
@ -136,7 +138,7 @@ export const AriaLabel = (args) => (
<>
<ButtonIcon
as="button"
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
ariaLabel="Close"
{...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) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
<ButtonIcon
as="a"
href="#"
{...args}
color={Color.primaryDefault}
iconName={ICON_NAMES.EXPORT}
iconName={IconName.Export}
ariaLabel="demo"
/>
</Box>
);
export const Href = (args) => (
<ButtonIcon iconName={ICON_NAMES.EXPORT} {...args} target="_blank" />
<ButtonIcon iconName={IconName.Export} {...args} target="_blank" />
);
Href.args = {
@ -177,7 +179,7 @@ Href.args = {
};
export const ColorStory = (args) => (
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
);
ColorStory.storyName = 'Color';
@ -186,7 +188,7 @@ ColorStory.args = {
};
export const Disabled = (args) => (
<ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
<ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
);
Disabled.args = {

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

@ -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(
<ButtonIcon
data-testid="button-icon"
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
/>,
);
@ -25,7 +25,7 @@ describe('ButtonIcon', () => {
<ButtonIcon
as="a"
data-testid="button-icon"
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
/>,
);
@ -39,7 +39,7 @@ describe('ButtonIcon', () => {
<ButtonIcon
href="/metamask"
data-testid="button-icon"
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
/>,
);
@ -51,13 +51,13 @@ describe('ButtonIcon', () => {
const { getByTestId } = render(
<>
<ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
size={BUTTON_ICON_SIZES.SM}
data-testid={BUTTON_ICON_SIZES.SM}
/>
<ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
size={BUTTON_ICON_SIZES.LG}
data-testid={BUTTON_ICON_SIZES.LG}
@ -76,13 +76,13 @@ describe('ButtonIcon', () => {
const { getByTestId } = render(
<>
<ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
color={IconColor.iconDefault}
data-testid={IconColor.iconDefault}
/>
<ButtonIcon
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
color={IconColor.errorDefault}
data-testid={IconColor.errorDefault}
@ -102,7 +102,7 @@ describe('ButtonIcon', () => {
<ButtonIcon
data-testid="classname"
className="mm-button-icon--test"
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
/>,
);
@ -115,7 +115,7 @@ describe('ButtonIcon', () => {
<ButtonIcon
disabled
data-testid="disabled"
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
/>
</>,
@ -128,7 +128,7 @@ describe('ButtonIcon', () => {
const { getByTestId } = render(
<ButtonIcon
data-testid="icon"
iconName={ICON_NAMES.ADD_SQUARE}
iconName={IconName.AddSquare}
ariaLabel="add"
iconProps={{ 'data-testid': 'button-icon' }}
/>,
@ -139,7 +139,7 @@ describe('ButtonIcon', () => {
it('should render with aria-label', () => {
const { getByLabelText } = render(
<ButtonIcon iconName={ICON_NAMES.ADD_SQUARE} ariaLabel="add" />,
<ButtonIcon iconName={IconName.AddSquare} ariaLabel="add" />,
);
expect(getByLabelText('add')).toBeDefined();

6
ui/components/component-library/button-link/button-link.stories.js
View File

@ -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: {

4
ui/components/component-library/button-link/button-link.test.js
View File

@ -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(
<ButtonLink data-testid="icon" startIconName={ICON_NAMES.ADD_SQUARE} />,
<ButtonLink data-testid="icon" startIconName={IconName.AddSquare} />,
);
const icons = container.getElementsByClassName('mm-icon').length;

6
ui/components/component-library/button-primary/button-primary.stories.js
View File

@ -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: {

7
ui/components/component-library/button-primary/button-primary.test.js
View File

@ -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(
<ButtonPrimary
data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE}
/>,
<ButtonPrimary data-testid="icon" startIconName={IconName.AddSquare} />,
);
const icons = container.getElementsByClassName('mm-icon').length;

6
ui/components/component-library/button-secondary/button-secondary.stories.js
View File

@ -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: {

7
ui/components/component-library/button-secondary/button-secondary.test.js
View File

@ -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(
<ButtonSecondary
data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE}
/>,
<ButtonSecondary data-testid="icon" startIconName={IconName.AddSquare} />,
);
const icons = container.getElementsByClassName('mm-icon').length;

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

@ -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';
<Button startIconName={ICON_NAMES.ADD_SQUARE}>Button</Button>;
<Button startIconName={IconName.AddSquare}>Button</Button>;
```
<Canvas>
@ -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';
<Button endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</Button>;
<Button endIconName={IconName.Arrow2Right}>Button</Button>;
```

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

@ -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) => (
<Button {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
<Button {...args} startIconName={IconName.AddSquare}>
Button
</Button>
);
export const EndIconName = (args) => (
<Button {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
<Button {...args} endIconName={IconName.Arrow2Right}>
Button
</Button>
);

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

@ -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(
<Button
data-testid="icon"
startIconName={ICON_NAMES.ADD_SQUARE}
startIconName={IconName.AddSquare}
startIconProps={{ 'data-testid': 'start-button-icon' }}
>
Button

10
ui/components/component-library/form-text-field/README.mdx
View File

@ -99,7 +99,7 @@ import {
ButtonPrimary,
ButtonSecondary,
FormTextField,
ICON_NAMES,
IconName,
Text,
} from '../../component-library';
@ -229,7 +229,7 @@ return (
<ButtonPrimary type="submit">Submit</ButtonPrimary>
</Box>
</Box>
<ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger>
<ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
Clear form
</ButtonSecondary>
{submitted === FORM_STATE.SUCCESS && (
@ -264,7 +264,7 @@ import {
import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated'
import { Icon, IconName } from '..'
import {
ButtonLink,
FormTextField,
@ -293,8 +293,8 @@ import {
Custom spending cap
</Label>
<Icon
name={ICON_NAMES.INFO}
size={Size.SM}
name={IconName.Info}
size={IconSize.Sm}
marginLeft={1}
color={IconColor.iconAlternative}
/>

11
ui/components/component-library/form-text-field/form-text-field.stories.js
View File

@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { useArgs } from '@storybook/client-api';
import {
Size,
DISPLAY,
AlignItems,
TextVariant,
@ -12,7 +11,6 @@ import {
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import {
ButtonLink,
ButtonPrimary,
@ -22,6 +20,9 @@ import {
Text,
TEXT_FIELD_SIZES,
TEXT_FIELD_TYPES,
Icon,
IconName,
IconSize,
} from '..';
import { FormTextField } from './form-text-field';
@ -372,7 +373,7 @@ export const FormExample = () => {
<ButtonPrimary type="submit">Submit</ButtonPrimary>
</Box>
</Box>
<ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger>
<ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
Clear form
</ButtonSecondary>
{submitted === FORM_STATE.SUCCESS && (
@ -405,8 +406,8 @@ export const CustomLabelOrHelpText = () => (
import the Label component separately */}
<Label htmlFor="custom-spending-cap">Custom spending cap</Label>
<Icon
name={ICON_NAMES.INFO}
size={Size.SM}
name={IconName.Info}
size={IconSize.Sm}
marginLeft={1}
color={IconColor.iconAlternative}
/>

7
ui/components/component-library/help-text/README.mdx
View File

@ -28,8 +28,7 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-
```jsx
import { Size, IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../icon/deprecated';
import { HelpText } from '../../component-library';
import { HelpText, Icon, IconName, IconSize } from '../../component-library';
<HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
<HelpText>
@ -37,8 +36,8 @@ import { HelpText } from '../../component-library';
<Icon
marginLeft={1}
color={IconColor.iconAlternative}
name={ICON_NAMES.WARNING}
size={Size.inherit}
name={IconName.Warning}
size={IconSize.Inherit}
/>
</HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div>
```

7
ui/components/component-library/help-text/help-text.stories.js
View File

@ -4,13 +4,12 @@ import {
FLEX_DIRECTION,
IconColor,
TextColor,
Size,
SEVERITIES,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { Icon, IconName, IconSize } from '..';
import { HelpText } from './help-text';
@ -59,8 +58,8 @@ export const Children = (args) => (
<Icon
marginLeft={1}
color={IconColor.iconAlternative}
name={ICON_NAMES.WARNING}
size={Size.inherit}
name={IconName.Warning}
size={IconSize.Inherit}
as="span"
/>
</HelpText>

7
ui/components/component-library/help-text/help-text.test.js
View File

@ -2,7 +2,7 @@
import { render } from '@testing-library/react';
import React from 'react';
import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { Icon, IconName } from '..';
import { HelpText } from './help-text';
@ -25,8 +25,7 @@ describe('HelpText', () => {
it('should render with react nodes inside the HelpText', () => {
const { getByText, getByTestId } = render(
<HelpText>
help text{' '}
<Icon name={ICON_NAMES.WARNING} data-testid="icon" as="span" />
help text <Icon name={IconName.Warning} data-testid="icon" as="span" />
</HelpText>,
);
expect(getByText('help text')).toBeDefined();
@ -67,7 +66,7 @@ describe('HelpText', () => {
<>
<HelpText>help text as p</HelpText>
<HelpText data-testid="help-text-div">
<span>help text as div</span> <Icon name={ICON_NAMES.WARNING} />
<span>help text as div</span> <Icon name={IconName.Warning} />
</HelpText>
</>,
);

7
ui/components/component-library/label/README.mdx
View File

@ -32,16 +32,15 @@ The `children` of the label can be text or a react node
```jsx
import { DISPLAY, AlignItems, FLEX_DIRECTION, Size, IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
import { Label, TextField } from '../../component-library';
import { Label, TextField, Icon, IconName, IconSize } from '../../component-library';
<Label>Plain text</Label>
<Label display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
Text and icon
<Icon
color={IconColor.iconAlternative}
name={ICON_NAMES.INFO}
size={Size.inherit}
name={IconName.Info}
size={IconSize.Inherit}
/>
</Label>
<Label

8
ui/components/component-library/label/label.stories.js
View File

@ -2,15 +2,13 @@ import React, { useState } from 'react';
import {
DISPLAY,
FLEX_DIRECTION,
Size,
AlignItems,
IconColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { TextField } from '..';
import { TextField, Icon, IconName, IconSize } from '..';
import { Label } from './label';
@ -57,8 +55,8 @@ export const Children = (args) => (
Text and icon
<Icon
color={IconColor.iconAlternative}
name={ICON_NAMES.INFO}
size={Size.inherit}
name={IconName.Info}
size={IconSize.Inherit}
/>
</Label>
<Label

4
ui/components/component-library/label/label.test.js
View File

@ -1,7 +1,7 @@
/* eslint-disable jest/require-top-level-describe */
import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { Icon, IconName } from '..';
import { TextField } from '../text-field';
import { Label } from './label';
@ -21,7 +21,7 @@ describe('label', () => {
const { getByText, getByTestId } = render(
<Label>
label
<Icon name={ICON_NAMES.INFO} data-testid="icon" />
<Icon name={IconName.Info} data-testid="icon" />
</Label>,
);
expect(getByText('label')).toBeDefined();

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

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { AvatarNetwork } from '../avatar-network';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { IconName, Icon, IconSize } from '../icon';
import { Text } from '../text';
import Box from '../../ui/box';
import {
@ -48,9 +48,9 @@ export const PickerNetwork = ({
</Text>
<Icon
className="mm-picker-network__arrow-down-icon"
name={ICON_NAMES.ARROW_DOWN}
name={IconName.ArrowDown}
color={IconColor.iconDefault}
size={Size.XS}
size={IconSize.Xs}
{...iconProps}
/>
</Box>
@ -73,7 +73,7 @@ PickerNetwork.propTypes = {
/**
* It accepts all the props from Icon
*/
iconProps: PropTypes.shape(Icon.PropTypes),
iconProps: PropTypes.object,
/**
* The text content of the PickerNetwork component
*/

10
ui/components/component-library/tag-url/tag-url.js
View File

@ -13,9 +13,7 @@ import {
Size,
TextVariant,
} from '../../../helpers/constants/design-system';
import { AvatarFavicon } from '../avatar-favicon';
import { ButtonLink } from '../button-link';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize } from '..';
export const TagUrl = ({
label,
@ -47,9 +45,9 @@ export const TagUrl = ({
{showLockIcon && (
<Icon
className="mm-tag-url__lock-icon"
name={ICON_NAMES.LOCK}
name={IconName.Lock}
color={IconColor.iconAlternative}
size={Size.SM}
size={IconSize.Sm}
aria-label="https://"
role="img"
{...lockIconProps}
@ -91,7 +89,7 @@ TagUrl.propTypes = {
/**
* It accepts all the props from Icon
*/
lockIconProps: PropTypes.shape(Icon.PropTypes),
lockIconProps: PropTypes.object,
/**
* The text content of the TagUrl component
*/

7
ui/components/component-library/text-field-search/text-field-search.js
View File

@ -4,8 +4,7 @@ import classnames from 'classnames';
import { Size } from '../../../helpers/constants/design-system';
import { ButtonIcon } from '../button-icon';
import { Icon, ICON_NAMES } from '../icon/deprecated';
import { ButtonIcon, Icon, IconName, IconSize } from '..';
import { TextField, TEXT_FIELD_TYPES } from '../text-field';
export const TextFieldSearch = ({
@ -30,7 +29,7 @@ export const TextFieldSearch = ({
<ButtonIcon
className="mm-text-field__button-clear"
ariaLabel="Clear" // TODO: i18n
iconName={ICON_NAMES.CLOSE}
iconName={IconName.Close}
size={Size.SM}
onClick={clearButtonOnClick}
{...clearButtonProps}
@ -41,7 +40,7 @@ export const TextFieldSearch = ({
endAccessory
)
}
startAccessory={<Icon name={ICON_NAMES.SEARCH} size={Size.SM} />}
startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
inputProps={{
marginRight: showClearButton ? 6 : 0,
...inputProps,

12
ui/components/component-library/text-field/README.mdx
View File

@ -90,7 +90,7 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
```jsx
import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library/deprecated'
import { Icon, IconName } from '../../component-library/deprecated'
import { ButtonIcon, TextField } from '../../component-library';
<TextField
@ -98,7 +98,7 @@ import { ButtonIcon, TextField } from '../../component-library';
startAccessory={
<Icon
color={IconColor.iconAlternative}
name={ICON_NAMES.SEARCH}
name={IconName.Search}
/>
}
/>
@ -107,7 +107,7 @@ import { ButtonIcon, TextField } from '../../component-library';
placeholder="Public address (0x), or ENS"
endAccessory={
<ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE}
iconName={IconName.ScanBarcode}
ariaLabel="Scan QR code"
iconProps={{ color: IconColor.primaryDefault }}
/>
@ -129,7 +129,7 @@ import { ButtonIcon, TextField } from '../../component-library';
endAccessory={
isAddressValid && (
<Icon
name={ICON_NAMES.CHECK}
name={IconName.Check}
color={IconColor.successDefault}
/>
)
@ -206,7 +206,7 @@ To function fully the custom component should accept the following props:
</Canvas>
```jsx
import { TextField, Icon, ICON_NAMES } from '../../component-library';
import { TextField, Icon, IconName } from '../../component-library';
// should map the props to the custom input component
const CustomInputComponent = () => <div>{/* Custom input component */}</div>;
@ -216,7 +216,7 @@ const TextFieldCustomInput = (args) => (
size={SIZES.LG}
InputComponent={CustomInputComponent}
startAccessory={
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} />
<Icon color={IconColor.iconAlternative} name={IconName.Wallet} />
}
/>
);

17
ui/components/component-library/text-field/text-field.stories.js
View File

@ -21,10 +21,11 @@ import {
Button,
ButtonIcon,
Text,
IconName,
Icon,
IconSize,
} from '..';
import { ICON_NAMES, Icon } from '../icon/deprecated';
import { TEXT_FIELD_SIZES, TEXT_FIELD_TYPES } from './text-field.constants';
import { TextField } from './text-field';
@ -240,7 +241,7 @@ export const StartAccessoryEndAccessory = (args) => {
name="search"
onChange={handleOnChange}
startAccessory={
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.SEARCH} />
<Icon color={IconColor.iconAlternative} name={IconName.Search} />
}
/>
<TextField
@ -251,7 +252,7 @@ export const StartAccessoryEndAccessory = (args) => {
onChange={handleOnChange}
endAccessory={
<ButtonIcon
iconName={ICON_NAMES.SCAN_BARCODE}
iconName={IconName.ScanBarcode}
ariaLabel="Scan QR code"
iconProps={{ color: IconColor.primaryDefault }}
/>
@ -281,9 +282,9 @@ export const StartAccessoryEndAccessory = (args) => {
/>
<Text>ETH</Text>
<Icon
name={ICON_NAMES.ARROW_DOWN}
name={IconName.ArrowDown}
color={IconColor.iconDefault}
size={Size.SM}
size={IconSize.Sm}
/>
</Box>
}
@ -314,7 +315,7 @@ export const StartAccessoryEndAccessory = (args) => {
}
endAccessory={
value.accountAddress.length === 42 && (
<Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
<Icon name={IconName.Check} color={IconColor.successDefault} />
)
}
/>
@ -464,7 +465,7 @@ export const InputComponent = (args) => (
size={Size.LG}
InputComponent={CustomInputComponent}
startAccessory={
<Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} />
<Icon color={IconColor.iconAlternative} name={IconName.Wallet} />
}
/>
);