[Audit] Dropdown

[joshblack]

Dropdown

• [ ] Should dropdown be using listbox styles? Should we pull out listbox into a set of tools to apply styles instead of shared styles for each?

• [x] Should use body-short-01 for placeholder text and value

• [x] What should focus be for error state? cc @laurenmrice Currently it's a red border

• [ ] All dropdown versions should be pulling the 16 icon. I think this is the old icon.

Inline Dropdown

• [x] Should use body-short-01 for text

• [x] Bounding box should have only 8px of padding on left hand side

Expected:

Actual:

• [ ] Width of control seems off from spec

Expected:

Actual:

Filterable Dropdown (Combobox), MultiSelects, etc.

These all use list-box and will most likely share updates

• [x] Should use body-short-01 for text
• [x] Disabled -> hover seems to still have hover color
• [ ] Need to verify in React repo for functionality

[laurenmrice]

@joshblack For dropdown focus for error state: The error state should have a 2px red border (support-01, #DA1E28). Are you saying that it should also get a focus state applied on top of the error state? If so, the focus should be 2px blue border (focus, #0062FF)

[emyarod]

depends on https://github.com/IBM/carbon-components/pull/1987

I believe some of the points have been addressed already in https://github.com/IBM/carbon-components/pull/1793 https://github.com/IBM/carbon-components/pull/1896 https://github.com/IBM/carbon-components/pull/1898

• Bounding box should have only 8px of padding on left hand side

so are we undoing the requested feedback from this audit

just to clarify: are the points for combobox and multiselect the entire audit feedback for those components? or should those be in a separate ticket?

[asudoh]

@joshblack @laurenmrice Any thoughts on what @emyarod mentioned above? Thanks!

[laurenmrice]

• 1896, #1989, #1793 are closed issues and are good.

• Just reviewed with changes for open issue #1987.
• For the #1749 audit issue, those listed changes for dropdown are all still valid for things that need to be fixed if they are not all ready implemented. Can I have the current link of dropdown to check if those fixes were made?
• For Combo-box and Multi-select I would need to see the latest version of those to determine if that is all that needs to be changed.

[emyarod]

@laurenmrice you can view the dropdown example for this ticket here https://deploy-preview-1994--the-carbon-components.netlify.com/ (the combobox and multiselect components can be viewed there too, no changes have been made to those yet)

[laurenmrice]

Changes: Things that still need to be changed that are mentioned in #1749:

• [x] For normal dropdowns: Update padding to 16px on left/right (icon should be 16px away from right), vertically centered text.
• [x] The Option text in the drawer by default should be text-02 color (#565656). The Option text turns text-01 (#171717) when it gets a hover or selection background.
• [x] When open, label should remain color token field-01 (#f3f3f3.) It should not get a select color. This also happens for the error state version.
• [x] When selecting a new option, the background color should go to color token selected-ui (#dcdcdc). Right now it looks too dark.
• [x] The focus outline of the first and last option in the dropdown when it is open needs to be flush against the sides of the menu. Right now it is hanging.

• [x] Variation of dropdown with a label and helper text is missing in netlify link ?
• [x] Disabled dropdown should not get a border bottom.

[emyarod]

Update padding to 16px on left/right (icon should be 16px away from right), vertically centered text

so this point contradicts what we have written in the current ticket (#1955) unless I am misunderstanding "Bounding box should have only 8px of padding on left hand side". If what we have from #1749 stands then I don't need to make any changes here since #1749's changes are already merged in

but I can make the remaining changes, thanks for the updates! The netlify link only shows my progress up so far but I needed clarification on several points, and I'm also blocked by https://github.com/IBM/carbon-components/pull/1987 which is why the inline dropdowns still look off at the moment

[laurenmrice]

The 8px padding for bounding box only applies for the inline dropdown. I was referring to the normal dropdowns when i mentioned 16px

[carbon-bot]

:tada: This issue has been resolved in version 9.84.6 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: