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

[material-ui][docs] Revise the Button page #40446

Closed
wants to merge 20 commits into from
Closed

[material-ui][docs] Revise the Button page #40446

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
bacd747
first pass on structure
samuelsycamore Jan 5, 2024
a6e24c0
docs:build
samuelsycamore Jan 5, 2024
5315fd4
prettier
samuelsycamore Jan 5, 2024
4aee079
merge master
samuelsycamore Jan 8, 2024
29e75ac
merge master
samuelsycamore Jan 10, 2024
cf61e88
second pass
samuelsycamore Jan 10, 2024
ceda1d0
merge master
samuelsycamore Jan 12, 2024
20e3d1c
remove CustomizedButtons demo
samuelsycamore Jan 12, 2024
a921791
Merge branch 'master' into revise-material-button
samuelsycamore Jan 15, 2024
f3ea3da
restore button base header
samuelsycamore Jan 17, 2024
90d203a
anatomy
samuelsycamore Jan 22, 2024
c485aa2
links, ripple
samuelsycamore Jan 22, 2024
9c33cf9
full width
samuelsycamore Jan 22, 2024
83a1833
disabled
samuelsycamore Jan 22, 2024
1d5bde0
demos
samuelsycamore Jan 22, 2024
8b63b94
Merge branch 'master' into revise-material-button
samuelsycamore Jan 23, 2024
e30185d
merge master
samuelsycamore Feb 14, 2024
7a73034
fix broken link
samuelsycamore Feb 14, 2024
692cb5c
merge master
samuelsycamore Feb 22, 2024
0725e8a
merge master
samuelsycamore Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 0 additions & 17 deletions docs/data/material/components/buttons/ContainedButtons.js
View file
Open in desktop

This file was deleted.

17 changes: 0 additions & 17 deletions docs/data/material/components/buttons/ContainedButtons.tsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions docs/data/material/components/buttons/ContainedButtons.tsx.preview
View file
Open in desktop

This file was deleted.

60 changes: 0 additions & 60 deletions docs/data/material/components/buttons/CustomizedButtons.js
View file
Open in desktop

This file was deleted.

60 changes: 0 additions & 60 deletions docs/data/material/components/buttons/CustomizedButtons.tsx
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions docs/data/material/components/buttons/CustomizedButtons.tsx.preview
View file
Open in desktop

This file was deleted.

10 changes: 7 additions & 3 deletions docs/data/material/components/buttons/DisableElevation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't do this yet, but this could make a lot of sense for v6 #40594.

Suggested change
import Stack from '@mui/material/Stack';
import Stack from '@mui/system/Stack';

import Button from '@mui/material/Button';

export default function DisableElevation() {
return (
<Button variant="contained" disableElevation>
Disable elevation
</Button>
<Stack spacing={2} direction="row">
<Button variant="contained">Default</Button>
<Button variant="contained" disableElevation>
Elevation disabled
</Button>
</Stack>
);
}
10 changes: 7 additions & 3 deletions docs/data/material/components/buttons/DisableElevation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function DisableElevation() {
return (
<Button variant="contained" disableElevation>
Disable elevation
</Button>
<Stack spacing={2} direction="row">
<Button variant="contained">Default</Button>
<Button variant="contained" disableElevation>
Elevation disabled
</Button>
</Stack>
);
}
3 changes: 2 additions & 1 deletion docs/data/material/components/buttons/DisableElevation.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<Button variant="contained">Default</Button>
<Button variant="contained" disableElevation>
Disable elevation
Elevation disabled
</Button>
14 changes: 14 additions & 0 deletions docs/data/material/components/buttons/DisabledButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function DisabledButton() {
return (
<Stack spacing={2} direction="row">
<Button variant="outlined">Default</Button>
<Button variant="outlined" disabled>
Click disabled
</Button>
</Stack>
);
}
14 changes: 14 additions & 0 deletions docs/data/material/components/buttons/DisabledButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function DisabledButton() {
return (
<Stack spacing={2} direction="row">
<Button variant="outlined">Default</Button>
<Button variant="outlined" disabled>
Click disabled
</Button>
</Stack>
);
}
4 changes: 4 additions & 0 deletions docs/data/material/components/buttons/DisabledButton.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<Button variant="outlined">Default</Button>
<Button variant="outlined" disabled>
Click disabled
</Button>
20 changes: 20 additions & 0 deletions docs/data/material/components/buttons/FullWidthButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

