search

seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.48k stars 182 forks source link

Improve Frame Filtering UX #352

Closed felixhabib closed 4 months ago

felixhabib commented 4 months ago

resolves https://github.com/seek-oss/playroom/issues/256

  1. Allow users to select all checkboxes in a section.
  2. Rename "Show all" button to "Clear", relating it to the checkboxes rather than the displayed frames.
  3. Add cypress test for "Clear" button.

Clarifying the behaviour of saved user preferences:

  1. When all checkboxes in a frame section are selected, this will save those themes/widths as the user's explicit preference. Future introduced themes/widths will not automatically be selected while this preference is saved.
  2. Selecting the "Clear" button will:
    • Unselect the checkboxes in the section, which will display all matching frames,
    • Clear the user preference for this section, and
    • On reload or creating a fresh playroom tab, the default options will be selected (if defaults are configured).

Allowing all checkboxes to be selected avoids some awkward interactions.

Example - I want to show all widths except 768

Before

https://github.com/seek-oss/playroom/assets/33821218/54af081d-071c-43ca-b285-6fc2aacbf1e1

After

https://github.com/seek-oss/playroom/assets/33821218/cf74b431-9fd7-401d-9074-9dd63b4b5d42

changeset-bot[bot] commented 4 months ago

🦋 Changeset detected

Latest commit: 6a56bc3ab4ab1d5a455f9ff945910e1401c2bdfc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | -------- | ----- | | playroom | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR