[CDX-285] Allow default collapsing of individual filter groups by Alexey-Pavlov · Pull Request #212 · Constructor-io/constructorio-ui-plp

Alexey-Pavlov · 2026-02-26T14:50:14Z

Pull Request Description

This pull request adds support and testing for controlling the collapsed/expanded state of filter groups in the PLP (Product Listing Page) Filters component. It introduces new configuration options, ensures consistent behavior across different usage scenarios (including per-facet, global, and metadata-driven collapse), and adds tests.

Pull Request Checklist

Before you submit a pull request, please make sure you have to following:

I have added or updated TypeScript types for my changes, ensuring they are compatible with the existing codebase.
I have added JSDoc comments to my TypeScript definitions for improved documentation.
I have added tests that prove that my feature works.
I have added any necessary documentation (if appropriate).
I have made sure my PR is up-to-date with the main branch.

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no API changes)
Documentation content changes
TypeScript type definitions update
Other... Please describe:

Mudaafi

I like the implementation! I left some comments, mostly around tests and docs, but lmk wyt

Mudaafi · 2026-02-26T22:16:20Z

 }

+export function getIsCollapsedFacetField(facet: PlpFacet): boolean | undefined {
+  return facet?.data?.cio_render_collapsed ? true : undefined;


@Alexey-Pavlov Curious if you have any thoughts on what Copilot is suggesting here

Mudaafi · 2026-02-26T22:19:31Z

+
+The Filters component supports various configuration options that can be passed via component props, or via the `filterConfigs` prop at the `CioPlp`-level.
+
+### Collapse All Filter Groups


Can we tag this with a version number like when we implemented filtering in Groups?

I put a v1.10.0, as the next version 🤔

ae5f553

Mudaafi · 2026-02-26T22:19:40Z

+}
+```
+
+### Collapse Specific Filter Groups


Similar to above: https://github.com/Constructor-io/constructorio-ui-plp/blob/main/src/stories/components/Groups/Code%20Examples.mdx?plain=1#L18

Mudaafi · 2026-02-26T22:28:11Z

+/**
+ * When filterConfigs.renderCollapsed is set and groupsConfigs.isCollapsed is not explicitly set,
+ * apply the global collapse setting to the Groups filter as well.
+ */
+function resolveGroupsConfigs(
+  filterConfigs?: Omit<UseFilterProps, 'facets'>,
+  groupsConfigs?: Omit<GroupsProps, 'groups'>,
+): Omit<GroupsProps, 'groups'> | undefined {
+  if (filterConfigs?.renderCollapsed !== undefined && groupsConfigs?.isCollapsed === undefined) {
+    return { ...groupsConfigs, isCollapsed: filterConfigs.renderCollapsed };
+  }
+  return groupsConfigs;
+}
+


Interesting, I don't know if we want these to be merged actually now that I think about it. What if a customer wanted to always expand the group hierarchy but always collapse the filters? 🤔 wdyt?

Yes, that absolutely makes sense
I made a change, so Filters and Groups are now independent
ae5f553

Mudaafi · 2026-02-26T22:31:02Z

+    const isFilterGroupExpanded = (filterGroup) => {
+      const arrow = filterGroup.querySelector('.cio-arrow');
+      return arrow?.classList.contains('cio-arrow-down');
+    };


Interesting way to check. I'd have gone with the height, but this works too

Mudaafi · 2026-02-26T22:32:15Z

+  it('Should render all filter groups expanded when renderCollapsed is false', () => {
+    const html = renderToString(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <Filters {...filterProps} renderCollapsed={false} />
+      </CioPlp>,
+    );
+
+    expect(html).toContain('cio-arrow-down');
+    expect(html).not.toContain('cio-arrow-up');
+  });


let's add a test for the default behavior to be expanded to ensure we have backwards compatibility

Mudaafi · 2026-02-26T22:35:20Z

+    );
+
+    await waitFor(() => {
+      // All filter group arrows should indicate collapsed state (cio-arrow-up)


let's abstract it into a function instead of relying on comments to tell us what we're checking here

…e-allow-default-collapsing-of-individual-filter # Conflicts: # spec/components/Filters/Filters.test.jsx # src/components/Filters/FilterGroup.tsx # src/components/Filters/Filters.tsx # src/hooks/useFilter.ts # src/stories/components/Filters/Filters.stories.tsx # src/types.ts # src/utils/itemFieldGetters.ts

…d components

…l-filter-support-to-filters' into cdx-285-plp-ui-feature-allow-default-collapsing-of-individual-filter # Conflicts: # src/components/CioPlpGrid/CioPlpGrid.tsx # src/components/Filters/FilterGroup.tsx # src/components/Filters/Filters.tsx # src/hooks/useCioPlp.ts # src/hooks/useFilter.ts # src/stories/components/CioPlp/Code Examples.mdx # src/stories/components/CioPlp/Props.mdx # src/stories/components/Filters/Filters.stories.tsx # src/stories/hooks/UseFilter/UseFilterReturn.md

…er groups

…onfigurations

Alexey-Pavlov · 2026-03-19T19:36:32Z

Hi @Mudaafi! Thanks so much for your review! I recently made some updates—would you mind taking a look? I borrowed perFacetConfig from this @esezen PR, integrated it, and updated the target branch.

…ters' into cdx-285-plp-ui-feature-allow-default-collapsing-of-individual-filter

esezen

This is looking great. I left some comments

…Collapsed instead of renderCollapsed

Copilot

Pull request overview

Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-30T13:14:29Z

+      if (
+        typeof getIsCollapsedFacetField === 'function' &&
+        getIsCollapsedFacetField(facet) !== undefined
+      ) {
+        return !!getIsCollapsedFacetField(facet);


getIsCollapsedFacetField(facet) is invoked twice. Store the result in a local variable and use that for both the undefined check and the boolean coercion to avoid duplicate work and to prevent inconsistent behavior if a custom getter has side effects.

Suggested change

if (

typeof getIsCollapsedFacetField === 'function' &&

getIsCollapsedFacetField(facet) !== undefined

) {

return !!getIsCollapsedFacetField(facet);

if (typeof getIsCollapsedFacetField === 'function') {

const collapsedFromFacetField = getIsCollapsedFacetField(facet);

if (collapsedFromFacetField !== undefined) {

return !!collapsedFromFacetField;

}

Copilot · 2026-03-30T13:14:31Z

 | isHiddenFilterOptionFn | `(option: PlpFacetOption) => boolean`             | Function that returns true if an option should be hidden              |
 | sliderStep             | `number`                                          | Global slider step for all range facets                               |
 | facetSliderSteps       | `Record<string, number>`                          | Per-facet slider step configuration                                   |
+| defaultCollapsed        | `boolean`              | When `true`, all filter groups render collapsed by default. When `false`, all render expanded (overrides metadata). Per-facet overrides via `perFacetConfigs` take precedence. |


This description conflicts with the implemented priority order in getIsCollapsed: facet metadata (cio_render_collapsed) takes precedence over defaultCollapsed (both true and false). Update the docs to reflect that defaultCollapsed is the lowest priority default and does not override facet metadata, unless the code is intended to change.

Suggested change

| defaultCollapsed | `boolean` | When `true`, all filter groups render collapsed by default. When `false`, all render expanded (overrides metadata). Per-facet overrides via `perFacetConfigs` take precedence. |

| defaultCollapsed | `boolean` | Global default collapse behavior for filter groups when no facet metadata (`cio_render_collapsed`) or `perFacetConfigs` override is provided. When `true`, unmatched filter groups render collapsed by default; when `false`, they render expanded by default. Facet metadata and per-facet overrides via `perFacetConfigs` take precedence. |

@Alexey-Pavlov I think Copilot is right here, right 🤔 ?

Yess, I think I need to check his comments more often, especially on big PRs like this
58c1e0c

…custom collapse behavior for facets

esezen

LGTM!

…ters' into cdx-285-plp-ui-feature-allow-default-collapsing-of-individual-filter

constructor-claude-bedrock

Code Review

This PR adds support for controlling the default collapsed/expanded state of filter groups via three interfaces: per-facet config (perFacetConfigs[name].isCollapsed), facet metadata (cio_render_collapsed), and a global defaultCollapsed prop — with good test coverage and documentation. The implementation is generally clean, but there are a few notable issues to address.

Inline comments: 6 discussions added

Overall Assessment: ⚠️ Needs Work

constructor-claude-bedrock · 2026-04-07T14:35:04Z

    });
  });
+
+  const expectAllFilterGroupsCollapsed = (container) => {


Suggestion: The helper functions expectAllFilterGroupsCollapsed and expectAllFilterGroupsExpanded are defined inside the describe block but outside any it block. They rely on the class convention that collapsed state uses cio-arrow-up and expanded uses cio-arrow-down. This is a somewhat fragile coupling to CSS class names that encode both visual direction and semantic state in the same token. If the styling convention ever changes, these helpers will silently produce wrong results.

Consider adding a comment above each helper explaining this class-name convention, or look up the aria-expanded attribute if it's set on filter headers (which would be a more robust semantic selector for this type of assertion).

Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-07T14:37:06Z

  const checkboxPosition = perFacetConfigs?.[facet.name]?.checkboxPosition;
-  const [isCollapsed, setIsCollapsed] = useState(false);

  const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);


toggleIsCollapsed uses setIsCollapsed(!isCollapsed), which can apply a stale value under React concurrent rendering/batched updates. Prefer the functional updater form so toggling always uses the latest state.

Suggested change

const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);

const toggleIsCollapsed = () => setIsCollapsed((prevIsCollapsed) => !prevIsCollapsed);

[CDX-285] Add support for default collapsing of individual filter groups

3e9ecb1

Alexey-Pavlov requested a review from a team February 26, 2026 14:50

Alexey-Pavlov requested a review from Mudaafi as a code owner February 26, 2026 14:50

Copilot AI review requested due to automatic review settings February 26, 2026 14:50

Alexey-Pavlov requested a review from HHHindawy as a code owner February 26, 2026 14:50

This comment has been minimized.

Sign in to view

Copilot started reviewing on behalf of Alexey-Pavlov February 26, 2026 14:52 View session

[CDX-285] Add sample facets with default collapsing metadata

6ca53db

This comment has been minimized.

Sign in to view

This comment was marked as outdated.

Sign in to view

Mudaafi reviewed Feb 26, 2026

View reviewed changes

This comment has been minimized.

Sign in to view

[CDX-285] refactor & simplify filter group collapse logic in tests an…

ae5f553

…d components

This comment has been minimized.

Sign in to view

Alexey-Pavlov requested a review from Mudaafi March 11, 2026 13:26

[CDX-285] test: wrap FilterGroup component in CioPlp for API key context

08a5200

This comment has been minimized.

Sign in to view

This comment was marked as outdated.

Sign in to view

[CDX-285] feat: implement per-facet configuration for collapsing filt…

f9e81cf

…er groups

Alexey-Pavlov changed the base branch from main to cdx-336-plp-ui-feature-add-visual-filter-support-to-filters March 19, 2026 18:17

Alexey-Pavlov added 3 commits March 19, 2026 19:19

[CDX-285] fix: add missing comma in Filters.tsx for proper syntax

8af5e40

[CDX-285] feat: refactor color facet logic and update visual filter c…

c33335f

…onfigurations

[CDX-285] feat: enhance filter collapsing logic and add color constants

5eaf6b7

Merge branch 'cdx-336-plp-ui-feature-add-visual-filter-support-to-fil…

286eb09

…ters' into cdx-285-plp-ui-feature-allow-default-collapsing-of-individual-filter

This comment was marked as outdated.

Sign in to view

esezen reviewed Mar 24, 2026

View reviewed changes

Comment thread src/hooks/useFilter.ts Outdated

Comment thread src/hooks/useFilter.ts Outdated

Comment thread src/types.ts Outdated

esezen requested a review from Copilot March 24, 2026 12:12

This comment was marked as outdated.

Sign in to view

[CDX-285] feat: update filter collapsing configuration to use default…

a8ac6b9

…Collapsed instead of renderCollapsed

This comment was marked as outdated.

Sign in to view

Alexey-Pavlov requested a review from esezen March 30, 2026 11:33

esezen requested a review from Copilot March 30, 2026 13:11

Copilot AI reviewed Mar 30, 2026

View reviewed changes

[CDX-285] feat: enhance defaultCollapsed documentation and implement …

58c1e0c

…custom collapse behavior for facets

This comment was marked as outdated.

Sign in to view

esezen approved these changes Mar 30, 2026

View reviewed changes

Merge branch 'cdx-336-plp-ui-feature-add-visual-filter-support-to-fil…

6ff3631

…ters' into cdx-285-plp-ui-feature-allow-default-collapsing-of-individual-filter

esezen requested a review from Copilot April 7, 2026 14:32

Copilot started reviewing on behalf of esezen April 7, 2026 14:33 View session

constructor-claude-bedrock Bot reviewed Apr 7, 2026

View reviewed changes

esezen merged commit 19ff36c into cdx-336-plp-ui-feature-add-visual-filter-support-to-filters Apr 7, 2026
13 of 14 checks passed

esezen deleted the cdx-285-plp-ui-feature-allow-default-collapsing-of-individual-filter branch April 7, 2026 14:36

Copilot AI reviewed Apr 7, 2026

View reviewed changes


		The Filters component supports various configuration options that can be passed via component props, or via the `filterConfigs` prop at the `CioPlp`-level.

		### Collapse All Filter Groups

-      if (
-        typeof getIsCollapsedFacetField === 'function' &&
-        getIsCollapsedFacetField(facet) !== undefined
-      ) {
-        return !!getIsCollapsedFacetField(facet);
+      if (typeof getIsCollapsedFacetField === 'function') {
+        const collapsedFromFacetField = getIsCollapsedFacetField(facet);
+        if (collapsedFromFacetField !== undefined) {
+          return !!collapsedFromFacetField;
+        }

	\| defaultCollapsed \| `boolean` \| When `true`, all filter groups render collapsed by default. When `false`, all render expanded (overrides metadata). Per-facet overrides via `perFacetConfigs` take precedence. \|
	\| defaultCollapsed \| `boolean` \| Global default collapse behavior for filter groups when no facet metadata (`cio_render_collapsed`) or `perFacetConfigs` override is provided. When `true`, unmatched filter groups render collapsed by default; when `false`, they render expanded by default. Facet metadata and per-facet overrides via `perFacetConfigs` take precedence. \|

	const toggleIsCollapsed = () => setIsCollapsed(!isCollapsed);
	const toggleIsCollapsed = () => setIsCollapsed((prevIsCollapsed) => !prevIsCollapsed);

Conversation

Alexey-Pavlov commented Feb 26, 2026

Pull Request Description

Pull Request Checklist

PR Type

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment was marked as outdated.

Uh oh!

Mudaafi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment was marked as outdated.

Alexey-Pavlov commented Mar 19, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

esezen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

esezen left a comment

Choose a reason for hiding this comment

Uh oh!

constructor-claude-bedrock Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!