refactor: update tooltip usage, wip

adobe · Aug 31, 2021 · ab043e9 · ab043e9
1 parent 645478b
commit ab043e9
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 2 deletions.
diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts
@@ -314,7 +314,7 @@ export class ActiveOverlay extends SpectrumElement {
 
     private updateOverlayPopperPlacement(): void {
         /* c8 ignore next */
-        if (!this.overlayContent) return;
+        if (!this.overlayContent || this.state !== 'active') return;
 
         if (this.dataPopperPlacement) {
             // Copy this attribute to the actual overlay node so that it can use

diff --git a/packages/tooltip/src/Tooltip.ts b/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 })
+    public auto = false;
+
+    @property({ type: Number, reflect: true })
+    public offset = 6;
+
     @property({ type: Boolean, reflect: true })
     public open = false;
 
@@ -140,4 +148,75 @@ export class Tooltip extends SpectrumElement {
             this._proxy = undefined;
         }
     }
+
+    private closeOverlayCallback?: () => void;
+
+    private openOverlay = async (): Promise<void> => {
+        const parentElement = this.parentElement as HTMLElement;
+        this.closeOverlayCallback = await openOverlay(
+            parentElement,
+            'hover',
+            this,
+            {
+                offset: this.offset,
+                placement: this.placement,
+            }
+        );
+    };
+
+    private closeOverlay = (): void => {
+        if (this.closeOverlayCallback) {
+            this.closeOverlayCallback();
+            delete this.closeOverlayCallback;
+        }
+    };
+
+    protected async update(changed: PropertyValues<this>): Promise<void> {
+        if (changed.has('open') && this.auto) {
+            if (this.open) {
+                await this.openOverlay();
+            } else {
+                this.closeOverlay();
+            }
+        }
+        super.update(changed);
+    }
+
+    protected updated(changed: PropertyValues<this>): void {
+        super.updated(changed);
+        if (changed.has('auto')) {
+            const parentElement = this.parentElement as HTMLElement;
+            if (this.auto) {
+                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
+                );
+            }
+        }
+    }
+
+    public disconnectedCallback(): void {
+        this.closeOverlay();
+        super.disconnectedCallback();
+    }
 }
diff --git a/packages/tooltip/src/tooltip.css b/packages/tooltip/src/tooltip.css
@@ -19,6 +19,10 @@ governing permissions and limitations under the License.
     border: none;
 }
 
+:host([auto]:not([aria-hidden])) {
+    display: none;
+}
+
 :host([placement*='right']) #tip,
 :host([placement*='left']) #tip,
 :host([placement*='bottom']) #tip {

diff --git a/packages/tooltip/stories/tooltip.stories.ts b/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 = ({
@@ -291,3 +294,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 auto = ({
+    placement,
+    offset,
+    delayed,
+}: Properties): TemplateResult => html`
+    ${overlayStyles}
+    <sp-action-button>
+        This is a button.
+        <sp-tooltip
+            auto
+            placement=${placement}
+            offset=${offset}
+            ?delayed=${delayed}
+            open
+        >
+            This is a tooltip.
+        </sp-tooltip>
+    </sp-action-button>
+`;
+auto.args = {
+    placement: 'top',
+    offset: 6,
+    delayed: false,
+};
+auto.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',
+            ],
+        },
+    },
+};