[LoadingButton] Fix padding of loading icon in small button (#31113)

mui · Mar 7, 2022 · c11bbd7 · c11bbd7
1 parent 21d1f49
commit c11bbd7
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 76 deletions.
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js
@@ -7,13 +7,13 @@ import SaveIcon from '@mui/icons-material/Save';
 import SendIcon from '@mui/icons-material/Send';
 
 export default function LoadingButtonsTransition() {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
   function handleClick() {
     setLoading(true);
   }
 
   return (
-    <Box sx={{ '& > button': { m: 1 } }}>
+    <Box>
       <FormControlLabel
         sx={{
           display: 'block',
@@ -28,41 +28,85 @@ export default function LoadingButtonsTransition() {
         }
         label="Loading"
       />
-      <LoadingButton
-        onClick={handleClick}
-        loading={loading}
-        variant="outlined"
-        disabled
-      >
-        disabled
-      </LoadingButton>
-      <LoadingButton
-        onClick={handleClick}
-        loading={loading}
-        loadingIndicator="Loading..."
-        variant="outlined"
-      >
-        Fetch data
-      </LoadingButton>
-      <LoadingButton
-        onClick={handleClick}
-        endIcon={<SendIcon />}
-        loading={loading}
-        loadingPosition="end"
-        variant="contained"
-      >
-        Send
-      </LoadingButton>
-      <LoadingButton
-        color="secondary"
-        onClick={handleClick}
-        loading={loading}
-        loadingPosition="start"
-        startIcon={<SaveIcon />}
-        variant="contained"
-      >
-        Save
-      </LoadingButton>
+      <Box sx={{ '& > button': { m: 1 } }}>
+        <LoadingButton
+          size="small"
+          onClick={handleClick}
+          loading={loading}
+          variant="outlined"
+          disabled
+        >
+          disabled
+        </LoadingButton>
+        <LoadingButton
+          size="small"
+          onClick={handleClick}
+          loading={loading}
+          loadingIndicator="Loading..."
+          variant="outlined"
+        >
+          Fetch data
+        </LoadingButton>
+        <LoadingButton
+          size="small"
+          onClick={handleClick}
+          endIcon={<SendIcon />}
+          loading={loading}
+          loadingPosition="end"
+          variant="contained"
+        >
+          Send
+        </LoadingButton>
+        <LoadingButton
+          size="small"
+          color="secondary"
+          onClick={handleClick}
+          loading={loading}
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="contained"
+        >
+          Save
+        </LoadingButton>
+      </Box>
+
+      <Box sx={{ '& > button': { m: 1 } }}>
+        <LoadingButton
+          onClick={handleClick}
+          loading={loading}
+          variant="outlined"
+          disabled
+        >
+          disabled
+        </LoadingButton>
+        <LoadingButton
+          onClick={handleClick}
+          loading={loading}
+          loadingIndicator="Loading..."
+          variant="outlined"
+        >
+          Fetch data
+        </LoadingButton>
+        <LoadingButton
+          onClick={handleClick}
+          endIcon={<SendIcon />}
+          loading={loading}
+          loadingPosition="end"
+          variant="contained"
+        >
+          Send
+        </LoadingButton>
+        <LoadingButton
+          color="secondary"
+          onClick={handleClick}
+          loading={loading}
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="contained"
+        >
+          Save
+        </LoadingButton>
+      </Box>
     </Box>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx b/docs/data/material/components/buttons/LoadingButtonsTransition.tsx
@@ -7,13 +7,13 @@ import SaveIcon from '@mui/icons-material/Save';
 import SendIcon from '@mui/icons-material/Send';
 
 export default function LoadingButtonsTransition() {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
   function handleClick() {
     setLoading(true);
   }
 
   return (
-    <Box sx={{ '& > button': { m: 1 } }}>
+    <Box>
       <FormControlLabel
         sx={{
           display: 'block',
@@ -28,41 +28,85 @@ export default function LoadingButtonsTransition() {
         }
         label="Loading"
       />
-      <LoadingButton
-        onClick={handleClick}
-        loading={loading}
-        variant="outlined"
-        disabled
-      >
-        disabled
-      </LoadingButton>
-      <LoadingButton
-        onClick={handleClick}
-        loading={loading}
-        loadingIndicator="Loading..."
-        variant="outlined"
-      >
-        Fetch data
-      </LoadingButton>
-      <LoadingButton
-        onClick={handleClick}
-        endIcon={<SendIcon />}
-        loading={loading}
-        loadingPosition="end"
-        variant="contained"
-      >
-        Send
-      </LoadingButton>
-      <LoadingButton
-        color="secondary"
-        onClick={handleClick}
-        loading={loading}
-        loadingPosition="start"
-        startIcon={<SaveIcon />}
-        variant="contained"
-      >
-        Save
-      </LoadingButton>
+      <Box sx={{ '& > button': { m: 1 } }}>
+        <LoadingButton
+          size="small"
+          onClick={handleClick}
+          loading={loading}
+          variant="outlined"
+          disabled
+        >
+          disabled
+        </LoadingButton>
+        <LoadingButton
+          size="small"
+          onClick={handleClick}
+          loading={loading}
+          loadingIndicator="Loading..."
+          variant="outlined"
+        >
+          Fetch data
+        </LoadingButton>
+        <LoadingButton
+          size="small"
+          onClick={handleClick}
+          endIcon={<SendIcon />}
+          loading={loading}
+          loadingPosition="end"
+          variant="contained"
+        >
+          Send
+        </LoadingButton>
+        <LoadingButton
+          size="small"
+          color="secondary"
+          onClick={handleClick}
+          loading={loading}
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="contained"
+        >
+          Save
+        </LoadingButton>
+      </Box>
+
+      <Box sx={{ '& > button': { m: 1 } }}>
+        <LoadingButton
+          onClick={handleClick}
+          loading={loading}
+          variant="outlined"
+          disabled
+        >
+          disabled
+        </LoadingButton>
+        <LoadingButton
+          onClick={handleClick}
+          loading={loading}
+          loadingIndicator="Loading..."
+          variant="outlined"
+        >
+          Fetch data
+        </LoadingButton>
+        <LoadingButton
+          onClick={handleClick}
+          endIcon={<SendIcon />}
+          loading={loading}
+          loadingPosition="end"
+          variant="contained"
+        >
+          Send
+        </LoadingButton>
+        <LoadingButton
+          color="secondary"
+          onClick={handleClick}
+          loading={loading}
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="contained"
+        >
+          Save
+        </LoadingButton>
+      </Box>
     </Box>
   );
 }
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js
@@ -103,7 +103,7 @@ const LoadingButtonLoadingIndicator = styled('div', {
   display: 'flex',
   ...(ownerState.loadingPosition === 'start' &&
     (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-      left: 14,
+      left: ownerState.size === 'small' ? 10 : 14,
     }),
   ...(ownerState.loadingPosition === 'start' &&
     ownerState.variant === 'text' && {
@@ -116,7 +116,7 @@ const LoadingButtonLoadingIndicator = styled('div', {
   }),
   ...(ownerState.loadingPosition === 'end' &&
     (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-      right: 14,
+      right: ownerState.size === 'small' ? 10 : 14,
     }),
   ...(ownerState.loadingPosition === 'end' &&
     ownerState.variant === 'text' && {