Added disabled / invalid states to styleguide

deephaven#1634
bmingles · Nov 22, 2023 · 6bd24f5 · 6bd24f5
1 parent 5e2c358
commit 6bd24f5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/code-studio/src/styleguide/Inputs.tsx b/packages/code-studio/src/styleguide/Inputs.tsx
@@ -304,10 +304,11 @@ function Inputs(): React.ReactElement {
               validationError={!validateValue ? 'Value not set' : undefined}
               isModified={!!validateValue}
               id="validateInput1"
-              labelText="Input Field"
+              labelText={`Input Field${on ? ' (disabled)' : ''}`}
               hintText="Hint text"
             >
               <input
+                disabled={on}
                 type="text"
                 className="form-control"
                 aria-describedby="emailHelp"
@@ -320,9 +321,10 @@ function Inputs(): React.ReactElement {
                 validateOption === 'Invalid' ? 'Invalid value' : undefined
               }
               id="validateLabelInput2"
-              labelText="Dropdown"
+              labelText={`Dropdown${on ? ' (disabled)' : ''}`}
             >
               <Select
+                disabled={on}
                 onChange={eventTargetValue =>
                   setValidateOption(eventTargetValue)
                 }

diff --git a/packages/components/scss/BaseStyleSheet.scss b/packages/components/scss/BaseStyleSheet.scss
@@ -825,15 +825,19 @@ input[type='number']::-webkit-inner-spin-button {
         16px,
         cover;
       background-position-x: $caret-position, $error-position, center;
+    }
 
-      &:hover {
-        background-image: $svg-caret-hover, $svg-error,
-          solid-gradient($input-bg);
-      }
+    &.is-invalid:hover {
+      background-image: $svg-caret-hover, $svg-error, solid-gradient($input-bg);
     }
 
     &:disabled {
       background-image: $svg-caret, solid-gradient($input-disabled-bg);
+
+      &.is-invalid {
+        background-image: $svg-caret, $svg-error,
+          solid-gradient($input-disabled-bg);
+      }
     }
   }