feat(ui): unify form control backgrounds by ivan-dalmet · Pull Request #758 · BearStudio/start-ui-web

ivan-dalmet · 2026-07-13T09:02:56Z

Gives inputs, textareas, OTP slots, checkboxes and radios the same background as selects (bg-white in light mode, dark:bg-input/30 in dark mode), scoped so checked/disabled fills are unaffected. Also makes the calendar month-navigation buttons match the standard secondary button by removing their bg-transparent override and opacity.

Generated with Claude

Summary by CodeRabbit

Style
- Refined calendar month navigation sizing/positioning and adjusted month caption height.
- Improved checkbox and radio visuals for unchecked/indeterminate states, including dark-mode background handling.
- Standardized white backgrounds for input groups and OTP fields, with more consistent OTP invalid styling.
- Increased corner radius consistency across cards, datalists, dropdown menus, and popovers.
- Reduced dimming on dialog, drawer, and sheet backdrops for a lighter overlay.
New Features
- Expanded Alert variants to add warning and positive states, with updated destructive styling.
- Updated Storybook to present multiple Alert variants in one consolidated view.

Give inputs, textareas, OTP slots, checkboxes and radios the same background as selects (bg-white / dark:bg-input/30), and make the calendar month-navigation buttons match the secondary button style. Co-authored-by: Claude <noreply@anthropic.com>

vercel · 2026-07-13T09:03:02Z

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

Project	Deployment	Actions	Updated (UTC)
start-ui-web-v3	Ready	Preview, Comment	Jul 13, 2026 10:14am

coderabbitai · 2026-07-13T09:03:15Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: acaa68e3-5f4a-455f-b247-8a5fcce808a6

📥 Commits

Reviewing files that changed from the base of the PR and between a67ab56 and f039567.

📒 Files selected for processing (3)

src/components/ui/dialog.tsx
src/components/ui/drawer.tsx
src/components/ui/sheet.tsx

Walkthrough

Updated shared UI styles for alert variants, calendar navigation, form-control states, rounded surfaces, and dialog overlays. Storybook now demonstrates default, destructive, warning, and positive alerts.

Changes

UI component updates

Layer / File(s)	Summary
Alert variants and Storybook coverage `src/components/ui/alert.tsx`, `src/components/ui/alert.stories.tsx`	Alert styling supports updated destructive, warning, and positive variants, with Storybook coverage for all variants.
Calendar navigation button styling `src/components/ui/calendar.tsx`	The calendar caption height and month navigation buttons use updated icon sizing and absolute positioning classes.
Form control background and validation styling `src/components/ui/checkbox.tsx`, `src/components/ui/radio-group.tsx`, `src/components/ui/input-group.tsx`, `src/components/ui/input-otp.tsx`	Form controls and OTP slots receive explicit backgrounds; OTP destructive border styling also applies while active.
Rounded surface styling `src/components/ui/card.tsx`, `src/components/ui/datalist.tsx`, `src/components/ui/dropdown-menu.tsx`, `src/components/ui/popover.tsx`	Cards, datalists, dropdown content, submenu content, and popovers use larger corner-radius classes.
Overlay backdrop opacity `src/components/ui/dialog.tsx`, `src/components/ui/drawer.tsx`, `src/components/ui/sheet.tsx`	Dialog, drawer, and sheet overlays use `bg-black/30` instead of `bg-black/80`.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

BearStudio/start-ui-web#680: Both changes modify Drawer overlay/backdrop styling.

Suggested labels: enhancement, components

Suggested reviewers: decampsrenan, hugoperard, ntatoud

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches a real theme of the PR by calling out the form control background unification, though it doesn't cover the other UI styling updates.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch ivan-dalmet/input-textarea-select-background

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.}

Replace the hardcoded height/width/padding overrides on the calendar month-navigation buttons with the design system `size="icon-sm"` prop, and bump the month caption height to h-8 so the month label stays vertically centered with the buttons. Co-authored-by: Claude <noreply@anthropic.com>

Align the corner radius of Card, Datalist, Popover and Dropdown-menu (content + sub-content) to rounded-lg, matching Select, Combobox and Alert. Co-authored-by: Claude <noreply@anthropic.com>

Replace the destructive alert variant with a negative-scale palette and add warning and positive variants, each with light and dark mode styles. Add a Variants story showcasing all four variants. Co-authored-by: Claude <noreply@anthropic.com>

Reduce the Dialog, Drawer and Sheet overlay opacity from bg-black/80 to bg-black/30 for a lighter backdrop. Co-authored-by: Claude <noreply@anthropic.com>

sonarqubecloud · 2026-07-13T10:13:56Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

vercel Bot deployed to Preview July 13, 2026 09:04 View deployment

vercel Bot deployed to Preview July 13, 2026 09:57 View deployment

feat(ui): use rounded-lg for card, datalist, popover and menus

469cdf2

Align the corner radius of Card, Datalist, Popover and Dropdown-menu (content + sub-content) to rounded-lg, matching Select, Combobox and Alert. Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 13, 2026 10:02 View deployment

vercel Bot deployed to Preview July 13, 2026 10:09 View deployment

feat(ui): lighten overlay backdrop to bg-black/30

f039567

Reduce the Dialog, Drawer and Sheet overlay opacity from bg-black/80 to bg-black/30 for a lighter backdrop. Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 13, 2026 10:14 View deployment

ivan-dalmet merged commit 81d5424 into main Jul 18, 2026
11 checks passed

ivan-dalmet deleted the ivan-dalmet/input-textarea-select-background branch July 18, 2026 08:05

Navigation Menu

Uh oh!

feat(ui): unify form control backgrounds - #758

feat(ui): unify form control backgrounds#758
ivan-dalmet merged 5 commits into
mainfrom
ivan-dalmet/input-textarea-select-background

ivan-dalmet commented Jul 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading

Reviews paused

❌ Failed checks (1 warning)

Uh oh!

sonarqubecloud Bot commented Jul 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

ivan-dalmet commented Jul 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

sonarqubecloud Bot commented Jul 13, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ivan-dalmet commented Jul 13, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jul 13, 2026 •

edited

Loading

coderabbitai Bot commented Jul 13, 2026 •

edited

Loading