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.

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

[material-ui][docs] Apply new code header docs feature #41508

Merged
merged 7 commits into from
Mar 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions docs/data/material/customization/typography/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@

To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.

⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and
`woff2` files. Fonts will _not_ be embedded within your bundle. They will be loaded from your webserver instead of a
CDN.
:::warning
This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and
`woff2` files. Fonts will _not_ be embedded within your bundle. They will be loaded from your webserver instead of a CDN.

Check warning on line 36 in docs/data/material/customization/typography/typography.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [Google.Will] Avoid using 'will'. Raw Output: {"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/customization/typography/typography.md", "range": {"start": {"line": 36, "column": 22}}}, "severity": "WARNING"}

Check warning on line 36 in docs/data/material/customization/typography/typography.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [Google.Will] Avoid using 'will'. Raw Output: {"message": "[Google.Will] Avoid using 'will'.", "location": {"path": "docs/data/material/customization/typography/typography.md", "range": {"start": {"line": 36, "column": 70}}}, "severity": "WARNING"}
:::

```js
import RalewayWoff2 from './fonts/Raleway-Regular.woff2';
Expand Down Expand Up @@ -181,7 +182,7 @@
}
```

_You need to apply the above CSS on the HTML element of this page to see the below demo rendered correctly_
You need to apply the above CSS on the HTML element of this page to see the below demo rendered correctly.
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved

{{"demo": "FontSizeTheme.js"}}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack`
import { Button, TextField } from '@mui/material';
```

⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler
that doesn't support tree-shaking.
:::warning
The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler that doesn't support tree-shaking.
:::

## Development environment

Expand Down
16 changes: 4 additions & 12 deletions docs/data/material/guides/server-rendering/server-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ In the following recipe, we are going to look at how to set up server-side rende

Create a theme that will be shared between the client and the server:

`theme.js`

```js
```js title="theme.js"
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

Expand Down Expand Up @@ -56,9 +54,7 @@ The following is the outline for what the server-side is going to look like.
We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come into the server.
If you're unfamiliar with Express or middleware, know that the `handleRender` function will be called every time the server receives a request.

`server.js`

```js
```js title="server.js"
import express from 'express';

// We are going to fill these out in the sections to follow.
Expand Down Expand Up @@ -92,9 +88,7 @@ Material UI uses Emotion as its default styled engine.
We need to extract the styles from the Emotion instance.
For this, we need to share the same cache configuration for both the client and server:

`createEmotionCache.js`

```js
```js title="createEmotionCache.js"
import createCache from '@emotion/cache';

