fix(button): font and image sizes are incorrect and non responsive

PhillipsAuctionHouse · Jan 3, 2025 · ee54493 · ee54493
1 parent 860f554
commit ee54493
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 61 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -10,12 +10,6 @@ const meta = {
   component: Button,
 
   argTypes: {
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: {
-        type: 'select',
-      },
-    },
     variant: {
       options: Object.values(ButtonVariants),
       control: {

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -15,20 +15,18 @@ describe('Button', () => {
     render(<Button>Submit</Button>);
     const buttonElement = screen.getByText('Submit');
     expect(buttonElement).toHaveClass(`${px}-button`);
-    expect(buttonElement).toHaveClass(`${px}-button--md`);
     expect(buttonElement).toHaveClass(`${px}-button--primary`);
     expect(buttonElement).not.toHaveClass(`${px}-button--icon-last`);
   });
 
   it('renders with type and size classnames', () => {
     render(
-      <Button variant={ButtonVariants.secondary} size="lg" isIconLast>
+      <Button variant={ButtonVariants.secondary} isIconLast>
         Cancel
       </Button>,
     );
     const buttonElement = screen.getByText('Cancel');
     expect(buttonElement).toHaveClass(`${px}-button`);
-    expect(buttonElement).toHaveClass(`${px}-button--lg`);
     expect(buttonElement).toHaveClass(`${px}-button--secondary`);
     expect(buttonElement).toHaveClass(`${px}-button--icon-last`);
   });

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -21,10 +21,6 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
    * Is this the principal call to action on the page?
    */
   variant?: ButtonVariants;
-  /**
-   * How large should the button be?
-   */
-  size?: 'sm' | 'md' | 'lg';
   /**
    * The type of the button.
    */
@@ -57,7 +53,6 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
   (
     {
       variant = ButtonVariants.primary,
-      size = 'md',
       children,
       className,
       isIconLast: iconLast = false,
@@ -78,7 +73,6 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           href={href}
           className={classnames(
             `${baseClassName}`,
-            `${baseClassName}--${size}`,
             `${baseClassName}--${variant}`,
             {
               [`${baseClassName}--icon-last`]: iconLast,
@@ -99,7 +93,6 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
           type={type}
           className={classnames(
             `${baseClassName}`,
-            `${baseClassName}--${size}`,
             `${baseClassName}--${variant}`,
             {
               [`${baseClassName}--icon-last`]: iconLast,

diff --git a/src/components/Button/_button.scss b/src/components/Button/_button.scss
@@ -2,6 +2,7 @@
 
 .#{$px}-button {
   @include bodyText;
+  @include labelText($button);
 
   align-items: center;
   background-color: $pure-black;
@@ -12,6 +13,7 @@
   display: inline-flex;
   font-variation-settings: 'wght' 600;
   gap: $margin-xsm;
+  height: $spacing-lg;
   justify-content: center;
   padding: 0 $padding-md;
   position: relative;
@@ -21,6 +23,8 @@
 
   svg {
     fill: $pure-white;
+    height: $button-label-line-height;
+    width: $button-label-line-height;
 
     path {
       fill: $pure-white;
@@ -45,27 +49,6 @@
     }
   }
 
-  &--sm {
-    font-size: 0.75rem;
-    height: 44px;
-
-    svg {
-      height: 1rem;
-      width: 1rem;
-    }
-  }
-
-  &--md,
-  &--lg {
-    font-size: 1rem;
-    height: 48px;
-
-    svg {
-      height: 1.25rem;
-      width: 1.25rem;
-    }
-  }
-
   &--link {
     background-color: transparent;
     border: 0;
@@ -146,7 +129,7 @@
     background-color: transparent;
     border: 0;
     color: $pure-black;
-    height: 28px;
+    height: $spacing-md;
     padding: 0;
 
     svg {

diff --git a/src/patterns/ViewingsList/ViewingsList.tsx b/src/patterns/ViewingsList/ViewingsList.tsx
@@ -138,7 +138,7 @@ const ViewingsList = ({
           onSave={handleOnSave}
         />
       ))}
-      <Button id={`viewings-list-add-btn-${props.id || getRandomNum()}`} size="sm" onClick={handleOnAdd}>
+      <Button id={`viewings-list-add-btn-${props.id || getRandomNum()}`} onClick={handleOnAdd}>
         {addViewingsBtnLabel}
       </Button>
     </div>

diff --git a/src/patterns/ViewingsList/ViewingsListCard.tsx b/src/patterns/ViewingsList/ViewingsListCard.tsx
@@ -273,41 +273,22 @@ const ViewingsListCard = ({
       <div className={`${baseClass}__btn-group ${px}-button__group`}>
         {editState ? (
           <>
-            <Button
-              id={`vlc-save-btn-${id}`}
-              variant={ButtonVariants.ghost}
-              type="submit"
-              size="sm"
-              onClick={handleOnSave}
-            >
+            <Button id={`vlc-save-btn-${id}`} variant={ButtonVariants.ghost} type="submit" onClick={handleOnSave}>
               {saveBtnLabel}
             </Button>
-            <Button
-              id={`vlc-cancel-btn-${id}`}
-              variant={ButtonVariants.ghost}
-              type="button"
-              size="sm"
-              onClick={handleOnCancel}
-            >
+            <Button id={`vlc-cancel-btn-${id}`} variant={ButtonVariants.ghost} type="button" onClick={handleOnCancel}>
               {cancelBtnLabel}
             </Button>
           </>
         ) : (
           <>
-            <Button
-              id={`vlc-edit-btn-${id}`}
-              variant={ButtonVariants.ghost}
-              type="button"
-              size="sm"
-              onClick={handleOnEdit}
-            >
+            <Button id={`vlc-edit-btn-${id}`} variant={ButtonVariants.ghost} type="button" onClick={handleOnEdit}>
               {editBtnLabel}
             </Button>
             <Button
               id={`vlc-delete-btn-${id}`}
               variant={ButtonVariants.ghost}
               type="button"
-              size="sm"
               onClick={() => typeof onDelete === 'function' && onDelete(id)}
             >
               {deleteBtnLabel}