[docs] Fix Safari code font size #34859

oliviertassinari · 2022-10-22T23:41:21Z

The fix relies on https://github.com/necolas/normalize.css/blob/master/normalize.css#L102

Before

https://6357aef90039260008eccf21--material-ui-docs.netlify.app/material-ui/react-skeleton/#usage

After

https://deploy-preview-34859--material-ui.netlify.app/material-ui/react-skeleton/#usage

Why work on this?

Because iOS & blog posts 🙈:

mui-bot · 2022-10-22T23:43:32Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-34859--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 1a7686f

oliviertassinari · 2022-10-22T23:43:39Z

docs/public/static/styles/prism-okaidia.css

-
-code[class*='language-'] {
+code[class*='language-'],
+pre[class*='language-'] {


I have synced the top of this CSS file with https://unpkg.com/prismjs/themes/prism-okaidia.css. I have also commented what is not necessary.

oliviertassinari · 2022-10-22T23:50:57Z

docs/src/modules/components/MarkdownElement.js

-  // inline code
-  '& code': {
+  // inline code block
+  '& :not(pre) > code': {


I use :not(pre) in the selector to avoid the need to reset the styles for code blocks. This selector more accurately selects inline code and ONLY. For example, it matches 1. but doesn't 2.

A foo B

<Foo />

oliviertassinari · 2022-10-23T11:43:11Z

docs/src/modules/components/MarkdownElement.js

    fontFamily: 'inherit',
-    fontSize: '0.813rem',
+    fontSize: theme.typography.pxToRem(13),


The correct API

oliviertassinari · 2022-10-23T11:47:11Z

docs/public/static/styles/prism-okaidia.css

 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+  color: #8292a2;


PrismJS/prism#2292

oliviertassinari · 2022-10-23T11:47:17Z

docs/public/static/styles/prism-okaidia.css


 .token.punctuation {
  color: #f8f8f2;
 }

-.namespace {
+.token.namespace {


PrismJS/prism#2161

oliviertassinari · 2022-10-23T16:34:20Z

docs/src/modules/components/TopLayoutBlog.js

-    '& pre': {
-      fontSize: theme.typography.pxToRem(16),
-    },


This has no impacts, e.g. https://mui.com/blog/date-pickers-stable-v5/#integrated-localization. It's dead code.

michaldudak · 2022-10-27T10:07:35Z

There are many changes unrelated to the Safari code font size in this PR. Could you either split it into multiple PRs or summarize all the changes in the description and rename the PR to better reflect what it's about?

oliviertassinari · 2022-10-27T14:54:46Z

@michaldudak I think that we could create about 10 PRs out of this one, which more or less matches each of the line comments.

michaldudak · 2022-10-28T07:47:04Z

IMO it's important to have a description matching the content of the PR. When I do git blame and look for reasons for a specific change, I skim through the description, not the comments. In this case, the description suggests the change is only about font size, which is not.

oliviertassinari · 2022-10-30T17:18:37Z

@michaldudak Done, I have isolated the changes to different PRs.

oliviertassinari · 2022-10-30T20:44:50Z

docs/src/modules/components/MarkdownElement.js

+    // Reset for Safari
+    // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
+    fontSize: '1em',


The fix for Safari font size is to not apply the custom font size on the <code> but on the <pre> element.

oliviertassinari added bug 🐛 Something doesn't work docs Improvements or additions to the documentation labels Oct 22, 2022

oliviertassinari commented Oct 22, 2022

View reviewed changes

oliviertassinari force-pushed the fix-safari-text-font-size branch 9 times, most recently from 1f8a463 to 498345b Compare October 23, 2022 12:10

oliviertassinari commented Oct 23, 2022

View reviewed changes

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

oliviertassinari force-pushed the fix-safari-text-font-size branch from 7b1900a to a3e9f19 Compare October 23, 2022 16:09

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

oliviertassinari changed the title ~~[docs] Fix code font size with Safari~~ [docs] Fix Safari code font size Oct 23, 2022

oliviertassinari force-pushed the fix-safari-text-font-size branch 2 times, most recently from 300b89e to 56ee07a Compare October 23, 2022 16:24

oliviertassinari requested review from michaldudak and mnajdova as code owners October 23, 2022 16:24

oliviertassinari force-pushed the fix-safari-text-font-size branch 3 times, most recently from ff7ab46 to 524075d Compare October 23, 2022 16:33

oliviertassinari commented Oct 23, 2022

View reviewed changes

oliviertassinari added the design This is about UI or UX design, please involve a designer label Oct 23, 2022

oliviertassinari force-pushed the fix-safari-text-font-size branch 4 times, most recently from dc5fe89 to b94554f Compare October 30, 2022 17:13

sync okaidia with latest

1a7686f

oliviertassinari force-pushed the fix-safari-text-font-size branch from b94554f to 1a7686f Compare October 30, 2022 17:16

oliviertassinari mentioned this pull request Oct 30, 2022

[docs] Fix missing emotion prefixes #34958

Merged

oliviertassinari commented Oct 30, 2022

View reviewed changes

michaldudak approved these changes Oct 31, 2022

View reviewed changes

mnajdova merged commit c84cca7 into mui:master Oct 31, 2022

oliviertassinari deleted the fix-safari-text-font-size branch October 31, 2022 10:32

oliviertassinari added the scope: docs-infra Specific to the docs-infra product label Nov 21, 2022

daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022

[docs] Fix Safari code font size (mui#34859)

e083428

feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022

[docs] Fix Safari code font size (mui#34859)

9197d9e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Fix Safari code font size #34859

[docs] Fix Safari code font size #34859

oliviertassinari commented Oct 22, 2022 •

edited

mui-bot commented Oct 22, 2022 •

edited

oliviertassinari Oct 22, 2022 •

edited

oliviertassinari Oct 22, 2022 •

edited

oliviertassinari Oct 23, 2022

oliviertassinari Oct 23, 2022

oliviertassinari Oct 23, 2022

oliviertassinari Oct 23, 2022 •

edited

michaldudak commented Oct 27, 2022

oliviertassinari commented Oct 27, 2022

michaldudak commented Oct 28, 2022

oliviertassinari commented Oct 30, 2022

oliviertassinari Oct 30, 2022 •

edited

[docs] Fix Safari code font size #34859

[docs] Fix Safari code font size #34859

Conversation

oliviertassinari commented Oct 22, 2022 • edited

Why work on this?

mui-bot commented Oct 22, 2022 • edited

oliviertassinari Oct 22, 2022 • edited

Choose a reason for hiding this comment

oliviertassinari Oct 22, 2022 • edited

Choose a reason for hiding this comment

oliviertassinari Oct 23, 2022

Choose a reason for hiding this comment

oliviertassinari Oct 23, 2022

Choose a reason for hiding this comment

oliviertassinari Oct 23, 2022

Choose a reason for hiding this comment

oliviertassinari Oct 23, 2022 • edited

Choose a reason for hiding this comment

michaldudak commented Oct 27, 2022

oliviertassinari commented Oct 27, 2022

michaldudak commented Oct 28, 2022

oliviertassinari commented Oct 30, 2022

oliviertassinari Oct 30, 2022 • edited

Choose a reason for hiding this comment

oliviertassinari commented Oct 22, 2022 •

edited

mui-bot commented Oct 22, 2022 •

edited

oliviertassinari Oct 22, 2022 •

edited

oliviertassinari Oct 22, 2022 •

edited

oliviertassinari Oct 23, 2022 •

edited

oliviertassinari Oct 30, 2022 •

edited