update icon button size and styles in the design system

hubmapconsortium · Oct 22, 2024 · 74e8a30 · 74e8a30
1 parent 0d57bac
commit 74e8a30
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 17 deletions.
diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html
@@ -4,7 +4,7 @@
     mat-icon-button
     [matMenuTriggerFor]="menu"
     hraMicroTooltip="More"
-    hraIconButtonSize="medium"
+    hraIconButtonSize="large"
     data-testid="trigger"
   >
     <mat-icon>more_vert</mat-icon>

diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.html b/libs/design-system/dialog/src/lib/notice/notice.component.html
@@ -2,7 +2,7 @@
   <div class="title">
     {{ data.title }}
   </div>
-  <button mat-icon-button mat-dialog-close disableRipple hraIconButtonSize="medium" data-testid="close-icon">
+  <button mat-icon-button mat-dialog-close disableRipple hraIconButtonSize="large" data-testid="close-icon">
     <mat-icon class="material-symbols-rounded">close</mat-icon>
   </button>
 </div>

diff --git a/libs/design-system/icon-button/src/lib/icon-button-size/icon-button-size.directive.ts b/libs/design-system/icon-button/src/lib/icon-button-size/icon-button-size.directive.ts
@@ -1,19 +1,17 @@
 import { computed, Directive, input } from '@angular/core';
 
 /** Input options for icon button size */
-export type IconButtonSize = 'small' | 'medium' | 'large';
+export type IconButtonSize = 'small' | 'large';
 
 /** Record of button sizes (number in rem) */
 const BUTTON_SIZES: Record<IconButtonSize, number> = {
   small: 1.5,
-  medium: 2.25,
   large: 2.5,
 };
 
 /** Record of icon sizes (number in rem) */
 const ICON_SIZES: Record<IconButtonSize, number> = {
   small: 1.25,
-  medium: 1.5,
   large: 1.5,
 };
 

diff --git a/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss b/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss
@@ -1,6 +1,6 @@
 button[mat-icon-button] {
-  --mat-icon-button-hover-state-layer-opacity: 0.04;
-  --mat-icon-button-pressed-state-layer-opacity: 0.08;
+  --mat-icon-button-hover-state-layer-opacity: 0.08;
+  --mat-icon-button-pressed-state-layer-opacity: 0.16;
   --mat-icon-color: var(--sys-secondary);
   --mat-icon-button-state-layer-color: var(--sys-secondary);
   --mat-icon-button-focus-state-layer-opacity: 0;

diff --git a/libs/design-system/icon-button/src/lib/icon-button.stories.ts b/libs/design-system/icon-button/src/lib/icon-button.stories.ts
@@ -18,7 +18,7 @@ const meta: Meta = {
     },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'large'],
     },
   },
   decorators: [
@@ -59,12 +59,6 @@ export const Small: Story = {
   },
 };
 
-export const Medium: Story = {
-  args: {
-    size: 'medium',
-  },
-};
-
 export const Large: Story = {
   args: {
     size: 'large',

diff --git a/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts
@@ -66,11 +66,11 @@ const meta: Meta<MenuDemoComponent> = {
   argTypes: {
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'large'],
     },
   },
   args: {
-    size: 'medium',
+    size: 'small',
     menuOptions: exampleOptions,
   },
 };

diff --git a/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts
@@ -29,7 +29,7 @@ export interface MenuDemoOption {
 })
 export class MenuDemoComponent {
   /** Menu size */
-  readonly size = input<IconButtonSize>('medium');
+  readonly size = input<IconButtonSize>('small');
 
   /** List of menu options */
   readonly menuOptions = input<MenuDemoOption[]>([]);