m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +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
import {
AlignItems,
DISPLAY,
Display,
IconColor,
FLEX_DIRECTION,
FlexDirection,
BorderColor,
BorderRadius,
} from '../../../helpers/constants/design-system';
@ -121,8 +121,8 @@ import Box from '../../ui/box/box';
import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={4}>
<Box display={Display.Flex} alignItems={AlignItems.center}>
<Icon
name={IconName.Check}
color={IconColor.successDefault}
@ -132,7 +132,7 @@ import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
borderRadius={BorderRadius.pill}
backgroundColor={BackgroundColor.primaryMuted}
@ -149,7 +149,7 @@ import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
padding={4}
borderColor={BorderColor.borderMuted}

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

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