Merge pull request #785 from hubmapconsortium/update-icon-button-story

update icon button size and styles in the design system
hubmapconsortium · Oct 22, 2024 · ff67556 · ff67556
2 parents 0d57bac + 4f311b6
commit ff67556
Show file tree

Hide file tree

Showing 7 changed files with 15 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
@@ -8,6 +8,12 @@ import { provideIconButtons } from './providers';
 
 const meta: Meta = {
   title: 'IconButton',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/HRA-Components?node-id=24-876',
+    },
+  },
   args: {
     icon: 'search',
     size: 'large',
@@ -18,7 +24,7 @@ const meta: Meta = {
     },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['small', 'large'],
     },
   },
   decorators: [
@@ -59,12 +65,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[]>([]);