[docs] Add introduction Base component demos & general uplift #33896

danilo-leal · 2022-08-12T06:49:11Z

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

I'm experimenting with a way to present the Base components visually more interestingly above the fold. I've created a new DemoRootMaterial variant called gradient where I'm playing around with a mesh gradient and might try textures too. I've been enjoying this direction and feel like it has potential! Here's a sneak peek:

Deploy preview: https://deploy-preview-33896--material-ui.netlify.app/base/react-button/

mui-bot · 2022-08-12T06:51:43Z

No bundle size changes

Generated by 🚫 dangerJS against af1b4f0

docs/data/base/components/select/UnstyledSelectIntroduction.js

samuelsycamore · 2022-08-22T19:29:59Z

I love this!! Can't wait to see it in action in the docs! Really makes a huge improvement to the overall UX.

mnajdova

Looks much much better 👍 If it is up to me, I would ship it :D I especially like the grid texture

Not related to this PR, but we probably want to tweak the styles for the initial focus element on the demos at least on the base pages (probably on Joy UI too). I am talking about this hidden focusable button in the upper left corner:

michaldudak · 2022-08-24T20:14:36Z

That's a huge improvement over the previous demos!
The background in the light mode looks great now. Could we make the one in dark mode a bit more subtle, though? IMO it would look better if it was darker than the grid lines.

Why don't we have the *Introduction demos in TypeScript?

danilo-leal · 2022-08-26T07:10:16Z

@michaldudak just turned them all into TypeScript but I'm now getting what seems to be augmentation errors?!
I would love a hand in here ✋.

michaldudak · 2022-08-26T08:09:46Z

@danilo-leal There were some type definitions missing from function parameters. I fixed them.

For the future - it's best to copy a TS demo, modify it, and then run yarn docs:typescript:formatted to generate a JS version out of it. We generally don't edit JS demos directly anymore.

There are errors in regression tests of UnstyledBadge and UnstyledBadgeIntroduction demos. theme.palette.grey can't be accessed in Base demos, as it doesn't exist (these default values only are set in the Material UI theme).

danilo-leal · 2022-08-26T12:25:38Z

@michaldudak cool, thanks for helping out! It seems the regression check is still failing, any idea how to turn it green?

oliviertassinari

It looks great!

oliviertassinari · 2022-08-26T21:53:36Z

docs/data/base/components/badge/AccessibleBadges.tsx

    transform: translate(50%, -50%);
-    transform-origin: 100% 0;
+    transform-origin: 100% 0; 


Suggested change

transform-origin: 100% 0;

transform-origin: 100% 0;

docs/data/base/components/badge/BadgeMax.tsx

docs/data/base/components/badge/ShowZeroBadge.tsx

docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx

docs/data/base/components/button/UnstyledButtonIntroduction.tsx

oliviertassinari · 2022-08-26T22:02:22Z

docs/src/modules/components/Demo.js

