saving validation picker

Arize-ai · Apr 26, 2023 · 2368562 · 2368562
1 parent 1028284
commit 2368562
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/picker/Picker.tsx b/src/picker/Picker.tsx
@@ -26,6 +26,7 @@ import theme from '../theme';
 import { useProviderProps } from '../provider';
 import { Field } from '../field';
 import { dimensionValue } from '../utils/styleProps';
+import { AlertCircleOutline, Icon } from '../icon';
 
 function Picker<T extends object>(
   props: PickerProps<T>,
@@ -47,6 +48,7 @@ function Picker<T extends object>(
     autoFocus,
     addonBefore,
     menuWidth,
+    validationState,
   } = props;
 
   let state = useSelectState(props);
@@ -154,6 +156,16 @@ function Picker<T extends object>(
     minWidth: isQuiet ? '200px' : buttonWidth,
   };
 
+  let isInvalid = validationState === 'invalid';
+
+  const validation = (
+    <Icon
+      key="validation-icon"
+      className={`ac-dropdown__validation-icon ac-dropdown__validation-icon--${validationState}`}
+      svg={<AlertCircleOutline />}
+    />
+  );
+
   const overlay = (
     <Popover
       isOpen={state.isOpen}
@@ -193,6 +205,8 @@ function Picker<T extends object>(
         {
           'is-disabled': isDisabled,
           'ac-dropdown--quiet': isQuiet,
+          'ac-dropdown--invalid': isInvalid,
+          'ac-dropdown--valid': validationState === 'valid',
         },
         props.className
       )}
@@ -229,6 +243,9 @@ function Picker<T extends object>(
         >
           <div>{contents}</div>
           {isLoadingInitial && 'Loading...'}
+          {validationState && validationState === 'invalid' && !isLoadingInitial
+            ? validation
+            : null}
         </DropdownButton>
       </PressResponder>
       {state.collection.size === 0 ? null : overlay}

diff --git a/src/types/select.ts b/src/types/select.ts
@@ -6,6 +6,7 @@ import { SingleSelection } from './selection';
 import { FocusableProps } from './events';
 import { StyleProps } from './style';
 import { DimensionValue } from './core';
+import { Validation, AriaValidationProps } from '../types';
 
 export interface SelectProps<T>
   extends CollectionBase<T>,
@@ -31,7 +32,8 @@ export interface AriaSelectProps<T>
   extends SelectProps<T>,
     DOMProps,
     AriaLabelingProps,
-    FocusableDOMProps {
+    FocusableDOMProps,
+    AriaValidationProps {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
@@ -45,7 +47,8 @@ export interface AriaSelectProps<T>
 export interface PickerProps<T>
   extends AriaSelectProps<T>,
     AddonableProps,
-    StyleProps {
+    StyleProps,
+    Validation {
   /**
    * Whether the picker should be displayed with a quiet style.
    * @default false