diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
index f3320a9218..53ca330cad 100644
--- a/packages/tooltip/package.json
+++ b/packages/tooltip/package.json
@@ -49,7 +49,8 @@
"author": "",
"license": "Apache-2.0",
"devDependencies": {
- "@spectrum-css/tooltip": "^3.0.0-beta.4"
+ "@spectrum-css/tooltip": "^3.0.0-beta.5",
+ "@spectrum-web-components/icons-workflow": "^0.3.6"
},
"dependencies": {
"@spectrum-web-components/base": "^0.1.3",
diff --git a/packages/tooltip/stories/tooltip.stories.ts b/packages/tooltip/stories/tooltip.stories.ts
index 69ba3ebec6..e1b2226427 100644
--- a/packages/tooltip/stories/tooltip.stories.ts
+++ b/packages/tooltip/stories/tooltip.stories.ts
@@ -14,13 +14,35 @@ import { html, boolean, select, text } from '@open-wc/demoing-storybook';
import '../sp-tooltip.js';
import '@spectrum-web-components/icon/sp-icon';
import '@spectrum-web-components/icons/sp-icons-medium.js';
-import { TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined, TemplateResult } from '@spectrum-web-components/base';
+import {
+ AlertIcon,
+ CheckmarkIcon,
+ InfoIcon,
+} from '@spectrum-web-components/icons-workflow';
const tipOptions = ['top', 'bottom', 'left', 'right'];
const variantOptions = ['', 'info', 'positive', 'negative'];
-const iconOptions = ['AlertSmall', 'CheckmarkSmall', 'InfoSmall'];
+const iconOptions: {
+ [key: string]: ({
+ width,
+ height,
+ hidden,
+ title,
+ }?: {
+ width?: number;
+ height?: number;
+ hidden?: boolean;
+ title?: string;
+ }) => TemplateResult | string;
+} = {
+ '': () => html``,
+ negative: AlertIcon,
+ positive: CheckmarkIcon,
+ info: InfoIcon,
+};
export default {
component: 'sp-tooltip',
@@ -50,8 +72,13 @@ export const Default = (): TemplateResult => {
};
export const wIcon = (): TemplateResult => {
+ const variant = select(
+ 'Variant',
+ variantOptions,
+ variantOptions[3],
+ 'Element'
+ );
return html`
-
{
tipOptions[0],
'Element'
)}
- variant=${select(
- 'Variant',
- variantOptions,
- variantOptions[0],
- 'Element'
- )}
+ variant=${ifDefined(variant || undefined)}
>
-
+ ${!!variant
+ ? html`
+
+ ${iconOptions[variant]()}
+
+ `
+ : html``}
${text('Tip text', 'Tooltip', 'Element')}
`;