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

samuelsycamore · 2024-01-05T20:06:20Z

Part of #35158

thoroughly restructured the doc to match the current format
rewrote (and removed) sections that plagiarized the Material Design specs
added demos for previously undocumented props

https://deploy-preview-40446--material-ui.netlify.app/material-ui/react-button

mui-bot · 2024-01-05T20:08:34Z

Netlify deploy preview

docs/data/material/components/buttons/buttons.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0725e8a

danilo-leal

Woof, this is much, much better! Great work 🎉

docs/data/material/components/buttons/buttons.md

Signed-off-by: Sam Sycamore <[email protected]>

samuelsycamore · 2024-01-30T02:10:28Z

Alright, I've done some heavy revising since the last review but I think this is ready to go now!

oliviertassinari · 2024-01-30T17:05:51Z

docs/data/material/components/buttons/DisableElevation.js

@@ -1,10 +1,14 @@
 import * as React from 'react';
+import Stack from '@mui/material/Stack';


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';

docs/data/material/components/buttons/buttons.md

oliviertassinari · 2024-01-30T17:12:21Z

docs/data/material/components/buttons/IntroButtons.tsx

+        onClick={() => {
+          alert('Canceled.');
+        }}


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

oliviertassinari · 2024-01-30T17:13:08Z

docs/data/material/components/buttons/buttons.md


