feat(dropdown): display number of selected items in cta

adevinta · Dec 5, 2023 · bf6ceec · bf6ceec
1 parent e2fd654
commit bf6ceec
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/dropdown/src/Dropdown.test.tsx b/packages/components/dropdown/src/Dropdown.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
@@ -367,8 +368,8 @@ describe('Dropdown', () => {
       await user.click(getItem('1984'))
       await user.click(getItem('Pride and Prejudice'))
 
-      // Then placeholder is replaced by the selected value
-      expect(getTrigger('Book')).toHaveTextContent('1984')
+      // Then placeholder is replaced by the selected value and suffix indicating remaining items
+      expect(getTrigger('Book')).toHaveTextContent('1984, +1')
 
       // Then the proper items are selected
       expect(getItem('War and Peace')).toHaveAttribute('aria-selected', 'false')
@@ -405,6 +406,7 @@ describe('Dropdown', () => {
       await user.keyboard('[ArrowDown][Enter]')
 
       // Then all items are selected
+      expect(getTrigger('Book')).toHaveTextContent('War and Peace, +2')
       expect(getItem('War and Peace')).toHaveAttribute('aria-selected', 'true')
       expect(getItem('1984')).toHaveAttribute('aria-selected', 'true')
       expect(getItem('Pride and Prejudice')).toHaveAttribute('aria-selected', 'true')

diff --git a/packages/components/dropdown/src/DropdownValue.tsx b/packages/components/dropdown/src/DropdownValue.tsx
@@ -13,12 +13,12 @@ export const Value = ({ children, className, placeholder }: ValueProps) => {
   const { selectedItem, multiple, selectedItems } = useDropdownContext()
 
   const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)
-
   const text = multiple ? selectedItems[0]?.text : selectedItem?.text
+  const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''
 
   return (
     <span className={cx('text-neutral', className)}>
-      {!hasSelectedItems ? placeholder : children || text}
+      {!hasSelectedItems ? placeholder : children || text + suffix}
     </span>
   )
 }