Fix/buttonbase ts update (#20060)

* Migrate ButtonBase to TS --------- Co-authored-by: Binij Shrestha <[email protected]>
MetaMask · Jul 25, 2023 · 3f27d01 · 3f27d01
1 parent 85465f5
commit 3f27d01
Show file tree

Hide file tree

Showing 14 changed files with 300 additions and 281 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/ui/components/component-library/button-base/button-base.scss b/ui/components/component-library/button-base/button-base.scss
@@ -6,7 +6,6 @@
   user-select: none;
 
   &--block {
-    display: block;
     width: 100%;
   }
 
@@ -45,6 +44,10 @@
   }
 }
 
+a.mm-button-base:hover {
+  color: var(--color-text-default);
+}
+
 
 
 @keyframes spinner {

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,14 @@
 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 { BUTTON_BASE_SIZES } from './button-base.constants';
+import { Box, TextDirection, IconName } from '..';
+import { ButtonBaseSize } from './button-base.types';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
 
@@ -70,7 +69,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(BUTTON_BASE_SIZES),
+      options: Object.values(ButtonBaseSize),
     },
     marginTop: {
       options: marginSizeControlOptions,
@@ -96,27 +95,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 +126,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 +137,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}>
       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 +163,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 +211,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>