[docs] Docs redesign adjustments #28203

mnajdova · 2021-09-07T10:13:47Z

Some adjustments in mind (mostly minor stuff):

"Refactoring" the Edit this page button: it is currently absolute positioned. Maybe it's best to have it in a flex container together with the title and description of the page for a safer responsive behavior. Here's an example of what I described.
Adjustments on sidenav alignment and for better-nested items, e.g: date-time picker. Here's the Figma mockup.
Tweak the settings drawer background color in dark mode, it is too light now. Here's the Figma mockup.
Get the mode toggle button in the settings drawer with capitalization (currently all lowercase).
Adding the bold weight for Jakarta Sans to use in headings smaller than h2.
Adjust ad container alignment with the rest of the page elements. It's slightly off.
Iterate to have an inline code for titles and normal paragraphs?! It gets messy when there's one in a heading.
Have the Templates and Blog links, on the Nav Drawer, with the same styles as all the others: box with an icon + arrow. On the example below, I'm using the BookOutlined and ChromeReaderModeOutlined icons. Also, make the typography variant the same and with the dividing lines.

Ad container alignment	Inline code in headings

mui-pr-bot · 2021-09-07T10:15:51Z

No bundle size changes (experimental)

Generated by 🚫 dangerJS against afbbfad

siriwatknp · 2021-09-08T06:51:32Z

docs/src/modules/components/AppSettingsDrawer.js

-const DrawerPaper = styled(Paper)({
-  width: 360,
-  borderTopRightRadius: 0,
-  borderBottomRightRadius: 0,
-});
-


@mnajdova we might need to investigate more on this, it is very buggy and hard to reason. by using styled component and pass to <Drawer PaperProps={{ component: DrawerPaper, square: true, elevation: 0 }}, it is still rounded.

also classname got double. elevation-1 elevation-0

Will take a look thanks for pointing it out. I think that the general problem is that the portaled components don't support the components & componentsProps which would replace the components underneath instead of aliasing it to the as property (which is what we currently do).

Currently what you have is: <StyledPaper as={AnotherStyledPaper} /> - which results in double classes and non-deterministic classes order in the head.

I would probably just set the sx prop :)

Ok, we need to have some story around this in the migration guide I think. I agree it is hard to reason about.

In v4 when you provide a component it was changing the element that is rendered, but it also was adding the classes for that element, so the styles were applied.

In v5, to make it work identical, we are mapping the component prop to the as prop, so that the styles defined originally in the component would still be applied. This however does not guarantees that the styles for the component defined via the as property would win.

I think that we should specify in the migration guide, that for cases like this, when SomeComponentProps is used, we recommend sx for overriding the styles. When we add the components & componentsProps API on all components, that would add a possibility for completely replacing that slot with a new component. Note that the new component can actually be a styled version of the original component, and in that case we would be able to actually override the styles for it.

Does this summary makes sense?

Here is a sandbox illustrating the current behavior https://codesandbox.io/s/magical-mahavira-6p39p?file=/src/App.js

siriwatknp · 2021-09-09T02:56:10Z

inline code

Is reducing font-size helps? @danilo-leal

danilo-leal · 2021-09-09T12:43:46Z

"Refactoring" the Edit this page button

Can't make the edit page button as a part of title because the title is generated from markdown, so I make it a block instead of absolute. @danilo-leal

Way better! Thank you, Jun!

danilo-leal · 2021-09-09T12:45:57Z

inline code

Is reducing font-size helps? @danilo-leal

Mm... Not so much I guess. I think it's more about the font-weight than anything. Ideally, we should be able to set different font-weights depending on the application of the inline code (heading or paragraph). Is it feasible?

siriwatknp · 2021-09-09T13:19:54Z

inline code

Is reducing font-size helps? @danilo-leal

Mm... Not so much I guess. I think it's more about the font-weight than anything. Ideally, we should be able to set different font-weights depending on the application of the inline code (heading or paragraph). Is it feasible?

@danilo-leal so font-weight bold for inline code in the heading?

danilo-leal · 2021-09-09T14:08:32Z

Mm... Not so much I guess. I think it's more about the font-weight than anything. Ideally, we should be able to set different font-weights depending on the application of the inline code (heading or paragraph). Is it feasible?

@danilo-leal so font-weight bold for inline code in the heading?

We could try that, can you make an iteration of it to see how it goes?

danilo-leal · 2021-09-10T13:28:02Z

We could try that, can you make an iteration of it to see how it goes?

