refactor: update tooltip usage

.circleci/config.yml

@@ -8,7 +8,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 02e32cf07fdeb6331bf61163673d4c6567d02920
+        default: 88ac612f8388d3ad18bc9ea46a4c587c3114a8ef
 commands:
     downstream:
         steps:

packages/overlay/src/ActiveOverlay.ts

@@ -326,7 +326,9 @@ export class ActiveOverlay extends SpectrumElement {
 
     private updateOverlayPopperPlacement(): void {
         /* c8 ignore next */
-        if (!this.overlayContent) return;
+        const activeWithContent =
+            this.state === 'active' && this.overlayContent;
+        if (!activeWithContent) return;
 
         if (this.dataPopperPlacement) {
             // Copy this attribute to the actual overlay node so that it can use

packages/tooltip/src/Tooltip.ts

@@ -17,11 +17,13 @@ import {
     SpectrumElement,
     property,
     query,
+    PropertyValues,
 } from '@spectrum-web-components/base';
-import {
+import type {
     OverlayDisplayQueryDetail,
     Placement,
 } from '@spectrum-web-components/overlay';
+import { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';
 
 import tooltipStyles from './tooltip.css.js';
 
@@ -44,6 +46,12 @@ export class Tooltip extends SpectrumElement {
 
     private _tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;
 
+    @property({ type: Boolean, attribute: 'self-managed' })
+    public selfManaged = false;
+
+    @property({ type: Number, reflect: true })
+    public offset = 6;
+
     @property({ type: Boolean, reflect: true })
     public open = false;
 
@@ -93,14 +101,6 @@ export class Tooltip extends SpectrumElement {
         event.detail.overlayContentTipElement = this.tipElement;
     }
 
-    render(): TemplateResult {
-        return html`
-            <slot name="icon"></slot>
-            <span id="label"><slot></slot></span>
-            <span id="tip"></span>
-        `;
-    }
-
     private _proxy?: HTMLElement;
 
     public overlayWillOpenCallback({
@@ -140,4 +140,72 @@ export class Tooltip extends SpectrumElement {
             this._proxy = undefined;
         }
     }
+
+    private closeOverlayCallback?: Promise<() => void>;
+    private abortOverlay: (cancelled: boolean) => void = () => {
+        return;
+    };
+
+    private openOverlay = (): void => {
+        const parentElement = this.parentElement as HTMLElement;
+        const abortPromise: Promise<boolean> = new Promise((res) => {
+            this.abortOverlay = res;
+        });
+        this.closeOverlayCallback = openOverlay(parentElement, 'hover', this, {
+            abortPromise,
+            offset: this.offset,
+            placement: this.placement,
+        });
+    };
+
+    private closeOverlay = async (): Promise<void> => {
+        if (this.abortOverlay) this.abortOverlay(true);
+        if (!this.closeOverlayCallback) return;
+        (await this.closeOverlayCallback)();
+        delete this.closeOverlayCallback;
+    };
+
+    private manageTooltip(): void {
+        const parentElement = this.parentElement as HTMLElement;
+        if (this.selfManaged) {
+            parentElement.addEventListener('pointerenter', this.openOverlay);
+            parentElement.addEventListener('focusin', this.openOverlay);
+            parentElement.addEventListener('pointerleave', this.closeOverlay);
+            parentElement.addEventListener('focusout', this.closeOverlay);
+        } else {
+            parentElement.removeEventListener('pointerenter', this.openOverlay);
+            parentElement.removeEventListener('focusin', this.openOverlay);
+            parentElement.removeEventListener(
+                'pointerleave',
+                this.closeOverlay
+            );
+            parentElement.removeEventListener('focusout', this.closeOverlay);
+        }
+    }
+
+    render(): TemplateResult {
+        return html`
+            <slot name="icon"></slot>
+            <span id="label"><slot></slot></span>
+            <span id="tip"></span>
+        `;
+    }
+
+    protected async update(changed: PropertyValues<this>): Promise<void> {
+        if (changed.has('open') && this.selfManaged) {
+            if (this.open) {
+                this.openOverlay();
+            } else {
+                this.closeOverlay();
+            }
+        }
+        super.update(changed);
+    }
+
+    protected updated(changed: PropertyValues<this>): void {
+        super.updated(changed);
+        if (changed.has('selfManaged')) {
+            this.manageTooltip();
+        }
+    }
 }

packages/tooltip/src/tooltip.css

@@ -19,6 +19,10 @@ governing permissions and limitations under the License.
     border: none;
 }
 
+:host([self-managed]:not([aria-hidden])) {
+    display: none;
+}
+
 :host([placement*='right']) #tip,
 :host([placement*='left']) #tip,
 :host([placement*='bottom']) #tip {

packages/tooltip/stories/tooltip.stories.ts

@@ -15,6 +15,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
 import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
 import { Placement } from '@spectrum-web-components/overlay';
 import '@spectrum-web-components/overlay/overlay-trigger.js';
 
@@ -56,6 +57,8 @@ interface Properties {
     placement?: Placement;
     variant?: string;
     text?: string;
+    offset?: number;
+    delayed?: boolean;
 }
 
 export const Default = ({
@@ -261,12 +264,14 @@ const overlayStyles = html`
 const overlaid = (openPlacement: Placement): TemplateResult => {
     return html`
         ${overlayStyles}
-        ${([
-            ['bottom', ''],
-            ['left', 'negative'],
-            ['right', 'positive'],
-            ['top', 'info'],
-        ] as [Placement, string][]).map(([placement, variant]) => {
+        ${(
+            [
+                ['bottom', ''],
+                ['left', 'negative'],
+                ['right', 'positive'],
+                ['top', 'info'],
+            ] as [Placement, string][]
+        ).map(([placement, variant]) => {
             return html`
                 <overlay-trigger
                     placement=${placement}
@@ -291,3 +296,71 @@ export const overlaidTop = (): TemplateResult => overlaid('top');
 export const overlaidRight = (): TemplateResult => overlaid('right');
 export const overlaidBottom = (): TemplateResult => overlaid('bottom');
 export const overlaidLeft = (): TemplateResult => overlaid('left');
+
+export const selfManaged = ({
+    placement,
+    offset,
+    delayed,
+}: Properties): TemplateResult => html`
+    ${overlayStyles}
+    <sp-action-button>
+        This is a button.
+        <sp-tooltip
+            self-managed
+            placement=${placement}
+            offset=${offset}
+            ?delayed=${delayed}
+            open
+        >
+            This is a tooltip.
+        </sp-tooltip>
+    </sp-action-button>
+`;
+selfManaged.args = {
+    placement: 'top',
+    offset: 6,
+    delayed: false,
+};
+selfManaged.argTypes = {
+    delayed: {
+        name: 'delayed',
+        type: { name: 'boolean', required: false },
+        description: 'Whether to manage the tooltip with the warmup timer',
+    },
+    offset: {
+        name: 'offset',
+        type: { name: 'number', required: false },
+        description:
+            'The pixel distance from the parent element to place the tooltip',
+    },
+    placement: {
+        name: 'placement',
+        type: { name: 'string', required: false },
+        description: 'The placement of the tooltip in relation to its parent',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'top' },
+        },
+        control: {
+            type: 'inline-radio',
+            options: [
+                'auto',
+                'auto-start',
+                'auto-end',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-start',
+                'top-end',
+                'bottom-start',
+                'bottom-end',
+                'right-start',
+                'right-end',
+                'left-start',
+                'left-end',
+                'none',
+            ],
+        },
+    },
+};

packages/tooltip/test/tooltip.test.ts

@@ -13,7 +13,15 @@ governing permissions and limitations under the License.
 import '../sp-tooltip.js';
 import { Tooltip } from '../';
 import { OverlayDisplayQueryDetail } from '@spectrum-web-components/overlay';
-import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
+import {
+    fixture,
+    elementUpdated,
+    html,
+    expect,
+    oneEvent,
+} from '@open-wc/testing';
+import { Button } from '@spectrum-web-components/button';
+import '@spectrum-web-components/button/sp-button.js';
 
 describe('Tooltip', () => {
     it('loads', async () => {
@@ -27,6 +35,36 @@ describe('Tooltip', () => {
 
         await expect(el).to.be.accessible();
     });
+    it('self manages', async () => {
+        const button = await fixture<Button>(
+            html`
+                <sp-button>
+                    This is a button.
+                    <sp-tooltip self-managed>Help text.</sp-tooltip>
+                </sp-button>
+            `
+        );
+
+        const el = button.querySelector('sp-tooltip') as Tooltip;
+
+        await elementUpdated(el);
+        await expect(el).to.be.accessible();
+
+        const opened = oneEvent(button, 'sp-opened');
+        button.focus();
+        await opened;
+        await elementUpdated(el);
+
+        expect(el.open).to.be.true;
+        await expect(el).to.be.accessible();
+
+        const closed = oneEvent(button, 'sp-closed');
+        button.blur();
+        await closed;
+        await elementUpdated(el);
+
+        expect(el.open).to.be.false;
+    });
     it('accepts variants', async () => {
         const el = await fixture<Tooltip>(
             html`
@@ -97,14 +135,13 @@ describe('Tooltip', () => {
         await elementUpdated(el);
 
         const overlayDetailQuery: OverlayDisplayQueryDetail = {};
-        const queryOverlayDetailEvent = new CustomEvent<
-            OverlayDisplayQueryDetail
-        >('sp-overlay-query', {
-            bubbles: true,
-            composed: true,
-            detail: overlayDetailQuery,
-            cancelable: true,
-        });
+        const queryOverlayDetailEvent =
+            new CustomEvent<OverlayDisplayQueryDetail>('sp-overlay-query', {
+                bubbles: true,
+                composed: true,
+                detail: overlayDetailQuery,
+                cancelable: true,
+            });
         el.dispatchEvent(queryOverlayDetailEvent);
 
         expect(overlayDetailQuery.overlayContentTipElement).to.exist;