Skip to content

refactor: replace one-off props with shared names - #980

Open
rohanchkrabrty wants to merge 2 commits into
mainfrom
refactor/one-off-props
Open

rohanchkrabrty wants to merge 2 commits into
mainfrom
refactor/one-off-props

Conversation

@rohanchkrabrty

Copy link
Copy Markdown
Contributor

Summary

  • Remove width from Command.DialogContent and Search. Set the palette width with className or style. Search fills its parent's width from CSS, so the inline style is gone and the default does not change.
  • Rename Skeleton borderRadius to radius, and add radius to Toast.Provider and Toast. Both use the shared none | small | medium | large | full scale that Button, Dialog and Command use. Default radii do not change.
  • Rename Breadcrumb.Item current to active, as on Sidebar.Item.
  • Replace DatePicker onErrorChange and FilterChip calendarProps.onErrorChange with onValidityChange, the callback CalendarPreview.Input already has.
  • Let Flex and Grid gap, columnGap and rowGap take 0. Add the old to new mappings to the Upgrading page.

Decisions where the proposal is silent:

  • The typed-date callback is onValidityChange(validity: { valid: boolean; reason?: 'unparseable' | 'out-of-bounds' | 'unavailable' | 'out-of-order'; message?: string }), the name and type CalendarPreview.Input already uses. DatePicker reports unparseable or out-of-bounds with the message 'Invalid date', and fires when the reason changes. It has one argument. The details argument from the change-callbacks proposal is not added.
  • FilterChip keeps a top-level calendarProps.onValidityChange (renamed from onErrorChange), so its API matches DatePicker. calendarProps.slotProps.input.onValidityChange still works.
  • The active Breadcrumb item renders data-active="true" in place of data-current="true", to match the prop and Sidebar.Item.
  • Search omits width from its props, so TypeScript reports old usages. The docs tell users to size the parent.
  • Toast radius is on Toast.Provider, next to position, and applies to every toast it renders.
  • docs/V1-migration.md and the RFCs keep the old names, because they describe earlier releases.

No open PR covers this change. Search size and variant are changed in separate PRs.

Checks run: pnpm lint, pnpm exec tsc --noEmit in packages/react, and pnpm test:apsara pass. I compared the Skeleton, Breadcrumb, Search, Navbar, Command (and the docs search dialog), Calendar, FilterChip, Flex, Grid, Toast and DataView pages on a local dev server with the deployed docs (main). Skeleton and Command were checked in light and dark themes, the other pages in one of them. Sizes, radii and colors match. I also checked gap 0 in the Flex and Grid playgrounds and the DatePicker Field error.

Remove Command.DialogContent width and Search width. Rename Skeleton
borderRadius to radius and Breadcrumb.Item current to active. Merge
DatePicker and FilterChip onErrorChange into onValidityChange, as on
CalendarPreview.Input. Add gap 0 to Flex and Grid, and radius to Toast.
@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
apsara Ready Ready Preview Oct 21, 2026 7:01am UTC

@coderabbitai

coderabbitai Bot commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: b1179abf-a28c-4118-8f15-2f541f9b1d6a
📥 Commits

Reviewing files that changed from the base of the PR and between 5a54d44 and da024f2.

📒 Files selected for processing: 47
  • .agents/skills/apsara/references/tokens.md
  • apps/www/src/components/docs/navbar.tsx
  • apps/www/src/components/docs/search.module.css
  • apps/www/src/components/docs/search.tsx
  • apps/www/src/content/docs/(overview)/upgrading.mdx
  • apps/www/src/content/docs/components/breadcrumb/demo.ts
  • apps/www/src/content/docs/components/breadcrumb/index.mdx
  • apps/www/src/content/docs/components/breadcrumb/props.ts
  • apps/www/src/content/docs/components/calendar/demo.ts
  • apps/www/src/content/docs/components/calendar/index.mdx
  • apps/www/src/content/docs/components/calendar/props.ts
  • apps/www/src/content/docs/components/command/index.mdx
  • apps/www/src/content/docs/components/command/props.ts
  • apps/www/src/content/docs/components/filter-chip/props.ts
  • apps/www/src/content/docs/components/flex/demo.ts
  • apps/www/src/content/docs/components/flex/props.ts
  • apps/www/src/content/docs/components/grid/demo.ts
  • apps/www/src/content/docs/components/grid/props.ts
  • apps/www/src/content/docs/components/search/index.mdx
  • apps/www/src/content/docs/components/skeleton/demo.ts
  • apps/www/src/content/docs/components/skeleton/index.mdx
  • apps/www/src/content/docs/components/skeleton/props.ts
  • apps/www/src/content/docs/components/toast/index.mdx
  • apps/www/src/content/docs/components/toast/props.ts
  • apps/www/src/content/docs/theme/overview/index.mdx
  • packages/react/components/breadcrumb/__tests__/breadcrumb.test.tsx
  • packages/react/components/breadcrumb/__tests__/data-slots.test.tsx
  • packages/react/components/breadcrumb/breadcrumb-item.tsx
  • packages/react/components/calendar/__tests__/date-picker.test.tsx
  • packages/react/components/calendar/date-picker.tsx
  • packages/react/components/command/command-dialog.tsx
  • packages/react/components/filter-chip/__tests__/filter-chip.test.tsx
  • packages/react/components/filter-chip/filter-chip.tsx
  • packages/react/components/flex/__tests__/flex.test.tsx
  • packages/react/components/grid/__tests__/grid.test.tsx
  • packages/react/components/search/__tests__/search.test.tsx
  • packages/react/components/search/search.tsx
  • packages/react/components/skeleton/__tests__/skeleton.test.tsx
  • packages/react/components/skeleton/skeleton.module.css
  • packages/react/components/skeleton/skeleton.tsx
  • packages/react/components/toast/__tests__/toast.test.tsx
  • packages/react/components/toast/toast-provider.tsx
  • packages/react/components/toast/toast-root.tsx
  • packages/react/figma/breadcrumb-item.figma.ts
  • packages/react/figma/breadcrumb.figma.ts
  • packages/react/shared/gap/gap.module.css
  • packages/react/shared/gap/gap.ts
💤 Files with no reviewable changes: 2
  • packages/react/components/search/tests/search.test.tsx
  • packages/react/components/command/command-dialog.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

The changes add zero-valued gap utilities and update component APIs for breadcrumbs, date validation, width, and radius. DatePicker now reports structured validity through onValidityChange. Search and Command.DialogContent remove their width props. Skeleton and Toast add radius options. Documentation, examples, and tests reflect these changes.

Suggested reviewers: shreyag02, ravisuhag

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to da024

The updated component APIs and guidance appear consistent, with no identified issue requiring a fix before merge.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 12 functions across 33 files. (12 skipped:… Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main changes: replacing one-off component props with shared names and APIs.
Description check Passed The description directly explains the prop renames, behavior changes, documentation updates, validation decisions, and verification steps covered by the changeset.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 12 functions across 33 files. (12 skipped: 12 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

@pkg-pr-new

pkg-pr-new Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

pnpm add https://pkg.pr.new/@raystack/apsara@980

commit: da024f2

- Remove FilterChip calendarProps.onValidityChange. It repeated
  calendarProps.slotProps.input.onValidityChange.
- Shorten the DatePicker onValidityChange JSDoc and move its usage notes
  to the Calendar page.
- Set the docs search width in CSS instead of an inline style.
- List Skeleton and Toast.Provider under per-component radius, and
  DataView.Search in the upgrading notes.

This branch was successfully deployed

1 active deployment
Preview — da024f28 Deployed Oct 21, 2026 by vercel[bot]
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.

1 participant