feat: add tooltip component (microsoft#3549)

* working * single div mostly works * batch reset requests and improve initialization, feedback tweaks * stub in files * working * working * working * working (but not) * working * working * update scaling mode * working * working * rewire to new anchored region * fixed positioning * change hover query * remove unused observable * add start/end position * fix direction handling * add comments and cleanup * fix merge errors * add definition & config * add code comments, remove an unnecessary function * update font * prettier * style tweaks * add missing release tags * prettier * feedback, update site data * fix example * add link to issue * run prettier * add missing comment * add tests * fix anchored region being opitimized out * run prettier * use getdirection resource * add to read me
mihsta · Sep 22, 2020 · cb7aa98 · cb7aa98
1 parent c69c7d9
commit cb7aa98
Show file tree

Hide file tree

Showing 22 changed files with 1,413 additions and 3 deletions.
diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md
@@ -30,6 +30,7 @@ import { TabPanel } from '@microsoft/fast-foundation';
 import { Tabs } from '@microsoft/fast-foundation';
 import { TextArea } from '@microsoft/fast-foundation';
 import { TextField } from '@microsoft/fast-foundation';
+import { Tooltip } from '@microsoft/fast-foundation';
 import { TreeItem } from '@microsoft/fast-foundation';
 import { TreeView } from '@microsoft/fast-foundation';
 
@@ -533,6 +534,10 @@ export class FASTTextField extends TextField {
     connectedCallback(): void;
 }
 
+// @public
+export class FASTTooltip extends Tooltip {
+}
+
 // @public
 export class FASTTreeItem extends TreeItem {
 }

diff --git a/packages/web-components/fast-components/src/component-definitions.ts b/packages/web-components/fast-components/src/component-definitions.ts
@@ -23,5 +23,6 @@ export * from "./tabs/tab.definition";
 export * from "./tabs/tabs.definition";
 export * from "./text-area/text-area.definition";
 export * from "./text-field/text-field.definition";
+export * from "./tooltip/tooltip.definition";
 export * from "./tree-item/tree-item.definition";
 export * from "./tree-view/tree-view.definition";
diff --git a/packages/web-components/fast-components/src/index.ts b/packages/web-components/fast-components/src/index.ts
@@ -23,5 +23,6 @@ export * from "./switch/index";
 export * from "./tabs/index";
 export * from "./text-area/index";
 export * from "./text-field/index";
+export * from "./tooltip/index";
 export * from "./tree-view/index";
 export * from "./tree-item/index";
diff --git a/packages/web-components/fast-components/src/tooltip/README.md b/packages/web-components/fast-components/src/tooltip/README.md
@@ -0,0 +1,4 @@
+# fast-tooltip
+An implementation of a [tooltip](https://w3c.github.io/aria-practices/#tooltip) web-component.
+
+For more information view the [component specification](../../../fast-foundation/src/checkbox/tooltip.spec.md).
diff --git a/packages/web-components/fast-components/src/tooltip/fixtures/base.html b/packages/web-components/fast-components/src/tooltip/fixtures/base.html
@@ -0,0 +1,151 @@
+<fast-design-system-provider use-defaults>
+    <h1>Tooltip</h1>
+
+    <h2>Default</h2>
+    <div style="height: 400px; width: 400px; background: lightgray;">
+        <fast-tooltip anchor="anchor-default">
+            Helpful text is helpful
+        </fast-tooltip>
+        <fast-tooltip anchor="anchor-default" visible="true" position="right">
+            Always visible
+        </fast-tooltip>
+
+        <fast-button id="anchor-default" style="margin: 200px;">
+            anchor
+        </fast-button>
+    </div>
+
+    <h2>Top</h2>
+    <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
+        <fast-tooltip position="top" anchor="anchor-top">
+            Helpful text is helpful
+        </fast-tooltip>
+
+        <fast-button id="anchor-top" style="margin: 200px;">
+            anchor
+        </fast-button>
+    </div>
+
+    <h2>Right</h2>
+    <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
+        <fast-tooltip anchor="anchor-right" position="right">
+            Helpful text is helpful
+        </fast-tooltip>
+
+        <fast-button id="anchor-right" style="margin: 200px;">
+            anchor
+        </fast-button>
+    </div>
+
+    <h2>Bottom</h2>
+    <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
+        <fast-tooltip anchor="anchor-bottom" position="bottom">
+            Helpful text is helpful
+        </fast-tooltip>
+
+        <fast-button id="anchor-bottom" style="margin: 200px;">
+            anchor
+        </fast-button>
+    </div>
+
+    <h2>Left</h2>
+    <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
+        <fast-tooltip anchor="anchor-left" position="left">
+            Helpful text is helpful
+        </fast-tooltip>
+
+        <fast-button id="anchor-left" style="margin: 200px;">
+            anchor
+        </fast-button>
+    </div>
+
+    <h2>Switch anchors</h2>
+    <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
+        <fast-tooltip id="tooltip-anchor-switch">
+            Helpful text is helpful
+        </fast-tooltip>
+
+        <fast-button id="anchor-anchor-switch-1" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-2" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-3" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-4" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-5" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-6" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-7" style="margin: 40px;">
+            anchor
+        </fast-button>
+
+        <fast-button id="anchor-anchor-switch-8" style="margin: 40px;">
+            anchor
+        </fast-button>
+    </div>
+
+    <h2>RTL</h2>
+    <div
+        style="height: 400px; width: 400px; background: lightgray; overflow: scroll;"
+        dir="rtl"
+    >
+        <fast-button id="anchor-rtl" style="margin: 200px;">
+            anchor
+        </fast-button>
+
+        <fast-tooltip anchor="anchor-rtl" position="left">
+            Left
+        </fast-tooltip>
+
+        <fast-tooltip anchor="anchor-rtl" position="right">
+            Right
+        </fast-tooltip>
+    </div>
+
+    <h2>start/end</h2>
+    <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
+        <fast-button id="anchor-se" style="margin: 200px;">
+            anchor
+        </fast-button>
+
+        <fast-tooltip anchor="anchor-se" position="start">
+            Start
+        </fast-tooltip>
+
+        <fast-tooltip anchor="anchor-se" position="end">
+            End
+        </fast-tooltip>
+    </div>
+
+    <h2>start/end RTL</h2>
+    <div
+        style="height: 400px; width: 400px; background: lightgray; overflow: scroll;"
+        dir="rtl"
+    >
+        <fast-button id="anchor-sertl" style="margin: 200px;">
+            anchor
+        </fast-button>
+
+        <fast-tooltip anchor="anchor-sertl" position="start">
+            Start
+        </fast-tooltip>
+
+        <fast-tooltip anchor="anchor-sertl" position="end">
+            End
+        </fast-tooltip>
+    </div>
+</fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/tooltip/index.ts b/packages/web-components/fast-components/src/tooltip/index.ts
@@ -0,0 +1,23 @@
+import { customElement } from "@microsoft/fast-element";
+import { Tooltip, TooltipTemplate as template } from "@microsoft/fast-foundation";
+import { TooltipStyles as styles } from "./tooltip.styles";
+import { FASTAnchoredRegion } from "../anchored-region";
+
+// prevent tree shaking
+FASTAnchoredRegion;
+
+/**
+ * The FAST Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip},
+ * {@link @microsoft/fast-foundation#TooltipTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fast-tooltip\>
+ */
+@customElement({
+    name: "fast-tooltip",
+    template,
+    styles,
+})
+export class FASTTooltip extends Tooltip {}
diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.definition.ts b/packages/web-components/fast-components/src/tooltip/tooltip.definition.ts
@@ -0,0 +1,57 @@
+import { WebComponentDefinition } from "@microsoft/fast-tooling/dist/data-utilities/web-component";
+import { DataType } from "@microsoft/fast-tooling";
+import { TooltipPosition } from "@microsoft/fast-foundation";
+
+export const fastTooltipDefinition: WebComponentDefinition = {
+    version: 1,
+    tags: [
+        {
+            name: "fast-tooltip",
+            description: "The FAST tooltip element",
+            attributes: [
+                {
+                    name: "visible",
+                    description: "The visible attribute",
+                    type: DataType.boolean,
+                    default: undefined,
+                    required: false,
+                },
+                {
+                    name: "anchor",
+                    description: "The anchor attribute",
+                    type: DataType.string,
+                    default: undefined,
+                    required: false,
+                },
+                {
+                    name: "delay",
+                    description: "The delay attribute",
+                    type: DataType.number,
+                    default: 300,
+                    required: false,
+                },
+                {
+                    name: "position",
+                    description: "The position attribute",
+                    values: [
+                        { name: TooltipPosition.top },
+                        { name: TooltipPosition.right },
+                        { name: TooltipPosition.bottom },
+                        { name: TooltipPosition.left },
+                        { name: TooltipPosition.start },
+                        { name: TooltipPosition.end },
+                    ],
+                    type: DataType.string,
+                    default: undefined,
+                    required: false,
+                },
+            ],
+            slots: [
+                {
+                    name: "",
+                    description: "The default slot",
+                },
+            ],
+        },
+    ],
+};
diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.open-ui.definition.json b/packages/web-components/fast-components/src/tooltip/tooltip.open-ui.definition.json
@@ -0,0 +1,4 @@
+{
+    "name": "Tooltip",
+    "url": "https://fast.design/docs/components/tooltip"
+} 
diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.stories.ts b/packages/web-components/fast-components/src/tooltip/tooltip.stories.ts
@@ -0,0 +1,39 @@
+import { STORY_RENDERED } from "@storybook/core-events";
+import addons from "@storybook/addons";
+import { FASTDesignSystemProvider } from "../design-system-provider";
+import TooltipTemplate from "./fixtures/base.html";
+import { FASTTooltip } from "./";
+
+// Prevent tree-shaking
+FASTTooltip;
+FASTDesignSystemProvider;
+
+addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
+    if (name.toLowerCase().startsWith("tooltip")) {
+        connectAnchors();
+    }
+});
+
+function onAnchorMouseEnter(e: MouseEvent): void {
+    if (e.target === null) {
+        return;
+    }
+    const tooltipInstance: HTMLElement | null = document.getElementById(
+        "tooltip-anchor-switch"
+    );
+    (tooltipInstance as FASTTooltip).anchorElement = e.target as HTMLElement;
+}
+
+function connectAnchors(): void {
+    document.querySelectorAll("fast-button").forEach(el => {
+        if (el !== null && el.id.startsWith("anchor-anchor-switch")) {
+            (el as HTMLElement).onmouseenter = onAnchorMouseEnter;
+        }
+    });
+}
+
+export default {
+    title: "Tooltip",
+};
+
+export const base = () => TooltipTemplate;