Add clear propery to Select Figma component and Guidance

[luketa8]

What does this request relate to?

Figma, Guidance site

Describe the feature you'd like to request.

The clear property exists in Grommet and in code.

This is not reflected in the Select Figma component and the Select guidance page.

The clear property is useful for single selection in filtering scenarios, where a blank filter is a valid option.

• [ ] Select Figma component is updated with the clear property
• [ ] Select design system page is updated with guidance on the clear property

Links to Figma files with use cases or ideations from you.

Exploration branch (Outdated, archive when component is updated) Current Branch

How urgent is this request?

None

Is there anything else you would like to mention?

No response

[KennyAtHPE]

Branch file

@SeamusLeonardHPE @luketa8 currently updating the component and ran into some issues. No blockers but feel free to review the current WIP if available. I left notes and questions throughout.

List of changes so far:

• Removed dark mode
• Added clear selection variant w/ placement options for drop down (Some issues)
• Applied absolute positioning to drop down (Some issues) Review file for issues.

[SeamusLeonardHPE]

@KennyAtHPE @luketa8

added an experiment that included multi option choice & fixes the absolute position issues:

https://www.figma.com/design/bqkEbdj8hZUBO9eQAmXnhV/%234068---Add-'Clear-Selection'-to-Select?node-id=35367-3831&t=S7Jjn6EjHRg1RFsf-4

[KennyAtHPE]

Current Branch Log of changes

Remaining questions + deliverables

• [x] Include bottom placement for clear selection?
  • No backup rationale for why we need this
  • Why is text center-aligned?
  • Recommendation: Omit for now and have center positioning as the only option. Does this need an enhancement in Grommet?
• [x] Clear Selection styling
  • Currently not accessible
  • Currently implemented as a button with custom padding, do we want to style more like a normal button?
  • Should it contain all the same states as the other list items (minus "Selected" and "Selected hover")?
• [ ] Within Figma, should we implement the Clear Selection button as a sub-component so it can be used elsewhere in the future?
  • Dependent on how we choose to style the button. If it remains a custom button style then yes it should be made as a reusable sub-component.
• [ ] Max amount of options shown in drop?
  • The recommendation was to max it at 6 options since the drop size would be 'Medium' when clear selection and search are not present.
  • Include a variant to show the drop would scroll if there are more options than the max shown.
• [ ] Draft guidance
  • Example with clear selection
  • Recommendations on max amount of options

[KennyAtHPE]

Future tickets:

• Add create option flow within Select component

[SeamusLeonardHPE]

@KennyAtHPE when you get a chance to visit this again can you focus on

in order of importance 1- Clear button styling (in all states) - Lets get exampled visible on the canvas to discuss our options. 2- Discuss with dev & designers about use of subcomponent or customised "button" 3- Max amount - lets add guidance in the component metadata for now - We can discuss how to engineer "drop" with overflow subsequently for our input refactor work" 4- Draft Guidance

[KennyAtHPE]

Reach out to Antonio Laccarino once the select component has been updated.

[SeamusLeonardHPE]

@KennyAtHPE can you summarize the MVP design deliverables that you presented last week, and we can discuss getting an issue on the dev board to follow up.

My recollection was that we were not going to enhance the functionality at the moment 1- Style the clear button to meet contrast accessibility 2- Draft guidance

[KennyAtHPE]

@SeamusLeonardHPE Here are the current explorations

MUST CHANGE

• Enabled state color to avoid clashing with hover state for options
• Color contrast to meet accessibility

Acceptance Criteria

• Visually consistent
• Clearing selection is easy to identify & select

Conclusions based on feedback received: Styling

• I suggest we style the clear button like the other list items.
  • Quickest and least fiction change.
  • This would promote consistency across our designs. Plus, the create option button is currently already styled the same way
  • Similar to the create option button, I suggest that the content is written as "Clear 'Selected Item'"

Here are some additional explorations on styling

Behavior

• Because of the open and close behavior of select - the drop always shows the top list items when reopening - I suggest that the clear selection button is always placed at the top before the first list item and after the search. Removing the option of a bottom placement would provide more consistency across select drops in general.
  • Same logic applies as to why we don't need to make the clear selection button sticky on scroll. The user will always see it as the first option when opening up a select after their initial selection.
• The clear selection button should always be present when searching even if the selected item is not a search result.
• Although not applicable to HPE use cases, when multiple selections are available on a select (not selectmultiple), the clear selection button should clear ALL selected items. The content here would instead say "Clear selections"
• If needed, the clear selection button can be used within both long and short lists.
• Selections should also be deselectable by clicking on the selected list item,Storybook example.

Misc.

• Comments were brought up to explore ways to make the clear selection button within the select and selectmultiple components similar. Selectmultiple clear selection flow.

Next steps

• Draft guidance
• Connect w/ Dev to create PR
• Apply changes and merge branch.
  • Decide on whether or not clear selection button should be a subcomponent or not