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

[docs] Handle a few docs-feedback #36977

Merged
merged 2 commits into from
Apr 27, 2023
Merged

[docs] Handle a few docs-feedback #36977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c91add
[docs] Handle a few docs-feedback
oliviertassinari Apr 23, 2023
5dcc676
mistake
oliviertassinari Apr 23, 2023
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
8 changes: 5 additions & 3 deletions docs/data/material/components/dialogs/dialogs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,12 +137,14 @@ Follow the [Modal limitations section](/material-ui/react-modal/#limitations).

## Complementary projects

### Material UI Confirm
For more advanced use cases you might be able to take advantage of:

![stars](https://img.shields.io/github/stars/jonatanklosko/material-ui-confirm)
### material-ui-confirm

![stars](https://img.shields.io/github/stars/jonatanklosko/material-ui-confirm?style=social&label=Star)
![npm downloads](https://img.shields.io/npm/dm/material-ui-confirm.svg)

This package provides dialogs for confirming user actions without writing boilerplate code.
The package [`material-ui-confirm`](https://github.com/jonatanklosko/material-ui-confirm/) provides dialogs for confirming user actions without writing boilerplate code.
Copy link
Member Author

Choose a reason for hiding this comment

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

I have seen at least 3 people complain about this. It's hard to find the source. Proof:

I think that we miss some kind of process for this to be prioritized, it seems to be a clear quick-win.


## Accessibility

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/grid2/grid2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ From now on, the `Grid` v1 and `Grid` v2 refer to the import as:

```js
import Grid from '@mui/material/Grid'; // Grid version 1
import Grid2 from '@mui/material/Unstable_Grid2'; // Grid version 2
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
Copy link
Member Author

Choose a reason for hiding this comment

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

For consistency with the text above. Reported in https://mui-org.slack.com/archives/C041SDSF32L/p1681137941293499.

```

:::
Expand Down
7 changes: 5 additions & 2 deletions docs/data/material/components/menus/menus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,11 @@ Here is an example of a context menu. (Right click to open.)

For more advanced use cases you might be able to take advantage of:

### PopupState helper
### material-ui-popup-state

There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.
![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star)
![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg)

The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases.

{{"demo": "MenuPopupState.js"}}
2 changes: 1 addition & 1 deletion docs/data/material/components/pagination/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ It's possible to customize the control icons.

## Pagination ranges

You can specify how many digits to display either side of current page with the `siblingRange` prop, and adjacent to the start and end page number with the `boundaryRange` prop.
You can specify how many digits to display either side of current page with the `siblingCount` prop, and adjacent to the start and end page number with the `boundaryCount` prop.
Copy link
Member Author

Choose a reason for hiding this comment

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

https://mui-org.slack.com/archives/C041SDSF32L/p1681286032546179


{{"demo": "PaginationRanges.js"}}

Expand Down
8 changes: 5 additions & 3 deletions docs/data/material/components/popover/popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@ This demo demonstrates how to use the `Popover` component and the mouseover even

For more advanced use cases, you might be able to take advantage of:

### PopupState helper
### material-ui-popup-state

There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover
state for you in most cases.
![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star)
![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg)

The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover state for you in most cases.

{{"demo": "PopoverPopupState.js"}}
8 changes: 5 additions & 3 deletions docs/data/material/components/popper/popper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,11 @@ Highlight part of the text to see the popper:

For more advanced use cases you might be able to take advantage of:

### PopupState helper
### material-ui-popup-state

There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper
state for you in most cases.
![stars](https://img.shields.io/github/stars/jcoreio/material-ui-popup-state?style=social&label=Star)
![npm downloads](https://img.shields.io/npm/dm/material-ui-popup-state.svg)

The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper state for you in most cases.

{{"demo": "PopperPopupState.js"}}
2 changes: 1 addition & 1 deletion docs/data/material/components/snackbars/snackbars.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ For more advanced use cases you might be able to take advantage of:

### notistack

![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars)
![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Star)
![npm downloads](https://img.shields.io/npm/dm/notistack.svg)

This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack).
Expand Down
4 changes: 4 additions & 0 deletions docs/data/material/discover-more/related-projects/related-projects.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,7 @@ Feel free to submit a pull request!
### Sparkline

- [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value.

## Admin frameworks

- [React Admin](https://github.com/marmelab/react-admin): A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs.
Comment on lines +60 to +62
Copy link
Member Author

Choose a reason for hiding this comment

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

With https://mui.zendesk.com/agent/tickets/7593 we could add refine too.

8 changes: 5 additions & 3 deletions docs/data/material/discover-more/showcase/Showcase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const sortFunctions = {
};

export default function Showcase() {
const [sortFunctionName, setSortFunctionName] = React.useState('dateAdded');
const [sortFunctionName, setSortFunctionName] = React.useState('similarWebVisits');
Copy link
Member Author

Choose a reason for hiding this comment

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

The traffic makes a lot more sense IMHO, it sends trust.

const sortFunction = sortFunctions[sortFunctionName];
const t = useTranslate();

Expand All @@ -54,7 +54,7 @@ export default function Showcase() {
};

return (
<Box sx={{ flexGrow: 1 }}>
<Box sx={{ flexGrow: 1, mx: [2, 0] }}>
Copy link
Member Author

Choose a reason for hiding this comment

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

It was broken on mobile, I think it was sending a red flag for designers that are considering using Material UI

Screenshot 2023-04-24 at 00 19 38

<FormControl sx={{ mb: 4, minWidth: 120 }}>
<InputLabel htmlFor="sort">Sort by</InputLabel>
<Select
Expand Down Expand Up @@ -101,9 +101,11 @@ export default function Showcase() {
<CardMedia
component="img"
loading="lazy"
width="600"
height="450"
Comment on lines +104 to +105
Copy link
Member Author

Choose a reason for hiding this comment

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

Fix layout shift when loading

src={`/static/images/showcase/${app.image}`}
sx={{
minHeight: 200,
height: 'auto',
color: (theme) =>
theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100',
bgcolor: 'currentColor',
Expand Down
14 changes: 2 additions & 12 deletions docs/data/material/discover-more/showcase/appList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const appList = [
description:
'QuintoAndar is a company that uses technology and ' +
'design to simplify the rental of residential real estate.',
image: 'quintoandar.png',
image: 'quintoandar.jpg',
Copy link
Member Author

Choose a reason for hiding this comment

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

It was looking like crap, so redo a few screenshots, following a process close to https://www.notion.so/mui-org/Store-Screenshots-for-product-7a4cf2df5cb94389ab6adc80b6aeb054. We would need to retake all the screenshots, but since we might rework from scratch this page, I only did the first two.

https://mui.com/material-ui/discover-more/showcase/ burns my eye 🙃

link: 'https://www.quintoandar.com.br/',
similarWebVisits: 8500,
dateAdded: '2019-05-08',
Expand All @@ -47,7 +47,7 @@ const appList = [
description:
'OpenClassrooms is an online platform offering top quality, ' +
'education-to-employment programs and career coaching services for students worldwide. ',
image: 'openclassrooms.jpg',
image: 'openclassrooms.png',
link: 'https://openclassrooms.com/en/',
similarWebVisits: 6000,
dateAdded: '2018-01-34',
Expand Down Expand Up @@ -319,16 +319,6 @@ const appList = [
stars: 10,
dateAdded: '2018-01-23',
},
{
title: 'DropDesk',
description:
'DropDesk creates unique workspaces & experiences by converting unused space into vibrant ' +
'coworking spaces. Meet, work and gain a sense of community.',
image: 'dropdesk.jpg',
link: 'https://drop-desk.com/',
similarWebVisits: 50,
dateAdded: '2019-01-01',
},
{
title: 'npm registry browser',
description:
Expand Down
18 changes: 6 additions & 12 deletions docs/data/material/getting-started/example-projects/example-projects.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@ If you want to start with a more complete and real-world example, you could take
- All PWA features included (SW, Notifications, deferred installation prompt and more)
- Optimized and scalable performance (all ~100 points on Lighthouse)

<!-- TODO: revert this once it is migrated to v5
Copy link
Member Author

Choose a reason for hiding this comment

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

They migrated a year ago.

- [React Admin](https://github.com/marmelab/react-admin)

- ![stars](https://img.shields.io/github/stars/marmelab/react-admin.svg?style=social&label=Star)
- A frontend Framework for building B2B applications running in the browser
- On top of REST/GraphQL APIs, using ES6, React and Material Design

- [React SaaS Template](https://github.com/dunky11/react-saas-template):

- ![stars](https://img.shields.io/github/stars/dunky11/react-saas-template.svg?style=social&label=Star)
Expand All @@ -62,17 +67,6 @@ If you want to start with a more complete and real-world example, you could take
- Fully routed using react-router
- Lazy loads components to boost performance
- Components for statistics, text with emoji support, image upload and much more...
-->

<!-- TODO: revert this once it is migrated to v5
- [Material Sense](https://github.com/alexanmtz/material-sense):

- ![stars](https://img.shields.io/github/stars/alexanmtz/material-sense.svg?style=social&label=Star)
- Graph using recharts
- React Router included with a navigation example
- A docker container with an Nginx server for production build
- Created with Create React App
-->
Comment on lines -67 to -75
Copy link
Member Author

Choose a reason for hiding this comment

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

It's abandoned now.


### Paid

Expand Down
Binary file removed docs/public/static/images/showcase/dropdesk.jpg
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/static/images/showcase/openclassrooms.jpg
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/static/images/showcase/openclassrooms.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/public/static/images/showcase/quintoandar.jpg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/public/static/images/showcase/quintoandar.png
View file
Open in desktop
Binary file not shown.