FilterableMultiSelect: v11 audit

[abbeyhrt]

Audit

A designer and developer will pair on this audit, some tasks may be discipline focused. Follow the checklist below for the features and items to review. If there are no issues with the item then check the item as complete. If any problems or bugs come up when auditing add a comment to this issue with the problem and how to correct it (if you know how). Bugs do not need to be fixed while auditing.

Document the process you go through while auditing when checking off the list.

The idea here is that anyone could look at this issue and understand the process you went through to audit the component from the comments below.

Resources

• Design spec in Sketch
• V11 Website
• SCSS
• Storybook

Checklist

Visual (in React code)
Design and dev check

• Component is using the correct design tokens (color and type), see design spec and scss code.
• Component is rendering correctly across themes and layers, see design spec and storybook.
  • White theme
  • Gray 10 theme
  • Gray 90 theme
  • Gray 100 theme
• Component is rendering correctly across browsers (check themes across browsers as well), see storybook.
  • Firefox
  • Safari
  • Chrome
• Component sizes are rendering and named correctly (if applicable)

Website (v11)
Design checks

• Style tab has correct design tokens listed
• Style and usage tabs are using the correct size props names (if applicable)
• Usage tab is up-to-date for with any v11 behavioral changes (if any)
• Live Demo has applied v11 changes
  • Themes are rendering correctly
  • Size props are named correctly
  • No light props included

Design Kits (Sketch only)
Design checks

• Correct design tokens (type and color) are used
• Component using the correct size prop names
• Any additional v11 behaviors have been added

Storybook
Dev checks

• Confirm that prop table is populating
• Take note of missing examples/stories (if any)

React package
Dev checks

• Go to https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/react/examples/codesandbox and confirm that you can use the component as expected from @carbon/react

Accessibility
Dev checks

• Confirm that there are no violations in Accessibility checker
• Confirm that component works as expected with VoiceOver
• Confirm that the component looks and works as expected when zoomed 200%
• Confirm that the component is keyboard accessible. Ensure that everything you do with a mouse can be done with a keyboard and document in the comments how to interact with the component through a keyboard (not applicable to component with no interactive elements like Grid)

Migration docs
Design and dev check

• Any breaking changes to this component are present in the v11 migration guide.
  • Design
  • Develop

[laurenmrice]

scss and storybook

*Note: There is a known color token issue for a few interactive states in the dark themes when you get deeper into the layering model for filterable multiselect which we are tackling.

• No visual bugs with Filterable MultiSelect variant specifically. There were some bugs with Dropdown, and I assume the Filterable MultiSelect will inherit any changes made to the listbox.
• Double check to make sure sizes are reflected correctly in scss. (Large 48px, Medium 40px, Small 32px). Also could not find them in the react story book.

[laurenmrice]

Design kit

• Update layer styles to use $layer logic for menu in all themes. v11: update sketch libraries with new tokens carbon-design-kit#429

[laurenmrice]

Website

Live demo

*Updating the Live demo with our current code should fix most of these bugs.

• Filterable MultiSelect variant option gets rid of the side panel. The side panel should still be there with the same options as the rest of the dropdown variants get.
• Light modifier needs to be taken off the live demo.
• Needs to display size props.
• Needs to display states for invalid, warning and disabled states.
• The Filterable MultiSelect dropdown container should not shrink or expand in width size when new options are selected if it has a shorter amount of text than the previous selected option.

[tay1orjones]

Closing since we've got the follow-on items identified in #10889, carbon-design-system/carbon-design-kit#429