Skip to content

feat: Toast support for leadingIcon and update default styles#764

Open
rohanchkrabrty wants to merge 5 commits intomainfrom
worktree-toast-leadingicon-and-styles
Open

feat: Toast support for leadingIcon and update default styles#764
rohanchkrabrty wants to merge 5 commits intomainfrom
worktree-toast-leadingicon-and-styles

Conversation

@rohanchkrabrty
Copy link
Copy Markdown
Contributor

@rohanchkrabrty rohanchkrabrty commented Apr 29, 2026

Summary

  • Add leadingIcon prop to toastManager.add/update and Toast.createToastManager, lifting it onto Base UI's typed data slot via a wrapper.
  • Map success/error/warning/info/loading toast types to default Radix icons (with apsara Spinner for loading); explicit leadingIcon still wins.
  • Restructure toast layout to match Figma: header row (icon + title + actions) and a separate description row indented to align under the title; description color updated to foreground-base-primary.
  • Title-only toasts render with the description text style so they don't look outsized; only the icon is colored by type — the surface stays neutral.
  • Replace the static demo at the top of the toast docs with an interactive playground (title, description, type, actionButton toggle) and add tests for the new behaviors.

rohanchkrabrty and others added 5 commits April 30, 2026 00:20
@rohanchkrabrty @claude
feat(toast): add leadingIcon support and align styles with Figma
a0adc38 
- Add `leadingIcon` prop to toastManager.add/update and Toast.createToastManager
  by lifting it onto Base UI's typed `data` slot via a wrapper.
- Render the leading icon before the title; color is driven by toast `type`
  (success/error/warning/info), the toast container itself stays neutral.
- Drop typed background/border/text-color overrides so success/error/info/
  warning toasts share the default surface — only the icon color changes.
- Tighten content alignment: center title-only toasts, top-align when a
  description is present.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@rohanchkrabrty @claude
feat(toast): default leading icons per type
de3506a 
Map success/error/warning/info/loading toast types to Radix icons
(CheckCircled / CrossCircled / ExclamationTriangle / InfoCircled) and
the apsara Spinner for loading. Untyped toasts fall back to
InfoCircledIcon with the existing base-secondary color. Explicit
`leadingIcon` still wins.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@rohanchkrabrty @claude
fix(toast): match Figma layout and description color
13abe21 
- Description text color: base-secondary -> base-primary
  (Figma node 3594:25050 specifies foreground-base-primary).
- Restructure content into a header row (icon + title + actions)
  followed by a separate description row indented 24px (rs-space-7),
  matching the Figma column layout instead of stacking title/desc
  next to the icon.
- Header row gets gap=5 between left and actions, gap=3 between
  icon and title; min-height = rs-space-7 to keep title-only toasts
  consistent.
- Title now always uses .title styling (was swapping to .description
  styling for title-only toasts).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@rohanchkrabrty @claude
fix(toast): shrink title to description style for title-only toasts
e066461 
When a toast has a title but no description, render the title with
.description style (12px regular) rather than .title style (14px medium)
so the toast doesn't look outsized for a single short message.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@rohanchkrabrty @claude
docs(toast): add interactive playground
f1792bf 
Adds a playground demo with controls for title, description, type, and
an actionButton boolean toggle. Empty title/description strings are
omitted from the toastManager.add call so users can test partial
configurations. Replaces the static preview Demo at the top of the
toast docs page with the playground.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@rohanchkrabrty rohanchkrabrty self-assigned this Apr 29, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
apsara Ready Ready Preview, Comment Apr 29, 2026 8:50pm

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 29, 2026

Warning

Rate limit exceeded

@rohanchkrabrty has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 25 minutes and 44 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a7540ae2-ce10-4288-830a-30f32fb6d4dc

📥 Commits

Reviewing files that changed from the base of the PR and between fddcf49 and f1792bf.

📒 Files selected for processing (9)
  • apps/www/src/content/docs/components/toast/demo.ts
  • apps/www/src/content/docs/components/toast/index.mdx
  • apps/www/src/content/docs/components/toast/props.ts
  • packages/raystack/components/toast/__tests__/toast.test.tsx
  • packages/raystack/components/toast/toast-manager.ts
  • packages/raystack/components/toast/toast-provider.tsx
  • packages/raystack/components/toast/toast-root.tsx
  • packages/raystack/components/toast/toast.module.css
  • packages/raystack/components/toast/toast.tsx

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.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 25 minutes and 44 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

@rohanchkrabrty rohanchkrabrty changed the title feat(toast): leading icons and Figma-aligned styles feat: Toast support for leadingIcon and update styles Apr 29, 2026
@rohanchkrabrty rohanchkrabrty changed the title feat: Toast support for leadingIcon and update styles feat: Toast support for leadingIcon and update default styles Apr 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rohilsurana rohilsurana Awaiting requested review from rohilsurana

@rsbh rsbh Awaiting requested review from rsbh

@paanSinghCoder paanSinghCoder Awaiting requested review from paanSinghCoder

At least 1 approving review is required to merge this pull request.

Assignees

@rohanchkrabrty rohanchkrabrty

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@rohanchkrabrty