tooltip implementation pr updates (#309)

ni · Jun 21, 2022 · 309898f · 309898f
1 parent fbb30a3
commit 309898f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 21 deletions.
diff --git a/change/@ni-nimble-components-8a80cab3-e911-4d17-8e6e-0626017dc72c.json b/change/@ni-nimble-components-8a80cab3-e911-4d17-8e6e-0626017dc72c.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "Formatting for tooltip implementation (#309)",
+  "comment": "Implementation, styling, and tests for the 'default' state of the nimble-tooltip.",
   "packageName": "@ni/nimble-components",
   "email": "[email protected]",
   "dependentChangeType": "patch"

diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts
@@ -173,8 +173,7 @@ export const comments: { readonly [key in TokenName]: string | null } = {
     tooltipCaptionFontWeight: null,
     tooltipCaptionFontLineHeight: null,
     tooltipCaptionFallbackFontFamily: null,
-    tooltipBackgroundColor:
-        'Background color for tooltips- Will need to be updated for light mode- 2 background colors for light mode',
+    tooltipBackgroundColor: 'Default background color for tooltips.',
     errorTextFont: 'Font shorthand for the "Error_LightUi" base token',
     errorTextFontColor: 'Font color for "Error_LightUi" base token',
     errorTextDisabledFontColor:

diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts
@@ -163,7 +163,6 @@ export const popupBorderColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.popupBorderColor)
 ).withDefault((element: HTMLElement) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
 
-// Will need to be updated for different colors of Light Theme Tooltip Background
 export const tooltipBackgroundColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.tooltipBackgroundColor)
 ).withDefault((element: HTMLElement) => getColorForTheme(element, Black15, Black85, ForestGreen));

diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
@@ -5,25 +5,18 @@ import {
     tooltipCaptionFont,
     tooltipCaptionFontColor,
     borderWidth,
-    tooltipBackgroundColor,
-    tooltipCaptionFontSize
+    tooltipBackgroundColor
 } from '../theme-provider/design-tokens';
 
-// box shadow color may need to be fixed
-// purple color needs to be fixed
-
 export const styles = css`
     ${display('inline-flex')}
 
     :host {
         font: ${tooltipCaptionFont};
-        font-style: normal;
-        font-weight: normal;
         letter-spacing: 0px;
         color: ${tooltipCaptionFontColor};
-        font-size: ${tooltipCaptionFontSize};
-        font-height: 14px;
         text-align: left;
+        cursor: pointer;
     }
 
     .tooltip {
@@ -38,7 +31,5 @@ export const styles = css`
         padding-right: 8px;
         padding-top: 4px;
         display: inline-flex;
-        align-items: center;
-        justify-content: center;
     }
 `;
diff --git a/packages/nimble-components/src/tooltip/tests/tooltip-matrix.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip-matrix.stories.ts
@@ -79,7 +79,7 @@ const component = (
             position="bottom"
             ?horizontalViewportLock="${() => horizontalViewportLock}"
             ?verticalViewportLock="${() => verticalViewportLock}"
-            auto-Update-Mode="auto"
+            auto-update-mode="auto"
         >
             Tooltip
         </nimble-tooltip>

diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts
@@ -11,12 +11,12 @@ import {
 } from '../../theme-provider/design-tokens';
 
 interface TooltipArgs {
+    visible: boolean;
     delay: number;
     horizontalViewportLock: boolean;
     verticalViewportLock: boolean;
     tooltip: string;
     autoUpdateMode: AutoUpdateMode;
-    status: string;
 }
 
 const metadata: Meta<TooltipArgs> = {
@@ -26,15 +26,15 @@ const metadata: Meta<TooltipArgs> = {
         docs: {
             description: {
                 component:
-                    'Per [W3C](https://w3c.github.io/aria-practices/#tooltip) – A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out. It is recommended to set up Aria-describedby for tooltips.'
+                    'Per [W3C](https://w3c.github.io/aria-practices/#tooltip) – A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out. It is recommended to set up aria-describedby, an accesibility feature that sets the description of another element through ID references. To do this, the anchor element (button, text, icon, etc.) of the tooltip must have aria-describedby=`name` in its attributes. To call it, use id=`name` in the nimble-tooltip attributes. More information can be found in the [aria-describedby docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).'
             }
         },
         design: {
             artboardUrl:
                 'https://xd.adobe.com/view/8ce280ab-1559-4961-945c-182955c7780b-d9b1/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/specs/'
         },
         actions: {
-            handles: ['change']
+            handles: ['dismiss']
         }
     },
     render: createUserSelectedThemeStory(html<TooltipArgs>`
@@ -51,21 +51,27 @@ const metadata: Meta<TooltipArgs> = {
             }
         </style>
         <div class="container">
-            <div class="anchorDiv" id="anchor">Text, Button, Icon, etc.</div>
+            <div class="anchorDiv" id="anchor" aria-describedby="ariaAnchor">
+                Text, Button, Icon, etc.
+            </div>
 
             <nimble-tooltip
                 anchor="anchor"
+                ?visible="${x => x.visible}"
                 delay="${x => x.delay}"
                 ?horizontalViewportLock="${x => x.horizontalViewportLock}"
                 ?verticalViewportLock="${x => x.verticalViewportLock}"
-                auto-Update-Mode="${x => x.autoUpdateMode}"
+                auto-update-mode="${x => x.autoUpdateMode}"
+                id="ariaAnchor"
             >
                 ${x => x.tooltip}
             </nimble-tooltip>
         </div>
     `),
     args: {
+        visible: false,
         tooltip: 'Tooltip label',
+        // delay is in milliseconds
         delay: 300,
         horizontalViewportLock: false,
         verticalViewportLock: false
@@ -84,6 +90,10 @@ const metadata: Meta<TooltipArgs> = {
         verticalViewportLock: {
             description:
                 'Controls if the tooltip will always remain fully in the viewport on the vertical axis'
+        },
+        delay: {
+            description:
+                'The delay in milliseconds before a tooltip is shown after a hover event'
         }
     }
 };