Migrate ButtonBase to TS

fix error added TextAlignArray resolve deprecated fix lint error by removing textalign prop from textProps button base box updates update buttonbase to use new box and TS
MetaMask · Jul 17, 2023 · dc64796 · dc64796
1 parent 5d17f86
commit dc64796
Show file tree

Hide file tree

Showing 12 changed files with 296 additions and 280 deletions.
diff --git a/...se/__snapshots__/button-base.test.js.snap → ...e/__snapshots__/button-base.test.tsx.snap b/...se/__snapshots__/button-base.test.js.snap → ...e/__snapshots__/button-base.test.tsx.snap
diff --git a/ui/components/component-library/button-base/button-base.constants.js b/ui/components/component-library/button-base/button-base.constants.js
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
diff --git a/...ibrary/button-base/button-base.stories.js → ...brary/button-base/button-base.stories.tsx b/...ibrary/button-base/button-base.stories.js → ...brary/button-base/button-base.stories.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
   AlignItems,
-  Color,
-  DISPLAY,
-  FLEX_DIRECTION,
-  Size,
+  BackgroundColor,
+  Display,
+  FlexDirection,
+  TextColor,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { TextDirection, IconName } from '..';
+import { TextDirection, IconName, ValidTag } from '..';
 
-import { BUTTON_BASE_SIZES } from './button-base.constants';
+import { ButtonBaseSize } from './button-base.types';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
 
@@ -70,7 +71,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(BUTTON_BASE_SIZES),
+      options: Object.values(ButtonBaseSize),
     },
     marginTop: {
       options: marginSizeControlOptions,
@@ -96,27 +97,29 @@ export default {
   args: {
     children: 'Button Base',
   },
-};
+} as Meta<typeof ButtonBase>;
 
-export const DefaultStory = (args) => <ButtonBase {...args} />;
+export const DefaultStory: StoryFn<typeof ButtonBase> = (args) => (
+  <ButtonBase {...args} />
+);
 
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const SizeStory: StoryFn<typeof ButtonBase> = (args) => (
   <>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.baseline}
       gap={1}
       marginBottom={2}
     >
-      <ButtonBase {...args} size={Size.SM}>
+      <ButtonBase {...args} size={ButtonBaseSize.Sm}>
         Button SM
       </ButtonBase>
-      <ButtonBase {...args} size={Size.MD}>
+      <ButtonBase {...args} size={ButtonBaseSize.Md}>
         Button MD
       </ButtonBase>
-      <ButtonBase {...args} size={Size.LG}>
+      <ButtonBase {...args} size={ButtonBaseSize.Lg}>
         Button LG
       </ButtonBase>
     </Box>
@@ -125,7 +128,7 @@ export const SizeStory = (args) => (
 
 SizeStory.storyName = 'Size';
 
-export const Block = (args) => (
+export const Block: StoryFn<typeof ButtonBase> = (args) => (
   <>
     <ButtonBase {...args} marginBottom={2}>
       Default Button
@@ -136,22 +139,24 @@ export const Block = (args) => (
   </>
 );
 
-export const As = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
+export const As: StoryFn<typeof ButtonBase> = (args) => (
+  <Box display={Display.Flex} flexDirection={FlexDirection.Row} gap={2}>
     <ButtonBase {...args}>Button Element</ButtonBase>
-    <ButtonBase as="a" href="#" {...args}>
+    <ButtonBase as={ValidTag.A} href="#" {...args}>
       Anchor Element
     </ButtonBase>
   </Box>
 );
 
-export const Href = (args) => <ButtonBase {...args}>Anchor Element</ButtonBase>;
+export const Href: StoryFn<typeof ButtonBase> = (args) => (
+  <ButtonBase {...args}>Anchor Element</ButtonBase>
+);
 
 Href.args = {
   href: '/metamask',
 };
 
-export const ExternalLink = (args) => (
+export const ExternalLink: StoryFn<typeof ButtonBase> = (args) => (
   <ButtonBase {...args}>Anchor element with external link</ButtonBase>
 );
 
@@ -160,36 +165,36 @@ ExternalLink.args = {
   externalLink: true,
 };
 
-export const Disabled = (args) => (
+export const Disabled: StoryFn<typeof ButtonBase> = (args) => (
   <ButtonBase {...args}>Disabled Button</ButtonBase>
 );
 
 Disabled.args = {
   disabled: true,
 };
 
-export const Loading = (args) => (
+export const Loading: StoryFn<typeof ButtonBase> = (args) => (
   <ButtonBase {...args}>Loading Button</ButtonBase>
 );
 
 Loading.args = {
   loading: true,
 };
 
-export const StartIconName = (args) => (
+export const StartIconName: StoryFn<typeof ButtonBase> = (args) => (
   <ButtonBase {...args} startIconName={IconName.AddSquare}>
     Button
   </ButtonBase>
 );
 
-export const EndIconName = (args) => (
+export const EndIconName: StoryFn<typeof ButtonBase> = (args) => (
   <ButtonBase {...args} endIconName={IconName.Arrow2Right}>
     Button
   </ButtonBase>
 );
 
-export const Rtl = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+export const Rtl: StoryFn<typeof ButtonBase> = (args) => (
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <ButtonBase
       {...args}
       startIconName={IconName.AddSquare}
@@ -208,10 +213,14 @@ export const Rtl = (args) => (
   </Box>
 );
 
-export const Ellipsis = (args) => (
-  <Box backgroundColor={Color.iconMuted} style={{ width: 150 }}>
+export const Ellipsis: StoryFn<typeof ButtonBase> = (args) => (
+  <Box backgroundColor={BackgroundColor.primaryMuted} style={{ width: 150 }}>
     <ButtonBase {...args}>Example without ellipsis</ButtonBase>
-    <ButtonBase {...args} ellipsis>
+    <ButtonBase
+      {...args}
+      ellipsis
+      textProps={{ color: TextColor.errorDefault }}
+    >
       Example with ellipsis
     </ButtonBase>
   </Box>