From 309898ffa4e9a70f307f2e018d61b75e7515fab9 Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Tue, 21 Jun 2022 11:37:51 -0500 Subject: [PATCH] tooltip implementation pr updates (#309) --- ...-8a80cab3-e911-4d17-8e6e-0626017dc72c.json | 2 +- .../theme-provider/design-token-comments.ts | 3 +-- .../src/theme-provider/design-tokens.ts | 1 - .../nimble-components/src/tooltip/styles.ts | 13 ++---------- .../tooltip/tests/tooltip-matrix.stories.ts | 2 +- .../src/tooltip/tests/tooltip.stories.ts | 20 ++++++++++++++----- 6 files changed, 20 insertions(+), 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 index 1cb6356196..15d8419606 100644 --- 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": "103057880+aidendk@users.noreply.github.com", "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 index c601c3da79..6ca234397d 100644 --- 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 index 0a20fac151..de98d4f321 100644 --- 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( 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( 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 index b8b8e0ad14..e5876444c3 100644 --- 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 index 6eb981159d..3ff4c18b9a 100644 --- 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 diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts index d4324accf7..0b6038c48b 100644 --- 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 = { @@ -26,7 +26,7 @@ const metadata: Meta = { 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: { @@ -34,7 +34,7 @@ const metadata: Meta = { '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` @@ -51,21 +51,27 @@ const metadata: Meta = { }
-
Text, Button, Icon, etc.
+
+ Text, Button, Icon, etc. +
${x => x.tooltip}
`), args: { + visible: false, tooltip: 'Tooltip label', + // delay is in milliseconds delay: 300, horizontalViewportLock: false, verticalViewportLock: false @@ -84,6 +90,10 @@ const metadata: Meta = { 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' } } };