Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Mar 7, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aadce6d
- fix - Padding of loading icon in small button
PunitSoniME Feb 16, 2022
29d3d43
- Better fix of loading icon in small button
PunitSoniME Feb 16, 2022
ad01e26
- prettier command executed
PunitSoniME Feb 16, 2022
e616bb9
Merge branch 'master' of https://github.com/PunitSoniME/material-ui i…
PunitSoniME Mar 4, 2022
81b806d
Loading Demo Added For Small Buttons
PunitSoniME Mar 4, 2022
cb081fb
Loading button changes added to tsx file as well
PunitSoniME Mar 4, 2022
fe667a6
set initial loading to true
siriwatknp Mar 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
118 changes: 81 additions & 37 deletions docs/data/material/components/buttons/LoadingButtonsTransition.js
View file
Open in desktop
Expand Up @@ -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',
Expand All @@ -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>
);
}
118 changes: 81 additions & 37 deletions docs/data/material/components/buttons/LoadingButtonsTransition.tsx
View file
Open in desktop
Expand Up @@ -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',
Expand All @@ -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>
);
}
4 changes: 2 additions & 2 deletions packages/mui-lab/src/LoadingButton/LoadingButton.js
View file
Open in desktop
Expand Up @@ -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' && {
Expand All @@ -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' && {
Expand Down