feat(datagrid): improve column selector button

closes: #43 Signed-off-by: Ivan Donchev <idonchev@vmware.com>
vmware-clarity · Dec 12, 2022 · be93645 · be93645
1 parent 57f420a
commit be93645
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 24 deletions.
diff --git a/projects/angular/src/data/datagrid/_datagrid.clarity.scss b/projects/angular/src/data/datagrid/_datagrid.clarity.scss
@@ -1207,31 +1207,71 @@
       display: flex;
       align-items: center;
 
-      &.active {
-        .column-toggle--action {
-          cds-icon,
-          clr-icon {
-            @include css-var(color, clr-color-action-600, $clr-color-action-600, $clr-use-custom-properties);
-          }
-        }
-      }
-
       .column-toggle--action {
         // I'm overriding .btn/.btn-link here but am not confident this is the correct way to do it.
         min-width: $clr_baselineRem_0_75;
-        padding-left: 0;
-        padding-right: 0;
-
-        cds-icon,
-        clr-icon {
-          @include css-var(color, clr-color-neutral-600, $clr-color-neutral-600, $clr-use-custom-properties);
-        }
+        padding-left: $clr_baselineRem_6px;
+        padding-right: $clr_baselineRem_6px;
+        text-transform: capitalize;
+        @include css-var(
+          border-color,
+          clr-datagrid-column-toggle-border-color,
+          $clr-datagrid-column-toggle-border-color,
+          $clr-use-custom-properties
+        );
+        @include css-var(
+          background-color,
+          clr-datagrid-column-toggle-fill-color,
+          $clr-datagrid-column-toggle-fill-color,
+          $clr-use-custom-properties
+        );
+        @include css-var(
+          color,
+          clr-datagrid-column-toggle-text-color,
+          $clr-datagrid-column-toggle-text-color,
+          $clr-use-custom-properties
+        );
 
         &:hover {
-          cds-icon,
-          clr-icon {
-            @include css-var(color, clr-color-action-600, $clr-color-action-600, $clr-use-custom-properties);
-          }
+          @include css-var(
+            border-color,
+            clr-datagrid-column-toggle-border-hover-color,
+            $clr-datagrid-column-toggle-border-hover-color,
+            $clr-use-custom-properties
+          );
+          @include css-var(
+            background-color,
+            clr-datagrid-column-toggle-fill-hover-color,
+            $clr-datagrid-column-toggle-fill-hover-color,
+            $clr-use-custom-properties
+          );
+          @include css-var(
+            color,
+            clr-datagrid-column-toggle-text-hover-color,
+            $clr-datagrid-column-toggle-text-hover-color,
+            $clr-use-custom-properties
+          );
+        }
+        &:active {
+          box-shadow: none;
+          @include css-var(
+            border-color,
+            clr-datagrid-column-toggle-border-active-color,
+            $clr-datagrid-column-toggle-border-active-color,
+            $clr-use-custom-properties
+          );
+          @include css-var(
+            background-color,
+            clr-datagrid-column-toggle-fill-active-color,
+            $clr-datagrid-column-toggle-fill-active-color,
+            $clr-use-custom-properties
+          );
+          @include css-var(
+            color,
+            clr-datagrid-column-toggle-text-active-color,
+            $clr-datagrid-column-toggle-text-active-color,
+            $clr-use-custom-properties
+          );
         }
       }
 

diff --git a/projects/angular/src/data/datagrid/_properties.datagrid.scss b/projects/angular/src/data/datagrid/_properties.datagrid.scss
@@ -39,6 +39,16 @@
       --clr-datagrid-placeholder-font-size: #{$clr-h5-font-size};
 
       --clr-datagrid-pagination-btn-disabled-opacity: #{$clr-datagrid-pagination-btn-disabled-opacity};
+
+      --clr-datagrid-column-toggle-border-color: var(--clr-color-neutral-600);
+      --clr-datagrid-column-toggle-fill-color: var(--clr-color-neutral-50);
+      --clr-datagrid-column-toggle-text-color: var(--clr-color-neutral-700);
+      --clr-datagrid-column-toggle-border-hover-color: var(--clr-color-neutral-700);
+      --clr-datagrid-column-toggle-fill-hover-color: var(--clr-color-neutral-0);
+      --clr-datagrid-column-toggle-text-hover-color: var(--clr-color-neutral-1000);
+      --clr-datagrid-column-toggle-border-active-color: var(--clr-color-neutral-700);
+      --clr-datagrid-column-toggle-fill-active-color: var(--clr-color-neutral-100);
+      --clr-datagrid-column-toggle-text-active-color: var(--clr-color-neutral-700);
     }
   }
 }
