Button Icon Styling

trimble-oss · Jun 28, 2024 · 9f28838 · 9f28838
1 parent f921666
commit 9f28838
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 26 deletions.
diff --git a/stencil-workspace/src/components/modus-button/modus-button.vars.scss b/stencil-workspace/src/components/modus-button/modus-button.vars.scss
@@ -1,9 +1,9 @@
 // Default theme colors
 $btn-theme-colors: (
-  'primary': #0063a3,
+  'primary': $col_blue,
   'secondary': #6a6e79,
-  'tertiary': #cbcdd6,
-  'danger': #da212c,
+  'tertiary': $col_gray_1,
+  'danger': $col_red,
 );
 $btn-hover-colors: (
   'primary': #0082d6,
@@ -20,7 +20,7 @@ $btn-active-colors: (
 
 // Default Outline
 $btn-outline-theme-colors: (
-  'primary': #0063a3,
+  'primary': $col_blue,
   'secondary': $col_trimble_gray,
 );
 $btn-outline-hover: (
@@ -46,7 +46,7 @@ $btn-outline-active: (
 
 // Default Borderless
 $modus-btn-borderless-bg: var(--modus-btn-text-primary-bg, transparent) !default;
-$modus-btn-borderless-color: var(--modus-btn-text-primary-color, #0063a3) !default;
+$modus-btn-borderless-color: var(--modus-btn-text-primary-color, $col_blue) !default;
 $modus-btn-borderless-secondary-color: var(--modus-btn-borderless-secondary-color, #000) !default;
 
 // Hover
@@ -88,35 +88,44 @@ $modus-btn-disabled-border-color: var(--modus-btn-disabled-border-color) !defaul
 
 // Default Icon-only
 $btn-icon-only-theme-colors: (
-  'primary': #0063a3,
+  'primary': $col_blue,
   'secondary': $col_trimble_gray,
   'tertiary': $col_gray_6,
+  'danger': $col_red,
 );
 $btn-icon-only-hover: (
+  'primary': (
+    'bg': #dcedf9,
+    'color': $col_blue_light,
+  ),
   'secondary': (
-    'bg': #e0e1e9,
+    'bg': $col_gray_0,
     'color': $col_gray_6,
   ),
   'tertiary': (
-    'bg': #e0e1e9,
+    'bg': $col_gray_0,
     'color': $col_trimble_gray,
   ),
-  'primary': (
-    'bg': #dcedf9,
-    'color': #217cbb,
+  'danger': (
+    'bg': $col_gray_0,
+    'color': $col_red,
   ),
 );
 $btn-icon-only-active: (
-  'tertiary': (
-    'bg': #cbcdd6,
-    'color': $col_trimble_gray,
+  'primary': (
+    'bg': rgba(0, 99, 163, 0.18),
+    'color': #004f83,
   ),
   'secondary': (
-    'bg': #cbcdd6,
+    'bg': $col_gray_1,
     'color': $col_trimble_gray,
   ),
-  'primary': (
-    'bg': rgba(0, 99, 163, 0.18),
-    'color': #004f83,
+  'tertiary': (
+    'bg': $col_gray_1,
+    'color': $col_trimble_gray,
+  ),
+  'danger': (
+    'bg': $col_gray_1,
+    'color': $col_red,
   ),
 );
diff --git a/stencil-workspace/src/components/modus-icons/readme.md b/stencil-workspace/src/components/modus-icons/readme.md
diff --git a/stencil-workspace/src/components/modus-table/models/modus-table.models.ts b/stencil-workspace/src/components/modus-table/models/modus-table.models.ts
@@ -12,6 +12,7 @@ import {
   VisibilityState,
 } from '@tanstack/table-core';
 import { BadgeProperties } from '../../modus-badge/modus-badge';
+import { ButtonColor } from '../../modus-button/modus-button.models';
 import {
   COLUMN_DEF_DATATYPE_INTEGER,
   COLUMN_DEF_DATATYPE_LINK,
@@ -65,6 +66,7 @@ export type ModusTableSortingFunction<TData extends RowData> = SortingFnOption<T
 export interface ModusTableRowAction {
   id: string;
   icon?: string;
+  iconColor?: ButtonColor;
   label?: string;
   index: number;
   isDisabled?: (row: unknown) => boolean;

diff --git a/...ponents/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx b/...ponents/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.tsx
@@ -67,13 +67,13 @@ export class ModusTableRowActions {
     }
     return (
       <Host>
-        {actionButtons?.map(({ label, icon, id, isDisabled = () => false }) => {
+        {actionButtons?.map(({ label, icon, iconColor, id, isDisabled = () => false }) => {
           const disabled = isDisabled(this.row.original);
           return (
             <modus-button
               class="row-actions"
               button-style="borderless"
-              color="secondary"
+              color={iconColor || 'secondary'}
               icon-only={icon}
               size="small"
               ariaLabel={label}

diff --git a/stencil-workspace/src/global/themes.scss b/stencil-workspace/src/global/themes.scss
@@ -175,6 +175,13 @@
   --modus-btn-icon-only-tertiary-active-bg: var(--modus-gray-1);
   --modus-btn-icon-only-tertiary-active-color: var(--modus-trimble-gray);
 
+  // Danger
+  --modus-btn-icon-only-danger-color: var(--modus-danger);
+  --modus-btn-icon-only-danger-hover-bg: var(--modus-gray-0);
+  --modus-btn-icon-only-danger-hover-color: var(--modus-danger);
+  --modus-btn-icon-only-danger-active-bg: var(--modus-gray-1);
+  --modus-btn-icon-only-danger-active-color: var(--modus-red-dark);
+
   // Icon
   --modus-icon-colour: var(--modus-gray-10);
 

diff --git a/...rkspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx b/...rkspace/storybook/stories/components/modus-table/modus-table-storybook-docs.mdx
@@ -749,6 +749,7 @@ interface ModusTableRowSelectionOptions {
 interface ModusTableRowAction {
   id: string;
   icon?: string;
+  iconColor?: ButtonColor;
   label?: string;
   index: number;
   isDisabled?: (row: unknown) => boolean;

diff --git a/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx b/stencil-workspace/storybook/stories/components/modus-table/modus-table.stories.tsx
@@ -968,6 +968,7 @@ RowActions.args = {
     {
       id: '1',
       icon: 'add',
+      iconColor: 'primary',
       label: 'Add',
       index: 0,
     },
@@ -981,7 +982,8 @@ RowActions.args = {
 
     {
       id: '3',
-      icon: 'cancel',
+      icon: 'cancel_circle',
+      iconColor: 'danger',
       label: 'Cancel',
       index: 2,
     },