Merge pull request #10006 from alisaswong/sidebar-submenu-styling

add names to sidebar submenu styles

.changeset/shiny-eels-mix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Add names to sidebar sub menu styles for customization

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -26,62 +26,65 @@ import {
 import { BackstageTheme } from '@backstage/theme';
 
 const useStyles = (props: { left: number }) =>
-  makeStyles<BackstageTheme>(theme => ({
-    root: {
-      zIndex: 1000,
-      position: 'relative',
-      overflow: 'visible',
-      width: theme.spacing(7) + 1,
-    },
-    drawer: {
-      display: 'flex',
-      flexFlow: 'column nowrap',
-      alignItems: 'flex-start',
-      position: 'fixed',
-      [theme.breakpoints.up('sm')]: {
-        marginLeft: props.left,
-        transition: theme.transitions.create('margin-left', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.shortest,
-        }),
-      },
-      top: 0,
-      bottom: 0,
-      padding: 0,
-      background: theme.palette.navigation.submenu?.background ?? '#404040',
-      overflowX: 'hidden',
-      msOverflowStyle: 'none',
-      scrollbarWidth: 'none',
-      cursor: 'default',
-      width: submenuConfig.drawerWidthClosed,
-      transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`,
-      '& > *': {
-        flexShrink: 0,
-      },
-      '&::-webkit-scrollbar': {
-        display: 'none',
-      },
-    },
-    drawerOpen: {
-      width: submenuConfig.drawerWidthOpen,
-      [theme.breakpoints.down('xs')]: {
-        width: '100%',
+  makeStyles<BackstageTheme>(
+    theme => ({
+      root: {
+        zIndex: 1000,
         position: 'relative',
-        paddingLeft: theme.spacing(3),
-        left: 0,
+        overflow: 'visible',
+        width: theme.spacing(7) + 1,
+      },
+      drawer: {
+        display: 'flex',
+        flexFlow: 'column nowrap',
+        alignItems: 'flex-start',
+        position: 'fixed',
+        [theme.breakpoints.up('sm')]: {
+          marginLeft: props.left,
+          transition: theme.transitions.create('margin-left', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.shortest,
+          }),
+        },
         top: 0,
+        bottom: 0,
+        padding: 0,
+        background: theme.palette.navigation.submenu?.background ?? '#404040',
+        overflowX: 'hidden',
+        msOverflowStyle: 'none',
+        scrollbarWidth: 'none',
+        cursor: 'default',
+        width: submenuConfig.drawerWidthClosed,
+        transitionDelay: `${submenuConfig.defaultOpenDelayMs}ms`,
+        '& > *': {
+          flexShrink: 0,
+        },
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
       },
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: 500,
-      color: '#FFF',
-      padding: 20,
-      [theme.breakpoints.down('xs')]: {
-        display: 'none',
+      drawerOpen: {
+        width: submenuConfig.drawerWidthOpen,
+        [theme.breakpoints.down('xs')]: {
+          width: '100%',
+          position: 'relative',
+          paddingLeft: theme.spacing(3),
+          left: 0,
+          top: 0,
+        },
       },
-    },
-  }));
+      title: {
+        fontSize: 24,
+        fontWeight: 500,
+        color: '#FFF',
+        padding: 20,
+        [theme.breakpoints.down('xs')]: {
+          display: 'none',
+        },
+      },
+    }),
+    { name: 'BackstageSidebarSubmenu' },
+  );
 
 /**
  * Holds a title for text Header of a sidebar submenu and children

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -26,59 +26,62 @@ import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import { SidebarItemWithSubmenuContext } from './config';
 import { isLocationMatch } from './utils';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
-  item: {
-    height: 48,
-    width: '100%',
-    '&:hover': {
+const useStyles = makeStyles<BackstageTheme>(
+  theme => ({
+    item: {
+      height: 48,
+      width: '100%',
+      '&:hover': {
+        background: '#6f6f6f',
+        color: theme.palette.navigation.selectedColor,
+      },
+      display: 'flex',
+      alignItems: 'center',
+      color: theme.palette.navigation.color,
+      padding: 20,
+      cursor: 'pointer',
+      position: 'relative',
+      background: 'none',
+      border: 'none',
+    },
+    itemContainer: {
+      width: '100%',
+    },
+    selected: {
       background: '#6f6f6f',
-      color: theme.palette.navigation.selectedColor,
+      color: '#FFF',
     },
-    display: 'flex',
-    alignItems: 'center',
-    color: theme.palette.navigation.color,
-    padding: 20,
-    cursor: 'pointer',
-    position: 'relative',
-    background: 'none',
-    border: 'none',
-  },
-  itemContainer: {
-    width: '100%',
-  },
-  selected: {
-    background: '#6f6f6f',
-    color: '#FFF',
-  },
-  label: {
-    margin: 14,
-    marginLeft: 7,
-    fontSize: 14,
-  },
-  dropdownArrow: {
-    position: 'absolute',
-    right: 21,
-  },
-  dropdown: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'end',
-  },
-  dropdownItem: {
-    width: '100%',
-    padding: '10px 0 10px 0',
-  },
-  textContent: {
-    color: theme.palette.navigation.color,
-    display: 'flex',
-    justifyContent: 'center',
-    [theme.breakpoints.down('xs')]: {
-      display: 'block',
-      paddingLeft: theme.spacing(4),
+    label: {
+      margin: 14,
+      marginLeft: 7,
+      fontSize: 14,
     },
-    fontSize: '14px',
-  },
-}));
+    dropdownArrow: {
+      position: 'absolute',
+      right: 21,
+    },
+    dropdown: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'end',
+    },
+    dropdownItem: {
+      width: '100%',
+      padding: '10px 0 10px 0',
+    },
+    textContent: {
+      color: theme.palette.navigation.color,
+      display: 'flex',
+      justifyContent: 'center',
+      [theme.breakpoints.down('xs')]: {
+        display: 'block',
+        paddingLeft: theme.spacing(4),
+      },
+      fontSize: '14px',
+    },
+  }),
+  { name: 'BackstageSidebarSubmenuItem' },
+);
 
 /**
  * Clickable item displayed when submenu item is clicked.