feat: Update Segmented Control and Action per Sana Canvas updates#4048
feat: Update Segmented Control and Action per Sana Canvas updates#4048mannycarrera4 wants to merge 25 commits into
Conversation
|
Warning Review limit reached
Next review available in: 24 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR updates Action Bar and Segmented Control styling tokens, wires Segmented Control sizing through its list stencil, documents v16 visual changes, and registers the markdown upgrade guide in MCP configuration. ChangesComponent styling and documentation
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: 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 20s |
| 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.5%
|
|
|---|---|
|
|
1542
|
|
|
371
|
Accessibility
99.37%
|
|
|---|---|
|
|
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
| "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", |
There was a problem hiding this comment.
adding this to the MCP
mannycarrera4
changed the title
williamjstanton
left a comment
williamjstanton
left a comment
There was a problem hiding this comment.
Looks good! Just adding this feedback to a file that wasn't in the diff:
SegmentedControl.mdx lines 71-74
Medium: The docs say icon-only tooltip text is “announced along with” the button role/state, but the implementation actually uses the tooltip title as the button’s accessible name by default. That difference matters for consumers copying examples.
Recommendation:
I’d reword this to say icon-only items must have an accessible name, supplied by visible text, aria-label, or a Tooltip in label mode.
| - [Color Input](#color-input) | ||
| - [Color Picker](#color-picker) | ||
| - [Form Field](#form-field) | ||
| - [Segmented Control](#segmented-control) |
There was a problem hiding this comment.
Low: The upgrade guide’s table of contents nests Text Area and Text Input under Segmented Control, is there an indentation mistake here?
Actually shouldn't this go underneath button? (Sibling to Delete?)
| - [Color Input](#color-input) | ||
| - [Color Picker](#color-picker) | ||
| - [Form Field](#form-field) | ||
| - [Segmented Control](#segmented-control) |
There was a problem hiding this comment.
See same comment in mdx upgrade guide.
| position: 'fixed', | ||
| insetBlockEnd: 0, | ||
| insetInline: 0, | ||
| '@media (max-width: 767.5px)': { |
There was a problem hiding this comment.
Do we want to call out this padding change on mobile widths in the upgrade guide?
There was a problem hiding this comment.
ah yeah good call ty
| modifiers: {size: 'small', variant: 'iconWithText'}, | ||
| styles: { | ||
| paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`, | ||
| paddingInline: `${base.size75} ${system.legacy.padding.xs}`, |
There was a problem hiding this comment.
Do we want to use base.legacy.size75 here instead so we have a fallback value?
| height: system.legacy.size.sm, | ||
| height: base.legacy.size350, | ||
| fontWeight: system.sana.fontWeight.semibold, | ||
| [systemIconStencil.vars.size]: 14, |
There was a problem hiding this comment.
I'm guessing we couldn't make this work with one of our standard icon sizes so we have to hardcode the 14?
sheelah
left a comment
sheelah
left a comment
There was a problem hiding this comment.
LG! Left a couple minor comments.
mannycarrera4
added
approved
| - [Color Input](#color-input) | ||
| - [Color Picker](#color-picker) | ||
| - [Form Field](#form-field) | ||
| - [Segmented Control](#segmented-control) | ||
| - [Text Area](#text-area) | ||
| - [Text Input](#text-input) |
There was a problem hiding this comment.
all input components should be under inputs sections and there is should be accessibility note about bg color change. I see it in line 28th here, so seems like problem with merge conflict
| fontSize: system.legacy.fontSize.subtext.lg, | ||
| lineHeight: system.legacy.lineHeight.subtext.lg, | ||
| letterSpacing: system.legacy.letterSpacing.subtext.lg, |
There was a problem hiding this comment.
you can replace that by ...system.legacy.type.subtext.lg as it's got fixed
| mixinColor: system.legacy.color.surface.overlay.mixin, | ||
| mixinValue: system.legacy.opacity.surface.hover, | ||
| }), | ||
| [buttonStencil.vars.background]: system.color.surface.overlay.hover.default, |
There was a problem hiding this comment.
system.legacy.color.surface.overlay.hover.default
There was a problem hiding this comment.
why is this legacy? didn't we have this in previous versions?
| mixinColor: system.legacy.color.surface.overlay.mixin, | ||
| mixinValue: system.legacy.opacity.surface.pressed, | ||
| }), | ||
| [buttonStencil.vars.background]: system.color.surface.overlay.pressed.default, |
RayRedGoose
left a comment
RayRedGoose
left a comment
There was a problem hiding this comment.
some tokens needs to be from system.legacy.* object to provide fallback
| }, | ||
|
|
||
| '&:focus-visible, &.focus': { | ||
| boxShadow: `0 0 0 ${px2rem(2)} ${system.color.border.inverse.default},0 0 0 ${px2rem(4)} ${system.color.brand.border.primary}`, |
There was a problem hiding this comment.
should be legacy tokens here
RayRedGoose
added
ready for review
|
approved label can be added if PR approved by William and one eng from the canvas team |
4 participants
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