fix(combo-box): support v10 input controls

[emyarod]

Closes #2240

This PR adds styles for the v10 combo box selection button and refactors multiselect selection button styles

Related:

https://github.com/IBM/carbon-components-react/issues/2109

https://github.com/IBM/carbon-components-react/issues/2113

Changelog

New

• add styles for v10 combo box input controls

Changed

• nest warning icons within list box field

Testing / Reviewing

• Ensure listbox is not visually broken
• Ensure multiselect is not visually broken
• Ensure combobox is not visually broken

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit a5ffad8

https://deploy-preview-2241--the-carbon-components.netlify.com

[aagonzales]

Looks like the invalid states are a little off.

• Top one either missing the clear x or should be closet to the chevron
• Bottom one is missing the icons

[emyarod]

both points should be addressed now @aagonzales

[emyarod]

feedback from @carmacleod on the React component: https://github.com/IBM/carbon-components-react/issues/1763#issuecomment-476252889

Some notes:

• delete tabindex="0" from both of the outer divs, i.e. only the input should take focus. So all keyboard events need to be on the input.
• the role="button" needs to go on the div containing the triangle icon. Do not add a tabindex. Mouse events can go on this, but not keyboard events.
• the div.bx--list-box__field should have role="combobox" and aria-haspopup="listbox", aria-expanded="true/false", and aria-owns="unique-id-of-div.bx--list-box__menu" (note: if using component-user-provided label for id, make sure id does not have spaces).
• the div.bx--form-item.bx--combo-box.bx--list-box should not have any role or any ARIA related markup - it's just a generic container.
• the input could have role="textbox" (which is the default for an input type="text", so technically, you can leave the role off), and it needs aria-controls="unique-id-of-div.bx--list-box__menu" (same id as for the aria-owns on the combobox div), aria-autocomplete="list" (because typing in the input filters the list), and aria-label="Choose an item" (delete aria-label="ListBox input field"). The input also needs aria-activedescendant, but your code there seems good. :)
• the div.bx--list-box__menu needs role="listbox" and the same aria-label as the input (i.e. aria-label="Choose an item").

[laurenmrice]

Changes:

• There needs to be a 1px border bottom rule with ui-04 color when the dropdown is closed.

• There needs to be a 1px border bottom rule with ui-03 color when the dropdown is open.

• There needs to be an error field border around the examples that are showing an error state. 2px support-01 color.

• The close icon needs to be icon-02 color.

• If you full render, all of the open dropdowns merge into eachother because you can't close them, i don't know if that was intended.

[laurenmrice]

• The chevron icon needs to be icon-01. Only the close icon needs to be icon-02.

• When the dropdown is open the bottom border rule of the label section needs to be ui-03. It is currently ui-04. When the dropdown is closed then the rule should be ui-04.

[emyarod]

it looks like the text input styles were overriding the listbox styles there, should be fixed @laurenmrice

[laurenmrice]

Looks good 👍

[asudoh]

LGTM basically, just one thing - Thanks alot @emyarod!

[asudoh]

Instead of adding a markup for spacer, could we do a devenv-specific style?

[emyarod]

yes I've made that change now

[asudoh]

Thanks @emyarod for the update!

[carbon-bot]

Hi there! 👋 If you're wondering why this issue was moved, we're currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: [email protected]. Thanks!