Select - expose description field (#431)

* expose description field on select component * add errorMessage to argTypes in storybook
bcgov · Aug 8, 2024 · b4a4487 · b4a4487
1 parent 3a5219f
commit b4a4487
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/packages/react-components/src/components/Select/Select.css b/packages/react-components/src/components/Select/Select.css
@@ -17,6 +17,13 @@
   color: var(--typography-color-disabled);
 }
 
+/* Rext description below select input */
+.bcds-react-aria-Select--Description {
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
+}
+
 /* Error message */
 .bcds-react-aria-Select--Error {
   font: var(--typography-regular-small-body);

diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
@@ -52,7 +52,9 @@ export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
   placeholder?: string;
   /** Defaults to `medium` */
   size?: "small" | "medium";
-  /* Used for data validation and error handling */
+  /** Description or helper text that renders below the select input */
+  description?: string;
+  /** Used for data validation and error handling */
   errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
@@ -113,6 +115,7 @@ export default function Select<T extends object>({
   items,
   sections,
   label,
+  description,
   placeholder,
   size = "medium",
   errorMessage,
@@ -143,6 +146,14 @@ export default function Select<T extends object>({
             {isInvalid && iconError}
             {isOpen ? <ChevronUp /> : <ChevronDown />}
           </Button>
+          {description && (
+            <Text
+              slot="description"
+              className={`bcds-react-aria-Select--Description`}
+            >
+              {description}
+            </Text>
+          )}
           <FieldError className="bcds-react-aria-Select--Error">
             {errorMessage}
           </FieldError>

diff --git a/packages/react-components/src/stories/Select.stories.tsx b/packages/react-components/src/stories/Select.stories.tsx
@@ -25,11 +25,20 @@ const meta = {
       control: { type: "text" },
       description: "Text label that appears above the select button",
     },
+    description: {
+      control: { type: "text" },
+      description:
+        "Additional description or helper text below the select button",
+    },
     placeholder: {
       control: { type: "text" },
       description:
         "Text label that appears inside the select input before an option has been selected",
     },
+    errorMessage: {
+      control: { type: "text" },
+      description: "Text displayed when the input is invalid",
+    },
   },
 } satisfies Meta<typeof Select>;
 
@@ -55,6 +64,7 @@ export const SelectTemplate: Story = {
   args: {
     label: "Label",
     size: "medium",
+    description: "Optional description or helper text",
     isRequired: false,
     isDisabled: false,
     isInvalid: false,