From 090476d9a27ca712c90e813e91f94d00504e5015 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Thu, 13 Jul 2023 13:22:40 -0700 Subject: [PATCH] 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 * remove underline --------- Co-authored-by: George Marshall --- .../button-base/button-base.scss | 2 +- .../button-icon/button-icon.scss | 21 +++++++-- .../button-icon/button-icon.stories.tsx | 46 ++++++++++--------- .../button-icon/button-icon.test.tsx | 9 ++++ .../button-icon/button-icon.tsx | 5 +- .../button-icon/button-icon.types.ts | 1 + .../button-link/button-link.scss | 21 +++------ .../component-library-components.scss | 6 +++ 8 files changed, 67 insertions(+), 44 deletions(-) diff --git a/ui/components/component-library/button-base/button-base.scss b/ui/components/component-library/button-base/button-base.scss index 6b4e249c2..97115a116 100644 --- a/ui/components/component-library/button-base/button-base.scss +++ b/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; } diff --git a/ui/components/component-library/button-icon/button-icon.scss b/ui/components/component-library/button-icon/button-icon.scss index 3658d6590..e42f1dd1e 100644 --- a/ui/components/component-library/button-icon/button-icon.scss +++ b/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; } diff --git a/ui/components/component-library/button-icon/button-icon.stories.tsx b/ui/components/component-library/button-icon/button-icon.stories.tsx index d9afbca05..927faa8e7 100644 --- a/ui/components/component-library/button-icon/button-icon.stories.tsx +++ b/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; +} as Meta; -const Template: ComponentStory = (args) => ( - -); +const Template: StoryFn = (args) => ; export const DefaultStory = Template.bind({}); @@ -36,7 +34,7 @@ DefaultStory.args = { DefaultStory.storyName = 'Default'; -export const IconNameStory: ComponentStory = (args) => ( +export const IconNameStory: StoryFn = (args) => ( ); @@ -47,7 +45,7 @@ IconNameStory.args = { IconNameStory.storyName = 'IconName'; -export const SizeStory: ComponentStory = (args) => ( +export const SizeStory: StoryFn = (args) => ( <> = (args) => ( iconName={IconName.Close} ariaLabel="Close" /> + @@ -67,60 +71,60 @@ export const SizeStory: ComponentStory = (args) => ( SizeStory.storyName = 'Size'; -export const AriaLabel: ComponentStory = (args) => ( +export const AriaLabel: StoryFn = (args) => ( <> ); -export const As: ComponentStory = (args) => ( +export const As: StoryFn = (args) => ( <> ); -export const Href: ComponentStory = (args) => ( - +export const Href: StoryFn = (args) => ( + ); Href.args = { ariaLabel: 'Visit Metamask.io', href: 'https://metamask.io/', - color: Color.primaryDefault, + color: IconColor.primaryDefault, }; -export const ColorStory: ComponentStory = (args) => ( +export const ColorStory: StoryFn = (args) => ( ); ColorStory.storyName = 'Color'; ColorStory.args = { - color: Color.primaryDefault, + color: IconColor.primaryDefault, }; -export const Disabled: ComponentStory = (args) => ( +export const Disabled: StoryFn = (args) => ( ); diff --git a/ui/components/component-library/button-icon/button-icon.test.tsx b/ui/components/component-library/button-icon/button-icon.test.tsx index 1b4ae6a93..c146e1694 100644 --- a/ui/components/component-library/button-icon/button-icon.test.tsx +++ b/ui/components/component-library/button-icon/button-icon.test.tsx @@ -56,6 +56,12 @@ describe('ButtonIcon', () => { size={ButtonIconSize.Sm} data-testid={ButtonIconSize.Sm} /> + { 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}`, ); diff --git a/ui/components/component-library/button-icon/button-icon.tsx b/ui/components/component-library/button-icon/button-icon.tsx index 3831cb838..36713dbe6 100644 --- a/ui/components/component-library/button-icon/button-icon.tsx +++ b/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.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} diff --git a/ui/components/component-library/button-icon/button-icon.types.ts b/ui/components/component-library/button-icon/button-icon.types.ts index d50d4cd85..70250075d 100644 --- a/ui/components/component-library/button-icon/button-icon.types.ts +++ b/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', } diff --git a/ui/components/component-library/button-link/button-link.scss b/ui/components/component-library/button-link/button-link.scss index 30e40042c..9d68e42d8 100644 --- a/ui/components/component-library/button-link/button-link.scss +++ b/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 { diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss index 68f1085c9..d03fb28f1 100644 --- a/ui/components/component-library/component-library-components.scss +++ b/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';