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

[docs] Format some previously unformatted, untranslated files #21558

Merged
merged 2 commits into from
Jun 25, 2020
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
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/examples/gatsby/public/
/examples/preact/config
/examples/preact/scripts
# auto-generated by Framer
/framer/Material-UI.framerfx/design/document.json
/packages/babel-plugin-unwrap-createStyles/test/__fixtures__/
/packages/material-ui-codemod/lib
Expand Down
33 changes: 20 additions & 13 deletions docs/src/pages/guides/migration-v3/migration-v3.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
Looking for the v3 docs? [Find them here](https://material-ui.com/versions/).

> This document is a work in progress.
Have you upgraded your site and run into something that's not covered here?
[Add your changes on GitHub](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/migration-v3/migration-v3.md).
> Have you upgraded your site and run into something that's not covered here?
> [Add your changes on GitHub](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/migration-v3/migration-v3.md).

## Introduction

Expand All @@ -16,8 +16,8 @@ We'll do our best to keep things easy to follow, and as sequential as possible s

## Why you should migrate

This documentation page covers the *how* of migrating from v3 to v4.
The *why* is covered in the [release blog post on Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701).
This documentation page covers the _how_ of migrating from v3 to v4.
The _why_ is covered in the [release blog post on Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701).

## Updating your dependencies

Expand Down Expand Up @@ -132,6 +132,7 @@ yarn add @material-ui/styles

console.log({ background });
```

- You can safely remove the next variant from the theme creation:

```diff
Expand All @@ -151,7 +152,7 @@ yarn add @material-ui/styles
}
```

*Tip: you can provide more than 1 argument: `theme.spacing(1, 2) // = '8px 16px'`*.
_Tip: you can provide more than 1 argument: `theme.spacing(1, 2) // = '8px 16px'`_.

You can use [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api) on your project to make this smoother.

Expand All @@ -167,7 +168,9 @@ yarn add @material-ui/styles
- spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]),
+ spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
```

Going forward, you can use the theme to implement [a custom Grid spacing transformation function](https://material-ui.com/system/spacing/#transformation).

- [Container] Moved from `@material-ui/lab` to `@material-ui/core`.

```diff
Expand All @@ -180,7 +183,7 @@ yarn add @material-ui/styles
#### `value` type

Normalized `value` prop type for input components to use `unknown`. This affects
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.

```diff
function MySelect({ children }) {
Expand Down Expand Up @@ -283,6 +286,7 @@ This change is explained in more detail in the [TypeScript guide](/guides/typesc
the migration strategy.

This also applies to `Dialog` and `Popover`.

- [Modal] Remove the classes customization API for the Modal component (-74% bundle size reduction when used standalone).
- [Modal] event.defaultPrevented is now ignored.
The new logic closes the Modal even if `event.preventDefault()` is called on the key down escape event.
Expand Down Expand Up @@ -333,7 +337,6 @@ This change is explained in more detail in the [TypeScript guide](/guides/typesc
+track
```


### Snackbar

