[material-ui][FloatingActionButton] Convert to support CSS extraction (…

…#41851)
mui · Apr 12, 2024 · 1e59ca3 · 1e59ca3
1 parent 097a7e0
commit 1e59ca3
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 51 deletions.
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-floating-action-button/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-floating-action-button/page.tsx
@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+import FloatingActionButtonExtendedSize from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize';
+import FloatingActionButtonSize from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonSize';
+import FloatingActionButtonZoom from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonZoom';
+import FloatingActionButtons from '../../../../../../docs/data/material/components/floating-action-button/FloatingActionButtons';
+
+export default function FloatingActionButton() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Floating Action Button Extended Size</h2>
+        <div className="demo-container">
+          <FloatingActionButtonExtendedSize />
+        </div>
+      </section>
+      <section>
+        <h2> Floating Action Button Size</h2>
+        <div className="demo-container">
+          <FloatingActionButtonSize />
+        </div>
+      </section>
+      <section>
+        <h2> Floating Action Button Zoom</h2>
+        <div className="demo-container">
+          <FloatingActionButtonZoom />
+        </div>
+      </section>
+      <section>
+        <h2> Floating Action Buttons</h2>
+        <div className="demo-container">
+          <FloatingActionButtons />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-floating-action-button.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-floating-action-button.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import FloatingActionButtonExtendedSize from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx';
+import FloatingActionButtonSize from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx';
+import FloatingActionButtonZoom from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx';
+import FloatingActionButtons from '../../../../../docs/data/material/components/floating-action-button/FloatingActionButtons.tsx';
+
+export default function FloatingActionButton() {
+  return (
+    <MaterialUILayout>
+      <h1>FloatingActionButton</h1>
+      <section>
+        <h2> Floating Action Button Extended Size</h2>
+        <div className="demo-container">
+          <FloatingActionButtonExtendedSize />
+        </div>
+      </section>
+      <section>
+        <h2> Floating Action Button Size</h2>
+        <div className="demo-container">
+          <FloatingActionButtonSize />
+        </div>
+      </section>
+      <section>
+        <h2> Floating Action Button Zoom</h2>
+        <div className="demo-container">
+          <FloatingActionButtonZoom />
+        </div>
+      </section>
+      <section>
+        <h2> Floating Action Buttons</h2>
+        <div className="demo-container">
+          <FloatingActionButtons />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
@@ -5,9 +5,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiFab');
 
 const useUtilityClasses = (ownerState) => {
   const { color, variant, classes, size } = ownerState;
@@ -46,7 +48,7 @@ const FabRoot = styled(ButtonBase, {
     ];
   },
 })(
-  ({ theme, ownerState }) => ({
+  ({ theme }) => ({
     ...theme.typography.button,
     minHeight: 36,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
@@ -77,56 +79,79 @@ const FabRoot = styled(ButtonBase, {
     [`&.${fabClasses.focusVisible}`]: {
       boxShadow: (theme.vars || theme).shadows[6],
     },
-    ...(ownerState.size === 'small' && {
-      width: 40,
-      height: 40,
-    }),
-    ...(ownerState.size === 'medium' && {
-      width: 48,
-      height: 48,
-    }),
-    ...(ownerState.variant === 'extended' && {
-      borderRadius: 48 / 2,
-      padding: '0 16px',
-      width: 'auto',
-      minHeight: 'auto',
-      minWidth: 48,
-      height: 48,
-    }),
-    ...(ownerState.variant === 'extended' &&
-      ownerState.size === 'small' && {
-        width: 'auto',
-        padding: '0 8px',
-        borderRadius: 34 / 2,
-        minWidth: 34,
-        height: 34,
-      }),
-    ...(ownerState.variant === 'extended' &&
-      ownerState.size === 'medium' && {
-        width: 'auto',
-        padding: '0 16px',
-        borderRadius: 40 / 2,
-        minWidth: 40,
-        height: 40,
-      }),
-    ...(ownerState.color === 'inherit' && {
-      color: 'inherit',
-    }),
+    variants: [
+      {
+        props: { size: 'small' },
+        style: {
+          width: 40,
+          height: 40,
+        },
+      },
+      {
+        props: { size: 'medium' },
+        style: {
+          width: 48,
+          height: 48,
+        },
+      },
+      {
+        props: { variant: 'extended' },
+        style: {
+          borderRadius: 48 / 2,
+          padding: '0 16px',
+          width: 'auto',
+          minHeight: 'auto',
+          minWidth: 48,
+          height: 48,
+        },
+      },
+      {
+        props: { variant: 'extended', size: 'small' },
+        style: {
+          width: 'auto',
+          padding: '0 8px',
+          borderRadius: 34 / 2,
+          minWidth: 34,
+          height: 34,
+        },
+      },
+      {
+        props: { variant: 'extended', size: 'medium' },
+        style: {
+          width: 'auto',
+          padding: '0 16px',
+          borderRadius: 40 / 2,
+          minWidth: 40,
+          height: 40,
+        },
+      },
+      {
+        props: { color: 'inherit' },
+        style: {
+          color: 'inherit',
+        },
+      },
+    ],
   }),
-  ({ theme, ownerState }) => ({
-    ...(ownerState.color !== 'inherit' &&
-      ownerState.color !== 'default' &&
-      (theme.vars || theme).palette[ownerState.color] != null && {
-        color: (theme.vars || theme).palette[ownerState.color].contrastText,
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-        '&:hover': {
-          backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+  ({ theme }) => ({
+    variants: [
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
+        .map(([color]) => ({
+          props: { color },
+          style: {
+            color: (theme.vars || theme).palette[color].contrastText,
+            backgroundColor: (theme.vars || theme).palette[color].main,
+            '&:hover': {
+              backgroundColor: (theme.vars || theme).palette[color].dark,
+              // Reset on touch devices, it doesn't add specificity
+              '@media (hover: none)': {
+                backgroundColor: (theme.vars || theme).palette[color].main,
+              },
+            },
           },
-        },
-      }),
+        })),
+    ],
   }),
   ({ theme }) => ({
     [`&.${fabClasses.disabled}`]: {