ButtonIcon background & ButtonBase disabled update (#19976)

* button background hover updates

* add buttonlink underline

* update button base disabled

* fix size auto

* Update ui/components/component-library/button-link/button-link.stories.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* remove underline

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

ui/components/component-library/button-base/button-base.scss

@@ -33,7 +33,7 @@
 
   &--disabled,
   &:disabled {
-    opacity: 0.3;
+    opacity: var(--opacity-disabled);
     cursor: not-allowed;
   }
 

ui/components/component-library/button-icon/button-icon.scss

@@ -1,7 +1,5 @@
 .mm-button-icon {
   --button-icon-size: var(--size, 24px);
-  --button-icon-opacity-hover: 0.5; // TODO: replace with design tokens
-  --button-icon-opacity-disabled: 0.3; // TODO: replace with design tokens
 
   height: var(--button-icon-size);
   width: var(--button-icon-size);
@@ -9,15 +7,24 @@
   cursor: pointer;
 
   // ButtonIcon default states
-  &:active,
+
   &:hover {
-    opacity: var(--button-icon-opacity-hover);
+    background-color: var(--color-background-hover);
+  }
+
+  &:active {
+    background-color: var(--color-background-pressed);
   }
 
   &--disabled,
   &:disabled {
-    opacity: var(--button-icon-opacity-disabled);
+    opacity: var(--opacity-disabled);
     cursor: not-allowed;
+
+    &:hover,
+    &:active {
+      background-color: transparent;
+    }
   }
 
   // ButtonIcon Sizes
@@ -25,6 +32,10 @@
     --button-icon-size: 24px;
   }
 
+  &--size-md {
+    --button-icon-size: 28px;
+  }
+
   &--size-lg {
     --button-icon-size: 32px;
   }

ui/components/component-library/button-icon/button-icon.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Color } from '../../../helpers/constants/design-system';
+import { StoryFn, Meta } from '@storybook/react';
+import { IconColor } from '../../../helpers/constants/design-system';
 import { IconName } from '..';
 import { ButtonIconSize } from './button-icon.types';
 import { ButtonIcon } from './button-icon';
@@ -21,11 +21,9 @@ export default {
       options: ['button', 'a'],
     },
   },
-} as ComponentMeta<typeof ButtonIcon>;
+} as Meta<typeof ButtonIcon>;
 
-const Template: ComponentStory<typeof ButtonIcon> = (args) => (
-  <ButtonIcon {...args} />
-);
+const Template: StoryFn<typeof ButtonIcon> = (args) => <ButtonIcon {...args} />;
 
 export const DefaultStory = Template.bind({});
 
