[badge] Refactor variant styles generation

[sai6855]

This PR refactors how variant styles are generated for the Badge componen. Instead of manually specifying each style variant for combinations of anchorOrigin and overlap, it introduces a way to programmatically generate these styles. Addtionally bundle size also reduced by 62 B

[mui-bot]

Netlify deploy preview

https://deploy-preview-47742--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	▼-1.68KB(-0.32%)	▼-62B(-0.04%)
@mui/lab	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

Generated by 🚫 dangerJS against 8655635

[Copilot]

Pull request overview

Refactors Badge variant positioning styles to be generated programmatically (instead of manually enumerating each anchorOrigin × overlap combination), reducing duplication in the Badge styling logic.

Changes:

• Added a generateVariantStyles() helper to create the 8 positioning variants for anchorOrigin/overlap.
• Replaced the previously hardcoded variant entries in BadgeBadge with the generated variants.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ZeeshanTamboli]

Surely the bytes are reduced, but is it worth it considering the code readability becoming difficult? I don't think so.

[sai6855]

Yeah, agreed, it’s not the easy thing to read at first glance. But this generator + variants pattern is already used in a few places in the codebase. We do the similar thing (Not exact same pattern but similar philosophy) in gridGenerator.ts (like generateGridSizeStyles(), generateGridRowSpacingStyles(), etc.).

The other option would be to hardcode eight separate variant blocks with slightly different position values.

With the generator, it’s basically just expressing the 2 × 2 × 2 position combinations in one place. A bit more abstract, but way less duplication.

Additionally this part of code is rarely touched, so maybe trade-off is worth it 🤔 ?

[ZeeshanTamboli]

@sai6855 IMO, it's really not worth the 28 bytes being shaved off.

[siriwatknp]

@sai6855 IMO, it's really not worth the 28 bytes being shaved off.

I think so, if you really want to optimize. I recommend using CSS variables instead (without creating a new function).

something like:

{
  style: ({ ownerState }) => {
    const { vertical, horizontal } = ownerState.anchorOrigin;
    const offset = ownerState.overlap === 'circular' ? '14%' : '0px';
    return {
      '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
      '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
      top: vertical === 'top' ? offset : 'auto',
      bottom: vertical === 'bottom' ? offset : 'auto',
      right: horizontal === 'right' ? offset : 'auto',
      left: horizontal === 'left' ? offset : 'auto',
      transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
      transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
      [`&.${badgeClasses.invisible}`]: {
        transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))',
      },
    };
  },
}

[ZeeshanTamboli]

Looks better now. Around 60 bytes shaved off plus use of CSS variables!