Skip to content

feat(atomic): migrate atomic-category-facet from Stencil to Lit #6690

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

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

feat(atomic): migrate atomic-category-facet from Stencil to Lit #6690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f0a1e32
Initial plan
Copilot Dec 1, 2025
06fb6dd
feat(atomic): migrate atomic-category-facet from Stencil to Lit
Copilot Dec 1, 2025
79895d4
test(atomic): add unit tests and fixtures for atomic-category-facet
Copilot Dec 1, 2025
f78a686
test(atomic): fix unit tests for atomic-category-facet
Copilot Dec 1, 2025
b939705
Merge branch 'main' into copilot/migrate-atomic-category-facet-again
fbeaudoincoveo Dec 4, 2025
543a7cf
Fix build
fbeaudoincoveo Dec 4, 2025
d80500d
refactor(atomic): address PR review feedback for atomic-category-facet
Copilot Dec 4, 2025
0a85735
re-add @reference
fbeaudoincoveo Dec 4, 2025
8061b1d
feat(atomic): add MSW mocking to atomic-category-facet stories
Copilot Dec 4, 2025
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
7 changes: 7 additions & 0 deletions packages/atomic-react/src/components/search/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
AtomicAriaLive as LitAtomicAriaLive,
AtomicAutomaticFacet as LitAtomicAutomaticFacet,
AtomicBreadbox as LitAtomicBreadbox,
AtomicCategoryFacet as LitAtomicCategoryFacet,
AtomicColorFacet as LitAtomicColorFacet,
AtomicComponentError as LitAtomicComponentError,
AtomicExternal as LitAtomicExternal,
Expand Down Expand Up @@ -80,6 +81,12 @@ export const AtomicBreadbox = createComponent({
elementClass: LitAtomicBreadbox,
});

export const AtomicCategoryFacet = createComponent({
tagName: 'atomic-category-facet',
react: React,
elementClass: LitAtomicCategoryFacet,
});

