feat: add viewport lock to tooltip (#4990)

* add viewport lock * Change files * fix test
microsoft · Sep 1, 2021 · 397d02d · 397d02d
1 parent 12efc3d
commit 397d02d
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 79 deletions.
diff --git a/change/@microsoft-fast-components-7e5a74b4-5300-4441-ab94-b04fa3df822d.json b/change/@microsoft-fast-components-7e5a74b4-5300-4441-ab94-b04fa3df822d.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add viewport lock to tooltip",
+  "packageName": "@microsoft/fast-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@microsoft-fast-foundation-6123b50a-4704-44ff-b7f1-e5fca21d79e1.json b/change/@microsoft-fast-foundation-6123b50a-4704-44ff-b7f1-e5fca21d79e1.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add viewport lock to tooltip",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/tooltip/fixtures/base.html b/packages/web-components/fast-components/src/tooltip/fixtures/base.html
@@ -1,98 +1,79 @@
 <h1>Tooltip</h1>
 
 <h2>Default</h2>
-<div style="height: 400px; width: 400px; background: lightgray;">
+<div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
     <fast-tooltip anchor="anchor-default">
         Helpful text is helpful
     </fast-tooltip>
-    <fast-button id="anchor-default" style="margin: 200px;">
+    <fast-button id="anchor-default" style="margin: 200px; height: 150px; width: 150px;">
         anchor
     </fast-button>
 </div>
 
-<h2>Show/Hide</h2>
-<div style="height: 400px; width: 400px; background: lightgray;">
-    <fast-tooltip
-        id="tooltip-show-1"
-        anchor="anchor-show"
-        visible
-        position="top"
-        auto-update-mode="auto"
-    >
-        Always visible
-    </fast-tooltip>
-    <fast-tooltip
-        id="tooltip-show-2"
-        anchor="anchor-show"
-        visible
-        position="right"
-        auto-update-mode="auto"
-    >
-        Always visible
-    </fast-tooltip>
-    <fast-tooltip
-        id="tooltip-show-3"
-        anchor="anchor-show"
-        visible
-        position="bottom"
-        auto-update-mode="auto"
-    >
-        Always visible
-    </fast-tooltip>
-    <fast-tooltip
-        id="tooltip-show-4"
-        anchor="anchor-show"
-        visible
-        position="left"
-        auto-update-mode="auto"
-    >
-        Always visible
-    </fast-tooltip>
-    <fast-button id="anchor-show" style="margin: 200px;">
-        Toggle tooltips
-    </fast-button>
-</div>
+<h2>Show/Hide with auto updating and lock to viewport</h2>
+<fast-tooltip
+    id="tooltip-show-1"
+    anchor="anchor-show"
+    position="top"
+    auto-update-mode="auto"
+    vertical-viewport-lock="true"
+    horizontal-viewport-lock="true"
+>
+    Helpful text is helpful
+</fast-tooltip>
+<fast-tooltip
+    id="tooltip-show-2"
+    anchor="anchor-show"
+    position="right"
+    auto-update-mode="auto"
+    vertical-viewport-lock="true"
+    horizontal-viewport-lock="true"
+>
+    Helpful text is helpful
+</fast-tooltip>
+<fast-tooltip
+    id="tooltip-show-3"
+    anchor="anchor-show"
+    position="bottom"
+    auto-update-mode="auto"
+    vertical-viewport-lock="true"
+    horizontal-viewport-lock="true"
+>
+    Helpful text is helpful
+</fast-tooltip>
+<fast-tooltip
+    id="tooltip-show-4"
+    anchor="anchor-show"
+    position="left"
+    auto-update-mode="auto"
+    vertical-viewport-lock="true"
+    horizontal-viewport-lock="true"
+>
+    Helpful text is helpful
+</fast-tooltip>
+<fast-button id="anchor-show" style="margin: 100px 200px 100px 200px;">
+    Toggle tooltips
+</fast-button>
 
-<h2>Top</h2>
+<h2>Fixed positions</h2>
 <div style="height: 400px; width: 400px; background: lightgray; overflow: scroll;">
-    <fast-tooltip position="top" anchor="anchor-top">
-        Helpful text is helpful
+    <fast-tooltip position="top" anchor="anchor-positions">
+        Top
     </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 anchor="anchor-positions" position="right">
+        Right
     </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 anchor="anchor-positions" position="bottom">
+        Bottom
     </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 anchor="anchor-positions" position="left">
+        Left
     </fast-tooltip>
 
-    <fast-button id="anchor-left" style="margin: 200px;">
+    <fast-button id="anchor-positions" style="margin: 200px;">
         anchor
     </fast-button>
 </div>

diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.styles.ts b/packages/web-components/fast-components/src/tooltip/tooltip.styles.ts
@@ -25,7 +25,7 @@ export const tooltipStyles: (
 ) =>
     css`
         :host {
-            contain: layout;
+            contain: size;
             overflow: visible;
             height: 0;
             width: 0;

diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.vscode.definition.json b/packages/web-components/fast-components/src/tooltip/tooltip.vscode.definition.json
@@ -30,6 +30,16 @@
                     "default": 300,
                     "required": false
                 },
+                {
+                    "name": "auto-update-mode",
+                    "title": "Auto update mode",
+                    "description":
+                        "Controls when the tooltip updates its position.",
+                    "type": "string",
+                    "values": [{ "name": "anchor" }, { "name": "auto" }],
+                    "default": "anchor",
+                    "required": false
+                },
                 {
                     "name": "position",
                     "title": "Position",
@@ -44,6 +54,22 @@
                         { "name": "end" }
                     ],
                     "type": "string",
+                    "required,": false
+                },
+                {
+                    "name": "horizontal-viewport-lock",
+                    "title": "Horizontal viewport lock",
+                    "description": "Controls if the tooltip will always remain fully in the viewport on the horizontal axis",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                },
+                {
+                    "name": "vertical-viewport-lock",
+                    "title": "Vertical viewport lock",
+                    "description": "Controls if the tooltip will always remain fully in the viewport on the vertical axis",
+                    "type": "boolean",
+                    "default": false,
                     "required": false
                 }
             ],

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2077,6 +2077,7 @@ export class Tooltip extends FoundationElement {
     horizontalPositioningMode: AxisPositioningMode;
     // @internal (undocumented)
     horizontalScaling: AxisScalingMode;
+    horizontalViewportLock: boolean;
     position: TooltipPosition;
     // @internal
     region: AnchoredRegion;
@@ -2090,6 +2091,7 @@ export class Tooltip extends FoundationElement {
     verticalPositioningMode: AxisPositioningMode;
     // @internal (undocumented)
     verticalScaling: AxisScalingMode;
+    verticalViewportLock: boolean;
     // @internal
     viewportElement: HTMLElement | null;
     visible: boolean;

diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.md b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.md
@@ -45,6 +45,10 @@ _Attributes:_
 
 - auto-update-mode - Corresponds to anchored region's auto update mode and governs when the tooltip checks its position.  Default is "auto".
 
+- horizontal-viewport-lock - Controls if the tooltip will always remain fully in the viewport on the horizontal axis
+
+- vertical-viewport-lock - Controls if the tooltip will always remain fully in the viewport on the vertical axis
+
 _Properties:_
 
 -   `anchorElement` - Holds a reference to the HTMLElement currently being used as the anchor. Can be set directly or be populated by setting the anchor attribute.

diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.spec.ts
@@ -300,4 +300,16 @@ describe("Tooltip", () => {
 
         await disconnect();
     });
+
+    it("should set viewport lock attributes to undefined(false) by default", async () => {
+        const { element, connect, disconnect } = await setup();
+        const tooltip: Tooltip = element;
+
+        await connect();
+
+        expect(tooltip.verticalViewportLock).to.equal(undefined);
+        expect(tooltip.horizontalViewportLock).to.equal(undefined);
+
+        await disconnect();
+    });
 });
diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.template.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.template.ts
@@ -31,6 +31,8 @@ export const tooltipTemplate: (
                 horizontal-default-position="${x => x.horizontalDefaultPosition}"
                 horizontal-scaling="${x => x.horizontalScaling}"
                 horizontal-inset="${x => x.horizontalInset}"
+                vertical-viewport-lock="${x => x.horizontalViewportLock}"
+                horizontal-viewport-lock="${x => x.verticalViewportLock}"
                 dir="${x => x.currentDirection}"
                 ${ref("region")}
             >

diff --git a/packages/web-components/fast-foundation/src/tooltip/tooltip.ts b/packages/web-components/fast-foundation/src/tooltip/tooltip.ts
@@ -18,8 +18,6 @@ export { TooltipPosition };
  * @public
  */
 export class Tooltip extends FoundationElement {
-    private static DirectionAttributeName: string = "dir";
-
     /**
      * Whether the tooltip is visible or not.
      * If undefined tooltip is shown when anchor element is hovered
@@ -89,6 +87,24 @@ export class Tooltip extends FoundationElement {
     @attr({ attribute: "auto-update-mode" })
     public autoUpdateMode: AutoUpdateMode = "anchor";
 
+    /**
+     * Controls if the tooltip will always remain fully in the viewport on the horizontal axis
+     * @public
+     * @remarks
+     * HTML Attribute: horizontal-viewport-lock
+     */
+    @attr({ attribute: "horizontal-viewport-lock" })
+    public horizontalViewportLock: boolean;
+
+    /**
+     * Controls if the tooltip will always remain fully in the viewport on the vertical axis
+     * @public
+     * @remarks
+     * HTML Attribute: vertical-viewport-lock
+     */
+    @attr({ attribute: "vertical-viewport-lock" })
+    public verticalViewportLock: boolean;
+
     /**
      * the html element currently being used as anchor.
      * Setting this directly overrides the anchor attribute.
@@ -459,7 +475,6 @@ export class Tooltip extends FoundationElement {
         if (!this.tooltipVisible) {
             return;
         }
-        this.viewportElement = document.body;
         this.region.viewportElement = this.viewportElement;
         this.region.anchorElement = this.anchorElement;
         (this.region as any).addEventListener(

diff --git a/sites/site-utilities/statics/assets/components/fast-tooltip.schema.json b/sites/site-utilities/statics/assets/components/fast-tooltip.schema.json
@@ -27,6 +27,17 @@
       "mapsToAttribute": "delay",
       "type": "number"
     },
+    "auto-update-mode": {
+      "enum": [
+        "anchor",
+        "auto"
+      ],
+      "default": "anchor",
+      "title": "Auto update mode",
+      "description": "Controls when the tooltip updates its position.",
+      "mapsToAttribute": "auto-update-mode",
+      "type": "string"
+    },
     "position": {
       "enum": [
         "top",
@@ -41,6 +52,18 @@
       "mapsToAttribute": "position",
       "type": "string"
     },
+    "horizontal-viewport-lock": {
+      "title": "Horizontal viewport lock",
+      "description": "Controls if the tooltip will always remain fully in the viewport on the horizontal axis",
+      "mapsToAttribute": "horizontal-viewport-lock",
+      "type": "boolean"
+    },
+    "vertical-viewport-lock": {
+      "title": "Vertical viewport lock",
+      "description": "Controls if the tooltip will always remain fully in the viewport on the vertical axis",
+      "mapsToAttribute": "vertical-viewport-lock",
+      "type": "boolean"
+    },
     "Slot": {
       "title": "Default slot",
       "description": "The tooltip content",