-You can remove the elevation with the `disableElevation` prop.
+```jsx
+<Button href="/home">Home</Button>


#suggestion I would enjoy a live demo here as a developer.

oliviertassinari · 2024-01-30T17:14:22Z

docs/data/material/components/buttons/FullWidthButton.tsx

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


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',

}}

>

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.

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

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

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

docs/data/material/components/buttons/buttons.md

oliviertassinari

danilo-leal

This looks super good — left just tiny remarks; excited to see it getting shipped!

danilo-leal · 2024-01-30T20:31:56Z

docs/data/material/components/buttons/buttons.md


-{{"demo": "TextButtons.js"}}
+## Basics


Suggested change

## Basics

## Basics

### Import

Should we add it? We did it on the Snackbar page, but I guess we never formalized it as part of the template!

Ah interesting, I must have glossed over it on that page (and it may have been omitted in the other pages we've updated recently). I don't have a strong opinion about it one way or the other, as long as we apply it consistently.

Actually, as I'm thinking about it more, I might argue against including it. The main reason being that we sometimes include imports in other sections (when discussing complementary components) and it could be cluttered/redundant if we added it for each one.

Uhm, that makes sense, yeah! Well, I have no strong preferences either, so I'm happy to go without it, too.

Tangential, but I was testing out the search experience for "(component) import" and this is what it looks like for Snackbar:

That's a lot of pages and headers that look identical! 😅 How do I know which one to click on? We should give some more thought to the layout of the search results and how it relates to repeated headers.

Yeah, these first two Base UI results, for example, are from the Components API and Hooks API tabs, respectively, which makes me think we should probably include them somehow in the results (so you know what that's about).

The problem here to me is how we rank Algolia results. If I'm on a Material UI page, no way I want to see Base UI or MUI System results in between. I want first as section that is all about Material UI results, and second search area for other products.

I think that's another problem on top of the one Sam shared. Imagine if Sam's screenshot is a search result when browsing through the Base UI docs. The results order is correct, but still, there's an opportunity to improve how we differentiate pages or sections with the same heading text.

danilo-leal · 2024-01-30T20:32:02Z

docs/data/material/components/buttons/buttons.md

-deselected, such as adding or removing a star to an item.
+:::warning
+These props remove _all_ default styles from the `:focus-visible` state, which means the user won't have any visual indication that the Button is focused.
+You can target the `.Mui-focusVisible` class to define your own styles for a better user experience.


Suggested change

You can target the `.Mui-focusVisible` class to define your own styles for a better user experience.

You can target the `.Mui-focusVisible` class to define your own styles for an accessible user experience.

Thought of calling out the accessibility impact of having properly styled focus styles here instead of saying "better"; maybe that's more specific... and better? 😅

outdated

oliviertassinari · 2024-02-04T21:59:01Z

Off-topic

The <span with background-image looks outdated now

best to use the object-fit CSS property now, so we can use loading="lazy" on the image

siriwatknp

We can merge this in the next branch next week.

first pass on structure

bacd747

samuelsycamore added docs Improvements or additions to the documentation component: button This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Jan 5, 2024

samuelsycamore self-assigned this Jan 5, 2024

samuelsycamore added 5 commits January 5, 2024 14:49

docs:build

a6e24c0

prettier

5315fd4

merge master

4aee079

merge master

29e75ac

second pass

cf61e88

samuelsycamore requested a review from danilo-leal January 10, 2024 18:23

samuelsycamore marked this pull request as ready for review January 10, 2024 18:23

samuelsycamore mentioned this pull request Jan 10, 2024

[material-ui][docs] Revise component demo pages for style, grammar, content, and formatting consistency #35158

Closed

62 tasks

danilo-leal approved these changes Jan 10, 2024

View reviewed changes

docs/data/material/components/buttons/buttons.md Show resolved Hide resolved

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 11, 2024

merge master

ceda1d0

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 12, 2024

remove CustomizedButtons demo

20e3d1c

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 13, 2024

Merge branch 'master' into revise-material-button

a921791

Signed-off-by: Sam Sycamore <[email protected]>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 15, 2024

restore button base header

f3ea3da

samuelsycamore mentioned this pull request Jan 17, 2024

[material-ui][docs-infra] API header doesn't appear in the Button demo doc sidebar #40659

Closed

anatomy

90d203a

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 22, 2024

samuelsycamore added 4 commits January 22, 2024 08:18

links, ripple

c485aa2

full width

9c33cf9

disabled

83a1833

demos

1d5bde0

Merge branch 'master' into revise-material-button

8b63b94

Signed-off-by: Sam Sycamore <[email protected]>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 23, 2024

samuelsycamore requested a review from danilo-leal January 30, 2024 02:10

oliviertassinari previously requested changes Jan 30, 2024

View reviewed changes

oliviertassinari reviewed Jan 30, 2024

View reviewed changes

oliviertassinari self-requested a review January 30, 2024 17:19

danilo-leal approved these changes Jan 30, 2024

View reviewed changes

oliviertassinari mentioned this pull request Jan 31, 2024

[base-ui][docs] Improve Base UI traffic from Material UI #40875

Merged

samuelsycamore mentioned this pull request Feb 2, 2024

[material-ui][docs] Standardize all references to Material Design 3 (M3) #40903

Merged

oliviertassinari mentioned this pull request Feb 5, 2024

[button][material-ui] Fix 'File upload' demo a11y #40943

Merged

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 6, 2024

merge master

e30185d

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 14, 2024

fix broken link

7a73034

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 15, 2024

merge master

692cb5c

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 22, 2024

merge master

0725e8a

siriwatknp reviewed Mar 14, 2024

View reviewed changes

samuelsycamore closed this by deleting the head repository Jul 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

samuelsycamore commented Jan 5, 2024 •

edited

Loading

mui-bot commented Jan 5, 2024 •

edited

Loading

danilo-leal left a comment

samuelsycamore commented Jan 30, 2024

oliviertassinari Jan 30, 2024

oliviertassinari Jan 30, 2024

oliviertassinari Jan 30, 2024 •

edited

Loading

oliviertassinari Jan 30, 2024

danilo-leal Jan 30, 2024

oliviertassinari Feb 4, 2024 •

edited

Loading

danilo-leal Feb 5, 2024

oliviertassinari left a comment

danilo-leal left a comment

danilo-leal Jan 30, 2024

samuelsycamore Feb 2, 2024

samuelsycamore Feb 2, 2024

danilo-leal Feb 2, 2024

samuelsycamore Feb 5, 2024

danilo-leal Feb 5, 2024

oliviertassinari Feb 11, 2024 •

edited

Loading

danilo-leal Feb 12, 2024

danilo-leal Jan 30, 2024

oliviertassinari commented Feb 4, 2024

siriwatknp left a comment

		@@ -1,10 +1,14 @@
		import * as React from 'react';
		import Stack from '@mui/material/Stack';

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

	You can target the `.Mui-focusVisible` class to define your own styles for a better user experience.
	You can target the `.Mui-focusVisible` class to define your own styles for an accessible user experience.

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

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

Conversation

samuelsycamore commented Jan 5, 2024 • edited Loading

mui-bot commented Jan 5, 2024 • edited Loading

Netlify deploy preview

Bundle size report

danilo-leal left a comment

Choose a reason for hiding this comment

samuelsycamore commented Jan 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jan 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Feb 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Feb 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari commented Feb 4, 2024

siriwatknp left a comment

Choose a reason for hiding this comment

samuelsycamore commented Jan 5, 2024 •

edited

Loading

mui-bot commented Jan 5, 2024 •

edited

Loading

oliviertassinari Jan 30, 2024 •

edited

Loading

oliviertassinari Feb 4, 2024 •

edited

Loading

oliviertassinari Feb 11, 2024 •

edited

Loading