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.

Sign up for GitHub

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

Jump to bottom

Fix MUI's urls reference for version 4 #6702

Merged
merged 2 commits into from
Oct 19, 2021
Merged

Fix MUI's urls reference for version 4 #6702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0950fce
Change https://material-ui.com for https://v4.mui.com
Oct 18, 2021
5440a21
Update migration url
Oct 18, 2021
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
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ A frontend Framework for building data-driven applications running in the browse
## Features

* Adapts to any backend (REST, GraphQL, SOAP, etc.)
* Powered by [material-ui](https://material-ui.com/), [redux](https://redux.js.org/), [react-final-form](https://final-form.org/react), [react-router](https://reacttraining.com/react-router/) and a few more
* Powered by [material-ui](https://v4.mui.com/), [redux](https://redux.js.org/), [react-final-form](https://final-form.org/react), [react-router](https://reacttraining.com/react-router/) and a few more
* Super-fast UI thanks to optimistic rendering (renders before the server returns)
* Undo updates and deletes for a few seconds
* Relationships (many to one, one to many)
Expand Down Expand Up @@ -127,7 +127,7 @@ See the [Data Providers documentation](https://marmelab.com/react-admin/DataProv

## Batteries Included But Removable

React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://material-ui.com/), in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.
React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://v4.mui.com/), in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.

## Examples

Expand Down
4 changes: 2 additions & 2 deletions UPGRADE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Failing to upgrade one of the `ra-` packages will result in a duplication of the
* `react` and `react-dom` are now required to be >= 16.9. This version is backward compatible with 16.3, which was the minimum requirement in react-admin, and it offers the support for Hooks, on which react-admin v3 relies heavily.
* `react-redux` requires a minimum version of 7.1.0 (instead of 5.0). Check their upgrade guide for [6.0](https://github.com/reduxjs/react-redux/releases/tag/v6.0.0) and [7.0](https://github.com/reduxjs/react-redux/releases/tag/v7.0.0)
* `redux-saga` requires a minimum version of 1.0.0 (instead of ~0.16.0). Check their [list of breaking changes for redux-saga 1.0](https://github.com/redux-saga/redux-saga/releases/tag/v1.0.0) on GitHub.
* `material-ui` requires a minimum of 4.0.0 (instead of 1.5). Check their [Upgrade guide](https://next.material-ui.com/guides/migration-v3/).
* `material-ui` requires a minimum of 4.0.0 (instead of 1.5). Check their [Upgrade guide](https://mui.com/guides/migration-v3/).

## `react-router-redux` replaced by `connected-react-router`

Expand Down Expand Up @@ -967,7 +967,7 @@ You can replace `<DisabledInput>` with a disabled or read-only `TextInput`. For
+<TextInput source="id" disabled />
```

See material-ui [`TextField` documentation](https://material-ui.com/components/text-fields/#textfield) for available options.
See material-ui [`TextField` documentation](https://v4.mui.com/components/text-fields/#textfield) for available options.

## The SideBar Width Must Be Set Through The `theme`

Expand Down
4 changes: 2 additions & 2 deletions docs/Admin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ See the [Theming documentation](./Theming.md#using-a-custom-menu) for more detai

## `theme`

Material UI supports [theming](https://material-ui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop:
Material UI supports [theming](https://v4.mui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop:

```jsx
import { createMuiTheme } from '@material-ui/core/styles';
Expand All @@ -293,7 +293,7 @@ const App = () => (

![Dark theme](./img/dark-theme.png)

For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://material-ui.com/customization/themes/).
For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://v4.mui.com/customization/themes/).

## `layout`

Expand Down
16 changes: 8 additions & 8 deletions docs/Buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ It also supports [all the other `<Button>` props](#button).
| -------------- | ------------------------------------------------------------------ |
| `floating` | Applied to the underlying `MuiFab` component used in small screens |

To override the style of all instances of `<CreateButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaCreateButton` key.
To override the style of all instances of `<CreateButton>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaCreateButton` key.

### `<ListButton>`

Expand Down Expand Up @@ -267,7 +267,7 @@ This button is an internal component used by react-admin in [the Filter button/f
| ---------- | ------------------------------------------------------------- |
| `root` | Alternative to using `className`. Applied to the root element |

To override the style of all instances of `<FilterButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaFilterButton` key.
To override the style of all instances of `<FilterButton>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaFilterButton` key.

### `<SortButton>`

Expand Down Expand Up @@ -317,7 +317,7 @@ Base component for most react-admin buttons. Responsive (displays only the icon
| `disabled` | Optional | `boolean` | `false` | If `true`, the button will be disabled |
| `size` | Optional | `'large' | 'medium' | 'small'` | `'small'` | Button size |

Other props are passed down to [the underlying material-ui `<Button>`](https://material-ui.com/api/button/).
Other props are passed down to [the underlying material-ui `<Button>`](https://v4.mui.com/api/button/).

#### CSS API

Expand All @@ -330,7 +330,7 @@ Other props are passed down to [the underlying material-ui `<Button>`](https://m
| `mediumIcon` | Applied to the Button's `children` when `size` prop is `medium` and `alignIcon` prop is 'right' |
| `largeIcon` | Applied to the Button's `children` when `size` prop is `large` and `alignIcon` prop is 'right' |

To override the style of all instances of `<Button>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaButton` key.
To override the style of all instances of `<Button>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaButton` key.

### `<RefreshButton>`
### `<SkipNavigationButton>`
Expand All @@ -341,7 +341,7 @@ To override the style of all instances of `<Button>` using the [material-ui styl
| --------------------- | ----------------------------------------------- |
| `skipToContentButton` | Applied to the underlying `MuiButton` component |

To override the style of all instances of `<SkipNavigationButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaSkipNavigationButton` key.
To override the style of all instances of `<SkipNavigationButton>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaSkipNavigationButton` key.

### `<MenuItemLink>`

Expand All @@ -355,7 +355,7 @@ The `<MenuItemLink>` component displays a menu item with a label and an icon - o
| `primaryText` | Required | `ReactNode` | - | The menu content, displayed when the menu isn't minimized. |
| `leftIcon` | Optional | `ReactNode` | - | The menu icon |

Additional props are passed down to [the underling material-ui `<MenuItem>` component](https://material-ui.com/api/menu-item/#menuitem-api).
Additional props are passed down to [the underling material-ui `<MenuItem>` component](https://v4.mui.com/api/menu-item/#menuitem-api).

You can create a custom menu component using the `<DashboardMenuItem>` and `<MenuItemLink>` components:

Expand Down Expand Up @@ -418,7 +418,7 @@ See [The theming documentation](./Theming.md#menuitemlink) for more details.
| `active` | Applied to the underlying `MuiMenuItem`'s `activeClassName` prop |
| `icon` | Applied to the `ListItemIcon` component when `leftIcon` prop is set |

To override the style of all instances of `<MenuItemLink>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaMenuItemLink` key.
To override the style of all instances of `<MenuItemLink>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaMenuItemLink` key.

### `<UserMenu>`

Expand All @@ -437,4 +437,4 @@ To override the style of all instances of `<MenuItemLink>` using the [material-u
| `userButton` | Applied to the underlying `MuiButton` component when `useGetIdentity().loaded` is `true` and `useGetIdentity().identity.fullName` is set |
| `avatar` | Applied to the underlying `MuiAvatar` component when `useGetIdentity().avatar` is `true` |

To override the style of all instances of `<UserMenu>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaUserMenu` key.
To override the style of all instances of `<UserMenu>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaUserMenu` key.
10 changes: 5 additions & 5 deletions docs/CreateEdit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ You can customize the `<Create>` and `<Edit>` components using the following pro

### CSS API

The `<Create>` and `<Edit>` components accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
The `<Create>` and `<Edit>` components accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:

| Rule name | Description |
| ----------- | ------------------------------------------------------------------------------------------ |
Expand All @@ -118,7 +118,7 @@ The `<Create>` and `<Edit>` components accepts the usual `className` prop, but y
| `noActions` | Applied to the main container when `actions` prop is `false` |
| `card` | Applied to the child component inside the main container (Material UI's `Card` by default) |

To override the style of all instances of `<Create>` and `<Edit>` components using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaCreate` and `RaEdit` keys respectively.
To override the style of all instances of `<Create>` and `<Edit>` components using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaCreate` and `RaEdit` keys respectively.

### Page Title

Expand Down Expand Up @@ -1705,7 +1705,7 @@ Here are the props received by the `Toolbar` component when passed as the `toolb

### CSS API

The `<Toolbar>` accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
The `<Toolbar>` accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:

| Rule name | Description |
| ---------------- | ------------------------------------------------------------------------------- |
Expand All @@ -1715,7 +1715,7 @@ The `<Toolbar>` accepts the usual `className` prop, but you can override many cl
| `mobileToolbar` | Applied to the underlying `MuiToolbar` component when `width` prop is `xs` |
| `spacer` | Applied to the div below the underlying `MuiToolbar` used as spacer |

To override the style of all instances of `<Toolbar>` components using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaToolbar` key.
To override the style of all instances of `<Toolbar>` components using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaToolbar` key.

**Tip**: Use react-admin's `<Toolbar>` component instead of material-ui's `<Toolbar>` component. The former builds upon the latter and adds support for an alternative mobile layout (and is therefore responsive).

Expand Down Expand Up @@ -1926,7 +1926,7 @@ The `<SimpleForm>` and `<TabbedForm>` layouts are quite simple. In order to bett

![custom form layout](./img/custom-form-layout.png)

Here is an example of such custom form, taken from the Posters Galore demo. It uses [material-ui's `<Box>` component](https://material-ui.com/components/box/), and it's a good starting point for your custom form layouts.
Here is an example of such custom form, taken from the Posters Galore demo. It uses [material-ui's `<Box>` component](https://v4.mui.com/components/box/), and it's a good starting point for your custom form layouts.

```jsx
import * as React from "react";
Expand Down
18 changes: 9 additions & 9 deletions docs/Fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ import { BooleanField } from 'react-admin';
| ---------- | --------------------------- |
| `root` | Applied to the root element |

To override the style of all instances of `<BooleanField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaBooleanField` key.
To override the style of all instances of `<BooleanField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaBooleanField` key.

#### Usage

Expand All @@ -183,15 +183,15 @@ import AlarmOffIcon from '@material-ui/icons/AlarmOff';

### `<ChipField>`

Displays a value inside a ["Chip"](https://material-ui.com/components/chips), which is Material UI's term for a label.
Displays a value inside a ["Chip"](https://v4.mui.com/components/chips), which is Material UI's term for a label.

#### CSS API

| Rule name | Description |
| ---------- | -------------------------------------------------------- |
| `chip` | Applied to the underlying Material UI's `Chip` component |

To override the style of all instances of `<ChipField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaChipField` key.
To override the style of all instances of `<ChipField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaChipField` key.

#### Usage

Expand All @@ -215,7 +215,7 @@ import { ChipField, SingleFieldList, ReferenceManyField } from 'react-admin';
</ReferenceManyField>
```

Any additional props are passed to material-ui's `<Chip>` element. Check [The material-ui `<Chip>` documentation](https://material-ui.com/api/chip/) for details.
Any additional props are passed to material-ui's `<Chip>` element. Check [The material-ui `<Chip>` documentation](https://v4.mui.com/api/chip/) for details.

### `<DateField>`

Expand Down Expand Up @@ -328,7 +328,7 @@ This field is also often used within the [<ImageInput />](./Inputs.md#imageinput
| `list` | Applied to the underlying `<ul>` component when `sourceValue` prop is an array |
| `image` | Applied to each underlying `<img>` component |

To override the style of all instances of `<ImageField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaImageField` key.
To override the style of all instances of `<ImageField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaImageField` key.

#### Usage

Expand Down Expand Up @@ -394,7 +394,7 @@ This field is also often used within an [<FileInput />](./Inputs.md#fileinput) c
| ---------- | --------------------------- |
| `root` | Applied to the root element |

To override the style of all instances of `<FileField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaFileField` key.
To override the style of all instances of `<FileField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaFileField` key.

#### Usage

Expand Down Expand Up @@ -792,7 +792,7 @@ With this configuration, `<ReferenceField>` wraps the user's name in a link to t
| ---------- | ----------------------------- |
| `link` | Applied to each child element |

To override the style of all instances of `<ReferenceField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaReferenceField` key.
To override the style of all instances of `<ReferenceField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaReferenceField` key.

#### Usage

Expand Down Expand Up @@ -1088,7 +1088,7 @@ export const PostList = (props) => (
| ---------- | -------------------------------------------------------------------------------------- |
| `progress` | Applied to the Material UI's `LinearProgress` component while `loaded` prop is `false` |

To override the style of all instances of `<ReferenceArrayField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaReferenceArrayField` key.
To override the style of all instances of `<ReferenceArrayField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaReferenceArrayField` key.

#### Usage

Expand Down Expand Up @@ -1266,7 +1266,7 @@ The same pattern applies to show views when you don't want to display all transl

### Styling Fields

All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://material-ui.com/customization/css-in-js/#api) about that.
All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://v4.mui.com/customization/css-in-js/#api) about that.

```jsx
import { makeStyles } from '@material-ui/core/styles';
Expand Down
Loading