Filter by severity in active state

[dixsie]

Current: When clicking filter by severity buttons, if all three (high, medium, and low) are selected, the last one clicked remains highlighted (or focused, blue border) and the 'All' button shows active.

Resolution: When high, medium, and low are all clicked, the only active button should be 'All' and the other buttons should be inactive (not highlighted with blue border) upon the 3rd button being clicked.

[derick-montague]

The focus state indicates that the Low button is where the focus is. If a user were to click Al and then tab through the buttons, they should show that focus state. We don't want to change the focus state. There is a way to turn off focus states for mouse users, but it is not supported in all modern browsers.

This specific pattern is expected and we don't want to change the focus state indicator.

[jandraa]

In the scenario described by Disxie, where 'High' is clicked, then 'Medium', then 'Low', should the focus state shift from 'Low' to 'All' when 'Low' is clicked?

[derick-montague]

It should stay on the button that the user clicked or activated (mouse user hits enter or space). To change the focus state, we would need to programmatically change the active element, which would isn't a great experience for a keyboard user.

The pattern we are using is not what I would expect as a user. I would expect that If all options are selected and the user just wanted to filter by Medium and Low they can't just unselect High. The would need to select both Medium and Low. That makes sense if they just select All since none of the times are showing active.

If they were to filter one at a time, in the use case that Dixsie described, each item becomes active and then when they select the final remaining type, it visually deactivates all the items and visually shows All as the only active element. That is an unexpected interaction in my opinion.

However, it's not difficult to understand what is happening since the filter list is only 4 items. I don't think it's a great experience and I also found it confusing the first time I encountered it.

My recommendation would be the pattern carbon is using for multi-select filtering or something similar. I realize it's a design change, but it's clear what is selected and the ability to select and unselect individual items.

https://www.carbondesignsystem.com/patterns/filtering

[jandraa]

I completely agree. The current pattern can be understood but is not what is expected. I think following the pattern Carbon is using could also free up more screen space and allows us to move the actual content of the page (the events logged) up closer to the top of the page. And this can be applied to other pages, like Sensors, as well.

Let's try to figure out if and when we can include some design rework on this.

[derick-montague]

We are starting to introduce a new pattern as part of the event logs page redesign. This issue was just added to the Design Review pipeline in story #89. We will want to get feedback from the community as this pertains to System Logs, Event Logs, and Sensors pages.