fix(tabs): bind tabs overflow state with sp-tabs

adobe · Mar 22, 2023 · a07c45b · a07c45b
1 parent b1440f7
commit a07c45b
Show file tree

Hide file tree

Showing 3 changed files with 683 additions and 0 deletions.
diff --git a/packages/tabs/src/TabsOverflow.ts b/packages/tabs/src/TabsOverflow.ts
@@ -31,6 +31,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import tabSizes from './spectrum-tabs-sizes.css.js';
 import styles from './tabs-overflow.css.js';
+import { MutationController } from '@lit-labs/observers/mutation_controller.js';
 
 interface TabsOverflowState {
     canScrollLeft: boolean;
@@ -61,6 +62,17 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
 
     resizeController!: ResizeController;
 
+    tabsMutations = new MutationController(this, {
+        target: null,
+        config: {
+            attributes: true,
+            attributeFilter: ['size', 'compact'],
+        },
+        callback: () => {
+            this.manageTabsAttributes();
+        },
+    });
+
     public constructor() {
         super();
         this.resizeController = new ResizeController(this, {
@@ -71,6 +83,13 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
         });
     }
 
+    private manageTabsAttributes(): void {
+        const [tabsElement] = this.scrollContent;
+        this.size = tabsElement.size;
+        this.compact = tabsElement.compact;
+        this.compact;
+    }
+
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         // enable scroll event
@@ -80,6 +99,7 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
 
     private async _handleSlotChange(): Promise<void> {
         const [tabsElement] = this.scrollContent;
+        this.manageTabsAttributes();
         await tabsElement?.updateComplete;
         this._updateScrollState();
     }