css updates implementation (#309)

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

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
@@ -27,12 +27,14 @@ export const styles = css`
     .tooltip {
         box-sizing: border-box;
         flex-shrink: 0;
+        max-width: 440px;
         border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
         box-shadow: 0px 3px 4px #00000029; 
         background-color: ${tooltipBackgroundColor};
         padding: 1px;
         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
@@ -55,17 +55,17 @@ const component = (
         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='anchorDiv' id="${() => `${horizontalViewportLockName}_${verticalViewportLockName}`}">${horizontalViewportLockName} ${verticalViewportLockName}</div>
 
         <nimble-tooltip
             anchor="${() => `${horizontalViewportLockName}_${verticalViewportLockName}`}"
             visible
+            position='bottom'
             ?horizontalViewportLock="${() => horizontalViewportLock}"
             ?verticalViewportLock="${() => verticalViewportLock}"
             auto-Update-Mode='auto'

diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts
@@ -8,11 +8,10 @@ import { borderColor, bodyFont, bodyFontColor } from '../../theme-provider/desig
 
 interface TooltipArgs {
     delay: number;
-    horiontalViewportLock: boolean;
+    horizontalViewportLock: boolean;
     verticalViewportLock: boolean;
     tooltip: string;
-    autoUpdateMode: AutoUpdateMode; // Need to figure out how to test / make sure this works?
-    // anchorIdSet: string; // maybe do this?
+    autoUpdateMode: AutoUpdateMode;
     status: string;
 }
 
@@ -21,9 +20,9 @@ const metadata: Meta<TooltipArgs> = {
     decorators: [withXD],
     parameters: {
         docs: {
-            description: { // to be updated
+            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.'
+                    '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.'
             }
         },
         design: {
@@ -53,7 +52,7 @@ const metadata: Meta<TooltipArgs> = {
             <nimble-tooltip
                 anchor='anchor' 
                 delay='${x => x.delay}'
-                ?horiontalViewportLock="${x => x.horiontalViewportLock}"
+                ?horizontalViewportLock="${x => x.horizontalViewportLock}"
                 ?verticalViewportLock="${x => x.verticalViewportLock}"
                 auto-Update-Mode="${x => x.autoUpdateMode}"
             >
@@ -64,13 +63,20 @@ const metadata: Meta<TooltipArgs> = {
     args: {
         tooltip: 'Tooltip label',
         delay: 300,
-        horiontalViewportLock: false,
+        horizontalViewportLock: 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.'
+        },
+        horizontalViewportLock: {
+            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'
         }
     },
 };