fix: proper overflow rtl support

adobe · Mar 22, 2023 · 9b1c9d4 · 9b1c9d4
1 parent 159bc89
commit 9b1c9d4
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 20 deletions.
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
@@ -48,6 +48,7 @@
         "./src/tab-panel.css.js": "./src/tab-panel.css.js",
         "./src/tab.css.js": "./src/tab.css.js",
         "./src/tabs-overflow.css.js": "./src/tabs-overflow.css.js",
+        "./src/tabs-sizes.css.js": "./src/tabs-sizes.css.js",
         "./src/tabs.css.js": "./src/tabs.css.js",
         "./sp-tabs.js": {
             "development": "./sp-tabs.dev.js",

diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts
@@ -34,7 +34,7 @@ import { Focusable } from '@spectrum-web-components/shared';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 
 import tabStyles from './tabs.css.js';
-import tabSizes from './spectrum-tabs-sizes.css.js';
+import tabSizes from './tabs-sizes.css.js';
 import { TabPanel } from './TabPanel.js';
 
 // Encapsulated for use both here and in TopNav
@@ -212,15 +212,19 @@ export class Tabs extends SizedMixin(Focusable) {
     }
 
     public get scrollState(): Record<string, boolean> {
-        const canScrollLeft = this.tabList?.scrollLeft > 0;
-        const canScrollRight =
-            Math.ceil(this.tabList?.scrollLeft) <
-            this.tabList?.scrollWidth - this.tabList?.clientWidth;
-
-        return {
-            canScrollLeft,
-            canScrollRight,
-        };
+        if (this.tabList) {
+            const { scrollLeft, clientWidth, scrollWidth } = this.tabList;
+            const canScrollLeft = Math.abs(scrollLeft) > 0;
+            const canScrollRight =
+                Math.ceil(Math.abs(scrollLeft)) < scrollWidth - clientWidth;
+            return {
+                canScrollLeft:
+                    this.dir === 'ltr' ? canScrollLeft : canScrollRight,
+                canScrollRight:
+                    this.dir === 'ltr' ? canScrollRight : canScrollLeft,
+            };
+        }
+        return {};
     }
 
     protected override manageAutoFocus(): void {

diff --git a/packages/tabs/src/TabsOverflow.ts b/packages/tabs/src/TabsOverflow.ts
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 import {
     CSSResultArray,
     html,
+    PropertyValueMap,
     PropertyValues,
     SizedMixin,
     SpectrumElement,
@@ -29,7 +30,7 @@ import { Tabs } from './Tabs.js';
 import '@spectrum-web-components/action-button/sp-action-button.js';
 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 tabSizes from './tabs-sizes.css.js';
 import styles from './tabs-overflow.css.js';
 
 interface TabsOverflowState {
@@ -74,7 +75,10 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         // enable scroll event
-        this.scrollContent[0]?.setAttribute('enableTabsScroll', '');
+        const [tabs] = this.scrollContent;
+        if (tabs) {
+            tabs.enableTabsScroll = true;
+        }
         this.resizeController.observe(this.overflowContainer);
     }
 
@@ -114,6 +118,15 @@ export class TabsOverflow extends SizedMixin(SpectrumElement) {
         tabsElement.scrollTabs(left, 'smooth');
     }
 
+    protected override updated(
+        changedProperties: PropertyValueMap<this>
+    ): void {
+        super.updated(changedProperties);
+        if (changedProperties.has('dir')) {
+            this._updateScrollState();
+        }
+    }
+
     protected override render(): TemplateResult {
         const { canScrollRight, canScrollLeft } = this.overflowState;
         return html`

diff --git a/packages/tabs/src/tabs-overflow.css b/packages/tabs/src/tabs-overflow.css
@@ -20,9 +20,7 @@ governing permissions and limitations under the License.
     --sp-tabs-overflow-previous-button-left: calc(
         -1 * var(--spectrum-component-edge-to-text-100)
     );
-    --sp-tabs-overflow-button-size: var(
-        --spectrum-global-dimension-static-size-500
-    );
+    --sp-tabs-overflow-button-size: var(--spectrum-component-height-200);
     --sp-tabs-overflow-button-height: var(
         --spectrum-tabs-quiet-textonly-tabitem-height
     );
@@ -50,12 +48,12 @@ sp-action-button {
 
 sp-action-button.left-scroll {
     visibility: hidden;
-    inset-inline-end: var(--sp-tabs-overflow-previous-button-left);
+    left: var(--sp-tabs-overflow-previous-button-left);
 }
 
 sp-action-button.right-scroll {
     visibility: hidden;
-    inset-inline-end: var(--sp-tabs-overflow-next-button-right);
+    right: var(--sp-tabs-overflow-next-button-right);
 }
 
 sp-action-button.left-scroll.show,
@@ -88,7 +86,7 @@ sp-action-button.right-scroll.show {
             var(--sp-tabs-overflow-shadow-color)
         )
         0 0 no-repeat padding-box;
-    inset-inline-start: 0;
+    left: 0;
 }
 
 .tabs-overflow-container:after {
@@ -99,7 +97,7 @@ sp-action-button.right-scroll.show {
             var(--sp-tabs-overflow-shadow-color)
         )
         0 0 no-repeat padding-box;
-    inset-inline-end: 0;
+    right: 0;
 }
 
 .tabs-overflow-container.left-shadow:before,

diff --git a/packages/tabs/src/tabs-sizes.css b/packages/tabs/src/tabs-sizes.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import './spectrum-tabs-sizes.css';
diff --git a/packages/top-nav/src/TopNav.ts b/packages/top-nav/src/TopNav.ts
@@ -27,7 +27,7 @@ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { ResizeController } from '@lit-labs/observers/resize_controller.js';
 import { TopNavItem } from './TopNavItem.js';
 
-import tabsSizes from '@spectrum-web-components/tabs/src/spectrum-tabs-sizes.css.js';
+import tabsSizes from '@spectrum-web-components/tabs/src/tabs-sizes.css.js';
 import tabStyles from '@spectrum-web-components/tabs/src/tabs.css.js';
 import { ScaledIndicator } from '@spectrum-web-components/tabs/src/Tabs.js';