Toggle Filter

[LHinson]

Add the Toggle Filter to the requirements and filter documentation so that it can be included moving forward in PF4. https://drive.google.com/open?id=15w2gpUb7__4oINMtnU7hwSqtlD6cwDIvkDeHM1TMfiQ

[beanh66]

@maryshak1996 @tlwu2013 I know we had a few PF4 variations of the toggle filter design for OpenShift. It would be great to post those designs here for Russ to utilize! Do either of you want to collaborate with Russ on this contribution?

Is it worth putting together a quick usability test with the research team to validate the design or is there a more pressing timeline for this @LHinson? We had a few different versions of the design we were considering testing at DevConf.

[LHinson]

@beanh66 we have some time. This component is currently slated for a July release. You can check out the updated roadmap here: https://docs.google.com/spreadsheets/d/17aEfvG1DZ0dZmpwacYaCzKv4sog0LuatXCwNizJ7HhE/edit#gid=205680820

[maryshak1996]

@rblackbu here's a folder that has (1) a doc isolating the filter toggle design iterations that I worked on and (2) my sketch file for some OpenShift pages that use a filter toggle in PF4 :) feel free to use any of those assets! https://drive.google.com/drive/folders/1XDRUsIl-8zGPzR1fNGphpVdZLfMPOmkG?usp=sharing

[tlwu2013]

Hey @beanh66 and @rblackbu , here's another iterations (visually closer to PF4 "Chips") for the filter toggle: https://docs.google.com/document/d/1oS4cwJh_P8LyvoxxtXmtW639CWQ7TeuKBiqVU1iOK4M/edit#heading=h.k0xwxltmf5bm

Hope we could include this variation into the testing too, thanks!

[beanh66]

@LHinson We'll probably need to find a way to test remotely since DevConf sounds too late. I'll find out more from the research team if we have any availability and in the meantime can create a Jira story in our backlog to start working on a usability test script if that makes sense. @rblackbu Are you in favor of getting a few design options tested/vetted once ready?

[rblackbu]

Working with Matt I have put some concepts together in Marvel for your input. Please review when you can. Thanks! https://marvelapp.com/biheebe @beanh66 @maryshak1996

[maryshak1996]

@rblackbu Just to understand better the scope of what you put together, I've got a question. Are you proposing the above for visuals too, just the interaction and components? There are a few things that I don't think align with PF4 as far as the visuals go. I do think that what you have works well from a conceptual standpoint

[rblackbu]

Sorry for the delay in response @maryshak1996 I'm not sure why I do not get a notification when a new comment mentions my name? The mockup is for conceptual consideration at this point only.

[mcarrano]

Met today with @beanh66 @maryshak1996 @tlwu2013 @rblackbu . Some next steps:

• Russ and Mary will work on a unified visual approach(s) that support single and multiple select variants. Considerations include visually indicating selected states; uses of badges and icons.

• Colleen will work on a test plan draft for validating possible approaches.

Some considerations/questions are: What is the default condition? What do Select all and/or Clear all mean in the context of the toggle filter and how do I ensure that there is always a selection?

[maryshak1996]

After working with @rblackbu and reviewing with @kybaker, this is the direction we are thinking https://marvelapp.com/7418145 https://sketch.cloud/s/v1Dm1

[mcarrano]

This is looking great @maryshak1996 @rblackbu . Just a couple of questions I have...

• Do we really need the category overflow? I ask because my understanding of this is that it's a fixed set of buttons that sits within a toolbar. What is your expectation as the width of the container shrinks down? That elements are hidden one at a time? It might make more sense to either just left the buttons wrap or to handle more similar to the way we handle Tab bar. Think about this in the context of a Toolbar.

• I'm questioning why we need the All category in the Multi-select case. Isn't Clear all filters equivalent to showing all? What would it mean to select All + another category?

[maryshak1996]

@mcarrano I have made some significant updates based on testing and further conversation internally (mostly just visual changes). Please take a look here and feel free to leave comments! https://docs.google.com/document/d/12ez3u7AICp3hMuRk0OZCcaZMVUpEWKtv9-a7BGuBlOs/edit?usp=sharing

[mcarrano]

This is looking good @maryshak1996 I think it addresses some of the earlier questions that we had. I did leave a few comments/questions in the Marvel prototype. @rblackbu can you also take a look?

[maryshak1996]

@mcarrano I just updated my marvel link and sketch to address your concern about having the '+' icon with single-select (which makes a lot of sense). I came up with this: for single-select only, when icons aren't being used, use empty and filed circles (this mimics the idea of a radio button, which is single select, and is consistent with having a check mark for multi-select)

[mcarrano]

I think this is a great solution @maryshak1996 !

[maryshak1996]

Just a quick update here : I'm proposing a slight visual change to that that current grey box bakcground treatment that would improve accessability and also makes the page much less heavy when paired with other elements on that page (ie. toolbar, etc.). Im suggesting making that box a 1px border in color pf-black-200 (or #EDEDED)

[maryshak1996]

Also, here's my thinking for disabled state: use disabled link color (#72767B) for text and outline

[maryshak1996]

After some great feedback around the visual weight of this component, I've made some revisions (sketch cloud and marvel links have been updated), but here's the jist of the updates:

• no more background bounding box
• selected toggles have dark grey border, default text color, and blue icon
• unselected toggles have lighter grey border, default text color, and medium grey icon
• because bounding box is gone, I made actions left-aligned and make that text the same size as the toggle text

[maryshak1996]

new spec to come soon :)

[mcarrano]

@catrobson We made these changes, in part, as a response to your feedback at last week's PF weekly. Hope this approach addresses some of your concerns with the visuals.

[catrobson]

@mcarrano @maryshak1996 Thank you, this looks like lighter treatment and I think will fit better onto the screen with other components.

[maryshak1996]

@mcarrano here are all of the final materials: Sketch cloud: https://sketch.cloud/s/v1Dm1 Marvel: https://marvelapp.com/7418145 Spec (also available in marvel or sketch): spec.pdf

[mcarrano]

Thanks, @maryshak1996 . I will move this to the HTML/CSS backlog as this should now be ready for development. @rachael-phillips FYI

[stale[bot]]

This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs.

[mcoker]

@mcarrano wdyt about this one?

[mcarrano]

@mceledonia @maryshak1996 @beanh66 @gdoyle1 @mmenestr @rblackbu Does anyone still think we need this as a unique component? We are currently introducing a Toggle group that is pretty similar and I would prefer to build off of that. https://github.com/patternfly/patternfly-react/issues/4655

[mmenestr]

@mcarrano I don't have much background on this, but it seems to me like this is more of a filter view than a toggle group? This is almost like another type of filter - like a single faceted group of filters

[gdoyle1]

@mcarrano agreed that we could build off the toggle group to create this! I think most of the use cases are covered in that component but we probably have to work on the icons/numbers

[mcarrano]

Thanks for the feedback @mmenestr and @gdoyle1 . Based on this, I think that we should hold on this for now. But I don't want to loose the design work here in case we need to come back to this. Therefore I am going to transfer this issue back to design and add it to our backlog for future reference.