Skip to content

feat(atomic-facet): add noFacetSearch attribute to control facet-search #6790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
louis-bompart wants to merge 1 commit into
base: main
Choose a base branch
from
+41 −1
Open

feat(atomic-facet): add noFacetSearch attribute to control facet-search #6790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/atomic/src/components/search/atomic-facet/atomic-facet.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ describe('atomic-facet', () => {
isCollapsed?: boolean;
displayValuesAs?: 'checkbox' | 'link' | 'box';
withSearch?: boolean;
noFacetSearch?: boolean;
enableExclusion?: boolean;
facetId?: string;
headingLevel?: number;
Expand All @@ -82,6 +83,7 @@ describe('atomic-facet', () => {
filter-facet-count=${ifDefined(props.filterFacetCount)}
is-collapsed=${ifDefined(props.isCollapsed)}
with-search=${ifDefined(props.withSearch)}
no-facet-search=${ifDefined(props.noFacetSearch)}
enable-exclusion=${ifDefined(props.enableExclusion)}
></atomic-facet>`,
selector: 'atomic-facet',
Expand Down Expand Up @@ -205,6 +207,30 @@ describe('atomic-facet', () => {
await expect.element(locators.searchInput).not.toBeInTheDocument();
});

it('should not render search parts when noFacetSearch is true', async () => {
const {locators} = await setupElement({noFacetSearch: true});
await expect.element(locators.searchWrapper).not.toBeInTheDocument();
await expect.element(locators.searchInput).not.toBeInTheDocument();
});

it('should not render search parts when noFacetSearch is true even if withSearch is true', async () => {
const {locators} = await setupElement({
noFacetSearch: true,
withSearch: true,
});
await expect.element(locators.searchWrapper).not.toBeInTheDocument();
await expect.element(locators.searchInput).not.toBeInTheDocument();
});

it('should render search parts when both noFacetSearch and withSearch are false', async () => {
const {locators} = await setupElement({
noFacetSearch: false,
withSearch: false,
});
await expect.element(locators.searchWrapper).not.toBeInTheDocument();
await expect.element(locators.searchInput).not.toBeInTheDocument();
});
Comment on lines +225 to +232
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test description states "should render search parts when both noFacetSearch and withSearch are false", but the test assertions verify that search parts are NOT rendered. According to the component logic at line 530 (withSearch: !this.noFacetSearch && this.withSearch), when both are false, the expression evaluates to true && false = false, meaning search parts should NOT be rendered.

The assertions are correct, but the test description is misleading. Change the test description to "should not render search parts when both noFacetSearch and withSearch are false" to accurately reflect what is being tested.

Copilot uses AI. Check for mistakes.

it('should render value exclude button when exclusion is enabled', async () => {
const {locators} = await setupElement({
enableExclusion: true,
Expand Down
16 changes: 15 additions & 1 deletion packages/atomic/src/components/search/atomic-facet/atomic-facet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ export class AtomicFacet
/**
* Whether this facet should contain a search box.
*
* @deprecated Use the `no-facet-search` attribute to disable the facet search feature.
*/
@property({
type: Boolean,
Expand All @@ -199,6 +200,19 @@ export class AtomicFacet
reflect: true,
})
public withSearch = true;

/**
* Whether to disable the facet search feature.
* By default, facet search is enabled.
* Setting this attribute disables the facet search feature.
* Replaces the `with-search` attribute.
*/
@property({
type: Boolean,
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The noFacetSearch property is missing the converter: booleanConverter option. All boolean properties in this component and across the Atomic codebase use the booleanConverter to ensure consistent handling of boolean attributes according to HTML standards. The converter also warns users about incorrect usage of boolean attributes (like using value="false"), which will not be supported in Atomic v4.

Add converter: booleanConverter to the @property decorator configuration, similar to other boolean properties like withSearch, isCollapsed, filterFacetCount, and enableExclusion in this same file.

Suggested change
type: Boolean,
type: Boolean,
converter: booleanConverter,

Copilot uses AI. Check for mistakes.
attribute: 'no-facet-search',
Copy link

Copilot AI Dec 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The noFacetSearch property is missing the reflect: true option. All similar boolean properties in this component (withSearch, isCollapsed, filterFacetCount, enableExclusion) include reflect: true to synchronize the property value with the HTML attribute. This ensures that when the property changes programmatically, the DOM attribute is updated accordingly, which is important for observability and debugging.

Add reflect: true to the @property decorator configuration for consistency with other boolean properties in this component.

Suggested change
attribute: 'no-facet-search',
attribute: 'no-facet-search',
reflect: true,

Copilot uses AI. Check for mistakes.
})
public noFacetSearch = false;

/**
* The sort criterion to apply to the returned facet values.
* Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'.
Expand Down Expand Up @@ -513,7 +527,7 @@ export class AtomicFacet
{
canShowMoreValues: this.facetState.canShowMoreValues,
numberOfDisplayedValues: this.facetState.values.length,
withSearch: this.withSearch,
withSearch: !this.noFacetSearch && this.withSearch,
},
() =>
renderFacetSearchInput({
Expand Down
Loading