Merge pull request #826 from commercelayer/fix-empty-dropdown-visibility

Dropdown when empty is no more visible
commercelayer · Nov 5, 2024 · ec04859 · ec04859
2 parents cad76a0 + 8a692bb
commit ec04859
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.test.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.test.tsx
@@ -61,6 +61,9 @@ describe('PageHeadingToolbar', () => {
 
     expect(queryAllByTestId('toolbar-button').length).toEqual(2)
     expect(queryAllByTestId('toolbar-dropdown-button').length).toEqual(1)
+    expect(queryByTestId('toolbar-dropdown-button')).not.toHaveClass(
+      'md:hidden'
+    )
     const dropDownButton = queryByTestId('toolbar-dropdown-button')
     if (dropDownButton != null) {
       act(() => {
@@ -73,4 +76,25 @@ describe('PageHeadingToolbar', () => {
       })
     }
   })
+
+  it('Should not display the dropdown button when empty', async () => {
+    const { queryAllByTestId, queryByTestId } = render(
+      <PageHeadingToolbar
+        buttons={[
+          {
+            label: 'Primary',
+            size: 'small',
+            onClick: () => {
+              console.log('Primary')
+            }
+          }
+        ]}
+        dropdownItems={[[]]}
+      />
+    )
+
+    expect(queryAllByTestId('toolbar-button').length).toEqual(1)
+    expect(queryAllByTestId('toolbar-dropdown-button').length).toEqual(1)
+    expect(queryByTestId('toolbar-dropdown-button')).toHaveClass('md:hidden')
+  })
 })
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeadingToolbar.tsx
@@ -50,7 +50,7 @@ export const PageHeadingToolbar = withSkeletonTemplate<PageHeadingToolbarProps>(
         icon: 'dotsThree',
         size: 'small',
         variant: 'secondary',
-        className: dropdownItems.length > 0 ? '' : 'flex md:hidden',
+        className: dropdownItems.flat().length > 0 ? '' : 'flex md:hidden',
         dropdownItems: combinedDropdownItems
       })
     }