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

[Doc] Added buttons CSS API #5913

Merged
merged 2 commits into from Feb 15, 2021
Merged

[Doc] Added buttons CSS API #5913

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe0e0d7
Added css reference to buttons
Feb 15, 2021
517f33c
Fix types
Feb 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
58 changes: 44 additions & 14 deletions docs/Buttons.md
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ title: "Buttons"

# Buttons

React-Admin provides button components for all the common uses.
React-Admin provides button components for all the common uses.

## Navigation Buttons

Expand All @@ -32,7 +32,7 @@ const CommentEditButton = ({ record }) => (
| `basePath` | Required | `string` | - | Base path to resource, e.g. '/posts' |
| `record` | Required | `Object` | - | Record to link to, e.g. `{ id: 12, foo: 'bar' }` |
| `label` | Optional | `string` | 'ra.action.edit' | Label or translation message to use |
| `icon` | Optional | `React.element` | - | Icon element, e.g. `<CommentIcon />` |
| `icon` | Optional | `ReactElement` | - | Icon element, e.g. `<CommentIcon />` |
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |

It also supports [all the other `<Button>` props](#button).
Expand Down Expand Up @@ -61,8 +61,9 @@ const CommentShowButton = ({ record }) => (
| ------------- | -------- | --------------- | ---------------- | ------------------------------------------------ |
| `basePath` | Required | `string` | - | Base path to resource, e.g. '/posts' |
| `record` | Required | `Object` | - | Record to link to, e.g. `{ id: 12, foo: 'bar' }` |
| `component` | Optional | `ReactElement` | - | Base path to resource, e.g. '/posts' |
| `label` | Optional | `string` | 'ra.action.show' | Label or translation message to use |
| `icon` | Optional | `React.element` | - | Icon element, e.g. `<CommentIcon />` |
| `icon` | Optional | `ReactElement` | - | Icon element, e.g. `<CommentIcon />` |
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |

It also supports [all the other `<Button>` props](#button).
Expand Down Expand Up @@ -93,13 +94,21 @@ const CommentCreateButton = () => (
| ------------- | -------- | --------------- | ------------------ | -------------------------------------------- |
| `basePath` | Required | `string` | - | base path to resource, e.g. '/posts' |
| `label` | Optional | `string` | 'ra.action.create' | label or translation message to use |
| `icon` | Optional | `React.element` | - | iconElement, e.g. `<CommentIcon />` |
| `icon` | Optional | `ReactElement` | - | iconElement, e.g. `<CommentIcon />` |
| `scrollToTop` | Optional | `boolean` | `true` | Scroll to top after link |

It also supports [all the other `<Button>` props](#button).

**Tip**: If you want to link to the Create view manually, use the `/{resource}/create` location.

#### CSS API

| Rule name | Description |
| -------------- | ------------------------------------------------------------------ |
| `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.

### `<ListButton>`

Opens the List view of a given resource:
Expand Down Expand Up @@ -140,7 +149,7 @@ export const PostEdit = (props) => (
| ---------- | -------- | --------------- | ---------------- | -------------------------------------------- |
| `basePath` | Required | `string` | - | base path to resource, e.g. '/posts' |
| `label` | Optional | `string` | 'ra.action.list' | label or translation message to use |
| `icon` | Optional | `React.element` | - | iconElement, e.g. `<CommentIcon />` |
| `icon` | Optional | `ReactElement` | - | iconElement, e.g. `<CommentIcon />` |

It also supports [all the other `<Button>` props](#button).

Expand Down Expand Up @@ -180,8 +189,8 @@ export const PostList = (props) => (
| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
| `maxResults` | Optional | `number` | 1000 | Maximum number of records to export |
| `label` | Optional | `string` | 'ra.action.export' | label or translation message to use |
| `icon` | Optional | `React.element` | `<DownloadIcon>` | iconElement, e.g. `<CommentIcon />` |
| `exporter` | Optional | `function` | - | Override the List exporter function |
| `icon` | Optional | `ReactElement` | `<DownloadIcon>` | iconElement, e.g. `<CommentIcon />` |
| `exporter` | Optional | `Function` | - | Override the List exporter function |

### `<BulkExportButton>`

Expand Down Expand Up @@ -211,8 +220,8 @@ export const PostList = (props) => (
| Prop | Required | Type | Default | Description |
| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
| `label` | Optional | `string` | 'ra.action.export' | label or translation message to use |
| `icon` | Optional | `React.element` | `<DownloadIcon>` | iconElement, e.g. `<CommentIcon />` |
| `exporter` | Optional | `function` | - | Override the List exporter function |
| `icon` | Optional | `ReactElement` | `<DownloadIcon>` | iconElement, e.g. `<CommentIcon />` |
| `exporter` | Optional | `Function` | - | Override the List exporter function |

### `<BulkDeleteButton>`

Expand Down Expand Up @@ -242,16 +251,24 @@ export const PostList = (props) => (
| Prop | Required | Type | Default | Description |
| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use |
| `icon` | Optional | `React.element` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `exporter` | Optional | `function` | - | Override the List exporter function |
| `undoable` | Optional | `boolean` | true | Allow users to cancel the deletion |
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `exporter` | Optional | `Function` | - | Override the List exporter function |
| `undoable` | Optional | `boolean` | `true` | Allow users to cancel the deletion |

### `<FilterButton>`

This button is an internal component used by react-admin in [the `<Filter>` button/form combo](./List.md#the-filter-buttonform-combo).

![List Filters](./img/list_filter.gif)

#### CSS API

| Rule name | Description |
| ---------- | ------------------------------------------------------------- |
| `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.

### `<SortButton>`

Some List views don't have a natural UI for sorting - e.g. the `<SimpleList>`, or a list of images, don't have column headers like the `<Datagrid>`. For these cases, react-admin offers the `<SortButton>`, which displays a dropdown list of fields that the user can choose to sort on.
Expand All @@ -276,7 +293,7 @@ const ListActions = () => (
| Prop | Required | Type | Default | Description |
| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
| `fields` | Required | `string[]` | - | List of fields to offer sort on |
| `icon` | Optional | `React.element` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `icon` | Optional | `ReactElement` | `<DeleteIcon>` | iconElement, e.g. `<CommentIcon />` |
| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use |

## Record Buttons
Expand All @@ -294,14 +311,27 @@ Base component for most react-admin buttons. Responsive (displays only the icon
| Prop | Required | Type | Default | Description |
| ------------ | -------- | ------------------------------ | ------- | ---------------------------------------- |
| `alignIcon` | Optional | `'left' | 'right` | `'left'` | Icon position relative to the label |
| `children` | Optional | `React.element` | - | icon to use |
| `children` | Optional | `ReactElement` | - | icon to use |
| `className` | Optional | `string` | - | path to link to, e.g. '/posts' |
| `color` | Optional | `'default' | 'inherit'| 'primary' | 'secondary'` | `'primary'` | Label and icon color |
| `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/).

#### CSS API

| Rule name | Description |
| ---------------- | ----------------------------------------------------------------------------------------------- |
| `button` | Applied to the underlying `MuiButton` component |
| `label` | Applied to the Button's label when `alignIcon` prop is 'left' |
| `labelRightIcon` | Applied to the Button's label when `alignIcon` prop is 'left' |
| `smallIcon` | Applied to the Button's `children` when `size` prop is `small` and `alignIcon` prop is 'right' |
| `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.

### `<RefreshButton>`
### `<SkipNavigationButton>`
### `<MenuItemLink>`
Expand Down