Merge pull request #3823 from ProjectMirador/mui5-menu-item-variant

Create a MenuItem variant instead of using inline sx styles
ProjectMirador · Nov 29, 2023 · ee69853 · ee69853
2 parents ea70a21 + de50dc1
commit ee69853
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
@@ -72,6 +72,7 @@ export class CanvasAnnotations extends Component {
           {annotations.map((annotation) => (
             <MenuItem
               component={listContainerComponent}
+              variant="multiline"
               sx={{
                 '&:hover,&:focus': {
                   backgroundColor: 'action.hover',
@@ -80,7 +81,6 @@ export class CanvasAnnotations extends Component {
                 borderBottom: '0.5px solid',
                 borderBottomColor: 'divider',
                 cursor: 'pointer',
-                whiteSpace: 'normal',
               }}
               key={annotation.id}
               annotationid={annotation.id}

diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js
@@ -256,7 +256,7 @@ export class CollectionDialog extends Component {
                   <MenuItem
                     key={c.id}
                     onClick={() => { this.selectCollection(c); }}
-                    sx={{ whiteSpace: 'normal' }}
+                    variant="multiline"
                   >
                     {CollectionDialog.getUseableLabel(c)}
                   </MenuItem>
@@ -271,7 +271,7 @@ export class CollectionDialog extends Component {
                   <MenuItem
                     key={m.id}
                     onClick={() => { this.selectManifest(m); }}
-                    sx={{ whiteSpace: 'normal' }}
+                    variant="multiline"
                   >
                     {CollectionDialog.getUseableLabel(m)}
                   </MenuItem>

diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js
@@ -21,11 +21,11 @@ function Item({
       alignItems="flex-start"
       button
       component="li"
+      variant="multiline"
       sx={{
         borderBottom: '0.5px solid',
         borderBottomColor: 'divider',
         paddingRight: 1,
-        whiteSpace: 'normal',
       }}
       {...otherProps}
     >

diff --git a/src/config/settings.js b/src/config/settings.js
@@ -169,6 +169,14 @@ export default {
       useNextVariants: true // set so that console deprecation warning is removed
     },
     components: {
+      MuiMenuItem: {
+        variants: [
+          {
+            props: { variant: 'multiline' },
+            style: { whiteSpace: 'normal' }
+          },
+        ]
+      },
       CompanionWindowSection: {
         styleOverrides: {
           root: {