replace deprecated

MetaMask · Jun 13, 2023 · e852873 · e852873
1 parent a04e9be
commit e852873
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.tsx b/ui/components/component-library/avatar-icon/avatar-icon.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  DISPLAY,
+  Display,
   AlignItems,
   BackgroundColor,
   IconColor,
@@ -85,17 +85,17 @@ export default {
   args: {
     size: AvatarIconSize.Md,
   },
-} as ComponentMeta<typeof AvatarIcon>;
+} as Meta<typeof AvatarIcon>;
 
-const Template: ComponentStory<typeof AvatarIcon> = (args) => {
+const Template: StoryFn<typeof AvatarIcon> = (args) => {
   return <AvatarIcon {...args} iconName={IconName.SwapHorizontal} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory: ComponentStory<typeof AvatarIcon> = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
+export const SizeStory: StoryFn<typeof AvatarIcon> = (args) => (
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarIcon {...args} size={AvatarIconSize.Xs} />
     <AvatarIcon {...args} size={AvatarIconSize.Sm} />
     <AvatarIcon {...args} size={AvatarIconSize.Md} />
@@ -109,8 +109,8 @@ SizeStory.args = {
   iconName: IconName.Confirmation,
 };
 
-export const IconNameStory: ComponentStory<typeof AvatarIcon> = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const IconNameStory: StoryFn<typeof AvatarIcon> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}
@@ -146,10 +146,8 @@ export const IconNameStory: ComponentStory<typeof AvatarIcon> = (args) => (
 
 IconNameStory.storyName = 'Icon Name';
 
-export const ColorAndBackgroundColor: ComponentStory<typeof AvatarIcon> = (
-  args,
-) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const ColorAndBackgroundColor: StoryFn<typeof AvatarIcon> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}

diff --git a/ui/components/component-library/avatar-icon/avatar-icon.tsx b/ui/components/component-library/avatar-icon/avatar-icon.tsx
@@ -2,7 +2,7 @@ import React, { Ref } from 'react';
 import classnames from 'classnames';
 import {
   BorderColor,
-  DISPLAY,
+  Display,
   AlignItems,
   JustifyContent,
   BackgroundColor,
@@ -37,7 +37,7 @@ export const AvatarIcon = React.forwardRef(
       <AvatarBase
         ref={ref}
         size={size}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
         color={color as TextColor}