Formatting for tooltip implementation (#309)

ni · Jun 20, 2022 · 23ebe2b · 23ebe2b
1 parent 9e958fa
commit 23ebe2b
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 58 deletions.
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,7 +173,8 @@ 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:
+        'Background color for tooltips- Will need to be updated for light mode- 2 background colors for light mode',
     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/tooltip/index.ts b/packages/nimble-components/src/tooltip/index.ts
@@ -23,4 +23,4 @@ const nimbleTooltip = Tooltip.compose({
     styles
 });
 
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
@@ -6,35 +6,39 @@ import {
     tooltipCaptionFontColor,
     borderWidth,
     tooltipBackgroundColor,
+    tooltipCaptionFontSize
 } 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};
-        align-items: left;
-        cursor: pointer;
-        outline: none;
-        user-select: none;
+        font-size: ${tooltipCaptionFontSize};
+        font-height: 14px;
+        text-align: left;
     }
 
     .tooltip {
         box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-        box-shadow: 0px 3px 4px #00000029; 
+        box-shadow: 0px 3px 4px #00000029;
         background-color: ${tooltipBackgroundColor};
-        padding: 1px;
+        padding-bottom: 6px;
+        padding-left: 8px;
+        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
@@ -12,7 +12,11 @@ import {
 import { backgroundStates } from '../../utilities/tests/states';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import '../../all-components';
-import { bodyFont, bodyFontColor, borderColor } from '../../theme-provider/design-tokens';
+import {
+    bodyFont,
+    bodyFontColor,
+    borderColor
+} from '../../theme-provider/design-tokens';
 
 const metadata: Meta = {
     title: 'Tests/Tooltip',
@@ -41,44 +45,51 @@ const verticalViewportLockStates = [
 type VerticalViewportLockState = typeof verticalViewportLockStates[number];
 
 const component = (
-    [horizontalViewportLockName, horizontalViewportLock]: HorizontalViewportLockState,
-    [verticalViewportLockName, verticalViewportLock]: VerticalViewportLockState,
+    [
+        horizontalViewportLockName,
+        horizontalViewportLock
+    ]: HorizontalViewportLockState,
+    [verticalViewportLockName, verticalViewportLock]: VerticalViewportLockState
 ): ViewTemplate => html`
     <style>
-    .container {
-        width: 250px;
-        height: 40px;
-        padding: 20px;
-    }
-
-    .anchorDiv {
-        border: 1px solid var(${borderColor.cssCustomProperty});
-        font: var(${bodyFont.cssCustomProperty});
-        color: var(${bodyFontColor.cssCustomProperty});
+        .container {
+            width: 250px;
+            height: 40px;
+            padding: 20px;
+        }
 
-    }
+        .anchorDiv {
+            border: 1px solid var(${borderColor.cssCustomProperty});
+            font: var(${bodyFont.cssCustomProperty});
+            color: var(${bodyFontColor.cssCustomProperty});
+        }
     </style>
 
-<div class='container'>
-    <div class='anchorDiv' id="${() => `${horizontalViewportLockName}_${verticalViewportLockName}`}">${horizontalViewportLockName} ${verticalViewportLockName}</div>
+    <div class="container">
+        <div
+            class="anchorDiv"
+            id="${() => `${horizontalViewportLockName}_${verticalViewportLockName}`}"
+        >
+            ${horizontalViewportLockName} ${verticalViewportLockName}
+        </div>
 
         <nimble-tooltip
             anchor="${() => `${horizontalViewportLockName}_${verticalViewportLockName}`}"
             visible
-            position='bottom'
+            position="bottom"
             ?horizontalViewportLock="${() => horizontalViewportLock}"
             ?verticalViewportLock="${() => verticalViewportLock}"
-            auto-Update-Mode='auto'
+            auto-Update-Mode="auto"
         >
             Tooltip
         </nimble-tooltip>
-</div>
+    </div>
 `;
 
 const [
     lightThemeWhiteBackground,
     colorThemeDarkGreenBackground,
-    darkThemeBlackBackground,
+    darkThemeBlackBackground
 ] = backgroundStates;
 
 export const tooltipLightThemeWhiteBackground: Story = createFixedThemeStory(
@@ -106,7 +117,5 @@ export const tooltipDarkThemeBlackBackground: Story = createFixedThemeStory(
 );
 
 export const hiddenTooltip: Story = createStory(
-    hiddenWrapper(
-        html`<nimble-tooltip hidden>Hidden Tooltip</nimble-tooltip>`
-    )
+    hiddenWrapper(html`<nimble-tooltip hidden>Hidden 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
@@ -4,7 +4,11 @@ import { withXD } from 'storybook-addon-xd-designs';
 import type { AutoUpdateMode } from '@microsoft/fast-foundation';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import '../../all-components';
-import { borderColor, bodyFont, bodyFontColor } from '../../theme-provider/design-tokens';
+import {
+    borderColor,
+    bodyFont,
+    bodyFontColor
+} from '../../theme-provider/design-tokens';
 
 interface TooltipArgs {
     delay: number;
@@ -34,53 +38,56 @@ const metadata: Meta<TooltipArgs> = {
         }
     },
     render: createUserSelectedThemeStory(html<TooltipArgs>`
-    <style>
-    .container {
-        width: 100px;
-        height: 50px; 
-    }
+        <style>
+            .container {
+                width: 100px;
+                height: 50px;
+            }
 
-    .anchorDiv {
-        border: 1px solid var(${borderColor.cssCustomProperty});
-        font: var(${bodyFont.cssCustomProperty});
-        color: var(${bodyFontColor.cssCustomProperty});
-    }
-    </style>
-    <div class ='container'>
-        <div class='anchorDiv' id='anchor'>Text, Button, Icon, etc.</div>
+            .anchorDiv {
+                border: 1px solid var(${borderColor.cssCustomProperty});
+                font: var(${bodyFont.cssCustomProperty});
+                color: var(${bodyFontColor.cssCustomProperty});
+            }
+        </style>
+        <div class="container">
+            <div class="anchorDiv" id="anchor">Text, Button, Icon, etc.</div>
 
             <nimble-tooltip
-                anchor='anchor' 
-                delay='${x => x.delay}'
+                anchor="anchor"
+                delay="${x => x.delay}"
                 ?horizontalViewportLock="${x => x.horizontalViewportLock}"
                 ?verticalViewportLock="${x => x.verticalViewportLock}"
                 auto-Update-Mode="${x => x.autoUpdateMode}"
             >
-            ${x => x.tooltip}
-            </nimble-tooltip> 
-    </div>
+                ${x => x.tooltip}
+            </nimble-tooltip>
+        </div>
     `),
     args: {
         tooltip: 'Tooltip label',
         delay: 300,
         horizontalViewportLock: false,
-        verticalViewportLock: false,
+        verticalViewportLock: false
     },
     argTypes: {
         autoUpdateMode: {
             options: { anchor: 'anchor', auto: 'auto' },
             control: { type: 'radio' },
-            description: 'Controls when the tooltip updates its position, default is `anchor` which only updates when the anchor is resized. `auto` will update on scroll/resize events.'
+            description:
+                'Controls when the tooltip updates its position, default is `anchor` which only updates when the anchor is resized. `auto` will update on scroll/resize events.'
         },
         horizontalViewportLock: {
-            description: 'Controls if the tooltip will always remain fully in the viewport on the horizontal axis'
+            description:
+                'Controls if the tooltip will always remain fully in the viewport on the horizontal axis'
         },
         verticalViewportLock: {
-            description: 'Controls if the tooltip will always remain fully in the viewport on the vertical axis'
+            description:
+                'Controls if the tooltip will always remain fully in the viewport on the vertical axis'
         }
-    },
+    }
 };
 
 export default metadata;
 
-export const tooltip: StoryObj<TooltipArgs> = {};
+export const tooltip: StoryObj<TooltipArgs> = {};
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,4 +23,4 @@ const nimbleTooltip = Tooltip.compose({ @@
         styles
     });
-    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTooltip());