@deephaven/components 0.57.2-beta.1 → 0.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.57.2-beta.1+73e0b658",
+  "version": "0.58.0",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.29.0",
-    "@deephaven/icons": "^0.57.2-beta.1+73e0b658",
-    "@deephaven/log": "^0.57.2-beta.1+73e0b658",
-    "@deephaven/react-hooks": "^0.57.2-beta.1+73e0b658",
-    "@deephaven/utils": "^0.57.2-beta.1+73e0b658",
+    "@deephaven/icons": "^0.58.0",
+    "@deephaven/log": "^0.58.0",
+    "@deephaven/react-hooks": "^0.58.0",
+    "@deephaven/utils": "^0.58.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spectrum/theme-default": "^3.5.1",
@@ -52,7 +52,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.57.2-beta.1+73e0b658"
+    "@deephaven/mocks": "^0.58.0"
   },
   "files": [
     "dist",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "73e0b658edffc7ef89b3b786f3fe30c0e64c96f9"
+  "gitHead": "a25095e03076d51780ca8ee2f8dff034d0a6d67f"
 }

package/scss/BaseStyleSheet.scss

@@ -9,7 +9,8 @@
 
   color: var(--dh-color-text);
 
-  .spectrum-theme-provider {
+  .spectrum-theme-provider,
+  [class^='spectrum_'] {
     color: var(--dh-color-text);
   }
 }
@@ -66,10 +67,6 @@ body {
   bottom: 0;
 }
 
