diff --git a/.changeset/fix-fab-extended-width.md b/.changeset/fix-fab-extended-width.md new file mode 100644 index 0000000000..431f2064ee --- /dev/null +++ b/.changeset/fix-fab-extended-width.md @@ -0,0 +1,5 @@ +--- +'@graphcommerce/next-ui': patch +--- + +Fix: `` no longer gets a fixed `width` from `MuiFabSizes`. The size-based width/height variants are now scoped to `variant: 'circular'` only, so extended Fabs can grow with their label (controlled via `min-width` instead) as MUI intends. Previously every extended Fab without an explicit `size` matched the default `large` rule and was forced to 54px wide. diff --git a/packages/next-ui/Theme/MuiFab.ts b/packages/next-ui/Theme/MuiFab.ts index c81b9945d2..7cb2882d37 100644 --- a/packages/next-ui/Theme/MuiFab.ts +++ b/packages/next-ui/Theme/MuiFab.ts @@ -80,11 +80,14 @@ const sizes: FabSize[] = [ /** * This defines the sizes for the added responsive variant. * + * Only applied to circular (default) Fabs — extended Fabs must keep `width: auto` and rely on their + * content + `min-width`, otherwise they collapse to a fixed square regardless of label. + * * To override the sizes, please do not add variant declarations direcly, but modify * `yourTheme.components.MuiFabExtra.sizes` instead. */ export const MuiFabSizes: FabVariants = sizes.map((size) => ({ - props: { size }, + props: { size, variant: 'circular' }, style: ({ theme }) => fabWidthHeight(size, theme), }))