export default function FullWidthButton() {
return (
<Box
sx={{
width: '300px',
border: '1px solid gray',
borderRadius: '5px',
padding: '5px',
}}
>
<Button variant="contained" fullWidth>
Full width button
</Button>
</Box>
);
}
20 changes: 20 additions & 0 deletions docs/data/material/components/buttons/FullWidthButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

export default function FullWidthButton() {
return (
<Box
sx={{
width: '300px',
border: '1px solid gray',
borderRadius: '5px',
padding: '5px',
}}
>
Comment on lines +7 to +14
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To get the inline preview?

Suggested change
<Box
sx={{
width: '300px',
border: '1px solid gray',
borderRadius: '5px',
padding: '5px',
}}
>
<div>
<Box
sx={{
width: '300px',
border: '1px solid gray',
padding: '5px',
}}
>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was about to suggest whether we need the 300px width limit there... I think we can make this one span the full demo container width, given it's illustrating the fullWidth prop.

Copy link
Member

@oliviertassinari oliviertassinari Feb 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was about to suggest whether we need the 300px width limit there... I think we can make this one span the full demo container width, given it's illustrating the fullWidth prop.

A direction that makes sense to me:

  • move the header from h4 to h3. Even if it's technical under Sizes, IMHO it can also been seen as not, and it would help with anchor linking.
  • rename the header to Full width, since it's what this demo is about
  • Increase 300px to some a bit more, up to the limit where it starts to feel poor UX.
  • use "bg": true

Screenshot 2024-02-04 at 22 47 05

Edit: actually, more padding y than padding x could make it 🤌

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about the background, though; it looks cleaner without it (plus all the other demos don't use it).

<Button variant="contained" fullWidth>
Full width button
</Button>
</Box>
);
}
3 changes: 3 additions & 0 deletions docs/data/material/components/buttons/FullWidthButton.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<Button variant="contained" fullWidth>
Full width button
</Button>
32 changes: 32 additions & 0 deletions docs/data/material/components/buttons/IntroButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import CheckIcon from '@mui/icons-material/Check';
import Stack from '@mui/material/Stack';

export default function IntroButtons() {
return (
<Stack direction="row" spacing={2}>
<Button disabled>Go back</Button>
<Button
variant="outlined"
startIcon={<DeleteIcon />}
color="error"
onClick={() => {
alert('Canceled.');
}}
>
Cancel
</Button>
<Button
variant="contained"
startIcon={<CheckIcon />}
onClick={() => {
alert('Confirmed.');
}}
>
Confirm
</Button>
</Stack>
);
}
32 changes: 32 additions & 0 deletions docs/data/material/components/buttons/IntroButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import CheckIcon from '@mui/icons-material/Check';
import Stack from '@mui/material/Stack';

export default function IntroButtons() {
return (
<Stack direction="row" spacing={2}>
<Button disabled>Go back</Button>
<Button
variant="outlined"
startIcon={<DeleteIcon />}
color="error"
onClick={() => {
alert('Canceled.');
}}
Comment on lines +15 to +17
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To consider if we should remove the onClick to get the "inline preview"

>
Cancel
</Button>
<Button
variant="contained"
startIcon={<CheckIcon />}
onClick={() => {
alert('Confirmed.');
}}
>
Confirm
</Button>
</Stack>
);
}
17 changes: 0 additions & 17 deletions docs/data/material/components/buttons/OutlinedButtons.js
View file
Open in desktop

This file was deleted.

Loading