From 8c3b00a866314e9960f88748d5432ed62942ac81 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 15 Feb 2021 12:19:34 -0300
Subject: [PATCH 1/4] Added gloabl css override key to UserMenu component
---
.../ra-ui-materialui/src/layout/UserMenu.tsx | 25 +++++++++++--------
1 file changed, 14 insertions(+), 11 deletions(-)
diff --git a/packages/ra-ui-materialui/src/layout/UserMenu.tsx b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
index 3510ddef40f..3b7eacf0fb2 100644
--- a/packages/ra-ui-materialui/src/layout/UserMenu.tsx
+++ b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
@@ -6,16 +6,19 @@ import { Tooltip, IconButton, Menu, Button, Avatar } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import AccountCircle from '@material-ui/icons/AccountCircle';
-const useStyles = makeStyles(theme => ({
- user: {},
- userButton: {
- textTransform: 'none',
- },
- avatar: {
- width: theme.spacing(4),
- height: theme.spacing(4),
- },
-}));
+const useStyles = makeStyles(
+ theme => ({
+ root: {},
+ userButton: {
+ textTransform: 'none',
+ },
+ avatar: {
+ width: theme.spacing(4),
+ height: theme.spacing(4),
+ },
+ }),
+ { name: 'RaUserMenu' }
+);
const UserMenu = props => {
const [anchorEl, setAnchorEl] = useState(null);
@@ -31,7 +34,7 @@ const UserMenu = props => {
const handleClose = () => setAnchorEl(null);
return (
- <div className={classes.user}>
+ <div className={classes.root}>
{loaded && identity?.fullName ? (
<Button
aria-label={label && translate(label, { _: label })}
From 3083f0a645ace4268d6fc0c907f3fbb79ae3fe8d Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 15 Feb 2021 12:21:21 -0300
Subject: [PATCH 2/4] Added documentation to UserMenu and SkipNavigationButton
components
---
docs/Buttons.md | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/docs/Buttons.md b/docs/Buttons.md
index 0e40f8cdd08..6eadd73aa13 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -334,5 +334,24 @@ To override the style of all instances of `<Button>` using the [material-ui styl
### `<RefreshButton>`
### `<SkipNavigationButton>`
+
+#### CSS API
+
+| Rule name | Description |
+| --------------------- | ----------------------------------------------- |
+| `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.
+
### `<MenuItemLink>`
### `<UserMenu>`
+
+#### CSS API
+
+| Rule name | Description |
+| ------------ | ----------------------------------------------- |
+| `user` | Applied to the underlying `MuiButton` component |
+| `userButton` | Applied to the underlying `MuiButton` component |
+| `avatar` | Applied to the underlying `MuiButton` component |
+
+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.
From b0d558b32328dc923bf313ecec90051fb8575ec4 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 15 Feb 2021 12:28:12 -0300
Subject: [PATCH 3/4] Added UserMenu component CSS Api reference to the docs
---
docs/Buttons.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/docs/Buttons.md b/docs/Buttons.md
index 6eadd73aa13..b89e8f82bf8 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -348,10 +348,10 @@ To override the style of all instances of `<SkipNavigationButton>` using the [ma
#### CSS API
-| Rule name | Description |
-| ------------ | ----------------------------------------------- |
-| `user` | Applied to the underlying `MuiButton` component |
-| `userButton` | Applied to the underlying `MuiButton` component |
-| `avatar` | Applied to the underlying `MuiButton` component |
+| Rule name | Description |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `root` | Alternative to using `className`. Applied to the root element |
+| `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.
From 19d85bc8fdd96bb4b4780ae83a1c351178386f57 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 15 Feb 2021 13:22:17 -0300
Subject: [PATCH 4/4] Applied review
---
docs/Buttons.md | 2 +-
packages/ra-ui-materialui/src/layout/UserMenu.tsx | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/docs/Buttons.md b/docs/Buttons.md
index b89e8f82bf8..97029d6106d 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -350,7 +350,7 @@ To override the style of all instances of `<SkipNavigationButton>` using the [ma
| Rule name | Description |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `root` | Alternative to using `className`. Applied to the root element |
+| `user` | Alternative to using `className`. Applied to the root element |
| `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` |
diff --git a/packages/ra-ui-materialui/src/layout/UserMenu.tsx b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
index 3b7eacf0fb2..80e8ee965b1 100644
--- a/packages/ra-ui-materialui/src/layout/UserMenu.tsx
+++ b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
@@ -8,7 +8,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
const useStyles = makeStyles(
theme => ({
- root: {},
+ user: {},
userButton: {
textTransform: 'none',
},
@@ -34,7 +34,7 @@ const UserMenu = props => {
const handleClose = () => setAnchorEl(null);
return (
- <div className={classes.root}>
+ <div className={classes.user}>
{loaded && identity?.fullName ? (
<Button
aria-label={label && translate(label, { _: label })}