fix: Add isInvalid prop to Select component (#1883)

FIxes #1882

Author: vbabich

packages/code-studio/src/styleguide/Inputs.tsx

@@ -258,6 +258,24 @@ function Inputs(): React.ReactElement {
             </Select>
           </div>
 
+          <div className="form-group">
+            <Select
+              onChange={v => {
+                // no-op
+              }}
+              defaultValue="0"
+              className="custom-select"
+              isInvalid
+            >
+              <Option disabled value="0">
+                Custom Selection
+              </Option>
+              <Option value="1">One</Option>
+              <Option value="2">Two</Option>
+              <Option value="3">Three</Option>
+            </Select>
+          </div>
+
           <div className="form-group">
             <h5>Input with Select</h5>
             <div className="input-group">

packages/components/src/Select.tsx

@@ -5,6 +5,7 @@ import { useForwardedRef } from '@deephaven/react-hooks';
 type baseSelectProps = Omit<React.HTMLProps<HTMLSelectElement>, 'onChange'>;
 
 export type SelectProps = baseSelectProps & {
+  isInvalid?: boolean;
   onChange: (value: string) => void;
   'data-testid'?: string;
 };
@@ -20,6 +21,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
     const {
       children,
       className,
+      isInvalid,
       onChange,
       'data-testid': dataTestId,
       ...rest
@@ -37,7 +39,9 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
     return (
       <select
         ref={ref}
-        className={classNames('custom-select', className)}
+        className={classNames('custom-select', className, {
+          'is-invalid': isInvalid,
+        })}
         onChange={handleChange}
         data-testid={dataTestId}
         // eslint-disable-next-line react/jsx-props-no-spreading