From 78a429c72446ef9a81e2d801c31b5ad698572b03 Mon Sep 17 00:00:00 2001 From: Felix Perron-Brault Date: Tue, 8 Oct 2024 17:39:16 -0400 Subject: [PATCH 1/2] fix(atomic): show atomic-tab-manager dropdown based on available space instead of fixed breakpoint (#4502) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR ensures that the atomic-tab-manager is automatically displayed whenever there is not enough space to display all tabs. It also improves the appearance of the dropdown. Screenshot 2024-10-07 at 1 57 28 PM https://coveord.atlassian.net/browse/KIT-3548 --- .../common/tab-manager/tab-dropdown.tsx | 17 +++- .../atomic-tab-manager.pcss | 17 ++-- .../atomic-tab-manager/atomic-tab-manager.tsx | 77 ++++++++++++++----- 3 files changed, 81 insertions(+), 30 deletions(-) diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx index 1ff2e970e38..a87837d0fcd 100644 --- a/packages/atomic/src/components/common/tab-manager/tab-dropdown.tsx +++ b/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 = ( @@ -12,18 +14,29 @@ export const TabDropdown: FunctionalComponent = ( ) => { return ( ); }; diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss b/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss index c0d397fe0e2..2b85db4da0d 100644 --- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/atomic-tab-manager.pcss +++ b/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; } 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 index b016597f5a1..d5c7375d411 100644 --- 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 @@ -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 (
    (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 { > ))}
- { - const selectedTab = this.tabs.find( - (tab) => tab.name === (e as string) - ); - if (selectedTab) { - selectedTab.tabController.select(); - } - }} - > - {this.tabs.map((tab) => ( - - ))} - +
(this.tabDropdownRef = el as HTMLDivElement)}> + { + const selectedTab = this.tabs.find( + (tab) => tab.name === (e as string) + ); + if (selectedTab) { + selectedTab.tabController.select(); + } + }} + > + {this.tabs.map((tab) => ( + + ))} + +
); } From 6d17ed77bea468c863517ba862a63ee07c98387e Mon Sep 17 00:00:00 2001 From: Felix Perron-Brault Date: Tue, 8 Oct 2024 18:05:08 -0400 Subject: [PATCH 2/2] fix(atomic): fix styling issues with atomic tabs (#4498) This PR fixes a text color issue with the select dropdown of tabs. This issue is specific to window/linux. Additionally, the select dropdown is now full width on mobile. https://coveord.atlassian.net/browse/KIT-3549 --- .../components/common/tab-manager/tab-dropdown-option.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx b/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx index ff82ed4fccd..c42f8d6b151 100644 --- a/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx +++ b/packages/atomic/src/components/common/tab-manager/tab-dropdown-option.tsx @@ -10,7 +10,12 @@ export const TabDropdownOption: FunctionalComponent = ( props ) => { return ( - );