Merge branch 'master' into feature/SVCC-4170

packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx

@@ -10,7 +10,12 @@ export const TabDropdownOption: FunctionalComponent<TabDropdownOptionProps> = (
   props
 ) => {
   return (
-    <option key={props.value} value={props.value} selected={props.isSelected}>
+    <option
+      class="text-black"
+      key={props.value}
+      value={props.value}
+      selected={props.isSelected}
+    >
       {props.label}
     </option>
   );

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

@@ -1,9 +1,11 @@
 import {FunctionalComponent, h} from '@stencil/core';
+import TabsIcon from '../../../images/arrow-bottom-rounded.svg';
 
 export interface TabDropdownProps {
   tabs: Array<{name: string; label: string}>;
   activeTab: string;
   onTabChange: (tabName: string) => void;
+  class?: string;
 }
 
 export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
@@ -12,18 +14,29 @@ export const TabDropdown: FunctionalComponent<TabDropdownProps> = (
 ) => {
   return (
     <div
-      class="tab-dropdown-area hidden border-b pb-1"
+      class={`tab-dropdown-area relative p-1 ${props.class || ''}`}
       aria-label="tab-dropdown-area"
+      part="dropdown-area"
     >
       <select
         aria-label="tab-dropdown"
-        class="btn-text-primary cursor-pointer py-2 text-xl font-bold"
+        class="btn-outline-neutral w-full grow cursor-pointer appearance-none rounded-lg px-6 py-3 text-xl font-bold"
         onChange={(e) =>
           props.onTabChange((e.target as HTMLSelectElement).value)
         }
       >
         {children}
       </select>
+      <div
+        part="select-icon-wrapper"
+        class="pointer-events-none absolute bottom-0 right-0 top-0 flex items-center justify-center pr-6"
+      >
+        <atomic-icon
+          part="select-icon"
+          icon={TabsIcon}
+          class="ml-4 w-3 shrink-0 self-center"
+        ></atomic-icon>
+      </div>
     </div>
   );
 };

packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss

@@ -1,11 +1,14 @@
 @import '../../../../global/global.pcss';
 
-@media (max-width: 768px) {
-  .tab-dropdown-area {
-    display: block;
-  }
+.hide-tabs {
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
 
-  .tab-area {
-    display: none;
-  }
+select:hover + div,
+select:focus-visible + div {
+  @apply text-primary-light;
 }

packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.tsx

@@ -20,6 +20,8 @@ import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
  *
  * @part button-container - The container for the tab button.
  * @part button - The tab button.
+ * @part dropdown-area - The dropdown area.
+ * @part tab-area - The tab area.
  * @slot default
  */
 @Component({
@@ -45,6 +47,9 @@ export class AtomicTabManager {
 
   @State() public error!: Error;
 
+  private tabAreaRef: HTMLUListElement | undefined;
+  private tabDropdownRef: HTMLDivElement | undefined;
+
   public initialize() {
     this.tabManager = buildTabManager(this.bindings.engine);
 
@@ -81,12 +86,40 @@ export class AtomicTabManager {
     });
   }
 
-  public render() {
+  componentDidLoad() {
+    const tabArea = this.tabAreaRef;
+    const tabDropdown = this.tabDropdownRef;
+    if (tabArea && tabDropdown) {
+      const resizeObserver = new ResizeObserver(() => {
+        const tabAreaWidth = tabArea.offsetWidth;
+        const tabsWidth = Array.from(tabArea.children).reduce(
+          (totalWidth, tab) => totalWidth + (tab as HTMLElement).offsetWidth,
+          0
+        );
+
+        if (tabAreaWidth < tabsWidth) {
+          tabArea.classList.add('hide-tabs');
+          tabDropdown.classList.remove('hidden');
+        } else {
+          tabArea.classList.remove('hide-tabs');
+          tabDropdown.classList.add('hidden');
+        }
+      });
+
+      resizeObserver.observe(tabArea);
+
+      return () => resizeObserver.disconnect();
+    }
+  }
+
+  render() {
     return (
       <div class="mb-2 overflow-x-auto">
         <ul
+          ref={(el) => (this.tabAreaRef = el as HTMLUListElement)}
           role="list"
           aria-label="tab-area"
+          part="tab-area"
           class="tab-area mb-2 flex w-full flex-row border-b"
         >
           {this.tabs.map((tab) => (
@@ -101,26 +134,28 @@ export class AtomicTabManager {
             ></TabButton>
           ))}
         </ul>
-        <TabDropdown
-          tabs={this.tabs}
-          activeTab={this.tabManagerState.activeTab}
-          onTabChange={(e) => {
-            const selectedTab = this.tabs.find(
-              (tab) => tab.name === (e as string)
-            );
-            if (selectedTab) {
-              selectedTab.tabController.select();
-            }
-          }}
-        >
-          {this.tabs.map((tab) => (
-            <TabDropdownOption
-              value={tab.name}
-              label={tab.label}
-              isSelected={tab.name === this.tabManagerState.activeTab}
-            />
-          ))}
-        </TabDropdown>
+        <div ref={(el) => (this.tabDropdownRef = el as HTMLDivElement)}>
+          <TabDropdown
+            tabs={this.tabs}
+            activeTab={this.tabManagerState.activeTab}
+            onTabChange={(e) => {
+              const selectedTab = this.tabs.find(
+                (tab) => tab.name === (e as string)
+              );
+              if (selectedTab) {
+                selectedTab.tabController.select();
+              }
+            }}
+          >
+            {this.tabs.map((tab) => (
+              <TabDropdownOption
+                value={tab.name}
+                label={tab.label}
+                isSelected={tab.name === this.tabManagerState.activeTab}
+              />
+            ))}
+          </TabDropdown>
+        </div>
       </div>
     );
   }