fix(apollo-react): restore label error colour, free field-adornment icon buttons from fixed boxes - #1024
fix(apollo-react): restore label error colour, free field-adornment icon buttons from fixed boxes#1024fikewa-olatunji wants to merge 2 commits into
Conversation
… labels apollo-react kept error-state labels de-emphasized and forced the asterisk to inherit, so invalid fields gave no colour signal on the label. apollo-mui5 (what Portal ships) colours the input label and the required asterisk with colorErrorText, and uses regular foreground for form labels. Restore that behaviour.
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Updates Apollo React’s MUI theme overrides to align form controls and interactive elements with semantic palette tokens and improve adornment icon button sizing.
Changes:
- Adjusts TextField, InputLabel, and FormLabel error/read-only styling behavior.
- Updates Link focus-visible styling to use semantic focus indicator color.
- Ensures IconButtons inside input adornments keep natural sizing to avoid field misalignment.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/apollo-react/src/material/theme/overrides/MuiTextField.ts | Simplifies TextField root overrides and changes focused read-only outline width |
| packages/apollo-react/src/material/theme/overrides/MuiLink.ts | Reworks focus-visible and active styling for links |
| packages/apollo-react/src/material/theme/overrides/MuiInputLabel.ts | Changes error label color and removes asterisk slot overrides |
| packages/apollo-react/src/material/theme/overrides/MuiIconButton.ts | Exempts adornment icon buttons from fixed size box to prevent misalignment |
| packages/apollo-react/src/material/theme/overrides/MuiFormLabel.ts | Changes base label color and reworks error asterisk color styling |
| packages/apollo-react/src/material/theme/overrides/MuiDatepicker.ts | Updates selected-day text token to semantic inverse foreground |
Autocomplete popup/clear indicators and the datepicker calendar button are IconButtons living inside a field's adornments, so the fixed per-size box misaligns the chevron and shifts the field's right edge. Let them keep MUI's natural padding-driven geometry; the rule sits after the size blocks so it wins at equal specificity.
06abcfa to
4b1336a
Compare
|
Apollo Coded App preview deployments are ready.
|
fikewa-olatunji
changed the title
Dependency License Review
License distribution
Excluded packages
|
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Aug 06, 2026, 07:03:26 PM |
| root: { | ||
| color: palette.semantic.colorForegroundDeEmp, | ||
| '&.Mui-error': { color: palette.semantic.colorForegroundDeEmp }, | ||
| color: palette.semantic.colorForeground, |
There was a problem hiding this comment.
we still changed this
There was a problem hiding this comment.
Yes, it was intentional: it's part of restoring the apollo-mui5 baseline for the label which the sbdiff shows now match Portal exactly.
Why
apollo-design-system#5354 makes these themes the single source of truth for
apollo-mui5, so every place apollo-react's overrides drift from what Portal ships today becomes a visual change for Portal. Design review of that drift (storybook-diff of the bumped apollo-mui5 against its master baseline) identified two things to fix here; the rest of the reviewed drift was confirmed as intended apollo-react behaviour and stays documented in #5354.What
Two commits:
MuiFormLabel,MuiInputLabel): error-state input labels and the required asterisk arecolorErrorTextagain; form labels return to regular foreground. apollo-react had kept error labels de-emphasized, so invalid fields gave no colour signal on the label.MuiInputLabelrenders throughMuiFormLabel, so the restored.MuiFormLabel-asterisk.Mui-errorrule covers input-label asterisks too.MuiIconButton): Autocomplete popup/clear indicators and the datepicker calendar button live inside a field's adornments; the fixed per-size box misaligned the combobox chevron and shifted the field's right edge. Adornment icon buttons keep MUI's natural padding-driven geometry; the fixed boxes stay for standalone icon buttons.Reviewed and kept as-is (intentional divergence from apollo-mui5)
Earlier revisions of this PR also moved links, text fields, and a datepicker token to the apollo-mui5 baseline. Review resolved all three the other way:
colorErrorTexterror border stay; the small drift vs Portal is accepted and documented in #5354.colorForegroundOnAccent. It is identical to the baseline'scolorForegroundInversein all four classic themes and is the correct, accessible token on the accent background in future-light, where the two diverge.Verification
Two
sbdiffruns on this exact branch state:apollo-mui5 vs its master baseline (local apollo-mui5 build carrying these overrides, all 519 comparable stories, four themes):
controls-combobox--*(12)controls-date-picker--*(8)apollo-react's own storybook vs deployed main: 4 changed of 196. Two are
text-field--variantsat 0.047% showing exactly the intended red error label and asterisk; two are the known flaky sankey story. Chat, links, and all other stories: no change.tsc --noEmitandbiomeare clean on the touched files.Follow-up
Once this releases, apollo-design-system#5354 bumps apollo-react; its diff against the Portal baseline should then show only the documented, intentionally-kept drift.