Skip to content

feat: SW-2592 raised surface for DataAppShellRightPanel - #217

Open
boramyi-ts wants to merge 1 commit into
mainfrom
SW-2592-right-panel-surface-only
Open

feat: SW-2592 raised surface for DataAppShellRightPanel#217
boramyi-ts wants to merge 1 commit into
mainfrom
SW-2592-right-panel-surface-only

Conversation

@boramyi-ts

@boramyi-ts boramyi-ts commented Sep 11, 2026

Copy link
Copy Markdown
Contributor

SW-2592 — AI Agent panel missing background color

The docked DataAppShellRightPanel painted bg-background — the same token as <body> — so it read as a column of the page rather than a surface on it. The only separation was border-l.

Fix

Give the docked panel and the overlay Sheet a raised bg-card surface with a tinted accent header cap, via a new surface prop ("raised" default | "flat").

Why bg-card, not the ticket's bg-sidebar

--sidebar is defined in dark, but maps to --surface — the same value as --background in dark — so bg-sidebar would reproduce the bug in dark (and disturb the nav). bg-card = --surface-bright is genuinely raised in both themes.

Token Light Dark Raised vs body?
bg-background (before) #FAFBFC #1C1B21 ❌ it is the body
bg-sidebar (ticket idea) #FFFFFF #1C1B21 only light
bg-card (this PR) #FFFFFF #313036 ✅ both

Before → After

Light — before the panel is the same colour as the content ground; after it's a raised card with an accent header cap.

Before (light) After (light)
before light after light

Dark

Before (dark) After (dark)
before dark after dark

Scope

  • Surface only — no docking / side changes (left/bottom docking was explicitly out of scope for DataAppShell).
  • Matches the tokens used in the sibling AssistantLayout PR (feat: SW-2592 differentiate the assistant panel in AssistantLayout #216) so the two panel systems agree.
  • ai/suggestion + ai/prompt-input need no change — they're transparent and now inherit the raised surface, so apps can drop their bg-card compensation.

Testing

  • yarn typecheck ✓ · yarn lint ✓ (0 warnings) · Storybook play 4/4, incl. a surface assertion in With Right Panel: panel bg ≠ page ground, and header cap ≠ panel body.

🤖 Generated with Claude Code

The docked panel painted bg-background — the same token as <body> — so it
read as a column of the page rather than a surface on it. Give it (and the
overlay Sheet) a bg-card surface with a tinted accent header cap via a new
`surface` prop ("raised" default | "flat").

bg-card maps to --surface-bright in both themes, so it stays raised in dark
where bg-sidebar (which resolves to --surface = the body colour in dark)
would not. Surface only — no docking changes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@boramyi-ts
boramyi-ts requested review from a team as code owners September 11, 2026 14:34
@boramyi-ts
boramyi-ts requested a review from a team as a code owner September 11, 2026 14:34
@vercel

vercel Bot commented Sep 11, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated
ts-lib-ui-kit-storybook Ignored Ignored Sep 11, 2026 2:36pm UTC

Request Review

@unblocked unblocked Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No issues found

About Unblocked

Unblocked has been set up to automatically review your team's pull requests to identify genuine bugs and issues.

📖 Documentation — Learn more in our docs.

💬 Ask questions — Mention @unblocked to request a review or summary, or ask follow-up questions.

👍 Give feedback — React to comments with 👍 or 👎 to help us improve.

⚙️ Customize — Adjust settings in your preferences.

@github-actions

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 96.94% (🎯 83%)
🟰 ±0%
24734 / 25513
🟢 Statements 96.94% (🎯 83%)
🟰 ±0%
24734 / 25513
🟢 Functions 94.61% (🎯 74%)
🟰 ±0%
1178 / 1245
🟢 Branches 90.74% (🎯 81%)
⬇️ -0.03%
4982 / 5490
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/components/composed/DataAppShell/RightPanel.tsx 98.61%
⬆️ +0.03%
82.85%
⬇️ -2.44%
93.33%
🟰 ±0%
98.61%
⬆️ +0.03%
36-37, 194-195
Generated in workflow #1239 for commit db93063 by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants