Skip to content

[material-ui][FormControlLabel] Add missing labelPlacementEnd class - #48843

Merged
siriwatknp merged 1 commit into
mui:masterfrom
siriwatknp:fix/formcontrollabel-labelplacementend-class
Jul 22, 2026
Merged

[material-ui][FormControlLabel] Add missing labelPlacementEnd class#48843
siriwatknp merged 1 commit into
mui:masterfrom
siriwatknp:fix/formcontrollabel-labelplacementend-class

Conversation

@siriwatknp

@siriwatknp siriwatknp commented Jul 22, 2026

Copy link
Copy Markdown
Member

Summary

FormControlLabel composes a labelPlacement${capitalize(labelPlacement)} class key for every placement, but labelPlacementEnd was missing from formControlLabelClasses — so while start/top/bottom render their MuiFormControlLabel-labelPlacement* utility class on the root element, the default end placement renders none, and formControlLabelClasses.labelPlacementEnd doesn't exist as a constant for targeting.

This adds the missing labelPlacementEnd entry, so:

  • the root element renders MuiFormControlLabel-labelPlacementEnd when labelPlacement="end" (including the default, when the prop is omitted) — consistent with the other three placements;
  • formControlLabelClasses.labelPlacementEnd is available for styling and tests:
import { formControlLabelClasses } from '@mui/material/FormControlLabel';

const Styled = styled('div')({
  [`& .${formControlLabelClasses.labelPlacementEnd}`]: {
    marginRight: 8,
  },
});

No behavior or style change — the component already passed the key through composeClasses; it was silently dropped because no utility class was registered for it.

For Reviewers

  • The class key composition in FormControlLabel.js is untouched — it already emits labelPlacementEnd for the default placement. The gap was only in the classes definition, so the fix is limited to registering the key in the interface + generateUtilityClasses list.
  • Tests cover both the explicit labelPlacement="end" and the default (prop omitted) case, mirroring the existing start/top/bottom tests.
  • API docs (form-control-label.json + translations) regenerated via docs:api:build.

@code-infra-dashboard

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48843--material-ui.netlify.app/
QR code for https://deploy-preview-48843--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 🔺+20B(0.00%) 🔺+7B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@siriwatknp siriwatknp added the type: bug It doesn't behave as expected. label Jul 22, 2026
@siriwatknp siriwatknp changed the title [material-ui][FormControlLabel] Add missing labelPlacementEnd class [material-ui][FormControlLabel] Add missing labelPlacementEnd class Jul 22, 2026
@siriwatknp siriwatknp added the component: FormControl The React component. label Jul 22, 2026
@siriwatknp
siriwatknp merged commit 7bd3762 into mui:master Jul 22, 2026
23 of 24 checks passed
siriwatknp added a commit to siriwatknp/material-ui that referenced this pull request Jul 22, 2026
…mentEnd — branch hunk converged) + export snapshot regen for vite 8 arrow stringification (formatting-only)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: FormControl The React component. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants