Complete Default Styling tooltip (#309)

ni · Jun 16, 2022 · 46274eb · 46274eb
1 parent 0e71240
commit 46274eb
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 21 deletions.
diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
@@ -1,21 +1,28 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import {
-    borderColor,
+    BannerFail100DarkUi,
+    Black15,
+    Information100LightUi,
+    White
+} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import {
+    borderRgbPartialColor,
     tooltipCaptionFont,
     tooltipCaptionFontColor,
     borderWidth,
-    popupBoxShadowColor
 } from '../theme-provider/design-tokens';
+import { TooltipStatus } from './types';
 
-// font should be source sans pro regular 11px
-// shadow color???
+// 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: ${tooltipCaptionFont};
         color: ${tooltipCaptionFontColor};
         align-items: left;
         cursor: pointer;
@@ -26,9 +33,9 @@ export const styles = css`
     .tooltip {
         box-sizing: border-box;
         flex-shrink: 0;
-        border: ${borderWidth} solid ${borderColor};
-        box-shadow: ${popupBoxShadowColor};
-        background: #00000029;
+        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+        box-shadow: 0px 3px 4px #00000029; 
+        background-color: ${Black15};
         padding: 1px;
         display: inline-flex;
         align-items: 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
@@ -38,7 +38,7 @@ const verticalViewportLockStates = [
 ] as const;
 type VerticalViewportLockState = typeof verticalViewportLockStates[number];
 
-// WIP need to figure out anchoring
+// WIP need to figure out anchoring- They all have the same ids and anchors- only first button tooltip works
 
 const component = (
     [horiontalViewportLockName, horiontalViewportLock]: HoriontalViewportLockState,
@@ -50,6 +50,7 @@ id="anchor">${horiontalViewportLockName} ${verticalViewportLockName}
 
 <nimble-tooltip
     anchor='anchor'
+    visible
     ?horiontalViewportLock="${() => horiontalViewportLock}"
     ?verticalViewportLock="${() => verticalViewportLock}"
 >

diff --git a/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts b/packages/nimble-components/src/tooltip/tests/tooltip.stories.ts
@@ -1,15 +1,19 @@
 import { html } from '@microsoft/fast-element';
 import type { Meta, StoryObj } from '@storybook/html';
 import { withXD } from 'storybook-addon-xd-designs';
+import type { AutoUpdateMode } from '@microsoft/fast-foundation';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import '../../all-components';
+import { TooltipStatus } from '../types';
 
 interface TooltipArgs {
-    // Auto update mode?
     delay: number;
     horiontalViewportLock: boolean;
     verticalViewportLock: boolean;
     tooltip: string;
+    status: TooltipStatus;
+    autoUpdateMode: AutoUpdateMode; // Need to figure out how to test / make sure this works?
+    // anchorIdSet: string; // maybe do this?
 }
 
 const metadata: Meta<TooltipArgs> = {
@@ -31,24 +35,33 @@ const metadata: Meta<TooltipArgs> = {
         }
     },
     render: createUserSelectedThemeStory(html<TooltipArgs>`
-        <nimble-button id="anchor">text</nimble-button>
+        <nimble-button id='anchor'>text</nimble-button>
 
-        <nimble-tooltip
-            anchor='anchor' 
-            delay='${x => x.delay}'
-            ?horiontalViewportLock="${x => x.horiontalViewportLock}"
-            ?verticalViewportLock="${x => x.verticalViewportLock}"
-        >
-        ${x => x.tooltip}
-        </nimble-tooltip> 
+            <nimble-tooltip
+                anchor='anchor' 
+                delay='${x => x.delay}'
+                ?horiontalViewportLock="${x => x.horiontalViewportLock}"
+                ?verticalViewportLock="${x => x.verticalViewportLock}"
+                autoUpdateMode='anchor'
+            >
+            ${x => x.tooltip}
+            </nimble-tooltip> 
     `),
     args: {
         tooltip: 'Tooltip label',
         delay: 300,
         horiontalViewportLock: false,
-        verticalViewportLock: false
-    }
+        verticalViewportLock: false,
+        status: TooltipStatus.default
+    },
+    argTypes: {
+        status: {
+            options: Object.values(TooltipStatus),
+            control: { type: 'radio' },
+        }
+    },
 };
 
 export default metadata;
+
 export const tooltip: StoryObj<TooltipArgs> = {};
diff --git a/packages/nimble-components/src/tooltip/types.ts b/packages/nimble-components/src/tooltip/types.ts
@@ -0,0 +1,10 @@
+/**
+ * Predefined icon status states
+ * @public
+ */
+export const TooltipStatus = {
+    default: 'default',
+    error: 'error',
+    information: 'information',
+} as const;
+export type TooltipStatus = typeof TooltipStatus[keyof typeof TooltipStatus];