search

grommet / hpe-design-system

HPE Design System
45 stars 23 forks source link

Clear selection and filtering #3925

Open oliverHPE opened 1 month ago

oliverHPE commented 1 month ago

In Office Hours the following issue with filtering options was brought up:

Link to problem

https://www.figma.com/design/JHrPqLlTHr14ICl1r4UPES/Fix%3A-Clear-selection?node-id=0-1&t=gO5lLWq11pYEOFF8-1

Current problem

When filtering, not all single-selection components, like a radio-button, have a method of being cleared or deselected. When you have made a choice - selected a radio-button - there is no way to deselect that radio button. The result is that if you want to edit the filter, and remove that selection, you have to clear all filters and start the filtering process from the begining.

Expected behavior or solution

A method to clear, or deselect a particular choice would solve this. On the provided Figma file, there are several proposed ideas to solve this problem.

Screenshot or recording of problem

No response

Steps to reproduce

No response

halocline commented 4 weeks ago

Currently this would be achieved by the "Clear filters" button in the Toolbar or I would close the layer without "applying filters."

Radio button groups by definition enforce one value to be selected. Perhaps they are not the right input for the "last X days" use case and Select would be the appropriate control?

ToggleGroup allows for unselection of all options if desired. Is this an issue with how the Figma component is constructed?

Leaving comments in Figma file. I'm not sure the "clear" behavior treatments are needed. Instead, I think there exist more appropriate input choices for the use cases.

SeamusLeonardHPE commented 1 day ago

@luketa8 if you can connect with @oliverHPE on this document he created and review the comments in figma that Matt links to above.

To me it appears that the radiobutton group was the incorrect filtering tool to use, due to its default behaviour (once selected, one option always required). We may need to update our guidance to be more specific about the behaviour, and when it suitable to use radio vs checkbox. If it appears guidance pushed a product designer into a bad pattern lets locate and address this.

As this is a customer success oriented ticket, communication and alignment with Tales as the primary stakeholder is a requirement.