Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
May 25, 2023
+47 −47
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
33512b3
Replacing deprecated constants in Icon folder
dhruvv173 May 22, 2023
41689a0
Merge branch 'develop' into Icon-Component-Fix
dhruvv173 May 24, 2023
57db2ab
Requested changes
dhruvv173 May 24, 2023
452e33a
Merge branch 'develop' into Icon-Component-Fix
dhruvv173 May 24, 2023
f96bb94
Merge branch 'develop' into Icon-Component-Fix
dhruvv173 May 24, 2023
45aea13
Merge branch 'develop' into Icon-Component-Fix
garrettbear May 25, 2023
741c35f
Merge branch 'develop' into Icon-Component-Fix
garrettbear May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions ui/components/component-library/icon/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
78 changes: 39 additions & 39 deletions ui/components/component-library/icon/icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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(
Expand All @@ -74,16 +74,16 @@ 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))',
}}
>
<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>
Expand All @@ -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))',
Expand All @@ -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}
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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}
>
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions ui/components/component-library/icon/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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={{
/**
Expand Down