Skip to content

fix: Preserve validation styles for disabled inputs - #4959

Merged
NathanZlion merged 4 commits into
mainfrom
fix/input-disabled-invalid-current
Sep 2, 2026
Merged

fix: Preserve validation styles for disabled inputs#4959
NathanZlion merged 4 commits into
mainfrom
fix/input-disabled-invalid-current

Conversation

@NathanZlion

@NathanZlion NathanZlion commented Sep 1, 2026

Copy link
Copy Markdown
Member

Description

Preserve invalid and warning border styles when adorned Inputs are disabled.
This fix is based on CSS cascade ordering: the disabled modifier must be defined before the validation modifiers so invalid/warning border styles can override the disabled border color when both classes are present. Adding an explicit comment here will help prevent accidental reordering regressions.

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov

codecov Bot commented Sep 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.66%. Comparing base (a420fd6) to head (dce3069).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4959   +/-   ##
=======================================
  Coverage   97.66%   97.66%           
=======================================
  Files         959      959           
  Lines       31342    31342           
  Branches    11577    11577           
=======================================
  Hits        30610    30610           
  Misses        725      725           
  Partials        7        7           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@NathanZlion
NathanZlion marked this pull request as ready for review September 1, 2026 13:41
@NathanZlion
NathanZlion requested a review from a team as a code owner September 1, 2026 13:41
@NathanZlion
NathanZlion requested review from a team, gethinwebster and taheramr and a lite review from Copilot and removed request for a team and taheramr September 1, 2026 13:41

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Preserves invalid and warning validation border styles for adorned Input instances when the control is disabled, aligning the adorned-container behavior with the non-adorned input styling model.

Changes:

  • Reordered .input-adorned-container modifier blocks so invalid/warning styles can override the disabled border styling in the CSS cascade.
  • Added a unit test to ensure the adorned container keeps the invalid modifier when disabled is also set.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
src/input/styles.scss Reorders adorned-container modifier styling to preserve validation borders when disabled.
src/input/tests/adornments.test.tsx Adds coverage ensuring disabled + invalid retains both modifier classes.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/input/__tests__/adornments.test.tsx
Comment thread src/input/styles.scss
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

@gethinwebster gethinwebster left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Can we make sure that this will show up in visual regression tests too? At least the ones that run in pipelines, ideally also the ones that now run in github

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@NathanZlion

Copy link
Copy Markdown
Member Author

Can we make sure that this will show up in visual regression tests too? At least the ones that run in pipelines, ideally also the ones that now run in github

PR #4852 adda the test suite, i've added the permutation here.

@NathanZlion
NathanZlion added this pull request to the merge queue Sep 2, 2026
Merged via the queue into main with commit 57c4415 Sep 2, 2026
65 checks passed
@NathanZlion
NathanZlion deleted the fix/input-disabled-invalid-current branch September 2, 2026 09:23
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.

3 participants