USWDS - Select: Include standard "multiple" stylings. Resolves #4423

[mahoneycm]

Preview

Select →

Description

Resolves #4423

According to the HTML 5 standard, a select element whose multiple attribute is present is "expected to render as an inline-block box whose height is the height necessary to contain as many rows for items as given by the element's display size, or four rows if the [size] attribute is absent." This standard behavior has the benefit of making it obvious that multiple selections can be made and users have come to expect and depend on this visual clue. All of the major browsers implement this behavior by default. The USWDS component system suppresses this behavior, ignoring the size attribute as well as the standard's instructions for the height of the box in the absence of that attribute.

This PR

• Adds expected styling for select when the multiple attribute is present
• Sets default styling as described by HTML 5 standard
• Adds storybook controls to enable the multiple attribute and set size attribute
• If size = 0 it will act as if the size attribute is absent and do the standard default of four rows.

Additional information

Standard select:

Multiple Enabled:

New Storybook controls:

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[amyleadem]

Looks like this is working well!
A couple of thoughts:

• We should have a separate story in Storybook for when multiple is true

• The padding on the select box can cause text to get cut off if the size is less than the item count. It might be better to add the padding to the options when multiple is true.
  

• Additionally, we have this note in our docs for select:
  "When to consider something else: Multi-select. If you need to allow users to choose more than one option at once. Users often don’t understand how to choose multiple items from select elements. Use checkboxes instead."

  • Are we now allowing multiple select as a recommended practice? If this is now an acceptable pattern, we should remove this line, provide use-case recommendations, and should add some notes about both multiple and size in our documentation.

Let me know if you have questions!

[mahoneycm]

Thanks @amyleadem!

• Having a second story could be a good idea! I feel like it also depends on if we want this advertised as an option or not, because of the checklist note you mentioned
• I'm open to suggestions on how to handle the padding. I initially left it because when it is missing, it becomse a little less clear that you can scroll to see more options (i.e. if size is not set and it is default to 4 rows, but there are more than four options):

(of course the scroll bar is a good indicator)

• I also asked Dan about the guidance re: checkboxes but the issue is that the multiple select is a native functionality that the HTML 5 standards require. Dan said the following: "So yes, I think that in most instances, checkboxes are preferable to multi-select. Multi-select is bad UI, I’d say, like 99.99% of the time. That said, native multi-select should work with USWDS and should probably work as the user suggests."

[mejiaj]

The padding on the select box can cause text to get cut off if the size is less than the item count. It might be better to add the padding to the options when multiple is true.

I think the padding is coming from the default input styles. It seems expected to leave it in by default for this.

I agree with Dan's comments. We're not recommending this as a new pattern, we're just making sure USWDS styles don't break the expected behavior. We also don't have research to suggest otherwise, so we can leave guidance as-is. Good consideration though!

I agree with @amyleadem, a separate story would be better.

[mejiaj]

Thanks Charlie, I've added some feedback.

[mejiaj]

Can we move this to a directory usa-select/test/test-patterns?

Similar to what we did with this component test template
https://github.com/uswds/uswds/blob/1db0e68d7e5cf21ae52f2d8a29d5963c7aa1b681/packages/usa-combo-box/src/test/test-patterns/test-usa-combo-box.twig

[mejiaj]

Let's create a test section in Storybook for this, see combobox example
https://github.com/uswds/uswds/blob/cm-select-multiple/packages/usa-combo-box/src/usa-combo-box.stories.js

[mejiaj]

Tiny changes, otherwise LGTM!

[amyleadem]

Looks good to me!