feat(tabs-overflow): first round implementation of sp-tabs-overflow

packages/tabs-overflow/.npmignore

@@ -0,0 +1,2 @@
+stories
+test

packages/tabs-overflow/README.md

@@ -0,0 +1,43 @@
+## Description
+
+The `<sp-tabs-overflow>` is a decorator component for the `<sp-tabs>` component that enables scrolling for horizontal tabs when there is not enough width to display all of the tabs.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tabs-overflow?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tabs-overflow)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tabs-overflow?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tabs-overflow)
+
+```
+yarn add @spectrum-web-components/tabs-overflow
+```
+
+Import the side effectful registration of `<sp-tabs-overflow>` via:
+
+```
+import '@spectrum-web-components/tabs-overflow/sp-tabs-overflow.js';
+```
+
+When looking to leverage the `TabsOverflow` base class as a type and/or for extension purposes, do so via:
+
+```
+import { TabsOverflow } from '@spectrum-web-components/tabs-overflow';
+```
+
+## Example
+
+To use the `<sp-tabs-overflow>` component, simply wrap it around the `<sp-tabs>` element as a child element, like so:
+
+```html
+<sp-tabs-overflow>
+    <sp-tabs selected="1" size="m">
+        <sp-tab label="Tab 1" value="1"></sp-tab>
+        <sp-tab label="Tab 2" value="2"></sp-tab>
+        <sp-tab label="Tab 3" value="3"></sp-tab>
+        <sp-tab label="Tab 4" value="4"></sp-tab>
+        <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
+        <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
+        <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
+        <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
+    </sp-tabs>
+</sp-tabs-overflow>
+```

packages/tabs-overflow/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*.js",
+    "./sp-tabs-overflow.js": "./sp-tabs-overflow.js"
+}

packages/tabs-overflow/package.json

@@ -0,0 +1,70 @@
+{
+    "name": "@spectrum-web-components/tabs-overflow",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design TabsOverflow",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/tabs-overflow"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/tabs-overflow",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/TabsOverflow.js": {
+            "development": "./src/TabsOverflow.dev.js",
+            "default": "./src/TabsOverflow.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/tabs-overflow.css.js": "./src/tabs-overflow.css.js",
+        "./sp-tabs-overflow.js": {
+            "development": "./sp-tabs-overflow.dev.js",
+            "default": "./sp-tabs-overflow.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.7.2",
+        "tslib": "^2.0.0"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js",
+        "./**/*.dev.js"
+    ]
+}

packages/tabs-overflow/sp-tabs-overflow.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2022 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 { TabsOverflow } from './src/TabsOverflow.js';
+
+customElements.define('sp-tabs-overflow', TabsOverflow);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-tabs-overflow': TabsOverflow;
+    }
+}

packages/tabs-overflow/src/TabsOverflow.ts

@@ -0,0 +1,153 @@
+/*
+Copyright 2022 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 {
+    CSSResultArray,
+    html,
+    PropertyValues,
+    SpectrumElement,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import {
+    query,
+    queryAssignedElements,
+    state,
+} from '@spectrum-web-components/base/src/decorators.js';
+import { classMap } from '@spectrum-web-components/base/src/directives.js';
+import { ResizeController } from '@lit-labs/observers/resize_controller.js';
+import { Tabs } from '@spectrum-web-components/tabs';
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-right.js';
+
+import styles from './tabs-overflow.css.js';
+
+interface TabsOverflowState {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+}
+/**
+ * @element sp-tabs-overflow
+ */
+export class TabsOverflow extends SpectrumElement {
+    public static override get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @state()
+    private overflowState: TabsOverflowState = {
+        canScrollLeft: false,
+        canScrollRight: false,
+    };
+
+    @queryAssignedElements({ selector: 'sp-tabs', flatten: true })
+    private scrollContent!: Tabs[];
+
+    @query('.tabs-overflow-container')
+    private overflowContainer!: HTMLDivElement;
+
+    @state()
+    private tabsSize = 'm';
+
+    resizeController!: ResizeController;
+
+    public constructor() {
+        super();
+        this.resizeController = new ResizeController(this, {
+            target: this,
+            callback: (): void => {
+                this._updateScrollState();
+            },
+        });
+    }
+
+    protected override firstUpdated(changes: PropertyValues): void {
+        super.firstUpdated(changes);
+        // enable scroll event
+        this.scrollContent[0]?.setAttribute('enableTabsScroll', '');
+        this.tabsSize = this.scrollContent[0]?.getAttribute('size') || 'm';
+        this.resizeController.observe(this.overflowContainer);
+    }
+
+    private async _handleSlotChange(): Promise<void> {
+        const [tabsElement] = this.scrollContent;
+        await tabsElement.updateComplete;
+        this._updateScrollState();
+    }
+
+    private _updateScrollState(): void {
+        const { scrollContent, overflowState } = this;
+
+        if (scrollContent) {
+            const [tabsElement] = this.scrollContent;
+            const { canScrollLeft, canScrollRight } =
+                tabsElement?.scrollState || {
+                    canScrollLeft: false,
+                    canScrollRight: false,
+                };
+
+            this.overflowState = {
+                ...overflowState,
+                canScrollLeft,
+                canScrollRight,
+            };
+        }
+    }
+
+    private _handleScrollClick(event: MouseEvent): void {
+        const currentTarget = event.currentTarget as HTMLElement;
+        const [tabsElement] = this.scrollContent;
+
+        const dist = tabsElement.clientWidth * 0.5;
+        const left = currentTarget?.classList?.contains('left-scroll')
+            ? -dist
+            : dist;
+        tabsElement.scrollTabs(left, 'smooth');
+    }
+
+    protected override render(): TemplateResult {
+        const { canScrollRight, canScrollLeft } = this.overflowState;
+        return html`
+            <div
+                class=${classMap({
+                    'tabs-overflow-container': true,
+                    'left-shadow': canScrollLeft,
+                    'right-shadow': canScrollRight,
+                    [this.tabsSize]: true,
+                })}
+                @sp-tabs-scroll=${this._updateScrollState}
+            >
+                <sp-action-button
+                    class=${classMap({
+                        'left-scroll': true,
+                        show: canScrollLeft,
+                    })}
+                    quiet
+                    dir="rtl"
+                    @click=${this._handleScrollClick}
+                >
+                    <sp-icon-chevron-left slot="icon"></sp-icon-chevron-left>
+                </sp-action-button>
+                <sp-action-button
+                    class=${classMap({
+                        'right-scroll': true,
+                        show: canScrollRight,
+                    })}
+                    quiet
+                    @click=${this._handleScrollClick}
+                >
+                    <sp-icon-chevron-right slot="icon"></sp-icon-chevron-right>
+                </sp-action-button>
+                <slot @slotchange=${this._handleSlotChange}></slot>
+            </div>
+        `;
+    }
+}

packages/tabs-overflow/src/index.ts

@@ -0,0 +1,12 @@
+/*
+Copyright 2022 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.
+*/
+export * from './TabsOverflow.js';

packages/tabs-overflow/src/spectrum-config.js

@@ -0,0 +1,24 @@
+/*
+Copyright 2022 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.
+*/
+const config = {
+    spectrum: '',
+    components: [
+        {
+            name: 'tabs-overflow',
+            host: {
+                selector: '.spectrum-TabsOverflow',
+            },
+        },
+    ],
+};
+
+export default config;