diff --git a/packages/atomic/src/components/search/atomic-facet/atomic-facet.spec.ts b/packages/atomic/src/components/search/atomic-facet/atomic-facet.spec.ts index b955f3c3569..60c163111f3 100644 --- a/packages/atomic/src/components/search/atomic-facet/atomic-facet.spec.ts +++ b/packages/atomic/src/components/search/atomic-facet/atomic-facet.spec.ts @@ -59,6 +59,7 @@ describe('atomic-facet', () => { isCollapsed?: boolean; displayValuesAs?: 'checkbox' | 'link' | 'box'; withSearch?: boolean; + noFacetSearch?: boolean; enableExclusion?: boolean; facetId?: string; headingLevel?: number; @@ -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)} >`, selector: 'atomic-facet', @@ -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(); + }); + it('should render value exclude button when exclusion is enabled', async () => { const {locators} = await setupElement({ enableExclusion: true, diff --git a/packages/atomic/src/components/search/atomic-facet/atomic-facet.ts b/packages/atomic/src/components/search/atomic-facet/atomic-facet.ts index cb2a48b197f..b4d145a774c 100644 --- a/packages/atomic/src/components/search/atomic-facet/atomic-facet.ts +++ b/packages/atomic/src/components/search/atomic-facet/atomic-facet.ts @@ -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, @@ -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, + attribute: 'no-facet-search', + }) + public noFacetSearch = false; + /** * The sort criterion to apply to the returned facet values. * Possible values are 'score', 'alphanumeric', 'alphanumericDescending', 'occurrences', alphanumericNatural', 'alphanumericNaturalDescending' and 'automatic'. @@ -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({