[ui][select] add errorMessage and placeholder

apps/storybook/stories/select.stories.tsx

@@ -14,6 +14,9 @@ export default {
       control: { type: 'select' },
       options: SelectDisplays,
     },
+    errorMessage: {
+      control: 'text',
+    },
     isLabelHidden: {
       control: 'boolean',
     },
@@ -23,6 +26,9 @@ export default {
     name: {
       control: 'text',
     },
+    placeholder: {
+      control: 'text',
+    },
   },
   component: Select,
   title: 'Select',
@@ -181,28 +187,78 @@ export function Required() {
   const [value, setValue] = useState('apple');
 
   return (
-    <div className="space-x-4">
+    <Select
-      <Select
+      label="Select a fruit"
-        label="Select a fruit"
+      options={[
-        options={[
+        {
-          {
+          label: 'Apple',
-            label: 'Apple',
+          value: 'apple',
-            value: 'apple',
+        },
-          },
+        {
-          {
+          label: 'Banana',
-            label: 'Banana',
+          value: 'banana',
-            value: 'banana',
+        },
-          },
+        {
-          {
+          label: 'Orange',
-            label: 'Orange',
+          value: 'orange',
-            value: 'orange',
+        },
-          },
+      ]}
-        ]}
+      required={true}
-        required={true}
+      value={value}
-        value={value}
+      onChange={setValue}
-        onChange={setValue}
+    />
-      />
+  );
-    </div>
+}
+
+export function Placeholder() {
+  return (
+    <Select
+      label="Select a fruit"
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+      ]}
+      placeholder="Select a fruit"
+      required={true}
+    />
+  );
+}
+
+export function Error() {
+  const [value, setValue] = useState('banana');
+
+  return (
+    <Select
+      errorMessage={value !== 'apple' ? 'Must select apple' : undefined}
+      label="Select a fruit"
+      options={[
+        {
+          label: 'Apple',
+          value: 'apple',
+        },
+        {
+          label: 'Banana',
+          value: 'banana',
+        },
+        {
+          label: 'Orange',
+          value: 'orange',
+        },
+      ]}
+      required={true}
+      value={value}
+      onChange={setValue}
+    />
   );
 }
 

packages/ui/src/Select/Select.tsx

@@ -20,11 +20,13 @@ type Props<T> = Readonly<{
   borderStyle?: SelectBorderStyle;
   defaultValue?: T;
   display?: SelectDisplay;
+  errorMessage?: string;
   isLabelHidden?: boolean;
   label: string;
   name?: string;
   onChange?: (value: string) => void;
   options: ReadonlyArray<SelectItem<T>>;
+  placeholder?: string;
   value?: T;
 }> &
   Readonly<Attributes>;
@@ -34,15 +36,25 @@ const borderClasses: Record<SelectBorderStyle, string> = {
   borderless: 'border-transparent bg-transparent',
 };
 
+type State = 'error' | 'normal';
+
+const stateClasses: Record<State, string> = {
+  error:
+    'border-danger-300 text-danger-900 placeholder-danger-300 focus:outline-none focus:ring-danger-500 focus:border-danger-500',
+  normal: 'focus:border-primary-500 focus:ring-primary-500',
+};
+
 function Select<T>(
   {
     borderStyle = 'bordered',
     defaultValue,
     display,
     disabled,
+    errorMessage,
     label,
     isLabelHidden,
     options,
+    placeholder,
     required,
     value,
     onChange,
@@ -50,7 +62,10 @@ function Select<T>(
   }: Props<T>,
   ref: ForwardedRef<HTMLSelectElement>,
 ) {
+  const hasError = errorMessage != null;
   const id = useId();
+  const errorId = useId();
+  const state: State = hasError ? 'error' : 'normal';
 
   return (
     <div>
@@ -69,10 +84,12 @@ function Select<T>(
       )}
       <select
         ref={ref}
+        aria-describedby={hasError ? errorId : undefined}
         aria-label={isLabelHidden ? label : undefined}
         className={clsx(
           display === 'block' && 'block w-full',
-          'focus:border-primary-500 focus:ring-primary-500 rounded-md py-2 pl-3 pr-8 text-base focus:outline-none sm:text-sm',
+          'rounded-md py-2 pl-3 pr-8 text-base focus:outline-none sm:text-sm',
+          stateClasses[state],
           borderClasses[borderStyle],
           disabled && 'bg-slate-100',
         )}
@@ -85,12 +102,22 @@ function Select<T>(
           onChange?.(event.target.value);
         }}
         {...props}>
+        {placeholder && (
+          <option disabled={true} hidden={true} selected={true} value="">
+            {placeholder}
+          </option>
+        )}
         {options.map(({ label: optionLabel, value: optionValue }) => (
           <option key={String(optionValue)} value={String(optionValue)}>
             {optionLabel}
           </option>
         ))}
       </select>
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }