[pickers] Fix disabled state styling for PickersTextField standard and filled variants#22189
Open
LukasTy wants to merge 1 commit intomui:masterfrom
Open
[pickers] Fix disabled state styling for PickersTextField standard and filled variants#22189LukasTy wants to merge 1 commit intomui:masterfrom
PickersTextField standard and filled variants#22189LukasTy wants to merge 1 commit intomui:masterfrom
Conversation
…d filled variants Only the outlined variant greyed out its text when disabled. The shared PickersInputBaseRoot had no disabled color rule, and only PickersOutlinedInput compensated with its own override. Move the disabled text color rule to the base root so all three variants inherit it, and drop the now-redundant override from the outlined variant. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
LukasTy
added
scope: pickers
Bundle size
Deploy previewhttps://deploy-preview-22189--material-ui-x.netlify.app/ Check out the code infra dashboard for more information about this PR. |
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes inconsistent disabled-state text styling in PickersTextField so that standard and filled variants grey out their content the same way outlined already did, by moving the disabled text color rule to the shared base root.
Changes:
- Add a disabled-state rule to
PickersInputBaseRootto applypalette.action.disabledtext color and a default cursor. - Remove the redundant “force all children to disabled color” override from
PickersOutlinedInputwhile keeping the outlined-specific disabled border styling.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx | Removes redundant disabled '*' color override now handled by the shared base root. |
| packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx | Adds a shared disabled-state text color + cursor rule so all variants inherit consistent styling. |
💡 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
Only the
outlinedvariant ofPickersTextFieldgreyed out its text when disabled —standardandfilledkept the text at the default primary color, making them visually indistinguishable from the enabled state.Root cause: the shared
PickersInputBaseRoot(used by all three variants) had no disabled color rule. OnlyPickersOutlinedInputcompensated by adding its own'*': { color: palette.action.disabled }override. Thefilledandstandardvariant roots never applied a disabled text color, so the text stayed atpalette.text.primary.Fix
&.${pickersInputBaseClasses.disabled}rule toPickersInputBaseRootthat setscolor: palette.action.disabledandcursor: 'default'. Since the three variant roots all extendPickersInputBaseRootviastyled(PickersInputBaseRoot, ...), all three inherit the rule.'*': { color: palette.action.disabled }block fromPickersOutlinedInput. Kept thenotchedOutlineborder color rule since that's outlined-specific.Using
palette.action.disabled(rather than MUI'spalette.text.disabled) keeps theoutlinedvariant pixel-identical to today and applies the same shade tofilledandstandard.Test plan
pnpm test:unit --project "x-date-pickers" --runpnpm test:unit --project "x-date-pickers-pro" --runDatePicker/DateTimePicker/DateRangePickerwithdisabledfor each variant (outlined,filled,standard) and confirm the section text, separators, and label all appear greyed out.Visual comparison