[#256] FEAT: Support unselectedText prop

eBay · Oct 12, 2023 · a2d7214 · a2d7214
1 parent 428efc6
commit a2d7214
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 20 deletions.
diff --git a/src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-listbox-button/__tests__/__snapshots__/index.spec.tsx.snap
@@ -62,7 +62,6 @@ exports[`Storyshots ebay-listbox-button Default - no selected option 1`] = `
     onClick={[Function]}
     onKeyUp={[Function]}
     onMouseDown={[Function]}
-    onSelect={[Function]}
     type="button"
   >
     <span
@@ -71,7 +70,7 @@ exports[`Storyshots ebay-listbox-button Default - no selected option 1`] = `
       <span
         className="btn__text"
       >
-        Option 1
+        -
       </span>
       <svg
         aria-hidden={true}
@@ -88,7 +87,7 @@ exports[`Storyshots ebay-listbox-button Default - no selected option 1`] = `
   <select
     className="listbox-button__native"
     hidden={true}
-    value="AA"
+    value=""
   >
     <option
       value="AA"
@@ -443,7 +442,7 @@ exports[`Storyshots ebay-listbox-button Statefull component 1`] = `
         <span
           className="btn__text"
         >
-          California
+          -
         </span>
         <svg
           aria-hidden={true}
@@ -460,7 +459,7 @@ exports[`Storyshots ebay-listbox-button Statefull component 1`] = `
     <select
       className="listbox-button__native"
       hidden={true}
-      value="California"
+      value=""
     >
       <option
         value="California"

diff --git a/src/ebay-listbox-button/__tests__/index.spec.tsx b/src/ebay-listbox-button/__tests__/index.spec.tsx
@@ -42,18 +42,51 @@ describe("<EbayListboxButton>", () => {
         });
     });
 
+    describe('on render', () => {
+        it('should display default button label', async () => {
+            const component = await render(
+                <EbayListboxButton>
+                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
+                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
+                </EbayListboxButton>
+            );
+            expect(component.getByRole('button')).toHaveTextContent("-");
+        });
+        it('should display custom button label', async () => {
+            const component = await render(
+                <EbayListboxButton unselectedText="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 selected option', async () => {
+            const component = await render(
+                <EbayListboxButton value="BB">
+                    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
+                    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
+                </EbayListboxButton>
+            );
+            expect(component.getByRole('button')).toHaveTextContent("Option 2");
+        });
+    });
+
     describe('given the listbox with 3 items', () => {
         let component
         beforeEach(async () => {
             component = await render(
-                    <EbayListboxButton value="BB" prefixId={"listboxBtnLabel"} name="listbox-button-name">
+                    <EbayListboxButton prefixId={"listboxBtnLabel"} name="listbox-button-name">
                         <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
                         <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
                         <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
                     </EbayListboxButton>
             );
         });
-        it('then it should not be expanded', () => {
+        it('should display default button label', () => {
+            expect(component.getByRole('button')).toHaveTextContent("-");
+        });
+        it('should not be expanded', () => {
             expect(component.getByRole('button')).toHaveAttribute("aria-expanded", `false`);
         });
 

diff --git a/src/ebay-listbox-button/__tests__/index.stories.tsx b/src/ebay-listbox-button/__tests__/index.stories.tsx
@@ -22,9 +22,9 @@ storiesOf(`ebay-listbox-button`, module)
     </>))
     .add(`Default - no selected option`, () => (<>
         <EbayListboxButton
-            onSelect={action(`onSelect triggered`)}
+            onChange={(e: ChangeEvent, props: ChangeEventProps) => action(`onChange`)(e, props)}
         >
-            <EbayListboxButtonOption value="AA" >Option 1</EbayListboxButtonOption>
+            <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
             <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
             <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
         </EbayListboxButton>

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'> &
     maxHeight?: string;
     prefixId?: string;
     floatingLabel?: string;
+    unselectedText?: string;
     onChange?: EbayChangeEventHandler<HTMLButtonElement, ChangeEventProps>;
     onCollapse?: () => void;
     onExpand?: () => void;
@@ -35,6 +36,7 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
     maxHeight,
     prefixId,
     floatingLabel,
+    unselectedText = '-',
     onChange = () => {},
     onCollapse = () => {},
     onExpand = () => {},
@@ -51,8 +53,9 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
         EbayListboxButtonOption that defines the options of the listbox`)
     }
     const getInitialSelectedOption = (): { option: any, index: number } => {
-        const selectedIndex = listBoxButtonOptions.findIndex(({ props }) => props.value === value)
-        const index = selectedIndex > -1 || floatingLabel ? selectedIndex : 0
+        const selectedIndex = listBoxButtonOptions.findIndex(({ props }) =>
+            value !== undefined && props.value === value)
+        const index = selectedIndex > -1 || floatingLabel ? selectedIndex : undefined
         return {
             option: listBoxButtonOptions[index],
             index
@@ -236,6 +239,16 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
     })
     const expandBtnTextId = prefixId && 'expand-btn-text'
 
+    const buttonLabel = floatingLabel ? (
+        <span className="btn__floating-label">
+            {floatingLabel}
+        </span>
+    ) : (
+        <span className="btn__text" id={expandBtnTextId}>
+            {selectedOption?.props.children || unselectedText}
+        </span>
+    )
+
     return (
         <span className={wrapperClassName}>
             <button
@@ -252,15 +265,7 @@ const ListboxButton: FC<EbayListboxButtonProps> = ({
                 ref={buttonRef}
             >
                 <span className="btn__cell">
-                    {floatingLabel ? (
-                        <span className="btn__floating-label">
-                            {floatingLabel}
-                        </span>
-                    ) : null}
-                    {selectedOption &&
-                    <span className="btn__text" id={expandBtnTextId}>
-                        {selectedOption.props.children}
-                    </span>}
+                    {buttonLabel}
                     <EbayIcon name="chevronDown16" />
                 </span>
             </button>