feat: Update Segmented Control and Action per Sana Canvas updates#4048
Open
mannycarrera4 wants to merge 19 commits into
Open
feat: Update Segmented Control and Action per Sana Canvas updates#4048mannycarrera4 wants to merge 19 commits into
mannycarrera4 wants to merge 19 commits into
Conversation
📝 WalkthroughWalkthroughThis PR updates styling tokens for the ActionBarList and SegmentedControl (List and Item) components, switching padding, border-radius, background, gap, and typography values to new system/base legacy tokens. It also updates v16 upgrade guide documentation (markdown and MDX) and the MCP config to reference the new guide file. ChangesComponent styling and docs
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
Workday/canvas-kit
 |
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
mc-segmented-control-sana
|
| Run status |
|
| Run duration | 02m 32s |
| Commit |
|
| Committer | Manuel Carrera |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
 |
0
|
 |
0
|
 |
17
|
 |
0
|
 |
809
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
19.53%
|
|
|---|---|
|
|
1539
|
|
|
371
|
Accessibility
99.41%
|
|
|---|---|
|
|
5 critical
5 serious
0 moderate
2 minor
|
|
|
72
|
…arrera4/canvas-kit into mc-segmented-control-sana
…arrera4/canvas-kit into mc-segmented-control-sana
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx (1)
30-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse spaces instead of tab for TOC indentation.
Line 30 uses a tab character while all other TOC entries use spaces.
📝 Proposed fix
- - [Segmented Control](`#segmented-control`) + - [Segmented Control](`#segmented-control`)🤖 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/mdx/16.0-UPGRADE-GUIDE.mdx` at line 30, The TOC entry for Segmented Control uses a tab for indentation while the rest of the markdown table of contents uses spaces. Update the markdown list item in the TOC to use the same space-based indentation style as the other entries so formatting stays consistent across the 16.0-UPGRADE-GUIDE.mdx document.modules/react/segmented-control/lib/SegmentedControlItem.tsx (2)
105-105: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove commented-out dead code.
The commented-out border token line is dead code. Since the pressed state now uses
boxShadowinstead of a border (as documented in the upgrade guide), this line should be removed for clarity.♻️ Proposed fix
"&[aria-pressed='true']": { [buttonStencil.vars.background]: system.legacy.color.surface.default, - // [buttonStencil.vars.border]: system.color.border.inverse.default, [systemIconStencil.vars.color]: system.color.fg.strong,🤖 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/react/segmented-control/lib/SegmentedControlItem.tsx` at line 105, Remove the commented-out border token from SegmentedControlItem so the pressed-state styling no longer contains dead code. Update the SegmentedControlItem component by deleting the obsolete commented line near the boxShadow-based pressed state styling, keeping the current press visual behavior aligned with the upgrade guide and preserving only the active styling logic.
110-113: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRedundant hover block inside pressed state.
The
&:hover, &.hoverblock at lines 110-113 sets[systemIconStencil.vars.color]and[buttonStencil.vars.label]tosystem.color.fg.strong, but the parent&[aria-pressed='true']block already sets these exact values at lines 106-107. This block has no effect and can be removed.♻️ Proposed fix
boxShadow: system.depth[2], - '&:hover, &.hover': { - [systemIconStencil.vars.color]: system.color.fg.strong, - [buttonStencil.vars.label]: system.color.fg.strong, - }, - '&:focus-visible, &.focus': {🤖 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/react/segmented-control/lib/SegmentedControlItem.tsx` around lines 110 - 113, The hover block inside the pressed-state styles in SegmentedControlItem is redundant because `&[aria-pressed='true']` already applies the same `systemIconStencil.vars.color` and `buttonStencil.vars.label` values. Remove the `&:hover, &.hover` override from the styled item so the `SegmentedControlItem` styling stays simpler and avoids duplicate rules.modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md (1)
26-26: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse spaces instead of tab for TOC indentation.
Line 26 uses a tab character for indentation while all other TOC entries use spaces. This inconsistency can cause rendering issues in some Markdown parsers.
📝 Proposed fix
- - [Segmented Control](`#segmented-control`) + - [Segmented Control](`#segmented-control`)🤖 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` at line 26, The TOC entry for Segmented Control uses a tab instead of spaces, which makes the indentation inconsistent with the other entries. Update the markdown in the upgrade guide TOC so the Segmented Control anchor line matches the same space-based indentation style used by the rest of the table of contents, keeping the entry under the existing TOC block.
🤖 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 249-265: The Segmented Control upgrade guide has a duplicated
“Visual Updates” heading and a hyphenation issue in the size/weight bullets. In
the markdown section for the upgrade guide, keep only one `#### Visual Updates`
heading and change the “semi bold” wording to “semi-bold” so the content passes
markdownlint and LanguageTool. Use the existing Segmented Control subsection to
locate and clean up the repeated heading and bullet text.
In `@modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx`:
- Around line 255-271: The Segmented Control upgrade notes in the MDX guide have
a duplicated “Visual Updates” heading and a hyphenation issue in the font-weight
note. In the documentation content for the Segmented Control section, remove the
extra repeated “#### Visual Updates” heading and update the “semi bold” text to
“semi-bold” so the section reads cleanly.
---
Nitpick comments:
In `@modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md`:
- Line 26: The TOC entry for Segmented Control uses a tab instead of spaces,
which makes the indentation inconsistent with the other entries. Update the
markdown in the upgrade guide TOC so the Segmented Control anchor line matches
the same space-based indentation style used by the rest of the table of
contents, keeping the entry under the existing TOC block.
In `@modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx`:
- Line 30: The TOC entry for Segmented Control uses a tab for indentation while
the rest of the markdown table of contents uses spaces. Update the markdown list
item in the TOC to use the same space-based indentation style as the other
entries so formatting stays consistent across the 16.0-UPGRADE-GUIDE.mdx
document.
In `@modules/react/segmented-control/lib/SegmentedControlItem.tsx`:
- Line 105: Remove the commented-out border token from SegmentedControlItem so
the pressed-state styling no longer contains dead code. Update the
SegmentedControlItem component by deleting the obsolete commented line near the
boxShadow-based pressed state styling, keeping the current press visual behavior
aligned with the upgrade guide and preserving only the active styling logic.
- Around line 110-113: The hover block inside the pressed-state styles in
SegmentedControlItem is redundant because `&[aria-pressed='true']` already
applies the same `systemIconStencil.vars.color` and `buttonStencil.vars.label`
values. Remove the `&:hover, &.hover` override from the styled item so the
`SegmentedControlItem` styling stays simpler and avoids duplicate rules.
🪄 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: 765fb73b-4a4e-41c1-9145-0bacd3007954
📒 Files selected for processing (6)
modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.mdmodules/docs/mdx/16.0-UPGRADE-GUIDE.mdxmodules/mcp/lib/config.jsonmodules/react/action-bar/lib/ActionBarList.tsxmodules/react/segmented-control/lib/SegmentedControlItem.tsxmodules/react/segmented-control/lib/SegmentedControlList.tsx
mannycarrera4
commented
Jul 9, 2026
| "upgrade-guides/13.0-UPGRADE-GUIDE.md", | ||
| "upgrade-guides/14.0-UPGRADE-GUIDE.md", | ||
| "upgrade-guides/15.0-UPGRADE-GUIDE.md", | ||
| "upgrade-guides/16.0-UPGRADE-GUIDE.md", |
Contributor
Author
There was a problem hiding this comment.
adding this to the MCP
mannycarrera4
changed the title
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
1 participant
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: #3977
Release Category
Components
Release Note
Segmented Control
surface.alt.strongtosurface.alt.default(a lighter background color).shape.full(full rounded corners) on the container.gap.sm(8px) togap.xs(4px).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
New Features
Style