[CDX-418] Feature: Add componentOverrides to FilterGroup by quiteeasy · Pull Request #226 · Constructor-io/constructorio-ui-plp

quiteeasy · 2026-03-24T18:53:56Z

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 my fix is effective or 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:

Copilot

Pull request overview

Adds a componentOverrides / filterGroupOverrides API to enable consumer customization of FilterGroup subcomponents (and the whole group) via render-props or static JSX, with accompanying Storybook examples and tests.

Changes:

Introduces new override types (FilterGroupOverrides, FilterGroupRenderProps, etc.) in src/types.ts.
Wires filterGroupOverrides through Filters and CioPlpGrid into FilterGroup as componentOverrides.
Adds Storybook stories and Jest tests validating override behavior (root/header/optionsList/rangeSlider).

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/types.ts	Adds new public types for FilterGroup overrides and render-props payload.
src/components/Filters/Filters.tsx	Adds `filterGroupOverrides` prop and passes to each `FilterGroup`.
src/components/Filters/FilterGroup.tsx	Wraps default subtrees with `RenderPropsWrapper` to support slot overrides.
src/components/CioPlpGrid/CioPlpGrid.tsx	Extends `filterConfigs` to include `filterGroupOverrides` and forwards configs to `Filters`.
src/index.ts	Exports `FilterGroupProps` (types are also re-exported via `export * from './types'`).
src/stories/components/Filters/Filters.stories.tsx	Adds examples demonstrating each override slot.
src/stories/components/CioPlpGrid/CioPlpGrid.stories.tsx	Adds an example demonstrating overrides via `filterConfigs`.
spec/components/Filters/Filters.test.jsx	Adds integration tests for `Filters.filterGroupOverrides`.
spec/components/Filters/FilterGroup.test.jsx	Adds unit tests for `FilterGroup.componentOverrides`.

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

esezen

Looking great, thanks for working on this!

Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.

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

Copilot · 2026-04-02T13:55:16Z

    "typescript": "^4.9.4",
    "vite": "^6.3.5",
    "vite-plugin-css-injected-by-js": "^3.1.0",
-    "webpack": "^5.94.0"
+    "webpack": "^5.94.0",
+    "@constructor-io/constructorio-ui-components": "^1.3.2"
  },


@constructor-io/constructorio-ui-components is added under devDependencies, but the library’s published .d.ts now references types from this package (e.g., ComponentOverrideProps, IncludeComponentOverrides). Consumers won’t have this installed when they depend on this package, which will break TypeScript type resolution. Move this to peerDependencies (and optionally also keep it in devDependencies for local development), or remove the external type reference by defining equivalent types locally.

Copilot · 2026-04-02T13:55:16Z

+
+/**
+ * Render props passed to every FilterGroup override function.
+ * Provides the full state needed to rebuild any part of a filter group.


The JSDoc for FilterGroupRenderProps says it provides the "full state needed to rebuild any part of a filter group", but the props omit several inputs that affect the default rendering/behavior (e.g., initialNumOptions, sliderStep / facetSliderSteps, and isHiddenFilterOptionFn). Either include those in FilterGroupRenderProps (so overrides can faithfully reproduce default behavior) or soften the wording to avoid overstating what’s provided.

Suggested change

* Provides the full state needed to rebuild any part of a filter group.

* Provides facet data and interaction handlers commonly needed to customize a filter group.

Copilot · 2026-04-02T13:55:17Z

+  const componentOverrides = componentOverridesProp ?? context?.componentOverrides?.filterGroup;
  const [isCollapsed, setIsCollapsed] = useState(false);

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


toggleIsCollapsed uses setIsCollapsed(!isCollapsed), which can apply a stale value under React’s concurrent rendering / batched updates. Use the functional updater form (setIsCollapsed(prev => !prev)) to guarantee correct toggling.

Suggested change

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

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

esezen

Thanks for the changes!

esezen · 2026-04-02T13:54:22Z

  initialBrowseResponse?: GetBrowseResultsResponse;
  staticRequestConfigs?: Partial<RequestConfigs>;
  useShopifyDefaults?: boolean;
+  componentOverrides?: Partial<PlpComponentOverrides>;


Why Partial here? Also can we please document this in the stories for props

I will remove, probably all keys there will be not required anyway

constructor-claude-bedrock

Code Review

This PR adds a well-structured componentOverrides system to FilterGroup, allowing consumers to replace any sub-component slot (root, header, optionsList, rangeSlider) with custom render functions or static nodes, backed by comprehensive tests and Storybook stories.

Inline comments: 7 discussions added

Overall Assessment: ⚠️ Needs Work

quiteeasy added 3 commits March 25, 2026 01:43

[CDX-418] Feature: Add componentOverrides to FilterGroup

9929b99

prettier

d29f477

lint

edee04e

quiteeasy requested review from HHHindawy and Mudaafi as code owners March 24, 2026 18:53

Copilot AI review requested due to automatic review settings March 24, 2026 18:53

Copilot started reviewing on behalf of quiteeasy March 24, 2026 18:54 View session

This comment was marked as outdated.

Sign in to view

Copilot AI reviewed Mar 24, 2026

View reviewed changes

Comment thread src/types.ts Outdated

Comment thread src/types.ts

Comment thread src/types.ts Outdated

Comment thread src/components/Filters/FilterGroup.tsx

quiteeasy added 2 commits March 25, 2026 19:34

claude review

1dc929e

prettier

6be224e

This comment was marked as outdated.

Sign in to view

esezen reviewed Mar 26, 2026

View reviewed changes

Comment thread src/types.ts Outdated

Comment thread src/components/CioPlpGrid/CioPlpGrid.tsx Outdated

Comment thread spec/components/Filters/FilterGroup.test.jsx Outdated

quiteeasy added 2 commits March 26, 2026 22:09

review updates

a17fa72

prettier

e4d3ae0

This comment was marked as outdated.

Sign in to view

esezen requested changes Mar 27, 2026

View reviewed changes

Comment thread src/components/Filters/FilterGroup.tsx Outdated

Comment thread src/components/CioPlpGrid/CioPlpGrid.tsx Outdated

Comment thread src/stories/components/CioPlpGrid/CioPlpGrid.stories.tsx Outdated

quiteeasy added 2 commits April 1, 2026 19:31

updates after review

b776017

prettier

816e823

This comment was marked as outdated.

Sign in to view

quiteeasy requested a review from esezen April 1, 2026 15:16

esezen requested a review from Copilot April 2, 2026 13:50

Copilot started reviewing on behalf of esezen April 2, 2026 13:51 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

esezen requested changes Apr 2, 2026

View reviewed changes

docs, updates after review

e14c679

This comment was marked as outdated.

Sign in to view

Update license check

d8e2339

esezen requested a review from a team as a code owner April 9, 2026 17:54

Pin lightningcss

89d9f55

Sync lock

8e588d6

constructor-claude-bedrock Bot reviewed Apr 9, 2026

View reviewed changes

esezen approved these changes Apr 9, 2026

View reviewed changes

esezen merged commit 7d1aa91 into main Apr 9, 2026
12 checks passed

esezen deleted the cdx-418-plp-ui-feature-add-componentoverrides-to-filtergroup branch April 9, 2026 18:23

	* Provides the full state needed to rebuild any part of a filter group.
	* Provides facet data and interaction handlers commonly needed to customize a filter group.

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

Conversation

quiteeasy commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Checklist

PR Type

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

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

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 Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

esezen left a comment

Choose a reason for hiding this comment

Uh oh!

esezen Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

quiteeasy Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

constructor-claude-bedrock Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

quiteeasy commented Mar 24, 2026 •

edited

Loading