Add a Tootlip provider helper

packages/adaptive-ui/docs/api-report.md

@@ -13,6 +13,9 @@ import { DesignTokenResolver } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
+// @public
+export function applyMixins(derivedCtor: any, ...baseCtors: any[]): void;
+
 // @public
 export class BasePalette<T extends Swatch> implements Palette<T> {
     constructor(source: Color, swatches: ReadonlyArray<T>);

packages/adaptive-ui/src/apply-mixins.ts

@@ -3,7 +3,7 @@ import { AttributeConfiguration } from "@microsoft/fast-element";
 /**
  * Apply mixins to a constructor.
  * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @internal
+ * @public
  */
 export function applyMixins(derivedCtor: any, ...baseCtors: any[]) {
     const derivedAttributes = AttributeConfiguration.locate(derivedCtor);

packages/adaptive-ui/src/index.ts

@@ -2,6 +2,7 @@ export * from "./color/index.js";
 export * from "./density/index.js";
 export * from "./elevation/index.js";
 export * from "./modules/index.js";
+export * from "./apply-mixins.js";
 export * from "./adaptive-design-tokens.js";
 export * from "./recipes.js";
 export * from "./token-helpers-color.js";

packages/adaptive-web-components/src/components/button/button.stories.ts

@@ -14,6 +14,7 @@ export const storyTemplate = html<StoryArgs<FASTButton>>`
         formmethod="${(x) => x.formmethod}"
         ?formnovalidate="${(x) => x.formnovalidate}"
         formtarget="${(x) => x.formtarget}"
+        id="${(x) => x.id}"
         name="${(x) => x.name}"
         type="${(x) => x.type}"
         value="${(x) => x.value}"
@@ -64,6 +65,7 @@ export default {
         formmethod: { control: "text" },
         formnovalidate: { control: "boolean" },
         formtarget: { control: "text" },
+        id: { control: "text" },
         name: { control: "text" },
         type: { control: "select", options: Object.values(ButtonType) },
         value: { control: "text" },
@@ -100,4 +102,6 @@ ButtonIconOnly.args = {
             <path d="M8.26 4.6a5.21 5.21 0 0 1 9.03 5.22l-.2.34a.5.5 0 0 1-.67.19l-3.47-2-1.93 3.38c1.34.4 2.5 1.33 3.31 2.52h-.09c-.34 0-.66.11-.92.31A4.9 4.9 0 0 0 9.5 12.5a4.9 4.9 0 0 0-3.82 2.06 1.5 1.5 0 0 0-1.01-.3 5.94 5.94 0 0 1 5.31-2.74l2.1-3.68-3.83-2.2a.5.5 0 0 1-.18-.7l.2-.33Zm.92.42 1.7.98.02-.02a8.08 8.08 0 0 1 3.27-2.74 4.22 4.22 0 0 0-4.99 1.78ZM14 7.8c.47-.82.7-1.46.77-2.09a5.8 5.8 0 0 0-.06-1.62 6.96 6.96 0 0 0-2.95 2.41L14 7.8Zm.87.5 1.61.93a4.22 4.22 0 0 0-.74-5.02c.07.56.09 1.1.02 1.63-.1.79-.38 1.56-.89 2.46Zm-9.63 7.3a.5.5 0 0 0-.96.03c-.17.7-.5 1.08-.86 1.3-.38.23-.87.32-1.42.32a.5.5 0 0 0 0 1c.64 0 1.33-.1 1.94-.47.34-.2.64-.5.88-.87a2.96 2.96 0 0 0 4.68-.01 2.96 2.96 0 0 0 4.74-.06c.64.9 1.7 1.41 2.76 1.41a.5.5 0 1 0 0-1c-.98 0-1.96-.64-2.29-1.65a.5.5 0 0 0-.95 0 1.98 1.98 0 0 1-3.79.07.5.5 0 0 0-.94 0 1.98 1.98 0 0 1-3.8-.08Z"/>
         </svg>
     `,
+    id: "icon-button",
+    ariaLabel: "Vacation Mode",
 };

packages/adaptive-web-components/src/components/button/button.ts

@@ -1,11 +1,13 @@
 import { FASTButton } from "@microsoft/fast-foundation";
+import { applyMixins } from "@adaptive-web/adaptive-ui";
+import { TooltipProvider } from "../../utilities/tooltip-provider.js";
 
 /**
  * The Adaptive version of Button. Extends {@link @microsoft/fast-foundation#FASTButton}.
  *
  * @public
  */
-export class AdaptiveButton extends FASTButton {
+export class AdaptiveButton extends FASTButton implements TooltipProvider {
     /**
      * Applies 'icon-only' class when there is only an SVG in the default slot.
      */
@@ -14,6 +16,8 @@ export class AdaptiveButton extends FASTButton {
 
         if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {
             this.control.classList.add("icon-only");
+
+            this.provideTooltip(this);
         } else {
             this.control.classList.remove("icon-only");
         }
@@ -23,3 +27,12 @@ export class AdaptiveButton extends FASTButton {
         this.control.focus(options);
     }
 }
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface AdaptiveButton extends TooltipProvider {}
+applyMixins(FASTButton, TooltipProvider);

packages/adaptive-web-components/src/components/tooltip/tooltip.styles.ts

@@ -6,10 +6,11 @@ import { css, ElementStyles } from "@microsoft/fast-element";
  */
 export const templateStyles: ElementStyles = css`
     :host {
+        position: fixed;
+        visibility: hidden;
         height: fit-content;
         width: fit-content;
         white-space: nowrap;
-        visibility: hidden;
     }
 
     :host([visible]) {

packages/adaptive-web-components/src/utilities/tooltip-provider.ts

@@ -0,0 +1,16 @@
+import { FASTTooltip, tagFor } from "@microsoft/fast-foundation";
+import { uniqueId } from "@microsoft/fast-web-utilities";
+
+export class TooltipProvider {
+    public provideTooltip(element: HTMLElement) {
+        if (element.ariaLabel) {
+            if (!element.id) {
+                element.id = uniqueId("tooltipAnchor");
+            }
+            const tooltip = document.createElement(tagFor(FASTTooltip)) as FASTTooltip;
+            tooltip.innerText = element.ariaLabel;
+            tooltip.anchor = element.id;
+            element.parentNode?.insertBefore(tooltip, element);
+        }
+    }
+}