chore(atomic): make tabs officially public (#4824)

https://coveord.atlassian.net/browse/CDX-1603 GA ! --------- Co-authored-by: GitHub Actions Bot <> Co-authored-by: Louis Bompart <[email protected]>
coveo · Jan 8, 2025 · 9078d06 · 9078d06
1 parent 0f33d58
commit 9078d06
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 6 deletions.
diff --git a/...atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts b/...atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
@@ -137,6 +137,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTab,
 AtomicTabManager,
 AtomicTableElement,
 AtomicText,
@@ -282,6 +283,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTab,
 AtomicTabManager,
 AtomicTableElement,
 AtomicText,

diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -2974,6 +2974,28 @@ export class AtomicSortExpression {
 export declare interface AtomicSortExpression extends Components.AtomicSortExpression {}
 
 
+@ProxyCmp({
+  inputs: ['expression', 'label', 'name']
+})
+@Component({
+  selector: 'atomic-tab',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['expression', 'label', 'name'],
+})
+export class AtomicTab {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicTab extends Components.AtomicTab {}
+
+
 @ProxyCmp({
   inputs: ['clearFiltersOnTabChange']
 })

diff --git a/packages/atomic-react/src/components/stencil-generated/search/index.ts b/packages/atomic-react/src/components/stencil-generated/search/index.ts
@@ -88,6 +88,7 @@ export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent
 export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetSuggestions, HTMLAtomicSmartSnippetSuggestionsElement>('atomic-smart-snippet-suggestions');
 export const AtomicSortDropdown = /*@__PURE__*/createReactComponent<JSX.AtomicSortDropdown, HTMLAtomicSortDropdownElement>('atomic-sort-dropdown');
 export const AtomicSortExpression = /*@__PURE__*/createReactComponent<JSX.AtomicSortExpression, HTMLAtomicSortExpressionElement>('atomic-sort-expression');
+export const AtomicTab = /*@__PURE__*/createReactComponent<JSX.AtomicTab, HTMLAtomicTabElement>('atomic-tab');
 export const AtomicTabManager = /*@__PURE__*/createReactComponent<JSX.AtomicTabManager, HTMLAtomicTabManagerElement>('atomic-tab-manager');
 export const AtomicTableElement = /*@__PURE__*/createReactComponent<JSX.AtomicTableElement, HTMLAtomicTableElementElement>('atomic-table-element');
 export const AtomicText = /*@__PURE__*/createReactComponent<JSX.AtomicText, HTMLAtomicTextElement>('atomic-text');

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -3655,6 +3655,10 @@ export namespace Components {
          */
         "tabsIncluded": string[] | string;
     }
+    /**
+     * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
+     * It must be used as a child of the `atomic-tab-manager` component to function correctly.
+     */
     interface AtomicTab {
         /**
           * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
@@ -3686,7 +3690,9 @@ export namespace Components {
         "select": () => void;
     }
     /**
-     * @alpha 
+     * The `atomic-tab-manager` component manages a collection of tabs,
+     * allowing users to switch between them. Each child `atomic-tab` represents an
+     * individual tab within the manager.
      */
     interface AtomicTabManager {
         /**
@@ -5998,6 +6004,10 @@ declare global {
         prototype: HTMLAtomicSortExpressionElement;
         new (): HTMLAtomicSortExpressionElement;
     };
+    /**
+     * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
+     * It must be used as a child of the `atomic-tab-manager` component to function correctly.
+     */
     interface HTMLAtomicTabElement extends Components.AtomicTab, HTMLStencilElement {
     }
     var HTMLAtomicTabElement: {
@@ -6017,7 +6027,9 @@ declare global {
         new (): HTMLAtomicTabButtonElement;
     };
     /**
-     * @alpha 
+     * The `atomic-tab-manager` component manages a collection of tabs,
+     * allowing users to switch between them. Each child `atomic-tab` represents an
+     * individual tab within the manager.
      */
     interface HTMLAtomicTabManagerElement extends Components.AtomicTabManager, HTMLStencilElement {
     }
@@ -9733,6 +9745,10 @@ declare namespace LocalJSX {
          */
         "tabsIncluded"?: string[] | string;
     }
+    /**
+     * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
+     * It must be used as a child of the `atomic-tab-manager` component to function correctly.
+     */
     interface AtomicTab {
         /**
           * The [constant query expression (`cq`)](https://docs.coveo.com/en/2830/searching-with-coveo/about-the-query-expression#constant-query-expression-cq) to apply when the tab is the active one.
@@ -9764,7 +9780,9 @@ declare namespace LocalJSX {
         "select": () => void;
     }
     /**
-     * @alpha 
+     * The `atomic-tab-manager` component manages a collection of tabs,
+     * allowing users to switch between them. Each child `atomic-tab` represents an
+     * individual tab within the manager.
      */
     interface AtomicTabManager {
         /**
@@ -10942,11 +10960,17 @@ declare module "@stencil/core" {
              * The `atomic-sort-expression` component defines a sort expression. This component must be inside an `atomic-sort-dropdown` component.
              */
             "atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
+            /**
+             * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
+             * It must be used as a child of the `atomic-tab-manager` component to function correctly.
+             */
             "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
             "atomic-tab-bar": LocalJSX.AtomicTabBar & JSXBase.HTMLAttributes<HTMLAtomicTabBarElement>;
             "atomic-tab-button": LocalJSX.AtomicTabButton & JSXBase.HTMLAttributes<HTMLAtomicTabButtonElement>;
             /**
-             * @alpha 
+             * The `atomic-tab-manager` component manages a collection of tabs,
+             * allowing users to switch between them. Each child `atomic-tab` represents an
+             * individual tab within the manager.
              */
             "atomic-tab-manager": LocalJSX.AtomicTabManager & JSXBase.HTMLAttributes<HTMLAtomicTabManagerElement>;
             "atomic-tab-manager-bar": LocalJSX.AtomicTabManagerBar & JSXBase.HTMLAttributes<HTMLAtomicTabManagerBarElement>;

diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx
@@ -13,7 +13,9 @@ import {
 import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
- * @alpha
+ * The `atomic-tab-manager` component manages a collection of tabs,
+ * allowing users to switch between them. Each child `atomic-tab` represents an
+ * individual tab within the manager.
  *
  * @part button-container - The container for the tab button.
  * @part button - The tab button.

diff --git a/packages/atomic/src/components/search/tabs/atomic-tab/atomic-tab.tsx b/packages/atomic/src/components/search/tabs/atomic-tab/atomic-tab.tsx
@@ -1,7 +1,8 @@
 import {Component, Prop, Element} from '@stencil/core';
 
 /**
- * @internal
+ * The `atomic-tab` component represents an individual tab within the `atomic-tab-manager` component.
+ * It must be used as a child of the `atomic-tab-manager` component to function correctly.
  */
 @Component({
   tag: 'atomic-tab',