@@ -36,7 +34,7 @@ DefaultStory.args = {
 
 DefaultStory.storyName = 'Default';
 
-export const IconNameStory: ComponentStory<typeof ButtonIcon> = (args) => (
+export const IconNameStory: StoryFn<typeof ButtonIcon> = (args) => (
   <ButtonIcon {...args} />
 );
 
@@ -47,7 +45,7 @@ IconNameStory.args = {
 
 IconNameStory.storyName = 'IconName';
 
-export const SizeStory: ComponentStory<typeof ButtonIcon> = (args) => (
+export const SizeStory: StoryFn<typeof ButtonIcon> = (args) => (
   <>
     <ButtonIcon
       {...args}
@@ -55,10 +53,16 @@ export const SizeStory: ComponentStory<typeof ButtonIcon> = (args) => (
       iconName={IconName.Close}
       ariaLabel="Close"
     />
+    <ButtonIcon
+      {...args}
+      size={ButtonIconSize.Md}
+      iconName={IconName.Close}
+      ariaLabel="Close"
+    />
     <ButtonIcon
       {...args}
       size={ButtonIconSize.Lg}
-      color={Color.primaryDefault}
+      color={IconColor.primaryDefault}
       iconName={IconName.Close}
       ariaLabel="Close"
     />
@@ -67,60 +71,60 @@ export const SizeStory: ComponentStory<typeof ButtonIcon> = (args) => (
 
 SizeStory.storyName = 'Size';
 
-export const AriaLabel: ComponentStory<typeof ButtonIcon> = (args) => (
+export const AriaLabel: StoryFn<typeof ButtonIcon> = (args) => (
   <>
     <ButtonIcon
+      {...args}
       as="button"
       iconName={IconName.Close}
       ariaLabel="Close"
-      {...args}
     />
     <ButtonIcon
+      {...args}
       as="a"
       href="https://metamask.io/"
       target="_blank"
-      color={Color.primaryDefault}
+      color={IconColor.primaryDefault}
       iconName={IconName.Export}
       ariaLabel="Visit MetaMask.io"
-      {...args}
     />
   </>
 );
 
-export const As: ComponentStory<typeof ButtonIcon> = (args) => (
+export const As: StoryFn<typeof ButtonIcon> = (args) => (
   <>
     <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
     <ButtonIcon
       as="a"
       href="#"
       {...args}
-      color={Color.primaryDefault}
+      color={IconColor.primaryDefault}
       iconName={IconName.Export}
       ariaLabel="demo"
     />
   </>
 );
 
-export const Href: ComponentStory<typeof ButtonIcon> = (args) => (
-  <ButtonIcon iconName={IconName.Export} {...args} target="_blank" />
+export const Href: StoryFn<typeof ButtonIcon> = (args) => (
+  <ButtonIcon {...args} iconName={IconName.Export} target="_blank" />
 );
 
 Href.args = {
   ariaLabel: 'Visit Metamask.io',
   href: 'https://metamask.io/',
-  color: Color.primaryDefault,
+  color: IconColor.primaryDefault,
 };
 
-export const ColorStory: ComponentStory<typeof ButtonIcon> = (args) => (
+export const ColorStory: StoryFn<typeof ButtonIcon> = (args) => (
   <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
 );
 ColorStory.storyName = 'Color';
 
 ColorStory.args = {
-  color: Color.primaryDefault,
+  color: IconColor.primaryDefault,
 };
 
-export const Disabled: ComponentStory<typeof ButtonIcon> = (args) => (
+export const Disabled: StoryFn<typeof ButtonIcon> = (args) => (
   <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
 );
 

ui/components/component-library/button-icon/button-icon.test.tsx

@@ -56,6 +56,12 @@ describe('ButtonIcon', () => {
           size={ButtonIconSize.Sm}
           data-testid={ButtonIconSize.Sm}
         />
+        <ButtonIcon
+          iconName={IconName.AddSquare}
+          ariaLabel="add"
+          size={ButtonIconSize.Md}
+          data-testid={ButtonIconSize.Md}
+        />
         <ButtonIcon
           iconName={IconName.AddSquare}
           ariaLabel="add"
@@ -67,6 +73,9 @@ describe('ButtonIcon', () => {
     expect(getByTestId(ButtonIconSize.Sm)).toHaveClass(
       `mm-button-icon--size-${ButtonIconSize.Sm}`,
     );
+    expect(getByTestId(ButtonIconSize.Md)).toHaveClass(
+      `mm-button-icon--size-${ButtonIconSize.Md}`,
+    );
     expect(getByTestId(ButtonIconSize.Lg)).toHaveClass(
       `mm-button-icon--size-${ButtonIconSize.Lg}`,
     );

ui/components/component-library/button-icon/button-icon.tsx

@@ -5,7 +5,7 @@ import {
   AlignItems,
   BackgroundColor,
   BorderRadius,
-  DISPLAY,
+  Display,
   IconColor,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
@@ -17,6 +17,7 @@ import { ButtonIconSize, ButtonIconProps } from './button-icon.types';
 
 const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
   [ButtonIconSize.Sm]: IconSize.Sm,
+  [ButtonIconSize.Md]: IconSize.Md,
   [ButtonIconSize.Lg]: IconSize.Lg,
 };
 
@@ -52,7 +53,7 @@ export const ButtonIcon = React.forwardRef(
         )}
         color={color}
         {...(isDisabled ? { disabled: true } : {})} // only allow disabled attribute to be passed down to the Box when the as prop is equal to a button element
-        display={DISPLAY.INLINE_FLEX}
+        display={Display.InlineFlex}
         justifyContent={JustifyContent.center}
         alignItems={AlignItems.center}
         borderRadius={BorderRadius.LG}

ui/components/component-library/button-icon/button-icon.types.ts

@@ -5,6 +5,7 @@ import { IconColor } from '../../../helpers/constants/design-system';
 
 export enum ButtonIconSize {
   Sm = 'sm',
+  Md = 'md',
   Lg = 'lg',
 }
 

ui/components/component-library/button-link/button-link.scss

@@ -1,36 +1,27 @@
-.mm-button-link {
-  &:hover {
-    opacity: 0.5;
-  }
 
+.mm-button-link {
   &:active {
-    opacity: 0.5;
+    color: var(--color-primary-alternative);
   }
 
   &--disabled {
-    &:hover {
-      opacity: 0.3;
-    }
-
     &:active {
-      opacity: 0.3;
+      color: var(--color-primary-default);
     }
   }
 
   &--type-danger {
     &:hover {
       color: var(--color-error-default);
-      opacity: 0.5;
     }
 
     &:active {
-      color: var(--color-error-default);
-      opacity: 0.5;
+      color: var(--color-error-alternative);
     }
   }
 
-  &--type-danger#{&}--disabled:hover {
-    opacity: 0.3;
+  &--type-danger#{&}--disabled:active {
+    color: var(--color-error-default);
   }
 
   &--size-auto {

ui/components/component-library/component-library-components.scss

@@ -4,6 +4,12 @@
 * This will help improve specificity and reduce the chance of
 * unintended overrides.
 **/
+
+// Temp CSS Variables
+:root {
+  --opacity-disabled: 0.5;
+}
+
 // Atoms
 @import 'box/box';
 @import 'text/text';