Merge pull request #8767 from marmelab/gif-to-webm

[Doc] Convert GIF files to WebM

docs/AppBar.md

@@ -228,7 +228,7 @@ export const MyAppBar = () => (
 If your app uses [authentication](./Authentication.md), the `<AppBar>` component displays a button to display the user menu on the right side. By default, the user menu only contains a logout button.
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/AppBar-user-menu.webm" type="video/webm">
+  <source src="./img/AppBar-user-menu.webm" type="video/webm"/>
   Your browser does not support the video tag.
 </video>
 
@@ -440,7 +440,7 @@ export const MyLayout = (props) => (
 By default, users can override the page title [in configurable mode](./Features.md#configurable-ui).
 
 <video controls autoplay muted loop width="100%">
-  <source src="./img/TitleConfigurable.webm" type="video/webm">
+  <source src="./img/TitleConfigurable.webm" type="video/webm"/>
   Your browser does not support the video tag.
 </video>
 

docs/Architecture.md

@@ -105,7 +105,11 @@ We spend a great deal of time refining the UI to make it as intuitive as possibl
 
 React-admin produces a user interface that is voluntarily bland by default because we want to emphasize content rather than chrome.
 
-![Sort Button](./img/sort-button.gif)
+<video controls autoplay muted loop>
+  <source src="./img/sort-button.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 As for the developer experience, react-admin is constantly evolving to find the sweet spot between an intuitive API, power user features, not too much magic, and just enough documentation. The core team are the first testers of react-admin, and pay attention to the productivity, debuggability, discoverability, performance, and robustness of all the hooks and components.
 

docs/ArrayInput.md

@@ -7,7 +7,11 @@ title: "The ArrayInput Component"
 
 To edit arrays of data embedded inside a record, `<ArrayInput>` creates a list of sub-forms.
 
-![ArrayInput](./img/array-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/array-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 `<ArrayInput>` allows editing of embedded arrays, like the `items` field in the following `order` record:
 

docs/AuthProviderWriting.md

@@ -320,7 +320,11 @@ export default {
 };
 ```
 
-![Logout button](./img/logout.gif)
+<video controls autoplay muted loop>
+  <source src="./img/logout.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 The `authProvider.logout()` method is also a good place to notify the authentication backend that the user credentials are no longer valid after logout.
 

docs/Authentication.md

@@ -5,7 +5,11 @@ title: "security"
 
 # Security
 
-![Login](./img/login.gif)
+<video controls autoplay muted loop>
+  <source src="./img/login.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 React-admin lets you secure your admin app with the authentication strategy of your choice. Since there are many possible strategies (Basic Auth, JWT, OAuth, etc.), react-admin delegates authentication logic to an `authProvider`.
 

docs/AutocompleteArrayInput.md

@@ -8,7 +8,11 @@ title: "The AutocompleteArrayInput Component"
 To let users choose multiple values in a list using a dropdown with autocompletion, use `<AutocompleteArrayInput>`.
 It renders using Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/).
 
-![AutocompleteArrayInput](./img/autocomplete-array-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/autocomplete-array-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`.
 
@@ -133,7 +137,11 @@ const choices = possibleValues.map(value => ({ id: value, name: ucfirst(value) }
 
 To allow users to add new options, pass a React element as the `create` prop. `<AutocompleteArrayInput>` will then render a "Create" option at the bottom of the choices list. When clicked, it will render the create element.
 
-![create option](./img/autocomplete-array-input-create.gif)
+<video controls autoplay muted loop>
+  <source src="./img/autocomplete-array-input-create.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 {% raw %}
 ```jsx

docs/AutocompleteInput.md

@@ -8,7 +8,11 @@ title: "The AutocompleteInput Component"
 To let users choose a value in a list using a dropdown with autocompletion, use `<AutocompleteInput>`.
 It renders using [Material UI's `<Autocomplete>`](https://mui.com/material-ui/react-autocomplete/).
 
-![AutocompleteInput](./img/autocomplete-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/autocomplete-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 This input allows editing record fields that are scalar values, e.g. `123`, `'admin'`, etc. 
 

docs/BooleanInput.md

@@ -7,7 +7,11 @@ title: "The BooleanInput Component"
 
 `<BooleanInput />` renders a switch allowing users to set the value `true` or `false` to a record field.
 
-![BooleanInput](./img/boolean-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/boolean-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 **Tip**: This input doesn't let users set a `null` value - only `true` or `false`. Use the [`<NullableBooleanInput />`](./NullableBooleanInput.md) component if you have to handle non-required booleans.
 

docs/Buttons.md

@@ -256,7 +256,11 @@ export const PostList = () => (
 
 This button is an internal component used by react-admin in [the Filter button/form combo](./FilteringTutorial.md#the-filter-buttonform-combo).
 
-![List Filters](./img/list_filter.gif)
+<video controls autoplay muted loop>
+  <source src="./img/list_filter.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 #### `sx`: CSS API
 
@@ -365,7 +369,11 @@ To override the style of all instances of `<SkipNavigationButton>` using the [Ma
 
 The `<MenuItemLink>` component displays a menu item with a label and an icon - or only the icon with a tooltip when the sidebar is minimized. It also handles the automatic closing of the menu on tap on mobile.
 
-![custom menu icons](./img/custom-menu.gif)
+<video controls autoplay muted loop>
+  <source src="./img/custom-menu.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 | Prop          | Required | Type                 | Default | Description                              |
 | ------------- | -------- | -------------------- | ------- | ---------------------------------------- |

docs/CheckboxGroupInput.md

@@ -7,7 +7,11 @@ title: "The CheckboxGroupInput Component"
 
 If you want to let the user choose multiple values among a list of possible values by showing them all, `<CheckboxGroupInput>` is the right component.
 
-![CheckboxGroupInput](./img/checkbox-group-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/checkbox-group-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 This input allows editing values that are arrays of scalar values, e.g. `[123, 456]`. 
 

docs/Configurable.md

@@ -7,7 +7,11 @@ title: "The Configurable Component"
 
 This component makes another component configurable by the end user. When users enter the configuration mode, they can customize the component's settings via the inspector.
 
-![SimpleListConfigurable](./img/SimpleListConfigurable.gif)
+<video controls autoplay muted loop>
+  <source src="./img/SimpleListConfigurable.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 Some react-admin components are already configurable - or rather they have a configurable counterpart:
 

docs/Datagrid.md

@@ -140,7 +140,11 @@ Finally, `<Datagrid>` inspects children for props that indicate how it should be
 
 ## `bulkActionButtons`
 
-![Bulk Action Buttons](./img/bulk-actions-toolbar.gif)
+<video controls autoplay muted loop>
+  <source src="./img/bulk-actions-toolbar.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all Datagrids have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom element as the `bulkActionButtons` prop of the `<Datagrid>` component:
 
@@ -388,7 +392,11 @@ const PostList = () => (
 
 ## `expand`
 
-![expandable panel](./img/datagrid_expand.gif)
+<video controls autoplay muted loop>
+  <source src="./img/datagrid_expand.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 To show more data from the resource without adding too many columns, you can show data in an expandable panel below the row on demand, using the `expand` prop. 
 
@@ -804,7 +812,11 @@ const PostList = () => (
 
 The [`<SelectColumnsButton>`](./SelectColumnsButton.md) component lets users hide, show, and reorder datagrid columns. 
 
-![SelectColumnsButton](./img/SelectColumnsButton.gif)
+<video controls autoplay muted loop>
+  <source src="./img/SelectColumnsButton.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 ```jsx
 import {
@@ -845,7 +857,11 @@ const PostList = () => (
 
 You can let end users customize the fields displayed in the `<Datagrid>` by using the `<DatagridConfigurable>` component instead.
 
-![DatagridConfigurable](./img/DatagridConfigurable.gif)
+<video controls autoplay muted loop>
+  <source src="./img/DatagridConfigurable.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 ```diff
 import {
@@ -972,7 +988,11 @@ Check [the `ra-editable-datagrid` documentation](https://marmelab.com/ra-enterpr
 
 ## Customizing Column Sort
 
-![Sort Column Header](./img/sort-column-header.gif)
+<video controls autoplay muted loop>
+  <source src="./img/sort-column-header.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 The column headers are buttons allowing users to change the list sort field and order. This feature requires no configuration and works out fo the box. The next sections explain how you can disable or modify the field used for sorting on a particular column.
 

docs/DateInput.md

@@ -7,7 +7,11 @@ title: "The DateInput Component"
 
 Ideal for editing dates, `<DateInput>` renders an HTML `<input type="date">` element, that most browsers display as a  [date picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date).
 
-![DateInput](./img/date-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/date-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 The appearance of `<DateInput>` depends on the browser, and falls back to a text input on Safari. The date formatting in this input depends on the user's locale.
 
@@ -42,4 +46,8 @@ It is not possible to customize the date format. Browsers use the user locale to
 
 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.
 
-![MUI X Date picker](./img/date-picker.gif)
+<video controls autoplay muted loop>
+  <source src="./img/date-picker.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+

docs/DateTimeInput.md

@@ -7,7 +7,11 @@ title: "The DateTimeInput Component"
 
 An input for editing dates with time. `<DateTimeInput>` renders an `<input type="datetime-local" >` element, that most browsers display as [date and time picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local).
 
-![DateTimeInput](./img/date-time-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/date-time-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+
 
 The appearance depends on the browser, and falls back to a text input on safari. The date formatting in this input depends on the user's locale.
 

docs/EditTutorial.md

@@ -895,4 +895,8 @@ Users often need to edit data from several resources in the same form. React-adm
 
 ![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)
 
-![ReferenceManyInput](./img/reference-many-input.gif)
+<video controls autoplay muted loop>
+  <source src="./img/reference-many-input.webm" type="video/webm"/>
+  Your browser does not support the video tag.
+</video>
+