diff --git a/modules/react/tooltip/stories/Tooltip.mdx b/modules/react/tooltip/stories/Tooltip.mdx index cd1e3ce94f..dd435b9a1a 100644 --- a/modules/react/tooltip/stories/Tooltip.mdx +++ b/modules/react/tooltip/stories/Tooltip.mdx @@ -5,6 +5,7 @@ import {InformationHighlight} from '@workday/canvas-kit-react/information-highli import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator'; import TooltipStoriesMeta from './Tooltip.stories'; +import {AIDisclosure} from './examples/AIDisclosure'; import {CustomContent} from './examples/CustomContent'; import {Default} from './examples/Default'; import {DelayedTooltip} from './examples/DelayedTooltip'; @@ -146,6 +147,15 @@ a dialog instead. +### AI Disclosure + +Use a tooltip to disclose when content or functionality is powered by AI. Pair an icon button with a +tooltip near the content it describes so users understand how it was produced before they act on it. +The tooltip labels the button, making the disclosure available to both sighted and screen reader +users. + + + ### Delayed Tooltip The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can diff --git a/modules/react/tooltip/stories/Tooltip.stories.ts b/modules/react/tooltip/stories/Tooltip.stories.ts index 39b669fc42..4c982c08b0 100644 --- a/modules/react/tooltip/stories/Tooltip.stories.ts +++ b/modules/react/tooltip/stories/Tooltip.stories.ts @@ -3,6 +3,7 @@ import {Meta, StoryObj} from '@storybook/react'; import {Tooltip} from '@workday/canvas-kit-react/tooltip'; import mdxDoc from './Tooltip.mdx'; +import {AIDisclosure as AIDisclosureExample} from './examples/AIDisclosure'; import {Alt as AltExample} from './examples/Alt'; import {CustomContent as CustomContentExample} from './examples/CustomContent'; import {Default as DefaultExample} from './examples/Default'; @@ -34,6 +35,9 @@ export const Default: Story = { export const CustomContent: Story = { render: CustomContentExample, }; +export const AIDisclosure: Story = { + render: AIDisclosureExample, +}; export const DelayedTooltip: Story = { render: DelayedTooltipExample, }; diff --git a/modules/react/tooltip/stories/examples/AIDisclosure.tsx b/modules/react/tooltip/stories/examples/AIDisclosure.tsx new file mode 100644 index 0000000000..de3d12995b --- /dev/null +++ b/modules/react/tooltip/stories/examples/AIDisclosure.tsx @@ -0,0 +1,38 @@ +import {ExternalHyperlink, TertiaryButton} from '@workday/canvas-kit-react/button'; +import {Card} from '@workday/canvas-kit-react/card'; +import {Tooltip} from '@workday/canvas-kit-react/tooltip'; +import {createStyles} from '@workday/canvas-kit-styling'; +import {infoSparkleIcon} from '@workday/canvas-system-icons-web'; +import {system} from '@workday/canvas-tokens-web'; + +const containerStyles = createStyles({ + background: system.color.bg.alt.default, + padding: system.padding.xl, +}); + +export const AIDisclosure = () => { + return ( +
+ + + Giant Pacific Octopus + + + + + + The giant Pacific octopus (Enteroctopus dofleini), also known as the North Pacific giant + octopus, is a large marine cephalopod belonging to the genus Enteroctopus and + Enteroctopodidae family. –{' '} + + View Source + + + +
+ ); +};