[material-ui][Badge] Use inline CSS variables for anchorOrigin/overlap positioning by siriwatknp · Pull Request #48549 · mui/material-ui (original) (raw)

Follow-up to #47742.

Instead of computing positioning via a style: ({ ownerState }) => {...} callback in the styled variants array, this PR:

• Replaces the callback with a plain object that references CSS variables.
• Moves the anchorOrigin × overlap conditional logic onto the badge slot's inline style, which sets those CSS variables.

Why

• Keeps the styled variants purely declarative (plain objects only).
• Pushes per-render conditional logic out of the styled engine — cheaper at render time and easier for static extraction tools.

Variables

Three CSS variables drive positioning, leveraging existing CSS shorthand:

• --Badge-translate — translateX, translateY (comma-separated, for the translate() function)
• --Badge-inset — top right bottom left (space-separated, for the inset shorthand)
• --Badge-origin — X Y (space-separated, for transform-origin)

Follows the same "inline-style sets a --ComponentName-* variable, styled CSS consumes it" pattern already used by:

• AvatarGroup — --AvatarGroup-spacing (from the spacing prop)
• Typography — --Typography-textAlign (from the align prop)
• TabScrollButton — --TabScrollButton-svgRotate (from RTL + orientation)

Behavior

No visible change. Same eight outcomes (top/bottom × left/right × rectangular/circular) produce the same CSS output as before #47742.