Design intuitive mode control for Circulars index

[jracusin]

Description

Index/Group view buttons are not intuitive to users, and currently labels change.

Acceptance criteria

• screenshots, drawings or other mockups 2-4 different control styles
• control should have a label that does not use our internal jargon
• control should have an icon for narrow/mobile view
• control should have a stable footprint on page
• label text should be stable to be 508 compliant

Notes

• toggle buttons are implemented as segmented buttons elsewhere on site
• USWDS component toggle-on/toggle-off
• MUI icon set

[Courey]

Option 1

This is a prototype with even spacing, the same height for buttons, different text for the search box based on view, and a toggle with icons for the index/group view.

Option 2

Ignore the spacing and everything else here, this one just shows an alternate icon for group view

Option 3

Checkbox style beneath search bar

Option 4

Select box

Please feel free to mix and match from different options.
I also need to know what words we want on the different options

[lpsinger]

1. This is my favorite. 👍
2. That icon looks like it does sorting, not grouping. 👎
3. Checkboxes should not be mutually exclusive. These are behaving more like radio buttons. 👎
4. Takes up too much space. 👎

[Courey]

Here is option 1 with the circulars/events wording:

[Courey]

Also, here is all the buttons the same size as the search bar. Do you like them all small or normal sized?

[lpsinger]

Small. Same size as the search bar.

Note that there are a few style inconsistencies here: the button corners are rounded differently.

[Courey]

[lpsinger]

The height looks good, but there is an artifact at the border between the two segments of the button. If you open a PR I can take a look. I remember having seen those artifacts before. I don't remember how to fix it, but seeing the code may jog my memory.