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

Fix boolean and checkbox inputs don't have focus states (re-add ripple) #7772

Merged
merged 2 commits into from
Jun 8, 2022
Merged

Fix boolean and checkbox inputs don't have focus states (re-add ripple) #7772

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
9a5661b
add focus states to boolean and checkbox
Jun 1, 2022
c7966c6
remove disable ripple and include documentation
Jun 4, 2022
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
10 changes: 10 additions & 0 deletions docs/Buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,16 @@ const MyEdit = () => (

### `<CloneButton>`

## Performance
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wasn't sure whether to have this in the button or datagrid component docs, or to create a new top-level page specifically for performance. Happy to go with whatever you folks feel is most appropriate


### `disableRipple`

The ripple effect can cause [performance issues](https://github.com/marmelab/react-admin/issues/5587) for large datagrids. It's possible to remove the ripple effect from within your MUI theme. The [MUI docs](https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally) provide instructions on how to do this.

It's worth noting that removing the ripple will cause accessibility issues, including a lack of focus states during tab navigating for components like `BooleanInput` and `CheckboxGroupInput`.

Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplement due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The MUI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class.

## Miscellaneous

### `<Button>`
Expand Down
43 changes: 0 additions & 43 deletions packages/ra-ui-materialui/src/defaultTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,49 +22,6 @@ export const defaultTheme = {
closedWidth: 50,
},
components: {
MuiButtonBase: {
defaultProps: {
// disable ripple for perf reasons
disableRipple: true,
},
styleOverrides: {
root: {
'&:hover:active::after': {
// recreate a static ripple color
// use the currentColor to make it work both for outlined and contained buttons
// but to dim the background without dimming the text,
// put another element on top with a limited opacity
content: '""',
display: 'block',
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
right: 0,
backgroundColor: 'currentColor',
opacity: 0.3,
borderRadius: 'inherit',
},
'&:focus::after': {
// This ensures we provide visual cues to users using the keyboard
// recreate a static ripple color
// use the currentColor to make it work both for outlined and contained buttons
// but to dim the background without dimming the text,
// put another element on top with a limited opacity
content: '""',
display: 'block',
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
right: 0,
backgroundColor: 'currentColor',
opacity: 0.3,
borderRadius: 'inherit',
},
},
},
},
MuiFilledInput: {
styleOverrides: {
root: {
Expand Down