I still think that code font-size should be smaller.

Iterated a bit more, reducing just a tad the font size and standardizing the color. I think we're good to do with this one!

improve sidebar

a8c1a40

This comment has been minimized.

Sign in to view

mnajdova requested a review from danilo-leal September 7, 2021 10:17

mnajdova changed the title ~~[docs] Redesign sidebar polish~~ [docs] Docs redesign adjustments Sep 7, 2021

This comment has been minimized.

Sign in to view

danilo-leal and others added 5 commits September 7, 2021 12:54

change settings drawer mode icons

f6e897f

add PlusJakatarSans bold

b614496

run prettier

70a58a9

fix DrawerSettings background

3df0a43

update drawer settings Pascal case

b9f1caa

This comment has been minimized.

Sign in to view

remove unused component

1148eb1

siriwatknp reviewed Sep 8, 2021

View reviewed changes

github-actions bot mentioned this pull request Sep 8, 2021

Update snapshots for pr/28203 eps1lon/mui-scripts-incubator#3076

Closed

remove absolute from edit page

cf8922c

This comment has been minimized.

Sign in to view

siriwatknp added 2 commits September 9, 2021 09:27

fix drawer item styles

3e0b423

fix ads styles and remove jss

d19b2f8

reduce h2 code fontsize

4bfd7f5

danilo-leal added 5 commits September 9, 2021 16:31

use pixel to rem utility

d3d3d79

minor adjustment on the nav drawer items order

db814cd

small color tweak

56d9fae

use px to rem utility

e1f03a2

more use of px to rem utility

20589fa

prettier

39e4ab2

This comment has been minimized.

Sign in to view

siriwatknp and others added 2 commits September 10, 2021 14:07

add icons to nav drawer

613df27

h2 code iteration

c009960

siriwatknp added 2 commits September 10, 2021 21:00

yarn docs:i18n

f8126da

minor styling on drawer item

afbbfad

siriwatknp merged commit 52eaf9d into mui:next Sep 10, 2021

zannager added the docs Improvements or additions to the documentation label Jan 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Docs redesign adjustments #28203

[docs] Docs redesign adjustments #28203

mnajdova commented Sep 7, 2021 •

edited by siriwatknp

Loading

mui-pr-bot commented Sep 7, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

siriwatknp Sep 8, 2021 •

edited

Loading

siriwatknp Sep 8, 2021 •

edited

Loading

mnajdova Sep 8, 2021

mnajdova Sep 8, 2021

mnajdova Sep 8, 2021

mnajdova Sep 8, 2021

mnajdova Sep 8, 2021

This comment has been minimized.

siriwatknp commented Sep 9, 2021

danilo-leal commented Sep 9, 2021

danilo-leal commented Sep 9, 2021 •

edited

Loading

siriwatknp commented Sep 9, 2021 •

edited

Loading

danilo-leal commented Sep 9, 2021

This comment has been minimized.

danilo-leal commented Sep 10, 2021

[docs] Docs redesign adjustments #28203

[docs] Docs redesign adjustments #28203

Conversation

mnajdova commented Sep 7, 2021 • edited by siriwatknp Loading

mui-pr-bot commented Sep 7, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

siriwatknp Sep 8, 2021 • edited Loading

Choose a reason for hiding this comment

siriwatknp Sep 8, 2021 • edited Loading

Choose a reason for hiding this comment

mnajdova Sep 8, 2021

Choose a reason for hiding this comment

mnajdova Sep 8, 2021

Choose a reason for hiding this comment

mnajdova Sep 8, 2021

Choose a reason for hiding this comment

mnajdova Sep 8, 2021

Choose a reason for hiding this comment

mnajdova Sep 8, 2021

Choose a reason for hiding this comment

This comment has been minimized.

siriwatknp commented Sep 9, 2021

danilo-leal commented Sep 9, 2021

danilo-leal commented Sep 9, 2021 • edited Loading

siriwatknp commented Sep 9, 2021 • edited Loading

danilo-leal commented Sep 9, 2021

This comment has been minimized.

danilo-leal commented Sep 10, 2021

mnajdova commented Sep 7, 2021 •

edited by siriwatknp

Loading

mui-pr-bot commented Sep 7, 2021 •

edited

Loading

siriwatknp Sep 8, 2021 •

edited

Loading

siriwatknp Sep 8, 2021 •

edited

Loading

danilo-leal commented Sep 9, 2021 •

edited

Loading

siriwatknp commented Sep 9, 2021 •

edited

Loading