[docs] Improve "Example projects" page design #37007

danilo-leal · 2023-04-25T05:24:01Z

I have followed (at least) the PR section of the contributing guide.

Just giving it a bump so it's one less bullet list throughout the docs!

https://deploy-preview-37007--material-ui.netlify.app/material-ui/getting-started/example-projects/

danilo-leal · 2023-04-25T05:25:18Z

docs/data/material/getting-started/example-projects/ExampleCollection.js

+
+                '&:hover': {
+                  borderColor:
+                    theme.palette.mode === 'dark' ? '#173A5E' : 'grey.300',


For some reason, using primaryDark, or even just primary was not working. Had to fall back to using plain hex codes 😭

That's because the ExampleCollection.js is considered a demo so it could not access the branding theme.

To be able to use branding theme, I switch from demo to component in the markdown file:

- {{"demo": "ExampleCollection.js", "hideToolbar": true, "bg": "inline"}} + {{"component": "docs/src/modules/components/ExampleCollection.js"}}

Oh, that makes a ton of sense, thank you! Is that documented somewhere? 😅

mui-bot · 2023-04-25T05:26:00Z

Netlify deploy preview

docs/data/material/getting-started/example-projects/example-projects.md

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against b73c219

docs/data/material/getting-started/example-projects/example-projects.md

samuelsycamore · 2023-04-25T14:21:36Z

Love this! Definitely a huge upgrade.

One thing to consider: we could have examples that are more complex than the ones listed here—see this comment—for example, Material + Vite + Tailwind. How might we fit examples like that into this format?

danilo-leal · 2023-04-27T10:00:25Z

@samuelsycamore The heading can always wrap but, following the example, to make a shorter one, we could just cut "Base" from it, as it'd be sitting in an equivalent "Example projects" page within the Base docs, I think? We could also play with the icon design a bit so, say, Vite + Tailwind logos are overlapped. All in all, it might be good to expose this component I created⎯ExampleCollection⎯ as a more general one, instead of having one for each docs, so we maintain consistency and adhere to these expansions use cases there as well (as variants, probably). What do you think?

danilo-leal · 2023-04-28T12:14:32Z

docs/data/material/getting-started/example-projects/ExampleCollection.js

+              <Box
+                sx={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  alignItems: 'baseline',
+                }}


@siriwatknp Hey! Just for the sake of learning, I'm curious why the preference for using the Box component rather than the Stack?

danilo-leal · 2023-05-02T23:00:19Z

@siriwatknp heya! 👋 Mind giving this one a review?

siriwatknp · 2023-05-05T09:27:38Z

@siriwatknp heya! 👋 Mind giving this one a review?

Noted @danilo-leal. Sorry for the late response. I was busy with the Reactathon conference the whole week.

Will definitely take the last look after landed! 🛫

danilo-leal · 2023-05-05T11:55:23Z

@siriwatknp Woo, sweet, thanks for answering ⎯ no rush, too, though!

…ove-example-projects-design

siriwatknp

👍 Great improvement!

Co-authored-by: siriwatknp <[email protected]>

oliviertassinari · 2023-05-25T10:03:57Z

docs/data/material/getting-started/example-projects/example-projects.md

- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-vite-ts))
- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts))
- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
+{{"component": "docs/src/modules/components/ExampleCollection.js"}}


Should we update the rest of the docs to use the full import path?

You tell me! Is it better, code-wise?

I would imagine that

Suggested change

{{"component": "docs/src/modules/components/ExampleCollection.js"}}

{{"component": "modules/components/ExampleCollection.js"}}

in the docs page would have worked without the need to change the docs-infra: https://github.com/mui/material-ui/pull/37007/files#diff-8896d42292e63fa8530b9808a333b4770fee0e9fbe33d57e0b4ab5b3b723ed3dR223.

Oh actually, the location of the demo. This is now with the rest of the global component: docs/src/modules/components/. This folder is meant for global components.

If this component is only used on this page, I think we should move it, we can host it in the same folder as the docs docs/data/material/getting-started/example-projects/ so that if we ever refactor the page, we would remove this dead demo at the same time.

Shall we move the file?

I'll leave it up to @siriwatknp to decide on this one, then, as he pushed that commit on!

Looking back at this, I think one of the reasons to have it moved over to that global folder was so it could pick up the theme. Is there a way so that it sits locally with the markdown files but picking up the branding theme?

oliviertassinari · 2023-05-25T10:04:14Z

It looks great 👍🔥

oliviertassinari

One design feedback trying to use the new example. The hover style got me confused, I thought it was a precursor indicator so I could click, but it's not the case:

Screen.Recording.2023-05-25.at.14.01.44.mov

On the content structure, the Tailwind CSS example feels strange. I think that it should either clearly mention CRA or be removed and added under CRA.

docs/src/modules/components/ExampleCollection.js

oliviertassinari · 2023-05-25T12:14:08Z

