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

Part of #18714 for 2 files in ui\components\component-library\avatar-icon (#20038)

Browse Source
This commit is contained in:
Harsh Shukla 2023-07-25 01:28:30 +05:30 committed by GitHub
parent 0ea765ebf6
commit 24c9db5883
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,16 +4,15 @@ import classnames from 'classnames';
import { import {
BorderColor, BorderColor,
Size, Size,
DISPLAY,
AlignItems, AlignItems,
JustifyContent, JustifyContent,
BackgroundColor, BackgroundColor,
IconColor, IconColor,
TextColor, TextColor,
Display,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import { Box } from '../box';
import { IconName, Icon } from '../icon'; import { IconName, Icon } from '../icon';
import { AvatarBase } from '../avatar-base'; import { AvatarBase } from '../avatar-base';
@ -35,7 +34,7 @@ export const AvatarIcon = React.forwardRef(
<AvatarBase <AvatarBase
ref={ref} ref={ref}
size={size} size={size}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
color={color} color={color}

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

@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { import {
Size, Size,
DISPLAY,
AlignItems, AlignItems,
BackgroundColor, BackgroundColor,
IconColor, IconColor,
Color, Color,
Display,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box'; import { Box } from '../box';
import { IconName } from '..'; import { IconName } from '..';
@ -95,7 +95,7 @@ export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const SizeStory = (args) => ( export const SizeStory = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}> <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<AvatarIcon {...args} size={Size.XS} /> <AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} /> <AvatarIcon {...args} size={Size.SM} />
<AvatarIcon {...args} size={Size.MD} /> <AvatarIcon {...args} size={Size.MD} />
@ -110,7 +110,7 @@ SizeStory.args = {
}; };
export const IconNameStory = (args) => ( export const IconNameStory = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={Display.Flex} gap={1}>
<AvatarIcon <AvatarIcon
color={IconColor.primaryDefault} color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
@ -147,7 +147,7 @@ export const IconNameStory = (args) => (
IconNameStory.storyName = 'Icon Name'; IconNameStory.storyName = 'Icon Name';
export const ColorAndBackgroundColor = (args) => ( export const ColorAndBackgroundColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={Display.Flex} gap={1}>
<AvatarIcon <AvatarIcon
color={IconColor.primaryDefault} color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}