m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Part of #18714: Replacing deprecated constants in Icon folder (#19250)

Browse Source 
* Replacing deprecated constants in Icon folder

* Requested changes

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
Dhruv 2023-05-26 02:23:31 +05:30 committed by GitHub
parent b7ef99847a
commit 744dfc9e38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,9 +110,9 @@ Some examples of `Icon` with `Text` using [Box](/docs/components-ui-box--default
```jsx ```jsx
import { import {
AlignItems, AlignItems,
DISPLAY, Display,
IconColor, IconColor,
FLEX_DIRECTION, FlexDirection,
BorderColor, BorderColor,
BorderRadius, BorderRadius,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -121,8 +121,8 @@ import Box from '../../ui/box/box';
import { IconName, Icon, IconSize, Text, Label } from '../../component-library'; import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}> <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={4}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box display={Display.Flex} alignItems={AlignItems.center}>
<Icon <Icon
name={IconName.Check} name={IconName.Check}
color={IconColor.successDefault} color={IconColor.successDefault}
@ -132,7 +132,7 @@ import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
</Box> </Box>
<Box <Box
as="button" as="button"
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
borderRadius={BorderRadius.pill} borderRadius={BorderRadius.pill}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
@ -149,7 +149,7 @@ import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
</Box> </Box>
<Box <Box
as="button" as="button"
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
padding={4} padding={4}
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}

78
ui/components/component-library/icon/icon.stories.tsx
View File

@ -1,14 +1,14 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react'; import { StoryFn, Meta } from '@storybook/react';
import { import {
AlignItems, AlignItems,
DISPLAY, Display,
IconColor, IconColor,
FLEX_DIRECTION, FlexDirection,
JustifyContent, JustifyContent,
TextVariant, TextVariant,
FLEX_WRAP, FlexWrap,
TextAlign, TextAlign,
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
@ -48,9 +48,9 @@ export default {
color: IconColor.inherit, color: IconColor.inherit,
size: IconSize.Md, size: IconSize.Md,
}, },
} as ComponentMeta<typeof Icon>; } as Meta<typeof Icon>;
export const DefaultStory: ComponentStory<typeof Icon> = (args) => { export const DefaultStory: StoryFn<typeof Icon> = (args) => {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const iconList = Object.keys(IconName) const iconList = Object.keys(IconName)
.filter( .filter(
@ -74,7 +74,7 @@ export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
Icon search Icon search
</Text> </Text>
<Box <Box
display={DISPLAY.GRID} display={Display.Grid}
gap={2} gap={2}
style={{ style={{
gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
@ -82,8 +82,8 @@ export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
> >
<Box <Box
style={{ gridColumnStart: 1, gridColumnEnd: 3 }} style={{ gridColumnStart: 1, gridColumnEnd: 3 }}
display={DISPLAY.FLEX} display={Display.Flex}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FlexDirection.Column}
> >
{/* TODO replace with FormTextField */} {/* TODO replace with FormTextField */}
<Label htmlFor="icon-search">IconName</Label> <Label htmlFor="icon-search">IconName</Label>
@ -99,7 +99,7 @@ export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
</Box> </Box>
{iconList.length > 0 ? ( {iconList.length > 0 ? (
<Box <Box
display={DISPLAY.GRID} display={Display.Grid}
gap={2} gap={2}
style={{ style={{
gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
@ -110,8 +110,8 @@ export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderRadius={BorderRadius.MD} borderRadius={BorderRadius.MD}
display={DISPLAY.FLEX} display={Display.Flex}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FlexDirection.Column}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
padding={4} padding={4}
@ -169,16 +169,16 @@ export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
}; };
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const Name: ComponentStory<typeof Icon> = (args) => ( export const Name: StoryFn<typeof Icon> = (args) => (
<> <>
<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={2}> <Box display={Display.Flex} flexWrap={FlexWrap.Wrap} gap={2}>
{Object.keys(IconName).map((item) => { {Object.keys(IconName).map((item) => {
return ( return (
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderRadius={BorderRadius.MD} borderRadius={BorderRadius.MD}
display={DISPLAY.FLEX} display={Display.Flex}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FlexDirection.Column}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
padding={4} padding={4}
@ -192,10 +192,10 @@ export const Name: ComponentStory<typeof Icon> = (args) => (
</> </>
); );
export const SizeStory: ComponentStory<typeof Icon> = (args) => ( export const SizeStory: StoryFn<typeof Icon> = (args) => (
<> <>
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.baseline} alignItems={AlignItems.baseline}
gap={1} gap={1}
marginBottom={4} marginBottom={4}
@ -242,78 +242,78 @@ export const SizeStory: ComponentStory<typeof Icon> = (args) => (
); );
SizeStory.storyName = 'Size'; SizeStory.storyName = 'Size';
export const ColorStory: ComponentStory<typeof Icon> = (args) => ( export const ColorStory: StoryFn<typeof Icon> = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline}> <Box display={Display.Flex} alignItems={AlignItems.baseline}>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.inherit} /> <Icon {...args} color={IconColor.inherit} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.iconDefault} /> <Icon {...args} color={IconColor.iconDefault} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.iconAlternative} /> <Icon {...args} color={IconColor.iconAlternative} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.iconMuted} /> <Icon {...args} color={IconColor.iconMuted} />
</Box> </Box>
<Box <Box
padding={1} padding={1}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.overlayDefault} backgroundColor={BackgroundColor.overlayDefault}
> >
<Icon {...args} color={IconColor.overlayInverse} /> <Icon {...args} color={IconColor.overlayInverse} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.primaryDefault} /> <Icon {...args} color={IconColor.primaryDefault} />
</Box> </Box>
<Box <Box
padding={1} padding={1}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.primaryDefault} backgroundColor={BackgroundColor.primaryDefault}
> >
<Icon {...args} color={IconColor.primaryInverse} /> <Icon {...args} color={IconColor.primaryInverse} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.errorDefault} /> <Icon {...args} color={IconColor.errorDefault} />
</Box> </Box>
<Box <Box
padding={1} padding={1}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.errorDefault} backgroundColor={BackgroundColor.errorDefault}
> >
<Icon {...args} color={IconColor.errorInverse} /> <Icon {...args} color={IconColor.errorInverse} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.successDefault} /> <Icon {...args} color={IconColor.successDefault} />
</Box> </Box>
<Box <Box
padding={1} padding={1}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.successDefault} backgroundColor={BackgroundColor.successDefault}
> >
<Icon {...args} color={IconColor.successInverse} /> <Icon {...args} color={IconColor.successInverse} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.warningDefault} /> <Icon {...args} color={IconColor.warningDefault} />
</Box> </Box>
<Box <Box
padding={1} padding={1}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.warningDefault} backgroundColor={BackgroundColor.warningDefault}
> >
<Icon {...args} color={IconColor.warningInverse} /> <Icon {...args} color={IconColor.warningInverse} />
</Box> </Box>
<Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box padding={1} display={Display.Flex} alignItems={AlignItems.center}>
<Icon {...args} color={IconColor.infoDefault} /> <Icon {...args} color={IconColor.infoDefault} />
</Box> </Box>
<Box <Box
padding={1} padding={1}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.infoDefault} backgroundColor={BackgroundColor.infoDefault}
> >
@ -324,8 +324,8 @@ export const ColorStory: ComponentStory<typeof Icon> = (args) => (
ColorStory.storyName = 'Color'; ColorStory.storyName = 'Color';
export const LayoutAndSpacing = () => ( export const LayoutAndSpacing = () => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}> <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={4}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}> <Box display={Display.Flex} alignItems={AlignItems.center}>
<Icon <Icon
name={IconName.Check} name={IconName.Check}
color={IconColor.successDefault} color={IconColor.successDefault}
@ -335,7 +335,7 @@ export const LayoutAndSpacing = () => (
</Box> </Box>
<Box <Box
as="button" as="button"
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
borderRadius={BorderRadius.pill} borderRadius={BorderRadius.pill}
backgroundColor={BackgroundColor.primaryMuted} backgroundColor={BackgroundColor.primaryMuted}
@ -352,7 +352,7 @@ export const LayoutAndSpacing = () => (
</Box> </Box>
<Box <Box
as="button" as="button"
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
padding={4} padding={4}
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}

4
ui/components/component-library/icon/icon.tsx
View File

@ -3,7 +3,7 @@ import classnames from 'classnames';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { IconColor, DISPLAY } from '../../../helpers/constants/design-system'; import { IconColor, Display } from '../../../helpers/constants/design-system';
import { IconProps, IconSize } from './icon.types'; import { IconProps, IconSize } from './icon.types';
@ -18,7 +18,7 @@ export const Icon = ({
<Box <Box
className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)} className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
as="span" as="span"
display={DISPLAY.INLINE_BLOCK} display={Display.InlineBlock}
color={color} color={color}
style={{ style={{
/** /**