-hr {
-  background-color: $gray-400;
-}
-
 .scroll-pane,
 .scroll-pane-x,
 .scroll-pane-y {
@@ -126,6 +123,19 @@ button:focus {
   min-width: 7rem;
   // Matching Spectrum styles
   -webkit-font-smoothing: antialiased;
+  // the following is to match spectrum buttons
+  height: 32px;
+  // vertical-align: top;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 3px;
+  padding-bottom: 5px;
+}
+
+.btn-sm {
+  height: 28px;
+  line-height: 28px;
 }
 
 span.btn-disabled-wrapper {
@@ -136,6 +146,18 @@ span.btn-disabled-wrapper {
   }
 }
 
+// We use disabled success buttons as success messages in a few places.
+// We should stop doing that, and phase them out when we have toasts.
+.btn-success {
+  &.disabled,
+  &:disabled {
+    --dh-color-text-disabled: var(--dh-color-positive-contrast);
+    --dh-color-disabled-bg: var(--dh-color-positive-bg);
+
+    opacity: 0.5;
+  }
+}
+
 .btn-link {
   min-width: unset;
   padding: $spacer-1;
@@ -258,17 +280,22 @@ span.btn-disabled-wrapper {
 }
 
 .btn-icon {
+  // used in chart builder and conditional formatting
   text-align: center;
   padding: 0;
   min-width: 0;
   font-size: small;
   text-overflow: ellipsis;
   border-radius: 0;
+  height: auto;
+  flex-direction: column;
+  gap: 3px;
+  color: var(--dh-color-text);
 
   svg,
   img {
     display: block;
-    background: $gray-500;
+    background: var(--dh-color-action-bg);
     margin: auto;
     border-radius: 2px;
     margin-bottom: 2px;
@@ -282,9 +309,10 @@ span.btn-disabled-wrapper {
   &:hover,
   &:focus,
   &.active {
+    color: var(--dh-color-text);
     svg,
     img {
-      box-shadow: 0 0 0 2px $input-border-color;
+      box-shadow: 0 0 0 2px var(--dh-color-action-hover-border);
       filter: saturate(100%);
     }
   }
@@ -297,15 +325,14 @@ span.btn-disabled-wrapper {
 
     svg,
     img {
-      box-shadow: 0 0 0 2px $input-focus-border-color;
+      box-shadow: 0 0 0 2px var(--dh-color-action-active-border);
     }
   }
 }
 
 .btn-inline {
   min-width: 2.75rem;
-  padding-left: $spacer-1;
-  padding-right: $spacer-1;
+  padding: 0 $spacer-1;
   border-radius: $border-radius;
   background: var(--dh-color-action-bg);
   border: 1px solid var(--dh-color-action-border);
@@ -333,6 +360,7 @@ span.btn-disabled-wrapper {
     background-color: var(--dh-color-action-disabled-bg);
     border: 1px solid var(--dh-color-action-disabled-border);
     color: var(--dh-color-action-disabled-fg);
+    opacity: 1;
     cursor: not-allowed;
   }
 
@@ -405,8 +433,10 @@ form label small {
   color: $gray-400;
 }
 
-.form-control.focus {
-  border: 1px solid $primary;
+.form-control.focus,
+.form-control:focus {
+  border: 1px solid var(--dh-color-input-focus-border);
+  box-shadow: none;
 }
 
 .form-control.is-invalid,
@@ -423,9 +453,12 @@ form label small {
 }
 
 .form-control:disabled {
-  border-color: $black;
-  color: $gray-500;
-  cursor: not-allowed;
+  border-color: var(--dh-color-input-disabled-border);
+  color: var(--dh-color-input-disabled-fg);
+}
+
+.form-control:hover:not(:focus):not(:disabled) {
+  border-color: var(--dh-color-input-hover-border);
 }
 
 .form-control:disabled::placeholder {
@@ -441,41 +474,53 @@ form label small {
   user-select: none; //checkboxs are label pseudo elements, clicking can toggle text selection otherwise
 }
 
-.custom-control-label::before {
-  border: 1px solid $gray-400;
-  top: 0.24rem;
-}
-
-.custom-control-label::after {
-  top: 0.24rem;
-}
-
-.custom-control-input:active ~ .custom-control-label::before {
-  background-color: $primary-dark;
-}
-
-.custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: $input-btn-focus-box-shadow;
-  border-color: $input-focus-border-color;
-}
-
 .custom-control-input:disabled ~ .custom-control-label::before {
-  background-color: $gray-500;
-  border: 1px solid $black;
   cursor: not-allowed;
 }
 
-.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
-  border: 1px solid $primary;
-}
-
 .custom-checkbox
   .custom-control-input:disabled
   ~ .custom-control-label::before {
-  border-color: $black;
   cursor: not-allowed;
 }
 
+.custom-radio {
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-radio-indicator-icon-checked) 4px / 6px 6px
+        no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+}
+
+.custom-checkbox {
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-checkbox-indicator-icon-checked) 50%/75% 75%
+        no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::after {
+      mask: escape-svg($custom-checkbox-indicator-icon-indeterminate) 50%/65%
+        65% no-repeat;
+      background: var(--dh-color-input-bg);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      border: var(--dh-color-input-disabled-fg);
+    }
+    &:indeterminate ~ .custom-control-label::before {
+      border: var(--dh-color-input-disabled-fg);
+    }
+  }
+}
+
 .custom-select {
   $caret-size: 10px 6px;
   $error-size: 16px;
@@ -483,8 +528,8 @@ form label small {
   background-image: var(--dh-svg-icon-select-indicator);
   background-size: $caret-size;
 
-  &:hover {
-    background-image: var(--dh-svg-icon-select-indicator-hover);
+  &:focus {
+    box-shadow: none;
   }
 
   &.is-invalid,
@@ -504,15 +549,23 @@ form label small {
 }
 
 .custom-select:disabled {
-  border-color: $black;
-  cursor: not-allowed;
+  color: var(--dh-color-text-disabled);
+  background-color: var(--dh-color-input-disabled-bg);
+  border-color: var(--dh-color-input-disabled-border);
   background-image: var(--dh-svg-icon-select-indicator-disabled);
+  opacity: 1;
   &.is-invalid {
     background-image: var(--dh-svg-icon-select-indicator-disabled),
       var(--dh-svg-icon-error);
   }
 }
 
+.custom-select:hover:not(:disabled) {
+  background-color: var(--dh-color-selector-hover-bg);
+  background-image: var(--dh-svg-icon-select-indicator-hover);
+  border-color: var(--dh-color-input-hover-border);
+}
+
 input[type='number'] {
   -moz-appearance: textfield;
   appearance: textfield;
@@ -539,14 +592,17 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 .input-group > .input-group-append.cb-dropdown > .btn {
-  border: 1px solid $gray-400;
+  border: 1px solid $input-border-color;
 
   &:focus {
     border-color: $input-focus-border-color;
   }
   &:disabled {
-    border-color: $background;
-    cursor: not-allowed;
+    background-color: $input-disabled-bg;
+    border-color: var(--dh-color-input-disabled-border);
+    .cb-caret {
+      background-color: var(--dh-color-icon-disabled-fg);
+    }
   }
 }
 /* stylelint-enable no-descending-specificity */
@@ -566,86 +622,8 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 /********** Modal Styling *********/
-.modal-dialog.theme-bg-light {
-  .modal-content {
-    color: $black;
-    background: $gray-100;
-  }
-
-  .form-control {
-    background: $gray-200;
-    color: $black;
-  }
-
-  .custom-checkbox {
-    .custom-control-label::before {
-      background-color: $gray-100;
-    }
-
-    .custom-control-input:checked ~ .custom-control-label::before {
-      background-color: $primary;
-    }
-
-    .custom-control-input:active ~ .custom-control-label::before {
-      background-color: $primary-light;
-      border-color: $primary;
-    }
-    .custom-control-input:disabled ~ .custom-control-label::before {
-      border-color: $black;
-      background-color: $gray-300;
-      cursor: not-allowed;
-    }
-  }
-
-  .custom-select {
-    background-color: $gray-200;
-    color: $black;
-  }
-
-  .modal-header {
-    border-bottom-color: transparent;
-    .close {
-      outline: 0;
-    }
-  }
-
-  .modal-footer {
-    border-top-color: transparent;
-  }
 
-  .btn-link {
-    color: $gray-700;
-    &:hover {
-      color: $black;
-    }
-  }
-
-  .btn-outline-secondary {
-    color: $gray-300;
-    background-color: transparent;
-    background-image: none;
-    border-color: $gray-300;
-    &:focus,
-    &.focus {
-      box-shadow: 0 0 0 0.2rem background-opacity(20);
-    }
-  }
-}
-
-.modal-dialog.theme-bg-dark {
-  .modal-title {
-    color: $foreground;
-  }
-  .modal-header {
-    .close {
-      color: $foreground;
-      text-shadow: 0 1px 0 $background;
-    }
-  }
-  .modal-content {
-    background: $content-bg;
-  }
-}
+// No using default modal styling
 
 /********** Browser Default Overides *********/
 ::selection {
@@ -711,14 +689,6 @@ input[type='number']::-webkit-inner-spin-button {
   background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
 }
 
-// used in inverted color sections, like light modals
-.theme-bg-light {
-  --dh-color-scrollbar-hsl: #{var(--dh-color-bg-hsl)};
-
-  scrollbar-color: hsla(var(--dh-color-scrollbar-hsl), 0.5)
-    hsla(var(--dh-color-scrollbar-hsl), 0.3); // firefox
-}
-
 /********** Monaco Overides *********/
 //Note many monaco style are set inline, making overrides require !important
 
@@ -858,16 +828,6 @@ input[type='number']::-webkit-inner-spin-button {
     }
   }
 
-  .modal-dialog.theme-bg-light .custom-select {
-    background-image: var(--dh-svg-icon-select-indicator),
-      solid-gradient($gray-200);
-
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 $background !important;
-    }
-  }
-
   .custom-select option {
     color: #3a4148;
   }

package/scss/bootstrap_override_mixins_buttons.scss

@@ -45,9 +45,10 @@
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    color: $color;
-    background-color: $background;
-    border-color: $border;
+    color: var(--dh-color-text-disabled);
+    background-color: var(--dh-color-disabled-bg);
+    border-color: transparent;
+    opacity: 1;
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {
       background-image: none;
@@ -96,8 +97,10 @@
 
   &.disabled,
   &:disabled {
-    color: $color;
+    color: var(--dh-color-text-disabled);
     background-color: transparent;
+    border-color: var(--dh-color-disabled-bg);
+    opacity: 1;
   }
 
   &:not(:disabled):not(.disabled):active,

package/scss/bootstrap_overrides.scss

@@ -153,8 +153,7 @@ $grid-gutter-width: 30px;
 
 //Visual Overrides
 $border-radius: 4px;
-$box-shadow: 0 0.1rem 1rem hsla(var(--dh-color-black-hsl), 0.45); //because our UI is so dark, we need darker default shadows
-$box-shadow-900: 0 0.1rem 1rem hsla(var(--dh-color-true-black-hsl), 0.45); //darkest shadow for $black popups over $black UI
+$box-shadow: 0 0.1rem 1rem var(--dh-color-dropshadow);
 
 //Override Btn
 $btn-border-radius: 4rem;
@@ -166,6 +165,7 @@ $btn-transition:
   box-shadow 0.12s ease-in-out; //default 0.15 is too long
 $btn-border-width: 2px;
 $btn-font-weight: var(--spectrum-global-font-weight-bold);
+$btn-line-height: 1.3;
 
 //Override Inputs
 $input-bg: var(--dh-color-input-bg);
@@ -178,14 +178,28 @@ $input-focus-border-color: var(--dh-color-input-focus-border);
 $input-btn-focus-width: 0.2rem;
 $input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-btn-line-height: 1.3;
+// Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).
+// The padding-y value has to be in rem to match units. Using 0.4214rem with 1.3
+// line height gets us to 31.99px vs Spectrum's 32px.
+$input-btn-padding-y: 0.4214rem;
 
 //checkbox
-$custom-control-indicator-bg: $gray-600;
-$custom-control-indicator-active-bg: var(--dh-color-accent-1100);
+$custom-control-indicator-bg: var(--dh-color-input-bg);
+$custom-control-indicator-border-color: var(--dh-color-input-border);
+$custom-checkbox-indicator-border-radius: 2px;
+$custom-control-indicator-border-width: 2px;
+$custom-control-indicator-active-bg: var(--dh-color-input-bg);
+$custom-control-indicator-active-border-color: var(--dh-color-input-fg);
+$custom-control-indicator-checked-bg: var(--dh-color-input-fg);
+$custom-control-indicator-checked-color: black; // used as mask fill color
+$custom-checkbox-indicator-indeterminate-bg: var(--dh-color-input-fg);
 $custom-control-indicator-bg-size: 75% 75%;
-$custom-control-indicator-disabled-bg: $gray-800;
-$custom-control-indicator-checked-disabled-bg: $gray-800;
-$custom-control-label-disabled-color: $gray-400;
+$custom-control-indicator-disabled-bg: var(--dh-color-input-disabled-bg);
+$custom-control-indicator-checked-disabled-bg: var(
+  --dh-color-input-disabled-bg
+);
+$custom-control-label-disabled-color: var(--dh-color-input-disabled-fg);
 
 // The $custom-select-indicator variable is used by Bootstrap to provide the
 // icon for the select dropdown. Inline svgs can't use CSS variables, so we hard
@@ -193,6 +207,7 @@ $custom-control-label-disabled-color: $gray-400;
 // overrides this icon altogether for known dropdowns, so technically we may not
 // need this, but it's here in case there are any remaining instances.
 $custom-select-indicator-color: #929192;
+$custom-select-bg: var(--dh-color-selector-bg);
 $custom-select-bg-size: 16px 16px;
 //dhSort icon encoded
 $custom-select-indicator: str-replace(
@@ -205,9 +220,11 @@ $custom-select-disabled-color: $gray-500;
 $custom-select-disabled-bg: $gray-800;
 
 //modal
-$modal-content-bg: $gray-200;
+$modal-content-bg: $content-bg;
 $modal-content-border-width: 0;
 $modal-md: 550px;
+$close-color: var(--dh-color-text);
+$close-text-shadow: none;
 
 // Toast notification
 $toast-bg: var(--dh-color-accent-100);
@@ -228,12 +245,15 @@ $dropdown-link-hover-bg: $primary;
 $dropdown-divider-bg: $gray-700;
 
 //context menus
-$contextmenu-bg: $gray-600;
-$contextmenu-color: $foreground;
-$contextmenu-disabled-color: $text-muted;
-$contextmenu-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
-$contextmenu-selected-bg: $primary;
-$contextmenu-selected-color: $foreground;
+$contextmenu-bg: var(--dh-color-popover-bg);
+$contextmenu-color: var(--dh-color-text);
+$contextmenu-disabled-color: var(--dh-color-input-disabled-fg);
+$contextmenu-keyboard-selected-bg: var(--dh-color-keyboard-selected-bg);
+$contextmenu-selected-bg: var(--dh-color-item-list-hover-bg);
+$contextmenu-selected-color: var(--dh-color-item-list-selected-fg);
+
+//hr
+$hr-border-color: var(--dh-color-hr);
 
 //links
 $link-color: $gray-400;