Improve Frame Filtering UX

.changeset/itchy-bugs-brush.md

@@ -0,0 +1,8 @@
+---
+'playroom': minor
+---
+
+Improve frame filtering UX.
+
+- Allow users to select all checkboxes in a frame filter section, rather than automatically unselecting all checkboxes when all are selected.
+- Rename the "Show all" button to "Clear" to reinforce the filtering pattern.

cypress/e2e/toolbar.cy.ts

@@ -4,6 +4,7 @@ import {
   typeCode,
   gotoPreview,
   loadPlayroom,
+  getResetButton,
   selectWidthPreference,
 } from '../support/utils';
 
@@ -19,6 +20,9 @@ describe('Toolbar', () => {
     assertFramesMatch(frames);
     selectWidthPreference(frames[widthIndexToSelect]);
     assertFramesMatch([frames[widthIndexToSelect]]);
+
+    getResetButton().click();
+    assertFramesMatch(frames);
   });
 
   it('preview', () => {

cypress/support/utils.ts

@@ -33,6 +33,8 @@ export const selectWidthPreference = (width: number) => {
   cy.findByRole('checkbox', { name: `${width}` }).click();
 };
 
+export const getResetButton = () => cy.findByRole('button', { name: 'Clear' });
+
 export const togglePreviewPanel = () =>
   cy.findByRole('button', { name: 'Preview playroom' }).click();
 

src/Playroom/FramesPanel/FramesPanel.tsx

@@ -47,22 +47,20 @@ interface FrameHeadingProps {
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
   <div className={styles.title}>
     <Heading level="3">{children}</Heading>
-    {showReset && <ResetButton onClick={onReset}>Show all</ResetButton>}
+    {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
   </div>
 );
 
 interface FrameOptionProps<Option> {
   option: Option;
   selected: boolean;
   visible: Option[];
-  available: Option[];
   onChange: (options?: Option[]) => void;
 }
 function FrameOption<Option>({
   option,
   selected,
   visible,
-  available,
   onChange,
 }: FrameOptionProps<Option>) {
   return (
@@ -71,13 +69,10 @@ function FrameOption<Option>({
         type="checkbox"
         checked={selected}
         className={styles.checkbox}
-        onChange={(ev) => {
-          if (ev.target.checked) {
+        onChange={(event) => {
+          if (event.target.checked) {
             const newVisiblePreference = [...visible, option];
-            const isOriginalList =
-              JSON.stringify(newVisiblePreference.sort()) ===
-              JSON.stringify([...available].sort());
-            onChange(isOriginalList ? undefined : newVisiblePreference);
+            onChange(newVisiblePreference);
           } else {
             onChange(visible.filter((p) => p !== option));
           }
@@ -146,7 +141,6 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
                 option={option}
                 selected={hasFilteredWidths && visibleWidths.includes(option)}
                 visible={visibleWidths}
-                available={availableWidths}
                 onChange={(newWidths) => {
                   if (newWidths) {
                     dispatch({
@@ -175,7 +169,6 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
                   option={option}
                   selected={hasFilteredThemes && visibleThemes.includes(option)}
                   visible={visibleThemes}
-                  available={availableThemes}
                   onChange={(newThemes) => {
                     if (newThemes) {
                       dispatch({