fix(iconbutton): make this responsive correctly based on Figma

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

Hide file tree

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

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -8,10 +8,6 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
    * Button contents
    */
   children?: React.ReactElement<SVGElement>;
-  /**
-   * How large should the button be?
-   */
-  size?: 'sm' | 'md' | 'lg';
   /**
    * Mainly used for styling
    */
@@ -24,7 +20,6 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
 
 const IconButton = ({
   children,
-  size = 'md',
   variant = ButtonVariants.primary,
   isDisabled = false,
   className,
@@ -35,7 +30,7 @@ const IconButton = ({
     <Button
       {...commonProps}
       variant={variant}
-      className={classnames(baseClass, `${baseClass}--${size}`, `${baseClass}--${variant}`, className)}
+      className={classnames(baseClass, `${baseClass}--${variant}`, className)}
       isDisabled={isDisabled}
       {...props}
     >

diff --git a/src/components/IconButton/_iconButton.scss b/src/components/IconButton/_iconButton.scss
@@ -3,8 +3,15 @@
 .#{$px}-icon-button {
   align-items: center;
   display: flex;
+  height: $spacing-md;
   justify-content: center;
   padding: 0;
+  width: $spacing-md;
+
+  & > svg {
+    height: $button-label-line-height;
+    width: $button-label-line-height;
+  }
 
   &:focus-visible {
     &:focus-visible {
@@ -21,14 +28,12 @@
   &--ghost {
     background: $pure-white;
     color: $pure-black;
-    height: 44px;
-    width: 44px;
 
     & > svg {
       fill: $pure-black;
-      height: 1.5rem;
+      height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
       margin-inline-end: unset;
-      width: 1.5rem;
+      width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
 
       path {
         fill: $pure-black;
@@ -58,22 +63,21 @@
     }
   }
 
+  &--secondary {
+    height: $spacing-lg;
+    width: $spacing-lg;
+  }
+
   &--secondary,
   &--tertiary.#{$px}-icon-button {
-    height: 28px;
-    padding: $spacing-xsm;
-    width: 28px;
-
     &:focus-visible {
       border-radius: 100px;
     }
 
     & > svg {
       fill: $pure-black;
-      height: 1.25rem;
       margin-inline-end: unset;
       position: absolute;
-      width: 1.25rem;
 
       path {
         fill: $pure-black;
@@ -85,6 +89,20 @@
     &:focus-visible {
       border-radius: 100px;
     }
+
+    &:hover {
+      background-color: $button-hover;
+
+      & > svg {
+        fill: $pure-white;
+        margin-inline-end: unset;
+        position: absolute;
+
+        path {
+          fill: $pure-white;
+        }
+      }
+    }
   }
 
   &:disabled {

diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx
@@ -59,7 +59,7 @@ export const Tag = ({ id, className, onRemove, label }: TagProps) => {
     <div className={classnames(`${px}-tag`, `${px}-button`, className)} aria-label="Close Tag">
       <div className={`${px}-tag__label`}>{label}</div>
       <div onClick={() => onRemove(label)} className={`${px}-tag__button`} data-testid={`${id}-item-close-button`}>
-        <IconButton className={`${px}-tag__button--close`} size="sm">
+        <IconButton className={`${px}-tag__button--close`}>
           <CloseIcon />
         </IconButton>
       </div>