DropList tweaks

src/components/DropList/DropList.ListItem.jsx

@@ -5,11 +5,13 @@ import {
   getItemContentKeyName,
   isItemADivider,
   isItemAGroupLabel,
+  objectHasKey,
 } from './DropList.utils'
 import {
   DividerUI,
   GroupLabelUI,
   ListItemUI,
+  ListItemTextUI,
   SelectedBadge,
 } from './DropList.css'
 
@@ -53,7 +55,8 @@ const ListItem = forwardRef(
         isDisabled && 'is-disabled',
         highlightedIndex === index && 'is-highlighted',
         withMultipleSelection && 'with-multiple-selection',
-        isString(extraClassNames) && extraClassNames
+        isString(extraClassNames) && extraClassNames,
+        objectHasKey(item, 'className') && item.className
       )
     }
 
@@ -84,7 +87,9 @@ const ListItem = forwardRef(
         withMultipleSelection={withMultipleSelection}
         {...itemProps}
       >
-        <span>{isObject(item) ? item[contentKey] : item}</span>
+        <ListItemTextUI>
+          {isObject(item) ? item[contentKey] : item}
+        </ListItemTextUI>
         {withMultipleSelection ? (
           <SelectedBadge isSelected={isSelected} />
         ) : null}

src/components/DropList/DropList.css.js

@@ -25,7 +25,7 @@ export const DropListWrapperUI = styled('div')`
 export const MenuListUI = styled('ul')`
   width: 100%;
   max-height: 200px;
-  overflow-y: scroll;
+  overflow-y: auto;
   margin: 0;
   padding: 5px 0 0 0;
   list-style: none;
@@ -68,7 +68,7 @@ export const ListItemUI = styled('li')`
   align-items: center;
   height: 36px;
   margin: 0 5px 2px;
-  padding: 0 15px;
+  padding: 0 10px 0 15px;
   border-radius: 3px;
   line-height: 36px;
   color: ${getColor('charcoal.600')};
@@ -122,6 +122,13 @@ export const ListItemUI = styled('li')`
   }
 `
 
+export const ListItemTextUI = styled('span')`
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
 export const EmptyListUI = styled('div')`
   height: 36px;
   margin: 0 5px;

src/components/DropList/DropList.jsx

@@ -253,14 +253,18 @@ function DropListManager({
 }
 
 const itemShape = PropTypes.shape({
-  label: requiredItemPropsCheck,
-  value: requiredItemPropsCheck,
+  className: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isDisabled: PropTypes.bool,
+  label: requiredItemPropsCheck,
+  value: requiredItemPropsCheck,
+  type: PropTypes.string,
 })
+
 const dividerShape = PropTypes.shape({
   type: PropTypes.oneOf(['divider', 'Divider']).isRequired,
 })
+
 const groupShape = PropTypes.shape({
   label: requiredItemPropsCheck,
   value: requiredItemPropsCheck,

src/components/DropList/DropList.stories.mdx

@@ -227,6 +227,18 @@ const itemShape = PropTypes.shape({
 })
 ```
 
+- Laser Targeting: if you need to target a specific List Item for styling (or else), you can add the property `className` to each item in the array, the value will be added to the existing css class names on the `DropListItem`:
+
+```js
+const items = [
+  { label: 'a', className: 'paintItBlue' },
+  { label: 'ab' },
+  { label: 'abc' },
+  { type: 'divider' },
+  { label: 'b', className: 'paintItBlue' },
+]
+```
+
 - Dividers: Add a `type = divider` property to an object to create a divider
 
 ```js

src/components/DropList/DropList.test.js

@@ -123,6 +123,31 @@ describe('Render', () => {
     })
   })
 
+  test('should add a classname to the list item if present in the item', async () => {
+    const { getByRole, queryByText } = render(
+      <DropList
+        items={someItems.map((item, index) => {
+          if (index === 1) {
+            return { className: 'paintItBlue', ...item }
+          }
+          return item
+        })}
+        toggler={<SimpleButton text="Button Toggler" />}
+      />
+    )
+    const toggler = getByRole('button')
+
+    user.click(toggler)
+
+    await waitFor(() => {
+      expect(
+        queryByText(someItems[1].label).parentElement.classList.contains(
+          'paintItBlue'
+        )
+      ).toBeTruthy()
+    })
+  })
+
   test('should render a menu list with dividers', async () => {
     const { container, getByRole, queryByRole } = render(
       <DropList

src/utilities/specs/dropdown.specs.js

@@ -2,7 +2,7 @@ import { createSpec, faker } from '@helpscout/helix'
 
 export const ItemSpec = createSpec({
   id: faker.datatype.uuid(),
-  label: faker.name.firstName(),
+  label: faker.company.companyName(),
   value: faker.name.firstName(),
   // onClick: () => (value, props) => console.log('Clicked!', value),
 })