feat: Update Toast and Tooltip styles to match Sana#4053
Open
RayRedGoose wants to merge 7 commits into
Open
Conversation
📝 WalkthroughWalkthroughToast and Tooltip receive updated v16 styling. KBD gains an “In Tooltip” example and story, Checkbox disabled opacity is removed, and the v16 upgrade guides document component and codemod updates. Changesv16 component and guide updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates Toast and Tooltip component styling to align with Sana/v16 visual design, and documents these changes in the v16 upgrade guide. Also adds a KBD Storybook example demonstrating use of KBD within a Tooltip title.
Changes:
- Restyles
TooltipContainer(type level, padding, light surface + border, rounding, spacing). - Restyles
Toastcontainer and subcomponents (container padding/gap/border/shadow, icon sizing, close icon positioning/size, body spacing). - Adds KBD “In Tooltip” Storybook example and updates v16 upgrade guides (MDX + LLM copy) with Toast/Tooltip notes.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| modules/react/tooltip/lib/TooltipContainer.tsx | Tooltip container visual/token updates for Sana styling |
| modules/react/toast/lib/Toast.tsx | Toast container layout + v16 token styling (padding, border, surface, shadow) |
| modules/react/toast/lib/ToastBody.tsx | Adjust Toast body spacing to match new container padding strategy |
| modules/react/toast/lib/ToastIcon.tsx | Update Toast icon sizing approach |
| modules/react/toast/lib/ToastCloseIcon.tsx | Update close icon positioning and size |
| modules/labs-react/kbd/stories/KBD.stories.tsx | Adds new “InTooltip” story export |
| modules/labs-react/kbd/stories/KBD.mdx | Documents new “In Tooltip” example usage |
| modules/labs-react/kbd/stories/examples/InTooltip.tsx | New example showing KBD content within Tooltip title |
| modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | Adds Toast/Tooltip upgrade notes |
| modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md | Mirrors upgrade notes for LLM docs |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
modules/labs-react/kbd/stories/examples/InTooltip.tsx (1)
24-31: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSimplify the KBD nesting structure.
The current structure nests
KBDinsideKBD.Iteminside an outerKBD, which is more complex than the documented pattern. The standard usage shown inKBD.mdxis a flatKBDwithKBD.Itemchildren. The outerKBDand its singleKBD.Itemwrapper add no visual or semantic value.♻️ Proposed simplification
- <KBD aria-keyshortcuts="Command+P"> - <KBD.Item> - <KBD variant="plain"> - <KBD.Item>⌘</KBD.Item> - <KBD.Item>C</KBD.Item> - </KBD> - </KBD.Item> - </KBD> + <KBD variant="plain"> + <KBD.Item aria-label="Command">⌘</KBD.Item> + <KBD.Item>C</KBD.Item> + </KBD>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@modules/labs-react/kbd/stories/examples/InTooltip.tsx` around lines 24 - 31, The KBD example uses an unnecessary nested wrapper pattern, with a KBD inside KBD.Item inside an outer KBD, which should be simplified to the documented flat KBD composition. Update the InTooltip story to use the KBD component directly with KBD.Item children, removing the extra outer KBD and the single-item wrapper while preserving the same displayed shortcut keys and aria-keyshortcuts behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md`:
- Around line 261-273: The Toast entry in the upgrade guide is missing the
standard PR reference used by other Component Updates sections. Update the Toast
section in the docs upgrade guide to include a matching PR link, following the
same `**PR:**` pattern as Avatar, Buttons, and Card so it is consistent and
traceable.
In `@modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx`:
- Around line 267-279: The Toast section under Component Updates is missing the
standard PR reference used by the other component entries. Update the Toast
subsection in the upgrade guide to include a matching `**PR:**` link for
traceability, consistent with the Avatar, Buttons, and Card sections, and place
it alongside the existing Toast notes so the section format stays uniform.
In `@modules/labs-react/kbd/stories/examples/InTooltip.tsx`:
- Around line 24-35: Update the InTooltip example to add accessible names where
assistive text is missing: in the KBD composition, give the glyph item for ⌘ an
aria-label with the spoken modifier name, and give the icon-only SecondaryButton
an aria-label that describes its action. Use the existing KBD and
SecondaryButton usages in InTooltip.tsx to locate the spots and keep the visible
UI unchanged.
- Around line 24-31: The shortcut metadata is attached to the wrong element and
uses the wrong value: in the InTooltip example, `aria-keyshortcuts` on the `KBD`
display should be changed to match the visual shortcut (`Command+C`), and the
actual `aria-keyshortcuts` should be moved onto the `SecondaryButton` control
that the shortcut activates. Update the `KBD`/`KBD.Item` tooltip markup
accordingly so the accessible shortcut exposed to assistive tech matches the
displayed keys and follows the documented pattern.
---
Nitpick comments:
In `@modules/labs-react/kbd/stories/examples/InTooltip.tsx`:
- Around line 24-31: The KBD example uses an unnecessary nested wrapper pattern,
with a KBD inside KBD.Item inside an outer KBD, which should be simplified to
the documented flat KBD composition. Update the InTooltip story to use the KBD
component directly with KBD.Item children, removing the extra outer KBD and the
single-item wrapper while preserving the same displayed shortcut keys and
aria-keyshortcuts behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: e2eea64a-0a8c-46b2-8322-3f722ce09f5f
📒 Files selected for processing (10)
modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.mdmodules/docs/mdx/16.0-UPGRADE-GUIDE.mdxmodules/labs-react/kbd/stories/KBD.mdxmodules/labs-react/kbd/stories/KBD.stories.tsxmodules/labs-react/kbd/stories/examples/InTooltip.tsxmodules/react/toast/lib/Toast.tsxmodules/react/toast/lib/ToastBody.tsxmodules/react/toast/lib/ToastCloseIcon.tsxmodules/react/toast/lib/ToastIcon.tsxmodules/react/tooltip/lib/TooltipContainer.tsx
Workday/canvas-kit
 |
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
issue3989_toast-tooltip
|
| Run status |
|
| Run duration | 02m 25s |
| Commit |
|
| Committer | Raisa Primerova |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
 |