diff --git a/projects/angular/src/data/datagrid/_variables.datagrid.scss b/projects/angular/src/data/datagrid/_variables.datagrid.scss
@@ -41,3 +41,14 @@ $clr-datagrid-detail-caret-icon-open-icon-color: $clr-color-neutral-0;
 // Placeholder
 $clr-datagrid-placeholder-color: $clr-color-neutral-500 !default;
 $clr-datagrid-placeholder-font-size: $clr-h5-font-size !default;
+
+// Column Toggle
+$clr-datagrid-column-toggle-border-color: $clr-color-neutral-600 !default;
+$clr-datagrid-column-toggle-fill-color: $clr-color-neutral-50 !default;
+$clr-datagrid-column-toggle-text-color: $clr-color-neutral-700 !default;
+$clr-datagrid-column-toggle-border-hover-color: $clr-color-neutral-700 !default;
+$clr-datagrid-column-toggle-fill-hover-color: $clr-color-neutral-0 !default;
+$clr-datagrid-column-toggle-text-hover-color: $clr-color-neutral-1000 !default;
+$clr-datagrid-column-toggle-border-active-color: $clr-color-neutral-700 !default;
+$clr-datagrid-column-toggle-fill-active-color: $clr-color-neutral-100 !default;
+$clr-datagrid-column-toggle-text-active-color: $clr-color-neutral-700 !default;
diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle.ts
@@ -28,15 +28,14 @@ import { ColumnsService } from './providers/columns.service';
     <button
       role="button"
       type="button"
-      class="btn btn-sm btn-link column-toggle--action"
+      class="btn btn-sm column-toggle--action"
       clrPopoverAnchor
       clrPopoverOpenCloseButton
       [attr.aria-controls]="popoverId"
       [attr.aria-owns]="popoverId"
       [attr.aria-expanded]="openState"
     >
-      <cds-icon shape="view-columns" aria-hidden="true" [attr.title]="commonStrings.keys.pickColumns"></cds-icon>
-      <span class="clr-sr-only">{{ commonStrings.keys.pickColumns }}</span>
+      {{ commonStrings.keys.pickColumns }}
     </button>
     <div
       class="column-switch"

diff --git a/projects/angular/src/utils/_theme.dark.clarity.scss b/projects/angular/src/utils/_theme.dark.clarity.scss
@@ -381,6 +381,17 @@ $clr-datagrid-pagination-input-border-focus-color: hsl(198, 65%, 57%);
 $clr-datagrid-popover-border-color: hsl(0, 0%, 0%);
 $clr-datagrid-action-popover-hover-color: $clr-datagrid-row-hover;
 $clr-datagrid-loading-background: rgba(0, 0, 0, 0.5);
+
+$clr-datagrid-column-toggle-border-color: hsl(208, 16%, 34%);
+$clr-datagrid-column-toggle-fill-color: hsl(201, 30%, 15%);
+$clr-datagrid-column-toggle-text-color: hsl(203, 16%, 72%);
+$clr-datagrid-column-toggle-border-hover-color: hsl(208, 14%, 39%);
+$clr-datagrid-column-toggle-fill-hover-color: hsl(198, 28%, 18%);
+$clr-datagrid-column-toggle-text-hover-color: hsl(0, 0%, 100%);
+$clr-datagrid-column-toggle-border-active-color: hsl(208, 14%, 39%);
+$clr-datagrid-column-toggle-fill-active-color: hsl(201, 30%, 13%);
+$clr-datagrid-column-toggle-text-active-color: hsl(203, 16%, 72%);
+
 // END: Datagrid
 
 /*********

diff --git a/projects/angular/src/utils/i18n/common-strings.default.ts b/projects/angular/src/utils/i18n/common-strings.default.ts
@@ -24,7 +24,7 @@ export const commonStringsDefault: ClrCommonStrings = {
   warning: 'Warning',
   danger: 'Error',
   rowActions: 'Available actions',
-  pickColumns: 'Show or hide columns',
+  pickColumns: 'Manage Columns',
   showColumns: 'Show Columns',
   sortColumn: 'Sort Column',
   firstPage: 'First Page',