Feature/tooltip (#132)

* Added tooltipcontext property

* Updated strings

* feat:icon tooltip

Co-authored-by: Denise Moran <43950360+denisem-msft@users.noreply.github.com>

.vs/VSWorkspaceState.json

@@ -0,0 +1,9 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\Icon",
+    "\\Icon\\Icon"
+  ],
+  "SelectedNode": "\\Icon\\Icon\\IconComponent.tsx",
+  "PreviewInSolutionExplorer": false
+}

Icon/Icon/ContextExtended.ts

@@ -0,0 +1,8 @@
+// This is undocumented - but needed since canvas apps sets non-zero tabindexes
+// so we must use the tabindex provided by the context for accessibility purposes
+export interface ContextEx {
+    accessibility: {
+        assignedTabIndex: number;
+        assignedTooltip?: string;
+    };
+}

Icon/Icon/IconComponent.tsx

@@ -10,6 +10,7 @@ import {
     IPartialTheme,
     mergeStyles,
     ThemeProvider,
+    TooltipHost,
 } from '@fluentui/react';
 import { useAsync } from '@fluentui/react-hooks';
 
@@ -18,6 +19,7 @@ export interface IconComponentProps {
     height?: number;
     iconName?: string;
     text?: string;
+    tooltipContent?: string;
     onSelected: () => void;
     disabled?: boolean;
     tabIndex?: number;
@@ -46,7 +48,7 @@ export enum IconRenderType {
 }
 
 export const IconComponent = React.memo((props: IconComponentProps) => {
-    const { text, disabled, onSelected, tabIndex, ariaLabel, setFocus, themeJSON, renderType } = props;
+    const { text, tooltipContent, disabled, onSelected, tabIndex, ariaLabel, setFocus, themeJSON, renderType } = props;
     const theme = React.useMemo(() => {
         try {
             return themeJSON ? createTheme(JSON.parse(themeJSON) as IPartialTheme) : undefined;
@@ -71,21 +73,23 @@ export const IconComponent = React.memo((props: IconComponentProps) => {
 
     return (
         <ThemeProvider applyTo="none" theme={theme} className={getIconContainerStyle(props)}>
-            {renderType === IconRenderType.Icon && (
-                <FontIcon aria-label={props.ariaLabel} className={getIconClass(props)} iconName={props.iconName} />
-            )}
-            {renderType !== IconRenderType.Icon && (
-                <RenderButtonAs
-                    componentRef={componentRef}
-                    styles={getButtonStyles(props)}
-                    iconProps={getIconProps(props)}
-                    ariaLabel={ariaLabel}
-                    disabled={disabled}
-                    text={text}
-                    onClick={onSelected}
-                    tabIndex={tabIndex}
-                />
-            )}
+            <TooltipHost content={tooltipContent}>
+                {renderType === IconRenderType.Icon && (
+                    <FontIcon aria-label={props.ariaLabel} className={getIconClass(props)} iconName={props.iconName} />
+                )}
+                {renderType !== IconRenderType.Icon && (
+                    <RenderButtonAs
+                        componentRef={componentRef}
+                        styles={getButtonStyles(props)}
+                        iconProps={getIconProps(props)}
+                        ariaLabel={ariaLabel}
+                        disabled={disabled}
+                        text={text}
+                        onClick={onSelected}
+                        tabIndex={tabIndex}
+                    />
+                )}
+            </TooltipHost>
         </ThemeProvider>
     );
 });

Icon/Icon/index.ts

@@ -27,6 +27,7 @@ export class Icon implements ComponentFramework.ReactControl<IInputs, IOutputs>
         const allocatedWidth = parseInt(context.mode.allocatedWidth as unknown as string);
         const allocatedHeight = parseInt(context.mode.allocatedHeight as unknown as string);
         const tabIndex = (context as unknown as ContextEx).accessibility?.assignedTabIndex ?? undefined;
+        const tooltipContent = (context as unknown as ContextEx).accessibility?.assignedTooltip ?? '';
         const inputEvent = context.parameters.InputEvent.raw;
         const eventChanged = inputEvent && this.inputEvent !== inputEvent;
 
@@ -44,6 +45,7 @@ export class Icon implements ComponentFramework.ReactControl<IInputs, IOutputs>
             onSelected: this.onSelect,
             iconName: defaultIfEmpty(context.parameters.IconName, 'emoji2'),
             text: defaultIfEmpty(context.parameters.Text, ''),
+            tooltipContent: tooltipContent,
             justify: TextAlignmentTypes[context.parameters.TextAlignment.raw],
             renderType: RenderTypes[context.parameters.IconType.raw],
             iconColor: undefinedIfEmpty(context.parameters.IconColor),

Icon/Icon/strings/Icon.1033.resx

@@ -153,6 +153,10 @@
     <value>Text</value>
     <comment/>
   </data>
+  <data name="TooltipContext" xml:space="preserve">
+    <value>Text</value>
+    <comment/>
+  </data>
   <data name="TextAlignment" xml:space="preserve">
     <value>Text alignment</value>
     <comment/>