0
|
 |
0
|
 |
17
|
 |
0
|
 |
809
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
19.58%
|
|
|---|---|
|
|
1534
|
|
|
371
|
Accessibility
99.37%
|
|
|---|---|
|
|
5 critical
5 serious
0 moderate
2 minor
|
|
|
72
|
…ose/canvas-kit into issue3989_toast-tooltip
sheelah
reviewed
Jul 9, 2026
sheelah
reviewed
Jul 9, 2026
sheelah
reviewed
Jul 9, 2026
sheelah
reviewed
Jul 9, 2026
sheelah
left a comment
sheelah
left a comment
Contributor
There was a problem hiding this comment.
LG! Left just a few minor comments.
williamjstanton
requested changes
Jul 10, 2026
williamjstanton
left a comment
williamjstanton
left a comment
Collaborator
There was a problem hiding this comment.
Looks good!
I think I missed some things in the KBD PR examples and we may need to polish many if not all of them. :(
aria-keyshortcutsisn't supposed to go on the presentationalKBDwrapper, it should be on the interactive control witht he key listener.- The
<KBD.Item>components that use glyphs need translatedaria-labelstrings. (E.g. "Command", "Control", etc. )
| @@ -54,34 +54,28 @@ export const tooltipContainerStencil = createStencil({ | |||
| tooltipTransformOriginVertical: '', | |||
| }, | |||
| base: ({tooltipTransformOriginHorizontal, tooltipTransformOriginVertical}) => ({ | |||
Collaborator
There was a problem hiding this comment.
Toast and Tooltip should include explicit Windows High Contrast support after this restyle. Tooltip removed the previous transparent outline pattern called out in our accessibility guidance, and both components now rely on token borders/backgrounds plus shadows. In forced-colors mode, shadows disappear and authored colors may be overridden, so we should add @media (forced-colors: active) styles that preserve a visible boundary and readable foreground/background using system colors.
E.g.: CanvasText
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color
| paddingInline: `${system.padding.md} ${system.padding.xl}`, | ||
| gap: base.size150, | ||
| borderRadius: system.shape.xl, | ||
| border: `${px2rem(1)} solid ${system.color.border.default}`, |
Collaborator
There was a problem hiding this comment.
Refer to same comment about forced color fall-back on TooltipContainer.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md`:
- Around line 73-76: Fix both codemod instruction sections by placing the
opening ```sh fence on its own line, putting the complete npx command on the
following line, and closing with a standard ``` fence; update both the v16
command section and the ${canvasKitMajorVersionNumber} section.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 13cc83d5-10ce-4515-9a85-54dc60d57a63
📒 Files selected for processing (5)
modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.mdmodules/docs/mdx/16.0-UPGRADE-GUIDE.mdxmodules/labs-react/kbd/stories/examples/InTooltip.tsxmodules/react/checkbox/lib/CheckboxContainer.tsxmodules/react/toast/lib/Toast.tsx
✅ Files skipped from review due to trivial changes (1)
- modules/react/checkbox/lib/CheckboxContainer.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- modules/react/toast/lib/Toast.tsx
- modules/labs-react/kbd/stories/examples/InTooltip.tsx
Comment on lines
+73
to
+76
| The easiest way to run our codemod is to use `npx` in your terminal.```sh npx | ||
| @workday/canvas-kit-codemod v16 [path] | ||
|
|
||
| ```` |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Fix broken code fence formatting in codemod instructions.
The opening code fence ```sh is concatenated with the preceding text on the same line (e.g., ...in your terminal.```sh npx), which prevents markdown parsers from recognizing it as a fenced code block. The npx command text is also on the same line as the fence opening. This appears in both the first codemod instructions section (lines 73–76) and the second one (lines 450–453).
📝 Proposed fix for lines 73–76
-The easiest way to run our codemod is to use `npx` in your terminal.```sh npx
-@workday/canvas-kit-codemod v16 [path]
-
-````
+The easiest way to run our codemod is to use `npx` in your terminal.
+
+```sh
+npx `@workday/canvas-kit-codemod` v16 [path]
+```Proposed fix for lines 450–453
-The easiest way to run our codemod is to use `npx` in your terminal.```sh npx
-@workday/canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
-
-````
+The easiest way to run our codemod is to use `npx` in your terminal.
+
+```sh
+npx `@workday/canvas-kit-codemod` v${canvasKitMajorVersionNumber} [path]
+```Also applies to: 450-453
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 76-76: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md` around lines 73 - 76,
Fix both codemod instruction sections by placing the opening ```sh fence on its
own line, putting the complete npx command on the following line, and closing
with a standard ``` fence; update both the v16 command section and the
${canvasKitMajorVersionNumber} section.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes: #3989
Update Toast and Tooltip styles to match Sana
Release Category
Components
Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Thank You Gif (optional)
Summary by CodeRabbit