From b38b047549ab7553d4e0a83a069f5c6fc0b9eb76 Mon Sep 17 00:00:00 2001
From: Binij Shrestha <shresthabinij@gmail.com>
Date: Wed, 24 May 2023 16:27:11 +0545
Subject: [PATCH] replace deprecated

---
 .../avatar-icon/avatar-icon.stories.tsx       | 22 +++++++++----------
 .../avatar-icon/avatar-icon.tsx               |  4 ++--
 2 files changed, 12 insertions(+), 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
index 23d7c15bf527..4873c8995741 100644
--- 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
index 5374d90ce43f..610fad73f717 100644
--- 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}