packages/markdown/loader.js

+    const moduleID = path
+      .join(this.rootContext, 'src', componentName.replace(/^docs\/src/, ''))
+      .replace(/\\/g, '/');


Is this change needed? https://github.com/mui/material-ui/pull/37007/files#r1205292380

Suggested change

const moduleID = path

.join(this.rootContext, 'src', componentName.replace(/^docs\/src/, ''))

.replace(/\\/g, '/');

const moduleID = path.join(this.rootContext, 'src', componentName).replace(/\\/g, '/');

``

oliviertassinari · 2023-05-25T12:16:37Z

docs/data/material/getting-started/example-projects/example-projects.md

- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-vite-ts))
- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts))
- [Next.js + @mui/styles (v4 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
+{{"component": "docs/src/modules/components/ExampleCollection.js"}}


Oh actually, the location of the demo. This is now with the rest of the global component: docs/src/modules/components/. This folder is meant for global components.

If this component is only used on this page, I think we should move it, we can host it in the same folder as the docs docs/data/material/getting-started/example-projects/ so that if we ever refactor the page, we would remove this dead demo at the same time.

Shall we move the file?

improve page design

b727f7c

danilo-leal added the docs Improvements or additions to the documentation label Apr 25, 2023

danilo-leal requested a review from siriwatknp April 25, 2023 05:24

danilo-leal commented Apr 25, 2023

View reviewed changes

docs/data/material/getting-started/example-projects/example-projects.md Show resolved Hide resolved

fux styles

e357452

danilo-leal commented Apr 28, 2023

View reviewed changes

siriwatknp added 3 commits May 8, 2023 10:58

move ExampleCollection to modules

c73f7c4

adjust layout

9079881

Merge branch 'master' of https://github.com/mui/material-ui into impr…

45e7604

…ove-example-projects-design

siriwatknp approved these changes May 8, 2023

View reviewed changes

fix border radius

b73c219

danilo-leal merged commit e8d91ec into master May 8, 2023

danilo-leal deleted the improve-example-projects-design branch May 8, 2023 12:59

binh1298 pushed a commit to binh1298/material-ui that referenced this pull request May 17, 2023

[docs] Improve "Example projects" page design (mui#37007)

3ffc250

Co-authored-by: siriwatknp <[email protected]>

oliviertassinari added the package: material-ui Specific to @mui/material label May 25, 2023

oliviertassinari reviewed May 25, 2023

View reviewed changes

danilo-leal mentioned this pull request May 29, 2023

[docs] Review fixes to the Material UI's "Example projects" page #37444

Merged

1 task

oliviertassinari mentioned this pull request Aug 16, 2023

[docs-infra] Follow import and CSS token standard #38508

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Improve "Example projects" page design #37007

[docs] Improve "Example projects" page design #37007

danilo-leal commented Apr 25, 2023 •

edited

Loading

danilo-leal Apr 25, 2023

siriwatknp May 8, 2023

danilo-leal May 8, 2023

mui-bot commented Apr 25, 2023 •

edited

Loading

samuelsycamore commented Apr 25, 2023

danilo-leal commented Apr 27, 2023

danilo-leal Apr 28, 2023

danilo-leal commented May 2, 2023

siriwatknp commented May 5, 2023

danilo-leal commented May 5, 2023

siriwatknp left a comment

oliviertassinari May 25, 2023

danilo-leal May 25, 2023

oliviertassinari May 25, 2023 •

edited

Loading

oliviertassinari May 25, 2023 •

edited

Loading

danilo-leal May 25, 2023

danilo-leal May 29, 2023

oliviertassinari commented May 25, 2023

oliviertassinari left a comment •

edited

Loading

oliviertassinari May 25, 2023

oliviertassinari May 25, 2023 •

edited

Loading

	{{"component": "docs/src/modules/components/ExampleCollection.js"}}
	{{"component": "modules/components/ExampleCollection.js"}}

[docs] Improve "Example projects" page design #37007

[docs] Improve "Example projects" page design #37007

Conversation

danilo-leal commented Apr 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mui-bot commented Apr 25, 2023 • edited Loading

Netlify deploy preview

Bundle size report

samuelsycamore commented Apr 25, 2023

danilo-leal commented Apr 27, 2023

Choose a reason for hiding this comment

danilo-leal commented May 2, 2023

siriwatknp commented May 5, 2023

danilo-leal commented May 5, 2023

siriwatknp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari May 25, 2023 • edited Loading

Choose a reason for hiding this comment

oliviertassinari May 25, 2023 • 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 May 25, 2023

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari May 25, 2023 • edited Loading

Choose a reason for hiding this comment

danilo-leal commented Apr 25, 2023 •

edited

Loading

mui-bot commented Apr 25, 2023 •

edited

Loading

oliviertassinari May 25, 2023 •

edited

Loading

oliviertassinari May 25, 2023 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari May 25, 2023 •

edited

Loading