@workday/canvas-kit-mcp 16.0.7 → 16.0.9

package/dist/cli.js

@@ -18,7 +18,7 @@ import { z } from "zod";
 // package.json
 var package_default = {
   name: "@workday/canvas-kit-mcp",
-  version: "16.0.7",
+  version: "16.0.9",
   description: "MCP package for Canvas Kit",
   author: "Workday, Inc. (https://www.workday.com)",
   license: "Apache-2.0",
@@ -319,7 +319,7 @@ var stories_config_default = {
       title: "Components/Popups/Tooltip",
       storybookUrl: "https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs",
       mdxPath: "modules/react/tooltip/stories/Tooltip.mdx",
-      mdxProse: "# Canvas Kit React Tooltips\n\nA Tooltip component that renders information/text when the user hovers over an element. A tooltip is\nused to label or describe an element. By default, a tooltip will label an element. This is useful\nfor buttons with icons. A tooltip can also be used to describe additional information about an\nelement\n\n[Workday Design Reference](https://design.workday.com/components/popups/tooltips)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\nThis component follows the\n[W3 Tooltip specification](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). Tooltips are used to\nlabel buttons with icons and provide additional context to elements.\n\n### When to use tooltips\n\nUse a tooltip when you want to display additional information for users to better understand the\npurpose, context, or interaction.\n\n### When not to use tooltips\n\nWhen the visual text will be the exact same as what is visually displayed to the user without the\ntooltip being visible\n\n- Does this element need additional context or information?\n  - No: Don't use a tooltip\n  - Yes:\n    - Is the tooltip text useful to screen reader users?\n      - No: Use `type=\"muted\"` which will not make the tooltip visible to screen reader users\n      - Yes:\n        - Is the tooltip text different from the visual text displayed to users?\n          - No text: Use `type=\"label\"` which will add `aria-label` like the icon example\n          - Yes: Use `type=\"describe\"` which will add `aria-describedby`\n          - No: Don't use a tooltip\n\n### Basic Example\n\nHere is a basic example of a `TertiaryButton` that renders an icon using a tooltip to label the\nicon. This labels the button for both sighted users and screen readers. A tooltip provides an\n`aria-label` to child elements for the accessibility tree and a visual tooltip during mouse hover\nand focus events.\n```tsx\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {xIcon} from '@workday/canvas-system-icons-web';\n\nexport const Default = () => {\n  return (\n    <Tooltip title=\"Close\">\n      <TertiaryButton icon={xIcon} aria-label=\"Close\" />\n    </Tooltip>\n  );\n};\n```\n\n### Alt Example\n\nThe `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.\n```tsx\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {xIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst customStyles = createStyles({\n  background: system.color.bg.alt.default,\n  padding: system.padding.xl,\n});\n\nexport const Alt = () => {\n  return (\n    <div className={customStyles}>\n      <Tooltip title=\"Close\" variant=\"alt\">\n        <TertiaryButton icon={xIcon} aria-label=\"Close\" />\n      </Tooltip>\n    </div>\n  );\n};\n```\n\n### Describing an Element\n\nThe default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to\nprovide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`\nto the target element. This will allow screen reader users to hear the name of the control that is\nbeing focused and the ancillary tooltip information.\n```tsx\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const DescribeType = () => {\n  return (\n    <Tooltip type=\"describe\" title=\"The service will restart after this action\">\n      <DeleteButton>Delete</DeleteButton>\n    </Tooltip>\n  );\n};\n```\n\n### Description of an Element\n\nThe default mode for a tooltip is to assign a name to the target element with an `aria-label`\nstring. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.\nThis will add `aria-description` strings to the target element instead. This variant is useful on\ntext buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible.\n\n> **Note:** If you use `description` type and want to pass `jsx`, it **must\\* be inline and\n> **not\\*\\* a component to ensure the inner text is properly read by voiceover.\n>\n> ```jsx\n> // The text will be understood as: You must accept terms and conditions\n> <Tooltip type=\"description\" title={<span>You<i>must</i> accept terms and conditions</span>}/>\n>\n> // This will render a string including the html and will not be properly understood by voice over.\n> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>\n> <Tool\n> ```\n```tsx\nimport {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {configureIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const DescriptionType = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm}}>\n      <Tooltip type=\"description\" title=\"Search using additional criteria\">\n        <TertiaryButton icon={configureIcon}>Advanced Search</TertiaryButton>\n      </Tooltip>\n      <Tooltip type=\"description\" title=\"Create saved search\">\n        <SecondaryButton>Save</SecondaryButton>\n      </Tooltip>\n      <Tooltip type=\"description\" title=\"The service will restart after this action\">\n        <DeleteButton>Delete</DeleteButton>\n      </Tooltip>\n    </Flex>\n  );\n};\n```\n\n### Muted Tooltips\n\nIf a tooltip does not need to be visible to screen reader users, or you handle accessibility of the\ntooltip yourself, you can set the `type` to `muted`. This will not add any special ARIA attributes\nto the target element.\n```tsx\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const Muted = () => {\n  return (\n    <Tooltip title=\"Visual-only Tooltip\" type=\"muted\">\n      <span>Some text. The contents of the tooltip are invisible to screen reader users.</span>\n    </Tooltip>\n  );\n};\n```\n\n### Custom Content\n\nA tooltip can contain HTML, but should not contain any focusable elements or semantically meaningful\nformatting. The content will lose all semantic meaning when read by a screen reader. If complex\ncontent or a focusable element is needed by your UI, a tooltip is not a good choice. Consider using\na dialog instead.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const CustomContent = () => {\n  return (\n    <React.Fragment>\n      <Tooltip\n        type=\"describe\"\n        title={\n          <div>\n            This is a <em>custom</em> tooltip with <strong>custom HTML</strong>\n          </div>\n        }\n      >\n        <SecondaryButton>Hover Me</SecondaryButton>\n      </Tooltip>\n    </React.Fragment>\n  );\n};\n```\n\n### Delayed Tooltip\n\nThe default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can\ncontrol the length of the delay by providing custom `showDelay` and `hideDelay` in ms.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const DelayedTooltip = () => {\n  return (\n    <React.Fragment>\n      <Tooltip type=\"describe\" title=\"Tooltip Text\" showDelay={2000} hideDelay={1000}>\n        <SecondaryButton>\n          Tooltip appears after 2 seconds and disappears after 1 second\n        </SecondaryButton>\n      </Tooltip>\n    </React.Fragment>\n  );\n};\n```\n\n### Placements\n\nThe tooltip allows for a `placement` configuration. The tooltip uses\n[PopperJS](https://popper.js.org/) to position tooltips, so any valid PopperJS placement is valid\nfor tooltips.\n```tsx\nimport {Card} from '@workday/canvas-kit-react/card';\nimport {Placement} from '@workday/canvas-kit-react/popup';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {base, system} from '@workday/canvas-tokens-web';\n\nconst placementCardStyles = createStyles({\n  boxShadow: system.depth[2],\n  display: 'flex',\n  width: base.size1300,\n  height: base.size1300,\n  justifyContent: 'space-around',\n  alignItems: 'center',\n  padding: system.padding.xxs,\n});\n\nconst blockStyles = createStyles({\n  padding: base.size1300, // give enough room for the tooltips to fit around their targets\n  display: 'grid',\n  gridTemplateColumns: '100px 320px 100px',\n  gridTemplateRows: '100px 320px 100px',\n});\n\nexport const Placements = () => {\n  const placementStyles = {\n    display: 'flex',\n    justifyContent: 'space-around',\n  };\n\n  const createPlacement = (placement: string, index) => {\n    return (\n      <Tooltip title=\"Add\" placement={placement as Placement} key={index}>\n        <Card cs={placementCardStyles}>\n          <Card.Body>{placement}</Card.Body>\n        </Card>\n      </Tooltip>\n    );\n  };\n\n  return (\n    <div className={blockStyles}>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'row'}}>\n        {['top-start', 'top', 'top-end'].map(createPlacement)}\n      </div>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'column'}}>\n        {['left-start', 'left', 'left-end'].map(createPlacement)}\n      </div>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'column'}}>\n        {['right-start', 'right', 'right-end'].map(createPlacement)}\n      </div>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'row'}}>\n        {['bottom-start', 'bottom', 'bottom-end'].map(createPlacement)}\n      </div>\n      <div />\n    </div>\n  );\n};\n```\n\n### Tooltips on overflowing content\n\nThe `OverflowTooltip` component can be applied to any element that has some type of overflow\napplied, or has a child element that has overflow applied. The most common and widely supported type\nof truncation is the ellipsis.\n\n```css\noverflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\n```\n\n**Note**: Text truncation should be avoided if possible. A user should not have to activate a\ntooltip to access important content. If user-generated content is being truncated, the following\nsituation might occur which is a bad user experience. Consider the following list:\n\n- Home Site A\n- Home Site B\n- Home Site C\n\nIf the list items get truncated via an ellipsis, this is what the user could see:\n\n- Home Sit...\n- Home Sit...\n- Home Sit...\n\nHere are suggestions to try to avoid truncation:\n\n- Allow content to wrap instead\n- Limit character count in admin interfaces if possible to avoid need for truncation\n- Avoid fixed container sizes if possible to allow content to flow naturally\n\nIf truncation is required, here are a few guidelines to insure minimal impact on users:\n\n- Only truncate text of elements that naturally receive focus.\n  - Keyboard users can only activate tooltips with focus. Adding `tabindex=0` can give focus to\n    non-focusable elements, but increase the amount of tab stops for keyboard users.\n- Provide the full content elsewhere in the UI\n\nCanvas Kit Buttons have this style applied to the text inside them. `OverflowTooltip` in combination\nwith a max-width can show a tooltip only when overflow is detected:\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\nimport {px2rem} from '@workday/canvas-kit-styling';\nimport {resetIcon} from '@workday/canvas-system-icons-web';\n\nconst CustomContent = ({...elemProps}) => (\n  <button\n    style={{\n      marginBlockStart: px2rem(12),\n      maxWidth: px2rem(200),\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    }}\n    {...elemProps}\n  >\n    Super Mega Ultra Long Content With Max Width Custom\n  </button>\n);\n\nexport const Ellipsis = () => {\n  return (\n    <React.Fragment>\n      <OverflowTooltip>\n        <SecondaryButton>Short Content</SecondaryButton>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <SecondaryButton cs={{maxWidth: px2rem(200)}}>\n          Super Mega Ultra Long Content With Max Width On The Button\n        </SecondaryButton>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <SecondaryButton icon={resetIcon} cs={{maxWidth: px2rem(200)}}>\n          Super Mega Ultra Long Content With Max Width On The Button with Icon\n        </SecondaryButton>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <button\n          style={{\n            marginBlockStart: px2rem(12),\n            maxWidth: px2rem(200),\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          Super Mega Ultra Long Content With Max Width\n        </button>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <CustomContent />\n      </OverflowTooltip>\n      <OverflowTooltip showDelay={2000} hideDelay={2000}>\n        <SecondaryButton cs={{maxWidth: px2rem(200)}}>\n          2 second delay on show and hide content\n        </SecondaryButton>\n      </OverflowTooltip>\n    </React.Fragment>\n  );\n};\n```\n\n### Line Clamp\n\nThe `OverflowTooltip` can support various types of overflow. The component will first look for\n`text-overflow: ellipsis` and `-webkit-line-clamp`, but will fall back to\n`overflow: auto | scroll | clip | hidden`. These properties will be used to determine which\n`element` is experiencing an overflow. Overflow detection is as follows where `element` is\ndetermined by the above style properties:\n\n```js\nelement.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;\n```\n\nHere's an example using the `-webkit-line-clamp` property (multi-line ellipsis which works in all\nbrowsers):\n```tsx\nimport React from 'react';\n\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const LineClamp = () => {\n  return (\n    <OverflowTooltip>\n      <button>\n        <span\n          style={{\n            display: '-webkit-box',\n            overflow: 'hidden',\n            maxWidth: 200,\n            WebkitBoxOrient: 'vertical',\n            WebkitLineClamp: 3,\n          }}\n        >\n          Super Mega Ultra Long Content With Max Width. Super Mega Ultra Long Content With Max\n          Width.\n        </span>\n      </button>\n    </OverflowTooltip>\n  );\n};\n```\n\nOther truncation techniques should be supported as well, even JavaScript ones as long as overflow is\ntriggered somehow and detectable differences in scroll size and client size.\n\n### The UseTooltip Hook\n\nThe `Tooltip` component is a combination of the `TooltipContainer` (a styled element), `Popper`\n(which uses PopperJS and the popup stack), the `useTooltip` hook and some behavior. If custom\nbehavior is required, these sub-components can be composed in a custom container element. This\nexample uses those parts directly while being functionally equivalent to the original basic example.\n```tsx\nimport React from 'react';\n\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Popper} from '@workday/canvas-kit-react/popup';\nimport {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';\nimport {xIcon} from '@workday/canvas-system-icons-web';\n\nexport const UseTooltip = () => {\n  const {targetProps, popperProps, tooltipProps} = useTooltip();\n\n  return (\n    <>\n      <TertiaryButton icon={xIcon} {...targetProps} aria-label=\"Close\" />\n      <Popper placement=\"top\" {...popperProps}>\n        <TooltipContainer {...tooltipProps}>Close</TooltipContainer>\n      </Popper>\n    </>\n  );\n};\n```\n\n## Component API\n\n## Specifications\n\n",
+      mdxProse: "# Canvas Kit React Tooltips\n\nA Tooltip component that renders information/text when the user hovers over an element. A tooltip is\nused to label or describe an element. By default, a tooltip will label an element. This is useful\nfor buttons with icons. A tooltip can also be used to describe additional information about an\nelement\n\n[Workday Design Reference](https://design.workday.com/components/popups/tooltips)\n\n## Installation\n\n```sh\nyarn add @workday/canvas-kit-react\n```\n\n## Usage\n\nThis component follows the\n[W3 Tooltip specification](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). Tooltips are used to\nlabel buttons with icons and provide additional context to elements.\n\n### When to use tooltips\n\nUse a tooltip when you want to display additional information for users to better understand the\npurpose, context, or interaction.\n\n### When not to use tooltips\n\nWhen the visual text will be the exact same as what is visually displayed to the user without the\ntooltip being visible\n\n- Does this element need additional context or information?\n  - No: Don't use a tooltip\n  - Yes:\n    - Is the tooltip text useful to screen reader users?\n      - No: Use `type=\"muted\"` which will not make the tooltip visible to screen reader users\n      - Yes:\n        - Is the tooltip text different from the visual text displayed to users?\n          - No text: Use `type=\"label\"` which will add `aria-label` like the icon example\n          - Yes: Use `type=\"describe\"` which will add `aria-describedby`\n          - No: Don't use a tooltip\n\n### Basic Example\n\nHere is a basic example of a `TertiaryButton` that renders an icon using a tooltip to label the\nicon. This labels the button for both sighted users and screen readers. A tooltip provides an\n`aria-label` to child elements for the accessibility tree and a visual tooltip during mouse hover\nand focus events.\n```tsx\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {xIcon} from '@workday/canvas-system-icons-web';\n\nexport const Default = () => {\n  return (\n    <Tooltip title=\"Close\">\n      <TertiaryButton icon={xIcon} aria-label=\"Close\" />\n    </Tooltip>\n  );\n};\n```\n\n### Alt Example\n\nThe `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.\n```tsx\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {xIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst customStyles = createStyles({\n  background: system.color.bg.alt.default,\n  padding: system.padding.xl,\n});\n\nexport const Alt = () => {\n  return (\n    <div className={customStyles}>\n      <Tooltip title=\"Close\" variant=\"alt\">\n        <TertiaryButton icon={xIcon} aria-label=\"Close\" />\n      </Tooltip>\n    </div>\n  );\n};\n```\n\n### Describing an Element\n\nThe default mode for a tooltip is to label content via `aria-label`. If a tooltip is meant to\nprovide ancillary information, the `type` can be set to `describe`. This will add `aria-describedby`\nto the target element. This will allow screen reader users to hear the name of the control that is\nbeing focused and the ancillary tooltip information.\n```tsx\nimport {DeleteButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const DescribeType = () => {\n  return (\n    <Tooltip type=\"describe\" title=\"The service will restart after this action\">\n      <DeleteButton>Delete</DeleteButton>\n    </Tooltip>\n  );\n};\n```\n\n### Description of an Element\n\nThe default mode for a tooltip is to assign a name to the target element with an `aria-label`\nstring. If a tooltip is meant to provide ancillary information, the `type` can be set to `description`.\nThis will add `aria-description` strings to the target element instead. This variant is useful on\ntext buttons and other components that already have a label or name. Use this type instead of `describe` to ensure proper aria attributes are added to the dom regardless if the tooltip is visible.\n\n> **Note:** If you use `description` type and want to pass `jsx`, it **must\\* be inline and\n> **not\\*\\* a component to ensure the inner text is properly read by voiceover.\n>\n> ```jsx\n> // The text will be understood as: You must accept terms and conditions\n> <Tooltip type=\"description\" title={<span>You<i>must</i> accept terms and conditions</span>}/>\n>\n> // This will render a string including the html and will not be properly understood by voice over.\n> const MyComponent = () => <span>You<i>must</i> accept terms and conditions</span>\n> <Tool\n> ```\n```tsx\nimport {DeleteButton, SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Flex} from '@workday/canvas-kit-react/layout';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {configureIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nexport const DescriptionType = () => {\n  return (\n    <Flex cs={{gap: system.gap.sm}}>\n      <Tooltip type=\"description\" title=\"Search using additional criteria\">\n        <TertiaryButton icon={configureIcon}>Advanced Search</TertiaryButton>\n      </Tooltip>\n      <Tooltip type=\"description\" title=\"Create saved search\">\n        <SecondaryButton>Save</SecondaryButton>\n      </Tooltip>\n      <Tooltip type=\"description\" title=\"The service will restart after this action\">\n        <DeleteButton>Delete</DeleteButton>\n      </Tooltip>\n    </Flex>\n  );\n};\n```\n\n### Muted Tooltips\n\nIf a tooltip does not need to be visible to screen reader users, or you handle accessibility of the\ntooltip yourself, you can set the `type` to `muted`. This will not add any special ARIA attributes\nto the target element.\n```tsx\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const Muted = () => {\n  return (\n    <Tooltip title=\"Visual-only Tooltip\" type=\"muted\">\n      <span>Some text. The contents of the tooltip are invisible to screen reader users.</span>\n    </Tooltip>\n  );\n};\n```\n\n### Custom Content\n\nA tooltip can contain HTML, but should not contain any focusable elements or semantically meaningful\nformatting. The content will lose all semantic meaning when read by a screen reader. If complex\ncontent or a focusable element is needed by your UI, a tooltip is not a good choice. Consider using\na dialog instead.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const CustomContent = () => {\n  return (\n    <React.Fragment>\n      <Tooltip\n        type=\"describe\"\n        title={\n          <div>\n            This is a <em>custom</em> tooltip with <strong>custom HTML</strong>\n          </div>\n        }\n      >\n        <SecondaryButton>Hover Me</SecondaryButton>\n      </Tooltip>\n    </React.Fragment>\n  );\n};\n```\n\n### AI Disclosure\n\nUse a tooltip to disclose when content or functionality is powered by AI. Pair an icon button with a\ntooltip near the content it describes so users understand how it was produced before they act on it.\nThe tooltip labels the button, making the disclosure available to both sighted and screen reader\nusers.\n```tsx\nimport {ExternalHyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Card} from '@workday/canvas-kit-react/card';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {infoSparkleIcon} from '@workday/canvas-system-icons-web';\nimport {system} from '@workday/canvas-tokens-web';\n\nconst containerStyles = createStyles({\n  background: system.color.bg.alt.default,\n  padding: system.padding.xl,\n});\n\nexport const AIDisclosure = () => {\n  return (\n    <div className={containerStyles}>\n      <Card>\n        <Card.Heading>\n          Giant Pacific Octopus\n          <Tooltip title=\"This content is generated by AI\" variant=\"alt\" placement=\"right-end\">\n            <TertiaryButton\n              size=\"extraSmall\"\n              icon={infoSparkleIcon}\n              aria-label=\"This functionality is powered by AI\"\n            />\n          </Tooltip>\n        </Card.Heading>\n        <Card.Body>\n          The giant Pacific octopus (Enteroctopus dofleini), also known as the North Pacific giant\n          octopus, is a large marine cephalopod belonging to the genus Enteroctopus and\n          Enteroctopodidae family. \u2013{' '}\n          <ExternalHyperlink href=\"https://en.wikipedia.org/wiki/Giant_Pacific_octopus\">\n            View Source\n          </ExternalHyperlink>\n        </Card.Body>\n      </Card>\n    </div>\n  );\n};\n```\n\n### Delayed Tooltip\n\nThe default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can\ncontrol the length of the delay by providing custom `showDelay` and `hideDelay` in ms.\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const DelayedTooltip = () => {\n  return (\n    <React.Fragment>\n      <Tooltip type=\"describe\" title=\"Tooltip Text\" showDelay={2000} hideDelay={1000}>\n        <SecondaryButton>\n          Tooltip appears after 2 seconds and disappears after 1 second\n        </SecondaryButton>\n      </Tooltip>\n    </React.Fragment>\n  );\n};\n```\n\n### Placements\n\nThe tooltip allows for a `placement` configuration. The tooltip uses\n[PopperJS](https://popper.js.org/) to position tooltips, so any valid PopperJS placement is valid\nfor tooltips.\n```tsx\nimport {Card} from '@workday/canvas-kit-react/card';\nimport {Placement} from '@workday/canvas-kit-react/popup';\nimport {Tooltip} from '@workday/canvas-kit-react/tooltip';\nimport {createStyles} from '@workday/canvas-kit-styling';\nimport {base, system} from '@workday/canvas-tokens-web';\n\nconst placementCardStyles = createStyles({\n  boxShadow: system.depth[2],\n  display: 'flex',\n  width: base.size1300,\n  height: base.size1300,\n  justifyContent: 'space-around',\n  alignItems: 'center',\n  padding: system.padding.xxs,\n});\n\nconst blockStyles = createStyles({\n  padding: base.size1300, // give enough room for the tooltips to fit around their targets\n  display: 'grid',\n  gridTemplateColumns: '100px 320px 100px',\n  gridTemplateRows: '100px 320px 100px',\n});\n\nexport const Placements = () => {\n  const placementStyles = {\n    display: 'flex',\n    justifyContent: 'space-around',\n  };\n\n  const createPlacement = (placement: string, index) => {\n    return (\n      <Tooltip title=\"Add\" placement={placement as Placement} key={index}>\n        <Card cs={placementCardStyles}>\n          <Card.Body>{placement}</Card.Body>\n        </Card>\n      </Tooltip>\n    );\n  };\n\n  return (\n    <div className={blockStyles}>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'row'}}>\n        {['top-start', 'top', 'top-end'].map(createPlacement)}\n      </div>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'column'}}>\n        {['left-start', 'left', 'left-end'].map(createPlacement)}\n      </div>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'column'}}>\n        {['right-start', 'right', 'right-end'].map(createPlacement)}\n      </div>\n      <div />\n      <div style={{...placementStyles, flexDirection: 'row'}}>\n        {['bottom-start', 'bottom', 'bottom-end'].map(createPlacement)}\n      </div>\n      <div />\n    </div>\n  );\n};\n```\n\n### Tooltips on overflowing content\n\nThe `OverflowTooltip` component can be applied to any element that has some type of overflow\napplied, or has a child element that has overflow applied. The most common and widely supported type\nof truncation is the ellipsis.\n\n```css\noverflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap;\n```\n\n**Note**: Text truncation should be avoided if possible. A user should not have to activate a\ntooltip to access important content. If user-generated content is being truncated, the following\nsituation might occur which is a bad user experience. Consider the following list:\n\n- Home Site A\n- Home Site B\n- Home Site C\n\nIf the list items get truncated via an ellipsis, this is what the user could see:\n\n- Home Sit...\n- Home Sit...\n- Home Sit...\n\nHere are suggestions to try to avoid truncation:\n\n- Allow content to wrap instead\n- Limit character count in admin interfaces if possible to avoid need for truncation\n- Avoid fixed container sizes if possible to allow content to flow naturally\n\nIf truncation is required, here are a few guidelines to insure minimal impact on users:\n\n- Only truncate text of elements that naturally receive focus.\n  - Keyboard users can only activate tooltips with focus. Adding `tabindex=0` can give focus to\n    non-focusable elements, but increase the amount of tab stops for keyboard users.\n- Provide the full content elsewhere in the UI\n\nCanvas Kit Buttons have this style applied to the text inside them. `OverflowTooltip` in combination\nwith a max-width can show a tooltip only when overflow is detected:\n```tsx\nimport React from 'react';\n\nimport {SecondaryButton} from '@workday/canvas-kit-react/button';\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\nimport {px2rem} from '@workday/canvas-kit-styling';\nimport {resetIcon} from '@workday/canvas-system-icons-web';\n\nconst CustomContent = ({...elemProps}) => (\n  <button\n    style={{\n      marginBlockStart: px2rem(12),\n      maxWidth: px2rem(200),\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    }}\n    {...elemProps}\n  >\n    Super Mega Ultra Long Content With Max Width Custom\n  </button>\n);\n\nexport const Ellipsis = () => {\n  return (\n    <React.Fragment>\n      <OverflowTooltip>\n        <SecondaryButton>Short Content</SecondaryButton>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <SecondaryButton cs={{maxWidth: px2rem(200)}}>\n          Super Mega Ultra Long Content With Max Width On The Button\n        </SecondaryButton>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <SecondaryButton icon={resetIcon} cs={{maxWidth: px2rem(200)}}>\n          Super Mega Ultra Long Content With Max Width On The Button with Icon\n        </SecondaryButton>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <button\n          style={{\n            marginBlockStart: px2rem(12),\n            maxWidth: px2rem(200),\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          Super Mega Ultra Long Content With Max Width\n        </button>\n      </OverflowTooltip>\n      <OverflowTooltip>\n        <CustomContent />\n      </OverflowTooltip>\n      <OverflowTooltip showDelay={2000} hideDelay={2000}>\n        <SecondaryButton cs={{maxWidth: px2rem(200)}}>\n          2 second delay on show and hide content\n        </SecondaryButton>\n      </OverflowTooltip>\n    </React.Fragment>\n  );\n};\n```\n\n### Line Clamp\n\nThe `OverflowTooltip` can support various types of overflow. The component will first look for\n`text-overflow: ellipsis` and `-webkit-line-clamp`, but will fall back to\n`overflow: auto | scroll | clip | hidden`. These properties will be used to determine which\n`element` is experiencing an overflow. Overflow detection is as follows where `element` is\ndetermined by the above style properties:\n\n```js\nelement.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;\n```\n\nHere's an example using the `-webkit-line-clamp` property (multi-line ellipsis which works in all\nbrowsers):\n```tsx\nimport React from 'react';\n\nimport {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';\n\nexport const LineClamp = () => {\n  return (\n    <OverflowTooltip>\n      <button>\n        <span\n          style={{\n            display: '-webkit-box',\n            overflow: 'hidden',\n            maxWidth: 200,\n            WebkitBoxOrient: 'vertical',\n            WebkitLineClamp: 3,\n          }}\n        >\n          Super Mega Ultra Long Content With Max Width. Super Mega Ultra Long Content With Max\n          Width.\n        </span>\n      </button>\n    </OverflowTooltip>\n  );\n};\n```\n\nOther truncation techniques should be supported as well, even JavaScript ones as long as overflow is\ntriggered somehow and detectable differences in scroll size and client size.\n\n### The UseTooltip Hook\n\nThe `Tooltip` component is a combination of the `TooltipContainer` (a styled element), `Popper`\n(which uses PopperJS and the popup stack), the `useTooltip` hook and some behavior. If custom\nbehavior is required, these sub-components can be composed in a custom container element. This\nexample uses those parts directly while being functionally equivalent to the original basic example.\n```tsx\nimport React from 'react';\n\nimport {TertiaryButton} from '@workday/canvas-kit-react/button';\nimport {Popper} from '@workday/canvas-kit-react/popup';\nimport {TooltipContainer, useTooltip} from '@workday/canvas-kit-react/tooltip';\nimport {xIcon} from '@workday/canvas-system-icons-web';\n\nexport const UseTooltip = () => {\n  const {targetProps, popperProps, tooltipProps} = useTooltip();\n\n  return (\n    <>\n      <TertiaryButton icon={xIcon} {...targetProps} aria-label=\"Close\" />\n      <Popper placement=\"top\" {...popperProps}>\n        <TooltipContainer {...tooltipProps}>Close</TooltipContainer>\n      </Popper>\n    </>\n  );\n};\n```\n\n## Component API\n\n## Specifications\n\n",
       accessibilityProse: ""
     },
     toast: {