export const AtomicColorFacet = createComponent({
tagName: 'atomic-color-facet',
react: React,
Expand Down
161 changes: 2 additions & 159 deletions packages/atomic/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { CategoryFacetSortCriterion, DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, NumericFilter, NumericFilterState, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, RelativeDateUnit, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless";
import { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, NumericFilter, NumericFilterState, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, RelativeDateUnit, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless";
import { AnyBindings } from "./components/common/interface/bindings";
import { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
import { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
Expand All @@ -19,7 +19,7 @@ import { RecsStore } from "./components/recommendations/atomic-recs-interface/st
import { RedirectionPayload } from "./components/common/search-box/redirection-payload";
import { i18n } from "i18next";
import { SearchBoxSuggestionElement } from "./components/common/suggestions/suggestions-types";
export { CategoryFacetSortCriterion, DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, NumericFilter, NumericFilterState, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, RelativeDateUnit, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless";
export { DateFilterRange, DateRangeRequest, FacetResultsMustMatch, FacetSortCriterion, GeneratedAnswer, GeneratedAnswerCitation, InlineLink, InteractiveCitation, NumericFilter, NumericFilterState, RangeFacetRangeAlgorithm, RangeFacetSortCriterion, RelativeDateUnit, Result, ResultTemplate, ResultTemplateCondition } from "@coveo/headless";
export { AnyBindings } from "./components/common/interface/bindings";
export { NumberInputType } from "./components/common/facets/facet-number-input/number-input-type";
export { ItemDisplayBasicLayout, ItemDisplayDensity, ItemDisplayImageSize, ItemDisplayLayout } from "./components/common/layout/display-options";
Expand Down Expand Up @@ -55,76 +55,6 @@ export namespace Components {
"numberOfValues": number;
"updateCollapseFacetsDependingOnFacetsVisibility": (collapseAfter: number, numberOfVisibleFacets: number) => Promise<void>;
}
/**
* A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
* An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
*/
interface AtomicCategoryFacet {
/**
* The base path shared by all values for the facet. Specify the property as an array using a JSON string representation: ```html <atomic-category-facet base-path='["first value", "second value"]' ></atomic-category-facet> ```
*/
"basePath": string[] | string;
/**
* The character that separates values of a multi-value field. *Note:* If you use the [example formatting](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-category-facet/#usage-notes) for the associated multi-value field, you must set this value to `|` or the facet won't display properly.
*/
"delimitingCharacter": string;
/**
* The required facets and values for this facet to be displayed. Examples: ```html <atomic-facet facet-id="abc" field="objecttype" ...></atomic-facet> <!-- To show the facet when any value is selected in the facet with id "abc": --> <atomic-category-facet depends-on-abc ... ></atomic-category-facet> <!-- To show the facet when value "doc" is selected in the facet with id "abc": --> <atomic-category-facet depends-on-abc="doc" ... ></atomic-category-facet> ```
*/
"dependsOn": Record<string, string>;
/**
* Specifies a unique identifier for the facet.
*/
"facetId"?: string;
/**
* The field whose values you want to display in the facet.
*/
"field": string;
/**
* Whether to use basePath as a filter for the results.
*/
"filterByBasePath": boolean;
/**
* Whether to exclude the parents of folded results when estimating the result count for each facet value. Note: Resulting count is only an estimation, in some cases this value could be incorrect.
*/
"filterFacetCount": boolean;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.
*/
"headingLevel": number;
/**
* The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: `0` Default: `1000`
*/
"injectionDepth": number;
/**
* Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.
*/
"isCollapsed": boolean;
/**
* The non-localized label for the facet. Used in the `atomic-breadbox` component through the bindings store.
*/
"label": string;
/**
* The number of values to request for this facet. Also determines the number of additional values to request each time more values are shown.
*/
"numberOfValues": number;
/**
* The sort criterion to apply to the returned facet values. Possible values are 'alphanumeric' and 'occurrences'. For this criterion to apply to the top-layer facet values, disable [facet value ordering](https://docs.coveo.com/en/l1qf4156/#facet-value-ordering) in your Dynamic Navigation Experience configuration.
*/
"sortCriteria": CategoryFacetSortCriterion;
/**
* The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`. Set this property as a stringified JSON array, for example: ```html <atomic-timeframe-facet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-timeframe-facet> ``` If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.
*/
"tabsExcluded": string[] | string;
/**
* The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`. Set this property as a stringified JSON array, for example: ```html <atomic-timeframe-facet tabs-included='["tabIDA", "tabIDB"]'></atomic-timeframe-facet> ``` If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.
*/
"tabsIncluded": string[] | string;
/**
* Whether this facet should contain a search box.
*/
"withSearch": boolean;
}
/**
* Internal component, only to use through `atomic-generated-answer` or `atomic-insight-generated-answer`
*/
Expand Down Expand Up @@ -1779,16 +1709,6 @@ declare global {
prototype: HTMLAtomicAutomaticFacetGeneratorElement;
new (): HTMLAtomicAutomaticFacetGeneratorElement;
};
/**
* A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
* An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
*/
interface HTMLAtomicCategoryFacetElement extends Components.AtomicCategoryFacet, HTMLStencilElement {
}
var HTMLAtomicCategoryFacetElement: {
prototype: HTMLAtomicCategoryFacetElement;
new (): HTMLAtomicCategoryFacetElement;
};
/**
* Internal component, only to use through `atomic-generated-answer` or `atomic-insight-generated-answer`
*/
Expand Down Expand Up @@ -2675,7 +2595,6 @@ declare global {
};
interface HTMLElementTagNameMap {
"atomic-automatic-facet-generator": HTMLAtomicAutomaticFacetGeneratorElement;
"atomic-category-facet": HTMLAtomicCategoryFacetElement;
"atomic-citation": HTMLAtomicCitationElement;
"atomic-did-you-mean": HTMLAtomicDidYouMeanElement;
"atomic-facet-manager": HTMLAtomicFacetManagerElement;
Expand Down Expand Up @@ -2786,76 +2705,6 @@ declare namespace LocalJSX {
*/
"numberOfValues"?: number;
}
/**
* A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
* An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
*/
interface AtomicCategoryFacet {
/**
* The base path shared by all values for the facet. Specify the property as an array using a JSON string representation: ```html <atomic-category-facet base-path='["first value", "second value"]' ></atomic-category-facet> ```
*/
"basePath"?: string[] | string;
/**
* The character that separates values of a multi-value field. *Note:* If you use the [example formatting](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-category-facet/#usage-notes) for the associated multi-value field, you must set this value to `|` or the facet won't display properly.
*/
"delimitingCharacter"?: string;
/**
* The required facets and values for this facet to be displayed. Examples: ```html <atomic-facet facet-id="abc" field="objecttype" ...></atomic-facet> <!-- To show the facet when any value is selected in the facet with id "abc": --> <atomic-category-facet depends-on-abc ... ></atomic-category-facet> <!-- To show the facet when value "doc" is selected in the facet with id "abc": --> <atomic-category-facet depends-on-abc="doc" ... ></atomic-category-facet> ```
*/
"dependsOn"?: Record<string, string>;
/**
* Specifies a unique identifier for the facet.
*/
"facetId"?: string;
/**
* The field whose values you want to display in the facet.
*/
"field": string;
/**
* Whether to use basePath as a filter for the results.
*/
"filterByBasePath"?: boolean;
/**
* Whether to exclude the parents of folded results when estimating the result count for each facet value. Note: Resulting count is only an estimation, in some cases this value could be incorrect.
*/
"filterFacetCount"?: boolean;
/**
* The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the heading over the facet, from 1 to 6.
*/
"headingLevel"?: number;
/**
* The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: `0` Default: `1000`
*/
"injectionDepth"?: number;
/**
* Specifies whether the facet is collapsed. When the facet is the child of an `atomic-facet-manager` component, the facet manager controls this property.
*/
"isCollapsed"?: boolean;
/**
* The non-localized label for the facet. Used in the `atomic-breadbox` component through the bindings store.
*/
"label"?: string;
/**
* The number of values to request for this facet. Also determines the number of additional values to request each time more values are shown.
*/
"numberOfValues"?: number;
/**
* The sort criterion to apply to the returned facet values. Possible values are 'alphanumeric' and 'occurrences'. For this criterion to apply to the top-layer facet values, disable [facet value ordering](https://docs.coveo.com/en/l1qf4156/#facet-value-ordering) in your Dynamic Navigation Experience configuration.
*/
"sortCriteria"?: CategoryFacetSortCriterion;
/**
* The tabs on which this facet must not be displayed. This property should not be used at the same time as `tabs-included`. Set this property as a stringified JSON array, for example: ```html <atomic-timeframe-facet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-timeframe-facet> ``` If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet won't be displayed on any of the specified tabs.
*/
"tabsExcluded"?: string[] | string;
/**
* The tabs on which the facet can be displayed. This property should not be used at the same time as `tabs-excluded`. Set this property as a stringified JSON array, for example: ```html <atomic-timeframe-facet tabs-included='["tabIDA", "tabIDB"]'></atomic-timeframe-facet> ``` If you don't set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.
*/
"tabsIncluded"?: string[] | string;
/**
* Whether this facet should contain a search box.
*/
"withSearch"?: boolean;
}
/**
* Internal component, only to use through `atomic-generated-answer` or `atomic-insight-generated-answer`
*/
Expand Down Expand Up @@ -4399,7 +4248,6 @@ declare namespace LocalJSX {
}
interface IntrinsicElements {
"atomic-automatic-facet-generator": AtomicAutomaticFacetGenerator;
"atomic-category-facet": AtomicCategoryFacet;
"atomic-citation": AtomicCitation;
"atomic-did-you-mean": AtomicDidYouMean;
"atomic-facet-manager": AtomicFacetManager;
Expand Down Expand Up @@ -4502,11 +4350,6 @@ declare module "@stencil/core" {
* To learn more about the automatic facet generator feature, see: [About the Facet Generator](https://docs.coveo.com/en/n9sd0159/).
*/
"atomic-automatic-facet-generator": LocalJSX.AtomicAutomaticFacetGenerator & JSXBase.HTMLAttributes<HTMLAtomicAutomaticFacetGeneratorElement>;
/**
* A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
* An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
*/
"atomic-category-facet": LocalJSX.AtomicCategoryFacet & JSXBase.HTMLAttributes<HTMLAtomicCategoryFacetElement>;
/**
* Internal component, only to use through `atomic-generated-answer` or `atomic-insight-generated-answer`
*/
Expand Down
Loading