fix: SW-2072 chat input grey by default — scope input-group disabled greying to the control#143
Open
boramyi-ts wants to merge 2 commits into
Open
fix: SW-2072 chat input grey by default — scope input-group disabled greying to the control#143boramyi-ts wants to merge 2 commits into
boramyi-ts wants to merge 2 commits into
Conversation
…t is disabled The InputGroup greyed itself (bg-input/50 + opacity-50) whenever it contained ANY disabled descendant via has-disabled. In the AI chat the submit button is disabled while the input is empty, so the whole field went grey even though it was available to type in. Scope the disabled styling to the control itself (has-[[data-slot=input-group-control]:disabled]) so only a disabled input/textarea greys the field — white when available, grey when the control is genuinely unavailable. Also fixes the same issue for any InputGroup with a disabled addon button. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
boramyi-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
54321jenn-ts
approved these changes
Jun 23, 2026
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes a styling regression in the InputGroup shadcn primitive where the group container was being greyed-out whenever any disabled descendant existed (e.g., a disabled submit button), even if the actual input control was enabled—impacting the AI chat prompt input.
Changes:
- Scope
InputGroup“disabled” background/opacity styling to only trigger when theinput-group-control(input/textarea) itself is disabled. - Extend a single Vitest test timeout in the Zephyr Storybook sync test suite (likely to reduce flakiness from ts-morph parsing cost).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/components/ui/input-group.tsx |
Narrows :has(:disabled)-style selectors to [data-slot=input-group-control]:disabled so disabled addon buttons don’t grey the whole control. |
scripts/zephyr/__tests__/sync-storybook-zephyr.test.ts |
Increases timeout for one duplicate-ID parsing test to 15s. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
SW-2072 — the AI chat element rendered grey by default; it should be white when available and grey only when unavailable.
Root cause
The
InputGroupgreys itself (has-disabled:bg-input/50+has-disabled:opacity-50) whenever it contains any disabled descendant. In the chat, the submit button isdisabledwhile the input is empty, so:has(:disabled)matched and the whole field went grey — even though the textarea is enabled and the chat is usable.Fix
Scope the disabled styling to the control rather than any descendant — input-group.tsx:15:
Now only a disabled input/textarea greys the field. Also fixes the same latent issue for any InputGroup with a disabled addon button (clear/submit/etc.).
Before / after
Before: disabled submit greys the available chat · After (available): white · After (unavailable, control disabled): still grey, as intended.
📄 Interactive: sw-2072-chat-grey-before-after.html · download raw
Verification
bg-input/50).[data-slot=input-group-control]→bg-input/50(grey) — the unavailable state still works.yarn lint+yarn typecheckpass.🤖 Generated with Claude Code