Custom time select caret

deephaven#1634
bmingles · Nov 22, 2023 · f31a76c · f31a76c
1 parent 47b458b
commit f31a76c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
@@ -461,8 +461,11 @@ form label small {
 }
 
 .custom-select {
+  $caret-size: 10px 6px;
+  $error-size: 16px;
+
   background-image: var(--dh-svg-icon-select-indicator);
-  background-size: 10px 6px;
+  background-size: $caret-size;
 
   &:hover {
     background-image: var(--dh-svg-icon-select-indicator-hover);
@@ -471,9 +474,14 @@ form label small {
   &.is-invalid,
   &.is-invalid:focus {
     border-color: var(--dh-color-form-control-error);
+    background-size: $caret-size, $error-size;
     background-image: var(--dh-svg-icon-select-indicator),
       var(--dh-svg-icon-error);
   }
+  &.is-invalid:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover),
+      var(--dh-svg-icon-error);
+  }
   &.is-invalid:focus {
     box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
   }

diff --git a/packages/components/src/CustomTimeSelect.scss b/packages/components/src/CustomTimeSelect.scss
@@ -1,4 +1,5 @@
 @import '../scss/custom.scss';
+@import '../scss/util.scss';
 
 $cs-option-btn-color: $dropdown-link-color;
 $cs-option-keyboard-selected-bg: rgba($primary, 0.5);
@@ -10,20 +11,27 @@ $cs-option-hover-color: $dropdown-link-hover-color;
 
   .cs-dropdown .cs-btn {
     display: flex;
-    direction: row;
+    flex-direction: row;
+    align-items: center;
     justify-content: space-between;
     border-radius: $border-radius;
     border: $input-border-width solid $input-border-color;
     min-width: 14rem;
 
     .cs-caret {
-      color: var(--dh-color-selector-fg);
-      &:hover {
-        color: var(--dh-color-selector-hover-fg);
-      }
+      @include icon-image-mask(var(--dh-svg-icon-selector-caret), 10px 6px);
+
+      background-color: var(--dh-color-selector-fg);
+      width: 10px;
+      height: 10px;
+      margin-right: 4px;
     }
   }
 
+  .cs-dropdown:hover .cs-btn:not(:disabled) .cs-caret {
+    background-color: var(--dh-color-selector-hover-fg);
+  }
+
   .cs-dropdown-invalid .cs-btn-invalid {
     border-color: $danger;
   }

diff --git a/packages/components/src/CustomTimeSelect.tsx b/packages/components/src/CustomTimeSelect.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { PopperOptions } from 'popper.js';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsCheck, dhSort, IconDefinition } from '@deephaven/icons';
+import { vsCheck, IconDefinition } from '@deephaven/icons';
 import { TimeUtils } from '@deephaven/utils';
 import classNames from 'classnames';
 import TimeInput, { TimeInputElement } from './TimeInput';
@@ -515,9 +515,7 @@ class CustomTimeSelect extends Component<
             >
               {this.getSelectedText()}
             </span>
-            <span>
-              <FontAwesomeIcon icon={dhSort} className="cs-caret" />
-            </span>
+            <span className="cs-caret" />
             <DropdownMenu
               isShown={menuIsOpen}
               actions={{ menuElement: this.renderMenuElement() }}

diff --git a/packages/components/src/theme/theme-svg.scss b/packages/components/src/theme/theme-svg.scss
@@ -1,4 +1,5 @@
 /* stylelint-disable custom-property-empty-line-before */
+
 /** 
  * Create a SVG data url from given viewBox and path. Fill is explicitly set so 
  * that it can be easily replaced via ThemeUtils.calculateInlineSVGOverrides()
@@ -7,9 +8,7 @@
   @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='#{$viewBox}'%3E%3Cpath fill='currentColor' d='#{$path}'/%3E%3C/svg%3E");
 }
 
-$svg-path-down-caret: '0 0 10 6',
-  'M9.99 1.01A1 1 0 0 0 8.283.303L5 3.586 1.717.303A1 1 0 1 0 .303 1.717l3.99 3.98a1 1 0 0 0 1.414 0l3.99-3.98a.997.997 0 0 0 .293-.707z';
-
+/* Golden layout */
 $svg-path-close-tab: '0 0 320 512',
   'M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z';
 $svg-path-maximise: '0 0 16 16',
@@ -19,10 +18,14 @@ $svg-path-next: '0 0 16 16',
 $svg-path-prev: '0 0 16 16',
   'M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z';
 $svg-path-tab-dropdown: '0 0 16 16', 'M3 3v10h10V3H3zm9 9H4V4h8v8z';
-$svg-path-search-cancel: '0 0 16 16',
-  'M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z';
 $svg-path-close: '0 0 512 512',
   'm256 278.624 116.672 116.704 22.656 -22.624L278.624 256l116.704 -116.672 -22.624 -22.656L256 233.376 139.328 116.672l-22.624 22.656L233.376 256l-116.672 116.672 22.624 22.656L256 278.624z';
+
+$svg-path-search-cancel: '0 0 16 16',
+  'M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z';
+$svg-path-down-caret: '0 0 10 6',
+  'M9.99 1.01A1 1 0 0 0 8.283.303L5 3.586 1.717.303A1 1 0 1 0 .303 1.717l3.99 3.98a1 1 0 0 0 1.414 0l3.99-3.98a.997.997 0 0 0 .293-.707z';
+
 $svg-path-error: '0 0 16 16',
   'M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z';