+          theme.palette.primaryDark[500],
+          0.8,
+        )} 0px, transparent 50%), 
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`


I wonder if using an SVG file would help with bundle size. For example, want we don't have introduction demos on MUI X docs pages.

docs/data/base/components/tabs/UnstyledTabsIntroduction.tsx

docs/data/base/components/select/UnstyledSelectIntroduction.tsx

oliviertassinari · 2022-08-26T22:26:58Z

docs/data/base/components/input/input.md

@@ -14,6 +14,8 @@ githubLabel: 'component: input'
 An input is a UI element that accepts text data from the user.
 The `InputUnstyled` component replaces the native HTML `<input>` tag, and can also be transformed into a `<textarea>` as needed.

+{{"demo": "UnstyledInputIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}}


@danilo-leal Did you consider rendering this demo before everything else and a bit smaller in height? I had a quick try at it, here is what the difference looks like:

Current:

https://deploy-preview-33896--material-ui.netlify.app/base/react-input/

With the diff

oliviertassinari · 2022-08-26T22:32:05Z

cool, thanks for helping out! It seems the regression check is still failing, any idea how to turn it green?

@danilo-leal It seems to be an issue with the theme. I'm pushing a fix. I'm actually surprised that the correct error message isn't reported by CircleCI. I thought I had made a fix for this a year ago, unless it was only applied on MUI X 🤔

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

michaldudak · 2022-08-29T16:33:03Z

I applied the majority of Olivier's suggestions so we can close this PR and iterate on improvements in another one after Danilo is back.

) Co-authored-by: Michał Dudak <michal@dudak.me> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

danilo-leal added 2 commits August 12, 2022 03:29

first iteration on gradient demo container above the fold

a62e6be

add input exercise as well

4a176be

danilo-leal added docs Improvements or additions to the documentation package: base-ui Specific to @mui/base labels Aug 12, 2022

danilo-leal marked this pull request as draft August 12, 2022 06:49

danilo-leal added 24 commits August 17, 2022 01:18

add tiles pattern to the gradient image

81758c3

tweak input color

e08756a

add slider demo

bc995b0

add slider

37e24ef

add switch demo

4f0795b

add badge demo

e0bfea7

add menu demo

37404eb

add tabs demo

41df13e

add demo pagination demo

d09b128

fix lint errors

97272a7

fix tiny stuff

dce8317

fix lint again

6bf8f66

adjusting some stuff

8901063

iterate more on the Demo gradient

c6af0b6

make the rest of Button's demos consistent

04504f8

make the rest of Input's demos consistent

4ff74f9

make the rest of Select's demos consistent

0c54503

make the rest of Slider's demo consistent

28cace4

make the rest of Switches demos consistent

6891e1b

make the Badge demos consistent

82d8e2f

make the rest of Menu's demos consistent

4f4da07

make the rest of Tabs demos consistent

80641e7

fix lint

9978a13

docs formatted

20232b7

danilo-leal commented Aug 22, 2022

View reviewed changes

docs/data/base/components/select/UnstyledSelectIntroduction.js Outdated Show resolved Hide resolved

danilo-leal changed the title ~~[docs] Uplift to the Base component demos~~ [docs] Add introduction Base component demos & general uplift Aug 22, 2022

mnajdova reviewed Aug 23, 2022

View reviewed changes

danilo-leal added 5 commits August 26, 2022 03:55

turn introduction demos to TypeScript

e98bad4

iterate a bit more over the gradient background

10448eb

bit of iteration on the tab demo styles

07c4b96

yarn docs:typescript:formatted

1efeef1

small adjustment to the button's demo

ec0d1f0

danilo-leal and others added 3 commits August 26, 2022 04:15

button: parity between tsx and js files

9601831

use real icon in the select demo

a9e918d

Fix TS errors

5f3554d

This comment was marked as resolved.

Sign in to view

oliviertassinari reviewed Aug 26, 2022

View reviewed changes

fix build

5f05c07

oliviertassinari mentioned this pull request Aug 26, 2022

[core] Fix prop-type warning in regression tests #34086

Merged

michaldudak and others added 2 commits August 29, 2022 18:24

Apply suggestions from code review

2a21c7e

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

docs:typescript:formatted

50614cc

michaldudak added 2 commits August 29, 2022 18:40

Merge branch 'master' into base-demos-uplift

bdc63e1

docs:typescript:formatted

af1b4f0

michaldudak approved these changes Aug 29, 2022

View reviewed changes

michaldudak merged commit b73c194 into mui:master Aug 29, 2022

danilo-leal deleted the base-demos-uplift branch September 5, 2022 02:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Add introduction Base component demos & general uplift #33896

[docs] Add introduction Base component demos & general uplift #33896

danilo-leal commented Aug 12, 2022 •

edited

mui-bot commented Aug 12, 2022 •

edited

samuelsycamore commented Aug 22, 2022

mnajdova left a comment •

edited

michaldudak commented Aug 24, 2022

danilo-leal commented Aug 26, 2022 •

edited

michaldudak commented Aug 26, 2022 •

edited

danilo-leal commented Aug 26, 2022

This comment was marked as resolved.

oliviertassinari left a comment

oliviertassinari Aug 26, 2022

oliviertassinari Aug 26, 2022

oliviertassinari Aug 26, 2022 •

edited

oliviertassinari commented Aug 26, 2022 •

edited

michaldudak commented Aug 29, 2022

[docs] Add introduction Base component demos & general uplift #33896

[docs] Add introduction Base component demos & general uplift #33896

Conversation

danilo-leal commented Aug 12, 2022 • edited

mui-bot commented Aug 12, 2022 • edited

samuelsycamore commented Aug 22, 2022

mnajdova left a comment • edited

Choose a reason for hiding this comment

michaldudak commented Aug 24, 2022

danilo-leal commented Aug 26, 2022 • edited

michaldudak commented Aug 26, 2022 • edited

danilo-leal commented Aug 26, 2022

This comment was marked as resolved.

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Aug 26, 2022

Choose a reason for hiding this comment

oliviertassinari Aug 26, 2022

Choose a reason for hiding this comment

oliviertassinari Aug 26, 2022 • edited

Choose a reason for hiding this comment

oliviertassinari commented Aug 26, 2022 • edited

michaldudak commented Aug 29, 2022

danilo-leal commented Aug 12, 2022 •

edited

mui-bot commented Aug 12, 2022 •

edited

mnajdova left a comment •

edited

danilo-leal commented Aug 26, 2022 •

edited

michaldudak commented Aug 26, 2022 •

edited

oliviertassinari Aug 26, 2022 •

edited

oliviertassinari commented Aug 26, 2022 •

edited