export default function createEmotionCache() {
Expand Down Expand Up @@ -189,9 +183,7 @@ The client-side is straightforward.
All we need to do is use the same cache configuration as the server-side.
Let's take a look at the client file:

`client.js`

```jsx
```jsx title="client.js"
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import CssBaseline from '@mui/material/CssBaseline';
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/guides/typescript/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ The library types are strict by default and loose via opt-in.

## Customization of `Theme`

Moved to [/customization/theming/#custom-variables](/material-ui/customization/theming/#custom-variables).
Moved to [the Customizing the theme page](/material-ui/customization/theming/#custom-variables).

## Complications with the `component` prop

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ Nothing fancy, just plain CSS.

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/plain-css-fdue7)

**PlainCssSlider.css**

```css
```css title="PlainCssSlider.css"
.slider {
color: #20b2aa;
}
Expand All @@ -34,9 +32,7 @@ Nothing fancy, just plain CSS.
}
```

**PlainCssSlider.js**

```jsx
```jsx title="PlainCssSlider.css"
import * as React from 'react';
import Slider from '@mui/material/Slider';
import './PlainCssSlider.css';
Expand Down Expand Up @@ -101,9 +97,7 @@ The following examples override the slider's `thumb` style in addition to the cu

{{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}

**PlainCssSliderDeep1.css**

```css
```css title="PlainCssSliderDeep1.css"
.slider {
color: #20b2aa;
}
Expand All @@ -117,9 +111,7 @@ The following examples override the slider's `thumb` style in addition to the cu
}
```

**PlainCssSliderDeep1.js**

```jsx
```jsx title="PlainCssSliderDeep1.js"
import * as React from 'react';
import Slider from '@mui/material/Slider';
import './PlainCssSliderDeep1.css';
Expand All @@ -136,9 +128,7 @@ export default function PlainCssSliderDeep1() {

The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.

**PlainCssSliderDeep2.css**

```css
```css title="PlainCssSliderDeep2.css"
.slider {
color: #20b2aa;
}
Expand All @@ -152,9 +142,7 @@ The above demo relies on the [default `className` values](/system/styles/advance
}
```

**PlainCssSliderDeep2.js**

```jsx
```jsx title="PlainCssSliderDeep2.js"
import * as React from 'react';
import Slider from '@mui/material/Slider';
import './PlainCssSliderDeep2.css';
Expand All @@ -180,9 +168,7 @@ Explicitly providing the class names to the component is too much effort?

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/global-classnames-dho8k)

**GlobalCssSlider.css**

```css
```css title="GlobalCssSlider.css"
.MuiSlider-root {
color: #20b2aa;
}
Expand All @@ -192,9 +178,7 @@ Explicitly providing the class names to the component is too much effort?
}
```

**GlobalCssSlider.js**

```jsx
```jsx title="GlobalCssSlider.js"
import * as React from 'react';
import Slider from '@mui/material/Slider';
import './GlobalCssSlider.css';
Expand Down Expand Up @@ -254,9 +238,7 @@ The following example overrides the slider's `thumb` style in addition to the cu

{{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}

**GlobalCssSliderDeep.css**

```css
```css title="GlobalCssSliderDeep.css"
.MuiSlider-root {
color: #20b2aa;
}
Expand All @@ -270,9 +252,7 @@ The following example overrides the slider's `thumb` style in addition to the cu
}
```

**GlobalCssSliderDeep.js**

```jsx
```jsx title="GlobalCssSliderDeep.js"
import * as React from 'react';
import Slider from '@mui/material/Slider';
import './GlobalCssSliderDeep.css';
Expand Down Expand Up @@ -431,9 +411,7 @@ bundling solution people are using.

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/css-modules-nuyg8)

**CssModulesSlider.module.css**

```css
```css title="CssModulesSlider.module.css"
.slider {
color: #20b2aa;
}
Expand All @@ -443,9 +421,7 @@ bundling solution people are using.
}
```

**CssModulesSlider.js**

```jsx
```jsx title="CssModulesSlider.js"
import * as React from 'react';
import Slider from '@mui/material/Slider';
// Webpack, Parcel or else will inject the CSS into the page
Expand Down Expand Up @@ -512,9 +488,7 @@ The following examples override the slider's `thumb` style in addition to the cu

{{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}

**CssModulesSliderDeep1.module.css**

```css
```css title="CssModulesSliderDeep1.module.css"
.slider {
color: #20b2aa;
}
Expand All @@ -528,9 +502,7 @@ The following examples override the slider's `thumb` style in addition to the cu
}
```

**CssModulesSliderDeep1.js**

```jsx
```jsx title="CssModulesSliderDeep1.js"
import * as React from 'react';
// Webpack, Parcel or else will inject the CSS into the page
import styles from './CssModulesSliderDeep1.module.css';
Expand All @@ -548,9 +520,7 @@ export default function CssModulesSliderDeep1() {

The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.

**CssModulesSliderDeep2.module.css**

```css
```css title="CssModulesSliderDeep2.module.css"
.slider {
color: #20b2aa;
}
Expand All @@ -564,9 +534,7 @@ The above demo relies on the [default `className` values](/system/styles/advance
}
```

**CssModulesSliderDeep2.js**

```jsx
```jsx title="CssModulesSliderDeep2.js"
import * as React from 'react';
// Webpack, Parcel or else will inject the CSS into the page
import styles from './CssModulesSliderDeep2.module.css';
Expand Down Expand Up @@ -618,9 +586,7 @@ If you use a different framework, or already have set up your project, follow th
1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).

**tailwind.config.js**

```diff
```diff title="tailwind.config.js"
module.exports = {
+ corePlugins: {
+ preflight: false,
Expand All @@ -630,9 +596,7 @@ If you use a different framework, or already have set up your project, follow th

3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js and `"#root"` for CRA:

**tailwind.config.js**

```diff
```diff title="tailwind.config.js"
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
Expand Down Expand Up @@ -737,9 +701,7 @@ Now it's all set up and you can start using Tailwind CSS on the Material UI co

[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-ndkshy?file=pages%2Findex.tsx)

**index.tsx**

```jsx
```jsx title="index.tsx"
import * as React from 'react';
import Slider from '@mui/material/Slider';

Expand All @@ -761,9 +723,7 @@ This example showcases how to override the Slider's `thumb` style.

{{"demo": "StyledComponentsDeep.js", "hideToolbar": true}}

**SliderThumbOverrides.tsx**

```jsx
```jsx title="SliderThumbOverrides.tsx"
import * as React from 'react';
import Slider from '@mui/material/Slider';

Expand All @@ -786,9 +746,7 @@ export default function SliderThumbOverrides() {
If you want to style a component's pseudo-state, you can use the appropriate key in the `classes` prop.
Here is an example of how you can style the Slider's active state:

**SliderPseudoStateOverrides.tsx**

```jsx
```jsx title="SliderPseudoStateOverrides.tsx"
import * as React from 'react';
import Slider from '@mui/material/Slider';

Expand Down
Loading
Loading