fix(atomic): make all components start with atomic- (#4823)

https://coveord.atlassian.net/browse/KIT-3773

For the upcoming new lazy loader made with `lit` (new framework
replacing stencil), it would be very helpful if all custom elements had
the prefix `atomic-` !

All components affected in this PR are not supposed to be public, they
are "internal" components.

Author: alexprudhomme

packages/atomic/cypress/integration-insight-panel/insight-panel-selectors.ts

@@ -37,9 +37,9 @@ export const InsightPanelsSelectors = {
       'atomic-insight-full-search-button'
     ),
   tabs: () => InsightPanelsSelectors.interface().find('atomic-insight-tabs'),
-  tabBar: () => InsightPanelsSelectors.tabs().find('tab-bar').shadow(),
+  tabBar: () => InsightPanelsSelectors.tabs().find('atomic-tab-bar').shadow(),
   tabPopover: () =>
-    InsightPanelsSelectors.tabBar().find('tab-popover').shadow(),
+    InsightPanelsSelectors.tabBar().find('atomic-tab-popover').shadow(),
   tabPopoverButton: () =>
     InsightPanelsSelectors.tabPopover().find('[part="popover-button"]'),
   layoutStyleTags: () =>

packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts

@@ -246,7 +246,7 @@ describe('Insight Panel test suites', () => {
 
       InsightPanelsSelectors.tabPopoverButton().click();
       InsightPanelsSelectors.tabBar()
-        .find('tab-popover')
+        .find('atomic-tab-popover')
         .find('[part="popover-tab"]')
         .eq(1)
         .should('have.text', 'Salesforce')

packages/atomic/src/components.d.ts

@@ -3669,6 +3669,8 @@ export namespace Components {
          */
         "name": string;
     }
+    interface AtomicTabBar {
+    }
     interface AtomicTabButton {
         /**
           * Whether the tab button is active.
@@ -3694,6 +3696,11 @@ export namespace Components {
     }
     interface AtomicTabManagerBar {
     }
+    interface AtomicTabPopover {
+        "closePopoverOnFocusOut": (event: FocusEvent) => Promise<void>;
+        "setButtonVisibility": (isVisible: boolean) => Promise<void>;
+        "togglePopover": () => Promise<void>;
+    }
     /**
      * The `atomic-table-element` element defines a table column in a result list.
      */
@@ -3800,13 +3807,6 @@ export namespace Components {
          */
         "withDatePicker": boolean;
     }
-    interface TabBar {
-    }
-    interface TabPopover {
-        "closePopoverOnFocusOut": (event: FocusEvent) => Promise<void>;
-        "setButtonVisibility": (isVisible: boolean) => Promise<void>;
-        "togglePopover": () => Promise<void>;
-    }
 }
 export interface AtomicCommerceFacetNumberInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -6004,6 +6004,12 @@ declare global {
         prototype: HTMLAtomicTabElement;
         new (): HTMLAtomicTabElement;
     };
+    interface HTMLAtomicTabBarElement extends Components.AtomicTabBar, HTMLStencilElement {
+    }
+    var HTMLAtomicTabBarElement: {
+        prototype: HTMLAtomicTabBarElement;
+        new (): HTMLAtomicTabBarElement;
+    };
     interface HTMLAtomicTabButtonElement extends Components.AtomicTabButton, HTMLStencilElement {
     }
     var HTMLAtomicTabButtonElement: {
@@ -6025,6 +6031,12 @@ declare global {
         prototype: HTMLAtomicTabManagerBarElement;
         new (): HTMLAtomicTabManagerBarElement;
     };
+    interface HTMLAtomicTabPopoverElement extends Components.AtomicTabPopover, HTMLStencilElement {
+    }
+    var HTMLAtomicTabPopoverElement: {
+        prototype: HTMLAtomicTabPopoverElement;
+        new (): HTMLAtomicTabPopoverElement;
+    };
     /**
      * The `atomic-table-element` element defines a table column in a result list.
      */
@@ -6063,18 +6075,6 @@ declare global {
         prototype: HTMLAtomicTimeframeFacetElement;
         new (): HTMLAtomicTimeframeFacetElement;
     };
-    interface HTMLTabBarElement extends Components.TabBar, HTMLStencilElement {
-    }
-    var HTMLTabBarElement: {
-        prototype: HTMLTabBarElement;
-        new (): HTMLTabBarElement;
-    };
-    interface HTMLTabPopoverElement extends Components.TabPopover, HTMLStencilElement {
-    }
-    var HTMLTabPopoverElement: {
-        prototype: HTMLTabPopoverElement;
-        new (): HTMLTabPopoverElement;
-    };
     interface HTMLElementTagNameMap {
         "atomic-aria-live": HTMLAtomicAriaLiveElement;
         "atomic-automatic-facet": HTMLAtomicAutomaticFacetElement;
@@ -6267,15 +6267,15 @@ declare global {
         "atomic-sort-dropdown": HTMLAtomicSortDropdownElement;
         "atomic-sort-expression": HTMLAtomicSortExpressionElement;
         "atomic-tab": HTMLAtomicTabElement;
+        "atomic-tab-bar": HTMLAtomicTabBarElement;
         "atomic-tab-button": HTMLAtomicTabButtonElement;
         "atomic-tab-manager": HTMLAtomicTabManagerElement;
         "atomic-tab-manager-bar": HTMLAtomicTabManagerBarElement;
+        "atomic-tab-popover": HTMLAtomicTabPopoverElement;
         "atomic-table-element": HTMLAtomicTableElementElement;
         "atomic-text": HTMLAtomicTextElement;
         "atomic-timeframe": HTMLAtomicTimeframeElement;
         "atomic-timeframe-facet": HTMLAtomicTimeframeFacetElement;
-        "tab-bar": HTMLTabBarElement;
-        "tab-popover": HTMLTabPopoverElement;
     }
 }
 declare namespace LocalJSX {
@@ -9747,6 +9747,8 @@ declare namespace LocalJSX {
          */
         "name": string;
     }
+    interface AtomicTabBar {
+    }
     interface AtomicTabButton {
         /**
           * Whether the tab button is active.
@@ -9772,6 +9774,8 @@ declare namespace LocalJSX {
     }
     interface AtomicTabManagerBar {
     }
+    interface AtomicTabPopover {
+    }
     /**
      * The `atomic-table-element` element defines a table column in a result list.
      */
@@ -9878,10 +9882,6 @@ declare namespace LocalJSX {
          */
         "withDatePicker"?: boolean;
     }
-    interface TabBar {
-    }
-    interface TabPopover {
-    }
     interface IntrinsicElements {
         "atomic-aria-live": AtomicAriaLive;
         "atomic-automatic-facet": AtomicAutomaticFacet;
@@ -10074,15 +10074,15 @@ declare namespace LocalJSX {
         "atomic-sort-dropdown": AtomicSortDropdown;
         "atomic-sort-expression": AtomicSortExpression;
         "atomic-tab": AtomicTab;
+        "atomic-tab-bar": AtomicTabBar;
         "atomic-tab-button": AtomicTabButton;
         "atomic-tab-manager": AtomicTabManager;
         "atomic-tab-manager-bar": AtomicTabManagerBar;
+        "atomic-tab-popover": AtomicTabPopover;
         "atomic-table-element": AtomicTableElement;
         "atomic-text": AtomicText;
         "atomic-timeframe": AtomicTimeframe;
         "atomic-timeframe-facet": AtomicTimeframeFacet;
-        "tab-bar": TabBar;
-        "tab-popover": TabPopover;
     }
 }
 export { LocalJSX as JSX };
@@ -10943,12 +10943,14 @@ declare module "@stencil/core" {
              */
             "atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
             "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
+            "atomic-tab-bar": LocalJSX.AtomicTabBar & JSXBase.HTMLAttributes<HTMLAtomicTabBarElement>;
             "atomic-tab-button": LocalJSX.AtomicTabButton & JSXBase.HTMLAttributes<HTMLAtomicTabButtonElement>;
             /**
              * @alpha 
              */
             "atomic-tab-manager": LocalJSX.AtomicTabManager & JSXBase.HTMLAttributes<HTMLAtomicTabManagerElement>;
             "atomic-tab-manager-bar": LocalJSX.AtomicTabManagerBar & JSXBase.HTMLAttributes<HTMLAtomicTabManagerBarElement>;
+            "atomic-tab-popover": LocalJSX.AtomicTabPopover & JSXBase.HTMLAttributes<HTMLAtomicTabPopoverElement>;
             /**
              * The `atomic-table-element` element defines a table column in a result list.
              */
@@ -10967,8 +10969,6 @@ declare module "@stencil/core" {
              * An `atomic-timeframe-facet` displays a facet of the results for the current query as date intervals.
              */
             "atomic-timeframe-facet": LocalJSX.AtomicTimeframeFacet & JSXBase.HTMLAttributes<HTMLAtomicTimeframeFacetElement>;
-            "tab-bar": LocalJSX.TabBar & JSXBase.HTMLAttributes<HTMLTabBarElement>;
-            "tab-popover": LocalJSX.TabPopover & JSXBase.HTMLAttributes<HTMLTabPopoverElement>;
         }
     }
 }

packages/atomic/src/components/common/tab-manager/tab-manager-bar.pcss

@@ -11,7 +11,7 @@
     @apply text-left;
   }
 
-  tab-popover::part(popover-button) {
+  atomic-tab-popover::part(popover-button) {
     @apply text-xl;
     @apply sm:px-6;
     @apply px-2;

packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx

@@ -49,7 +49,7 @@ export class AtomicTabManagerBar {
   }
 
   private get tabPopover() {
-    return this.host.shadowRoot?.querySelector('tab-popover');
+    return this.host.shadowRoot?.querySelector('atomic-tab-popover');
   }
 
   private get popoverWidth() {
@@ -196,7 +196,7 @@ export class AtomicTabManagerBar {
     return (
       <Host class="overflow-x-clip overflow-y-visible">
         <slot></slot>
-        <tab-popover>{this.popoverTabs}</tab-popover>
+        <atomic-tab-popover>{this.popoverTabs}</atomic-tab-popover>
       </Host>
     );
   };

packages/atomic/src/components/common/tabs/tab-bar.tsx

@@ -6,7 +6,7 @@ import {TabCommonElement} from './tab-common';
  * @internal
  */
 @Component({
-  tag: 'tab-bar',
+  tag: 'atomic-tab-bar',
   shadow: true,
   styleUrl: 'tab-bar.pcss',
 })
@@ -49,7 +49,7 @@ export class TabBar {
   }
 
   private get tabPopover() {
-    return this.host.shadowRoot?.querySelector('tab-popover');
+    return this.host.shadowRoot?.querySelector('atomic-tab-popover');
   }
 
   private get popoverWidth() {
@@ -201,7 +201,7 @@ export class TabBar {
     return (
       <Host class="overflow-x-clip overflow-y-visible">
         <slot></slot>
-        <tab-popover>{this.popoverTabs}</tab-popover>
+        <atomic-tab-popover>{this.popoverTabs}</atomic-tab-popover>
       </Host>
     );
   };

packages/atomic/src/components/common/tabs/tab-popover.tsx

@@ -24,7 +24,7 @@ import {Button} from '../button';
  * @internal
  */
 @Component({
-  tag: 'tab-popover',
+  tag: 'atomic-tab-popover',
   shadow: true,
   styleUrl: 'tab-popover.pcss',
 })
@@ -45,7 +45,7 @@ export class TabPopover implements InitializableComponent {
   private buttonRef!: HTMLElement;
   private popupRef!: HTMLElement;
   private popperInstance?: PopperInstance;
-  public popoverId = 'tab-popover';
+  public popoverId = 'atomic-tab-popover';
 
   public initialize() {}
 

packages/atomic/src/components/insight/atomic-insight-tabs/atomic-insight-tabs.tsx

@@ -20,9 +20,9 @@ export class AtomicInsightTabs
 
   public render() {
     return (
-      <tab-bar>
+      <atomic-tab-bar>
         <slot></slot>
-      </tab-bar>
+      </atomic-tab-bar>
     );
   }
 }

packages/atomic/src/components/ipx/atomic-ipx-tabs/atomic-ipx-tabs.tsx

@@ -18,9 +18,9 @@ export class AtomicIPXTabs implements InitializableComponent {
 
   public render() {
     return (
-      <tab-bar>
+      <atomic-tab-bar>
         <slot></slot>
-      </tab-bar>
+      </atomic-tab-bar>
     );
   }
 }

packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/page-object.ts

@@ -92,7 +92,7 @@ export class TabManagerPageObject extends BasePageObject<'atomic-tab-manager'> {
 
   popoverTabs(value?: string) {
     const baseLocator = this.page
-      .locator('tab-popover')
+      .locator('atomic-tab-popover')
       .locator('button[part="popover-tab"]');
     return value ? baseLocator.filter({hasText: value}) : baseLocator;
   }