Skip to content

fix(textinputgroup): update placeholder text color for disabled state#7670

Merged
mcoker merged 2 commits intopatternfly:mainfrom
evwilkin:fix/7661-textinputgroup-contrast
Jul 23, 2025
Merged

fix(textinputgroup): update placeholder text color for disabled state#7670
mcoker merged 2 commits intopatternfly:mainfrom
evwilkin:fix/7661-textinputgroup-contrast

Conversation

@evwilkin
Copy link
Member

@evwilkin evwilkin commented Jul 17, 2025

Closes #7661
Closes #7671

This PR:

  1. Adds new --#{$text-input-group}__text-input--Color variable which defaults to the current value of var(--pf-t--global--text--color--regular).
  2. Overrides default values for the text input (both placeholder & value) text color for disabled TextInputGroups
  3. Sets the color on the text input group text input to the new --#{$text-input-group}__text-input--Color variable.

Confirmed w/PF design placeholder text should use the on-disabled token, matching pattern used in similar components such as FormControl.

Before:

  • Input placeholder:
    Screenshot 2025-07-17 at 4 45 46 PM
  • Input text:
    Screenshot 2025-07-21 at 10 26 58 AM

After:

  • Input placeholder:
    Screenshot 2025-07-17 at 4 45 54 PM
  • Input text:
    Screenshot 2025-07-21 at 10 26 50 AM

@evwilkin evwilkin requested review from a team, mcoker, sg00dwin and srambach and removed request for a team and sg00dwin July 17, 2025 20:48
@patternfly-build
Copy link
Collaborator

patternfly-build commented Jul 17, 2025

Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

LGTM! Though I noticed that the regular disabled text color is also wrong - #7671. Do you want to take a stab at that?

@evwilkin
Copy link
Member Author

@mcoker thanks for the callout - I've updated this PR to fix #7671 but would appreciate some guidance on if this is the right approach (adding a new variable, setting it as the default & overriding it for disabled - I left existing variables as-is).

@evwilkin evwilkin requested review from mattnolting and removed request for srambach July 21, 2025 14:36
Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

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

LGTM!

@mcoker mcoker requested a review from srambach July 22, 2025 15:27
Copy link
Collaborator

@mattnolting mattnolting left a comment

Choose a reason for hiding this comment

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

A future consideration, something like this would avoid the issue altogether moving forward, unless the goal is to style disabled placeholder text explicitly. Either way, nice work! Approved

.pf-m-disabled {
&::placeholder {
::placeholder {
color: inherit;
}
}

@mcoker mcoker merged commit ee92ae0 into patternfly:main Jul 23, 2025
4 checks passed
@patternfly-build
Copy link
Collaborator

🎉 This PR is included in version 6.3.0-prerelease.42 🎉

The release is available on:

Your semantic-release bot 📦🚀

mcoker added a commit that referenced this pull request Jul 29, 2025
* chore(deps): update dependency @patternfly/documentation-framework to v6.15.5 (#7580)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @patternfly/react-code-editor to v6.3.0 (#7680)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(backstop): force light mode and fix no motion class (#7653)

* chore(all): update visual baseline images (#7610)

* chore(inline-edit/popover): remove stray code (#7675)

* fix(textinputgroup): update placeholder text color for disabled state (#7670)

* chore(deps): update dependency @patternfly/react-core to v6.3.0 (#7681)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @patternfly/react-table to v6.3.0 (#7682)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @patternfly/documentation-framework to v6.16.0 (#7684)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @patternfly/documentation-framework to v6.16.1 (#7689)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* Update upload-preview.js

* Update upload-preview.js

* fix: white space change to trigger prerelease

* Update README.md

* fix(wizard): nav item horizontal alignment fixes (#7693)

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Sarah Rambacher <srambach@redhat.com>
Co-authored-by: Evan <8651509+evwilkin@users.noreply.github.com>
Co-authored-by: Nicole Thoen <nthoen@redhat.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Text input group - disabled text isn't readable Bug - TextInputGroup - low contrast placeholder text with isDisabled

4 participants