Add clear propery to Select Figma component

[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

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

• 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?
• 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

[SeamusLeonardHPE]

@KennyAtHPE thanks for updating this issue -

My main concern is that the suggestion for updating the button to use the pattern to use "Clear 'Selected Item'"
This is an enhancement to the current functionality that could be blocked by dev capacity. Questions/Comment about making the pattern the same as the select multiple are also out of scope, as the MVP purpose here is to

1- Close a gap between existing grommet functionality that is not represented in figma
2- Suggest styles for the coded button to make it accessible

Can you refine the design examples you created and limit the button label to "Clear selection". Lets get consensus on that on which of the 3 styled options we should proceed with. This can be created as a sub component & remain on a branch.

We can then create subsequent issues to
1- Request devs use the figma branch to style the grommet component
2- Create a updated draft guidance page for the select component to introduce the clear select prop
3- Create backlog issues that point to potential feature enhancements as suggested in your research.

[oliverHPE]

Hey @KennyAtHPE and @SeamusLeonardHPE , I think you’re spot on here by on focusing on the two key issues:

1. Make the 'Clear selection' functionality of the Select available in Figma as a variant
2. Decide on the styling

1 is being done by default, 2 comes down to choosing the best options. I think you’re close, if not already there, with those options above.

This option is good because the separator makes the 'Clear selection' button more distinguishable (and the X adds to that) from the rest of the list items, and it’s close to what exists already.

However, another option we might consider is to make the styling match the SelectMultiple 'Clear all' button. So something like:

Let's get this issue sorted and then, as Seamus says, create follow-up tickets to address subsequent work in other sprints.

[KennyAtHPE]

@SeamusLeonardHPE @oliverHPE Thank you for the direction and suggestions. I've collated my thoughts within this frame. Within these examples, the select component has been fully updated and is using a subcomponent/part for the clear selection button. Please review and leave comments.

Do keep in mind the acceptance criteria that I've defined when going through this. The key here isn't to make the clear selection button the most prominent option but to ensure that it is easy to identify, understand, and visually consistent with our other components + assets.

Lastly, confirming that the content within the clear selection button CAN BE adaptive to whatever selection the user has made. @SeamusLeonardHPE This should not require any additional enhancements or dev work.

[oliverHPE]

Thanks @KennyAtHPE re this option:

Not sure it actually does satisfy the acceptance criteria. It looks identical to other list items, so it is no easy to identify. I agree the idea is not to make it the most prominent, but it should be distinct. One so that people can actually notice it, and two it does something different than the list items which are selection choices, this is an action, and representing this visually is useful to help users understand this.

[KennyAtHPE]

@oliverHPE I'd argue that this option is easy to identify because of the quotations + mimicked content. It seems more apparent when compared to just "Clear selection"

As for your last point, it technically is the same as the other list items because no option is also an option. However, I do agree that it needs to be distinct somehow which should be satisfied with the adaptive content plus the fact that it will always be positioned at the top of the dropdown.

Considering your feedback, what are your thoughts on adding an underline? Originally, I thought that it was overkill but it does help drive the point that it is "different" than the other options.

[oliverHPE]

@KennyAtHPE Yes I feel giving it something extra is necessary. I know what you mean, I also don't love the underline, but I think it might be a better option at this point. Furthermore, I don't think we should take these other options, that match our default button styling, off the cards. Having the styling of the 'Clear' button match the same as an unselected item doesn't feel right. Matching the styling seems to say this thing here 'list item' is the same as this thing 'clear button', which is not the case. Making the styling identical could result in users mentally grouping them together which means it has more chance of going unnoticed, whereas making them more distinct will help the user notice them. It also matches the styling of our SelectMultiple 'Clear all' button. What do you think?

[KennyAtHPE]

9/25 Update:

Shared explorations out today and the top 2 most voted designs from the team were

Taylor has made a prototype of these options. Put out a poll within the staff channel to finalize a decision between the two different options.

[KennyAtHPE]

@SeamusLeonardHPE @luketa8 When you get a chance, please review the select component. Keep in mind this branch includes:

• A new subcomponent for the Clear Selection button
• Bug fixes (listed all within the branch)
• Two changes to the Search component that are related to a bug fix that was applied to Select as well
  • Search and Select use the same list item subcomponent within our drops. The bug fixes are related to the background color issue Antonio L. asked (Listed in a comment above).

[KennyAtHPE]

I am adding @oliverHPE as a reviewer as well. Would you mind double-checking the color styles for the updated list option states?

[KennyAtHPE]

9/30 update:

The most voted option was option 2. I have updated the branch to reflect that. Awaiting final review from @SeamusLeonardHPE, otherwise ready to merge and publish whenever.

Draft of the clear selection example as well as a draft of the updated Select guidance has been completed and tracked in #4211. Will work with dev tomorrow to create tickets to update styling + draft PR of the Select page.

[KennyAtHPE]

10/1 update:

• Resolved comments and merged the branch
• Follow-up ticket documented on the dev board
  • Discussed with Taylor and it'd be best to publish the Figma component once the style changes have been updated within the HPE theme and when the clear selection example has been added to the site.
  • There is a deliverable within the ticket above to publish the Figma component.
  • This branch has also fixed several bugs within the Select component documented here.
  • This branch also is applying the new list item selected states, which is another reason why we aren't publishing just yet because it hasn't been updated within the HPE theme

Closing out ticket.