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 better reflect the filtering pattern.

cypress/e2e/toolbar.cy.js

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

cypress/support/utils.js

@@ -33,6 +33,8 @@ export const selectWidthPreferenceByIndex = (index) =>
     .eq(index)
     .then((el) => el.get(0).click());
 
+export const getResetButton = () => cy.get('[data-testid="resetButton"]');
+
 export const togglePreviewPanel = () =>
   cy.get('[data-testid="togglePreview"]').then((el) => el.get(0).click());
 

src/Playroom/FramesPanel/FramesPanel.tsx

@@ -34,7 +34,7 @@ interface ResetButtonProps {
 }
 
 const ResetButton = ({ onClick, children }: ResetButtonProps) => (
-  <button className={styles.reset} onClick={onClick}>
+  <button className={styles.reset} onClick={onClick} data-testid="resetButton">
     {children}
   </button>
 );
@@ -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));
           }
@@ -147,7 +142,6 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
                 option={option}
                 selected={hasFilteredWidths && visibleWidths.includes(option)}
                 visible={visibleWidths}
-                available={availableWidths}
                 onChange={(newWidths) => {
                   if (newWidths) {
                     dispatch({
@@ -177,7 +171,6 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
                   option={option}
                   selected={hasFilteredThemes && visibleThemes.includes(option)}
                   visible={visibleThemes}
-                  available={availableThemes}
                   onChange={(newThemes) => {
                     if (newThemes) {
                       dispatch({