Skip to content

Commit 235a9f8

Browse files
doc: improve a bit reference to Material UI
1 parent c670ab1 commit 235a9f8

File tree

10 files changed

+15
-16
lines changed

10 files changed

+15
-16
lines changed

README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ A frontend Framework for building data-driven applications running in the browse
2222

2323
* ☂️ **Opt-In Types**: Develop either in TypeScript or JavaScript
2424

25-
* 👨‍👩‍👧‍👦 Powered by [Material UI](https://mui.com/material-ui/getting-started/overview/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/), [react-query](https://react-query-v3.tanstack.com/), [TypeScript](https://www.typescriptlang.org/) and a few more
25+
* 👨‍👩‍👧‍👦 Powered by [Material UI](https://mui.com/material-ui/getting-started/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/), [react-query](https://react-query-v3.tanstack.com/), [TypeScript](https://www.typescriptlang.org/) and a few more
2626

2727
## Installation
2828

docs/AccordionForm.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ export const TagEdit = () => (
357357

358358
The children of `<AccordionForm>` must be `<AccordionForm.Panel>` elements.
359359

360-
This component renders a [MUI `<Accordion>` component](https://mui.com/components/accordion/). Children are rendered in a Stack, one child per row, just like for `<SimpleForm>`.
360+
This component renders a [Material UI `<Accordion>` component](https://mui.com/components/accordion/). Children are rendered in a Stack, one child per row, just like for `<SimpleForm>`.
361361

362362
### Props
363363

@@ -402,7 +402,7 @@ const CustomerEdit = () => (
402402

403403
## `<AccordionSection>`
404404

405-
Renders children (Inputs) inside a MUI `<Accordion>` element without a Card style. To be used as child of a `<SimpleForm>` or a `<TabbedForm>` element.
405+
Renders children (Inputs) inside a Material UI `<Accordion>` element without a Card style. To be used as child of a `<SimpleForm>` or a `<TabbedForm>` element.
406406

407407
<video controls autoplay playsinline muted loop>
408408
<source src="https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.webm" type="video/webm"/>

docs/Community.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ See the [Discord](#discord) section above.
3737

3838
If your problem is related to a library used by react-admin, you should ask for help on the dependency's support channel:
3939

40-
* Material UI: [Documentation](https://mui.com/material-ui/getting-started/overview/), [Support](https://mui.com/material-ui/getting-started/support/)
40+
* Material UI: [Documentation](https://mui.com/material-ui/getting-started/), [Support](https://mui.com/material-ui/getting-started/support/)
4141
* react-router: [Documentation](https://reactrouter.com/en/main), [Discord](https://rmx.as/discord)
4242
* react-query: [Documentation](https://tanstack.com/query/v3/docs/react/overview), [Discord](https://tlinz.com/discord)
4343
* react-hook-form: [Documentation](https://react-hook-form.com/get-started), [Discord](https://discord.gg/yYv7GZ8)

docs/DateInput.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,10 @@ import { DateInput, minValue } from 'react-admin';
4545

4646
It is not possible to customize the date format. Browsers use the user locale to display the date in the correct format.
4747

48-
If you need to render a UI despite the browser locale, MUI also proposes a [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component, which is more customizable than the native date picker, but requires additional packages.
48+
If you need to render a UI despite the browser locale, Material UI supports a [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component (in MUI X), which is more customizable than the native date picker, but requires additional npm packages.
4949

5050
<video controls autoplay playsinline muted loop>
5151
<source src="./img/date-picker.webm" type="video/webm"/>
5252
<source src="./img/date-picker.mp4" type="video/mp4"/>
5353
Your browser does not support the video tag.
5454
</video>
55-

docs/DateTimeInput.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ The input value must be a valid date string, i.e. a string understood by JavasSr
2828

2929
After modification by the user, the value is stored as a `Date` object, using the browser's timezone. When transformed to JSON, the date is serialized as a string in the ISO 8601 format ('yyyy-MM-ddThh:mm').
3030

31-
**Tip**: For a Material UI styled `<DateTimeInput>` component, check out [MUI X Date Pickers](https://mui.com/x/react-date-pickers/getting-started/#date-pickers)
31+
**Tip**: For a Material UI styled `<DateTimeInput>` component, check out [MUI X Date Pickers](https://mui.com/x/react-date-pickers/)
3232

3333
## Props
3434

docs/Features.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ React-admin provides the **best-in-class documentation**, demo apps, and support
1919

2020
That probably explains why more than 3,000 new apps are published every month using react-admin.
2121

22-
So react-admin is not just the assembly of [react-query](https://react-query.tanstack.com/), [react-hook-form](https://marmelab.com/react-admin/assets/techs/react-hook-form.jpeg), [react-router](https://reacttraining.com/react-router/), [Material UI](https://mui.com/material-ui/getting-started/overview/) and [Emotion](https://github.com/emotion-js/emotion). It's a **framework** made to speed up and facilitate the development of single-page apps in React.
22+
So react-admin is not just the assembly of [react-query](https://react-query.tanstack.com/), [react-hook-form](https://marmelab.com/react-admin/assets/techs/react-hook-form.jpeg), [react-router](https://reacttraining.com/react-router/), [Material UI](https://mui.com/material-ui/getting-started/) and [Emotion](https://github.com/emotion-js/emotion). It's a **framework** made to speed up and facilitate the development of single-page apps in React.
2323

2424
## Basic CRUD
2525

@@ -248,7 +248,7 @@ Reference components are a tremendous development accelerator for complex fronte
248248

249249
Let's be realistic: Many developers focus on features first and don't have much time to spend polishing the User Interface (UI). We tend to be like that, too! The result is that quite often, admin apps are ugly. Spacing isn't consistent, buttons aren't in the best place, and color schemes hurt the eyes.
250250

251-
React-admin provides **components that look pretty good out of the box**, so even if you don't spend time on the UI, it won't look bad (unless you try hard). React-admin uses [Material UI](https://mui.com/material-ui/getting-started/overview/), which is a React implementation of the [Material Design](https://material.io/) guidelines, the most battle-tested design system.
251+
React-admin provides **components that look pretty good out of the box**, so even if you don't spend time on the UI, it won't look bad (unless you try hard). React-admin uses [Material UI](https://mui.com/material-ui/getting-started/), which is a React implementation of the [Material Design](https://material.io/) guidelines, the most battle-tested design system.
252252

253253
<video controls autoplay playsinline muted loop width="100%">
254254
<source src="https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4" type="video/webm" />
@@ -420,7 +420,7 @@ Check the [Building A Custom Filter Tutorial](./FilteringTutorial.md#building-a-
420420

421421
Many admin apps let users perform complex tasks implying the update of many fields and records. To allow such complex workflows, developers must be able to build sophisticated forms, with elaborate validation rules.
422422

423-
React-admin offers a **rich set of input components and form layouts** to build forms, powered by [Material UI](https://mui.com/material-ui/getting-started/overview/) and [react-hook-form](https://react-hook-form.com/). React-admin's form components also take care of binding the form values to the record being edited and validating the form inputs.
423+
React-admin offers a **rich set of input components and form layouts** to build forms, powered by [Material UI](https://mui.com/material-ui/getting-started/) and [react-hook-form](https://react-hook-form.com/). React-admin's form components also take care of binding the form values to the record being edited and validating the form inputs.
424424

425425
For instance, here is how to build a tabbed form for editing a blog post:
426426

@@ -1434,7 +1434,7 @@ React-admin is used by thousands of companies across the world, so the internati
14341434

14351435
## Accessibility
14361436

1437-
The react-admin core team has a **strong commitment to accessibility**. React-admin uses the [Material UI](https://mui.com/material-ui/getting-started/overview/) components, which are accessible by default. For its own components, react-admin uses the [WAI-ARIA](https://www.w3.org/TR/wai-aria/) standard to make them accessible. This includes `aria-` attributes, keyboard navigation, and focus management.
1437+
The react-admin core team has a **strong commitment to accessibility**. React-admin uses the [Material UI](https://mui.com/material-ui/getting-started/) components, which are accessible by default. For its own components, react-admin uses the [WAI-ARIA](https://www.w3.org/TR/wai-aria/) standard to make them accessible. This includes `aria-` attributes, keyboard navigation, and focus management.
14381438

14391439
We routinely test react-admin with the [WAVE](https://wave.webaim.org/) and [Axe](https://www.deque.com/axe/) accessibility tools.
14401440

docs/Readme.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ See the [Data Providers documentation](./DataProviders.md) for details.
119119

120120
## Architecture: Batteries Included But Removable
121121

122-
React-admin is designed as a library of loosely coupled React components built on top of [Material UI](https://mui.com/material-ui/getting-started/overview/), in addition to React hooks allowing to reuse the logic with a custom UI.
122+
React-admin is designed as a library of loosely coupled React components built on top of [Material UI](https://mui.com/material-ui/getting-started/), in addition to React hooks allowing to reuse the logic with a custom UI.
123123

124124
You may 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.
125125

docs/Tutorial.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ That means react-admin never blocks you: if one react-admin component doesn't pe
412412

413413
The `<MyUrlField>` component is a perfect opportunity to illustrate how to customize styles.
414414

415-
React-admin relies on [Material UI](https://mui.com/material-ui/getting-started/overview/), a set of React components modeled after Google's [Material Design Guidelines](https://material.io/). All Material UI components (and most react-admin components) support a prop called `sx`, which allows custom inline styles. Let's take advantage of the `sx` prop to remove the underline from the link and add an icon:
415+
React-admin relies on [Material UI](https://mui.com/material-ui/getting-started/), a set of React components modeled after Google's [Material Design Guidelines](https://material.io/). All Material UI components (and most react-admin components) support a prop called `sx`, which allows custom inline styles. Let's take advantage of the `sx` prop to remove the underline from the link and add an icon:
416416

417417
{% raw %}
418418
```tsx

packages/ra-ui-materialui/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ra-ui-material
22

3-
UI Components for [react-admin](https://marmelab.com/react-admin/) with [Material UI](https://mui.com/material-ui/getting-started/overview/).
3+
UI Components for [react-admin](https://marmelab.com/react-admin/) with [Material UI](https://mui.com/material-ui/getting-started/).
44

55
## License
66

packages/react-admin/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ A frontend Framework for building data-driven applications running in the browse
99
## Features
1010

1111
* Adapts to any backend (REST, GraphQL, SOAP, etc.)
12-
* Powered by [Material UI](https://mui.com/material-ui/getting-started/overview/), [react-query](https://react-query-v3.tanstack.com/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/) and a few more
12+
* Powered by [Material UI](https://mui.com/material-ui/getting-started/), [react-query](https://react-query-v3.tanstack.com/), [react-hook-form](https://react-hook-form.com), [react-router](https://reacttraining.com/react-router/) and a few more
1313
* Super-fast UI thanks to optimistic rendering (renders before the server returns)
1414
* Undo updates and deletes for a few seconds
1515
* Relationships (many to one, one to many)
@@ -133,7 +133,7 @@ See the [Data Providers documentation](https://marmelab.com/react-admin/DataProv
133133

134134
## Batteries Included But Removable
135135

136-
React-admin is designed as a library of loosely coupled React components built on top of [Material UI](https://mui.com/material-ui/getting-started/overview/), 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.
136+
React-admin is designed as a library of loosely coupled React components built on top of [Material UI](https://mui.com/material-ui/getting-started/), 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.
137137

138138
## Examples
139139

0 commit comments

Comments
 (0)