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: Replacing deprecated constants in Avatar-Base folder (#19408)

Browse Source 
Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
rohit kerkar 2023-06-05 21:13:23 +05:30 committed by GitHub
parent 16e07b5d79
commit 3ec2c189b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/components/component-library/avatar-base/avatar-base.stories.tsx
View File

@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react';
import React from 'react'; import React from 'react';
import { import {
AlignItems, AlignItems,
DISPLAY, Display,
TextColor, TextColor,
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
@ -60,7 +60,7 @@ export default {
control: 'select', control: 'select',
}, },
display: { display: {
options: Object.values(DISPLAY), options: Object.values(Display),
control: 'select', control: 'select',
table: { category: 'box props' }, table: { category: 'box props' },
}, },
@ -99,7 +99,7 @@ export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const Size = (args: AvatarBaseProps) => ( export const Size = (args: AvatarBaseProps) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}> <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<AvatarBase {...args} size={AvatarBaseSize.Xs} /> <AvatarBase {...args} size={AvatarBaseSize.Xs} />
<AvatarBase {...args} size={AvatarBaseSize.Sm} /> <AvatarBase {...args} size={AvatarBaseSize.Sm} />
<AvatarBase {...args} size={AvatarBaseSize.Md} /> <AvatarBase {...args} size={AvatarBaseSize.Md} />
@ -109,7 +109,7 @@ export const Size = (args: AvatarBaseProps) => (
); );
export const Children = (args: AvatarBaseProps) => ( export const Children = (args: AvatarBaseProps) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={Display.Flex} gap={1}>
<AvatarBase {...args}> <AvatarBase {...args}>
<img src="./images/eth_logo.png" /> <img src="./images/eth_logo.png" />
</AvatarBase> </AvatarBase>
@ -131,7 +131,7 @@ export const Children = (args: AvatarBaseProps) => (
); );
export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => ( export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
<Box display={DISPLAY.FLEX} gap={1}> <Box display={Display.Flex} gap={1}>
<AvatarBase {...args}>B</AvatarBase> <AvatarBase {...args}>B</AvatarBase>
<AvatarBase <AvatarBase
{...args} {...args}

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

@ -5,7 +5,7 @@ import {
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
TextColor, TextColor,
DISPLAY, Display,
JustifyContent, JustifyContent,
AlignItems, AlignItems,
BorderRadius, BorderRadius,
@ -48,7 +48,7 @@ export const AvatarBase = forwardRef(
)} )}
ref={ref} ref={ref}
as={ValidTag.Div} as={ValidTag.Div}
display={DISPLAY.FLEX} display={Display.Flex}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
alignItems={AlignItems.center} alignItems={AlignItems.center}
borderRadius={BorderRadius.full} borderRadius={BorderRadius.full}