[#256] Support prefixLabel prop

eBay · Oct 12, 2023 · 7c32be8 · 7c32be8
1 parent 72e9a7a
commit 7c32be8
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 12 deletions.
diff --git a/src/ebay-listbox-button/README.md b/src/ebay-listbox-button/README.md
@@ -35,6 +35,7 @@ yarn add @ebay/ui-core-react
 | `borderless`     | boolean | No       | To make the listbox borderless                                                                          |
 | `maxHeight`      | string  | No       | example: 100px, 200px, 10rem                                                                            |
 | `prefixId`       | string  | No       | The id of an external element to use as the a11y prefix label for the listbox button.                   |
+| `prefixLabel`       | string  | No       | The label to add before selected option on the button. Cannot be used with `prefixId`              |
 | `floatingLabel`  | string  | No       | Indicates that the listbox is a floating label type and renders it with a label                         |
 | `unselectedText` | string  | No       | The text to be shown when no options are selected. Default is '-'. Cannot be used with `floating-label` |
 

diff --git a/src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap
@@ -278,7 +278,6 @@ exports[`Storyshots ebay-listbox-button Floating label 1`] = `
     onClick={[Function]}
     onKeyUp={[Function]}
     onMouseDown={[Function]}
-    onSelect={[Function]}
     type="button"
   >
     <span
@@ -422,6 +421,62 @@ exports[`Storyshots ebay-listbox-button Invalid State 1`] = `
 </span>
 `;
 
+exports[`Storyshots ebay-listbox-button Prefix label 1`] = `
+<span
+  className="listbox-button"
+>
+  <button
+    aria-expanded={false}
+    aria-haspopup="listbox"
+    className="btn btn--form"
+    onClick={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    type="button"
+  >
+    <span
+      className="btn__cell"
+    >
+      <span
+        className="btn__label"
+      >
+        Selected:
+      </span>
+      <span
+        className="btn__text"
+      >
+        -
+      </span>
+      <svg
+        aria-hidden={true}
+        className="icon icon--chevron-down-16"
+        focusable={false}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <use
+          xlinkHref="#icon-chevron-down-16"
+        />
+      </svg>
+    </span>
+  </button>
+  <select
+    className="listbox-button__native"
+    hidden={true}
+    value=""
+  >
+    <option
+      value="AA"
+    />
+    <option
+      value="BB"
+    />
+    <option
+      value="CC"
+    />
+  </select>
+</span>
+`;
+
 exports[`Storyshots ebay-listbox-button Preselected index 1`] = `
 <span
   className="listbox-button"

diff --git a/src/ebay-listbox-button/__tests__/index.spec.tsx b/src/ebay-listbox-button/__tests__/index.spec.tsx
@@ -54,12 +54,12 @@ describe("<EbayListboxButton>", () => {
         });
         it('should display custom button label', async () => {
             const component = await render(
-                <EbayListboxButton unselectedText="Selected:">
+                <EbayListboxButton unselectedText="Select">
                     <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
                     <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
                 </EbayListboxButton>
             );
-            expect(component.getByRole('button')).toHaveTextContent("Selected:");
+            expect(component.getByRole('button')).toHaveTextContent("Select");
         });
         it('should display button label with selected option', async () => {
             const component = await render(
@@ -70,6 +70,24 @@ describe("<EbayListboxButton>", () => {
             );
             expect(component.getByRole('button')).toHaveTextContent("Option 2");
         });
+        it('should display button label with prefix', async () => {
+            const component = await render(
+                <EbayListboxButton prefixLabel="Selected:">
+                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
+                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
+                </EbayListboxButton>
+            );
+            expect(component.getByRole('button')).toHaveTextContent("Selected:-");
+        });
+        it('should display button label with prefix and selected option', async () => {
+            const component = await render(
+                <EbayListboxButton prefixLabel="Selected:" selected={1}>
+                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
+                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
+                </EbayListboxButton>
+            );
+            expect(component.getByRole('button')).toHaveTextContent("Selected:Option 2");
+        });
         it('should preselect option by index', async () => {
             const component = await render(
                 <EbayListboxButton selected={1}>

diff --git a/src/ebay-listbox-button/__tests__/index.stories.tsx b/src/ebay-listbox-button/__tests__/index.stories.tsx
@@ -19,7 +19,8 @@ storiesOf(`ebay-listbox-button`, module)
             <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
             <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
         </EbayListboxButton>
-    </>))    .add(`Preselected index`, () => (<>
+    </>))
+    .add(`Preselected index`, () => (<>
         <EbayListboxButton selected={1}>
             <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
             <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
@@ -127,12 +128,15 @@ storiesOf(`ebay-listbox-button`, module)
             <EbayListboxButtonOption value="102">Option 39</EbayListboxButtonOption>
         </EbayListboxButton>
     </>))
+    .add(`Prefix label`, () => (<>
+        <EbayListboxButton prefixLabel="Selected:">
+            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
+            <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
+            <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
+        </EbayListboxButton>
+    </>))
     .add(`Floating label`, () => (<>
-        <EbayListboxButton
-            value=""
-            floatingLabel="Select"
-            onSelect={action(`onSelect triggered`)}
-        >
+        <EbayListboxButton floatingLabel="Select">
             <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
             <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
             <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>

diff --git a/src/ebay-listbox-button/listbox-button.tsx b/src/ebay-listbox-button/listbox-button.tsx
@@ -20,6 +20,7 @@ export type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> &
     fluid?: boolean;
     maxHeight?: string;
     prefixId?: string;
+    prefixLabel?: string;
     floatingLabel?: string;
     unselectedText?: string;
     onChange?: EbayChangeEventHandler<HTMLButtonElement, ChangeEventProps>;
@@ -37,6 +38,7 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
     className,
     maxHeight,
     prefixId,
+    prefixLabel,
     floatingLabel,
     unselectedText = '-',
     onChange = () => {},
@@ -246,9 +248,12 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
             {floatingLabel}
         </span>
     ) : (
-        <span className="btn__text" id={expandBtnTextId}>
-            {selectedOption?.props.children || unselectedText}
-        </span>
+        <>
+            {prefixLabel && <span className="btn__label">{prefixLabel}</span>}
+            <span className="btn__text" id={expandBtnTextId}>
+                {selectedOption?.props.children || unselectedText}
+            </span>
+        </>
     )
 
     return (