- [Snackbar] Match the new specification.
Expand All @@ -344,19 +347,18 @@ This change is explained in more detail in the [TypeScript guide](/guides/typesc
### SvgIcon

- [SvgIcon] Rename nativeColor -> htmlColor.
React solved the same problem with the `for` HTML attribute, they have decided to call the prop `htmlFor`. This change follows the same reasoning.
React solved the same problem with the `for` HTML attribute, they have decided to call the prop `htmlFor`. This change follows the same reasoning.

```diff
-<AddIcon nativeColor="#fff" />
+<AddIcon htmlColor="#fff" />
```


### Tabs

- [Tab] Remove the `labelContainer`, `label` and `labelWrapped` class keys for simplicity.
This has allowed us to remove 2 intermediary DOM elements.
You should be able to move the custom styles to the `root` class key.
This has allowed us to remove 2 intermediary DOM elements.
You should be able to move the custom styles to the `root` class key.

![A simpler tab item DOM structure](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png)

Expand All @@ -375,6 +377,7 @@ You should be able to move the custom styles to the `root` class key.
-<TableCell numeric>{row.calories}</TableCell>
+<TableCell align="right">{row.calories}</TableCell>
```

- [TableRow] Remove the fixed height CSS property.
The cell height is computed by the browser using the padding and line-height.
- [TableCell] Move the `dense` mode to a different property:
Expand All @@ -383,6 +386,7 @@ You should be able to move the custom styles to the `root` class key.
-<TableCell padding="dense" />
+<TableCell size="small" />
```

- [TablePagination] The component no longer tries to fix invalid (`page`, `count`, `rowsPerPage`) property combinations. It raises a warning instead.

### TextField
Expand All @@ -398,13 +402,16 @@ You should be able to move the custom styles to the `root` class key.
Foo
</InputLabel>
```

- [InputBase] Change the default box sizing model.
It uses the following CSS now:

```css
box-sizing: border-box;
```

This solves issues with the `fullWidth` prop.

- [InputBase] Remove the `inputType` class from `InputBase`.

### Tooltip
Expand Down Expand Up @@ -433,6 +440,7 @@ You should be able to move the custom styles to the `root` class key.
-<Typography headlineMapping={headlineMapping}>
+<Typography variantMapping={variantMapping}>
```

- [Typography] Change the default variant from `body2` to `body1`.
A font size of 16px is a better default than 14px.
Bootstrap, material.io, and even the documentation use 16px as a default font size.
Expand All @@ -441,13 +449,12 @@ You should be able to move the custom styles to the `root` class key.
- [Typography] Remove the default color from the typography variants.
The color should inherit most of the time. It's the default behavior of the web.
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028).
The usage of *default* should be avoided, it lacks semantic.
The usage of _default_ should be avoided, it lacks semantic.

### Node

- [Drop node 6 support](https://github.com/nodejs/Release/blob/eb91c94681ea968a69bf4a4fe85c656ed44263b3/README.md#release-schedule), you should upgrade to node 8.


### UMD

- This change eases the use of Material-UI with a CDN:
Expand Down
12 changes: 6 additions & 6 deletions docs/src/pages/guides/migration-v4/migration-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,28 +131,28 @@ yarn add @material-ui/core
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionActions from '@material-ui/core/AccordionActions';
+import AccordionActions from '@material-ui/core/AccordionActions';

-<ExpansionPanel>
+<Accordion>
- <ExpansionPanelSummary>
- <ExpansionPanelSummary>
+ <AccordionSummary>
<Typography>Location</Typography>
<Typography>Select trip destination</Typography>
- </ExpansionPanelSummary>
- </ExpansionPanelSummary>
+ </AccordionSummary>
- <ExpansionPanelDetails>
+ <AccordionDetails>
<Chip label="Barbados" onDelete={() => {}} />
<Typography variant="caption">Select your destination of choice</Typography>
- </ExpansionPanelDetails>
- </ExpansionPanelDetails>
+ </AccordionDetails>
<Divider />
- <ExpansionPanelActions>
- <ExpansionPanelActions>
+ <AccordionActions>
<Button size="small">Cancel</Button>
<Button size="small" color="primary">Save</Button>
- </ExpansionPanelActions>
- </ExpansionPanelActions>
+ </AccordionActions>
-</ExpansionPanel>
+</Accordion>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/guides/responsive-ui/responsive-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ We provide the following helpers to make the UI responsive:
- [Breakpoints](/customization/breakpoints/): API that enables the use of breakpoints in a wide variety of contexts.
- [useMediaQuery](/components/use-media-query/): This is a CSS media query hook for React. It listens for matches to a CSS media query.
- [Hidden](/components/hidden/):
Quickly and responsively toggle the visibility value of components and more with our hidden utilities.
Quickly and responsively toggle the visibility value of components and more with our hidden utilities.
3 changes: 2 additions & 1 deletion scripts/prettier.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ const prettier = require('prettier');
const fs = require('fs');
const path = require('path');
const yargs = require('yargs');
const { LANGUAGES } = require('docs/src/modules/constants');
const listChangedFiles = require('./listChangedFiles');

function isTranslatedDocument(filename) {
// markdown files from crowdin end with a 2 letter locale
return /-\w{2}\.md$/.test(filename);
return new RegExp(String.raw`-(${LANGUAGES.join('|')})\.md$`).test(filename);
}

function runPrettier(options) {
Expand Down