Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ListBox): update listbox components to match spec #7518

Merged
merged 15 commits into from
Feb 1, 2021

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Jan 7, 2021

Ref #7325

This PR updates the Dropdown, Combobox, and MultiSelect components to match the component spec based on the recent component audit notes. The SVG changes will be related to the current ongoing issue with inner fills in icon SVGs (related #3216)

Changelog

New

  • add inline dropdown to storybook example

Changed

  • update menu option hover colors in light variant
  • multiselect selection count tag matches Tag component spec

Removed

  • input hover color on combobox

Testing / Reviewing

Confirm the 3 listbox components matches the expected appearance and behavior. Ensure that the new multiselect selection tags are accessible

@netlify
Copy link

netlify bot commented Jan 7, 2021

Deploy preview for carbon-elements ready!

Built with commit 3a057c9

https://deploy-preview-7518--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Jan 7, 2021

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 3a057c9

https://deploy-preview-7518--carbon-components-react.netlify.app

Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dropdown

  • The inline variant needs to have 24px space between the label and the input
    inline dropdown spec

Combobox

  • When the light prop is on, there is a hover color change when you hover on the top field. There should not be a hover color change.
    giph hover combo

  • The close icon should be icon-01

  • There needs to be a warning state added in for combobox


Multi-select

Filterable:

  • Needs to have 16px space before the text in the input field.
    multi-select filterable spec

  • There is a bug when a tag appears in the input field. The tag gets cut off.
    Jan-13-2021 17-32-11

  • There is a hover color change when you hover on the top field. There should not be a hover color change.

  • The tag hover is not the right size. Here are the specs for the tag. (This is also wrong for the regular multi-select)
    multi-select tag spec

@emyarod
Copy link
Member Author

emyarod commented Jan 20, 2021

@laurenmrice for the last point about tag styles, these are lifted directly from the Filter Tag, so do those need to be adjusted as well?

@laurenmrice
Copy link
Member

@emyarod yes!

@emyarod
Copy link
Member Author

emyarod commented Jan 28, 2021

multiselect tags should now be inheriting the changes from #7664 and I will add the combobox warning state separately as it is not currently in the library (#7685)

Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! 🙌🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants