Allow title to be provided to Select.Option

hypothesis · Oct 29, 2024 · b48339a · b48339a
1 parent 7fc3e67
commit b48339a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx
@@ -49,6 +49,8 @@ export type SelectOptionProps<T> = {
 
   /** Ref associated with the option's container element */
   elementRef?: Ref<HTMLElement | undefined>;
+  /** Value to be passed to the option's `title` attribute */
+  title?: string;
 };
 
 function optionChildren(
@@ -70,6 +72,7 @@ function SelectOption<T>({
   disabled = false,
   classes,
   elementRef,
+  title,
 }: SelectOptionProps<T>) {
   const checkboxRef = useRef<HTMLElement | null>(null);
   const checkboxContainerRef = useRef<HTMLLabelElement | null>(null);
@@ -187,6 +190,7 @@ function SelectOption<T>({
       // This is intended to be focused with arrow keys
       tabIndex={-1}
       ref={downcastRef(optionRef)}
+      title={title}
     >
       <div
         className={classnames(

diff --git a/src/pattern-library/components/patterns/prototype/SelectPage.tsx b/src/pattern-library/components/patterns/prototype/SelectPage.tsx
@@ -560,6 +560,20 @@ export default function SelectPage() {
               </Library.InfoItem>
             </Library.Info>
           </Library.Example>
+          <Library.Example title="title">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                If provided, it is set as the option{"'"}s <code>title</code>{' '}
+                attribute.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>string | undefined</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>undefined</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
         </Library.Pattern>
       </Library.Section>