Add className to the SidebarItem

.changeset/dirty-carrots-invent.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Add className to the SidebarItem

packages/core/package.json

@@ -35,21 +35,22 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "@testing-library/react-hooks": "^3.4.2",
     "@types/dagre": "^0.7.44",
+    "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9",
     "@types/react-sparklines": "^1.7.0",
-    "@types/prop-types": "^15.7.3",
     "classnames": "^2.2.6",
     "clsx": "^1.1.0",
     "d3-selection": "^2.0.0",
     "d3-shape": "^2.0.0",
     "d3-zoom": "^2.0.0",
     "dagre": "^0.8.5",
-    "qs": "^6.9.4",
     "immer": "^8.0.1",
     "lodash": "^4.17.15",
     "material-table": "^1.69.1",
     "prop-types": "^15.7.2",
+    "qs": "^6.9.4",
     "rc-progress": "^3.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

packages/core/src/layout/Sidebar/Items.test.tsx

@@ -22,8 +22,18 @@ import HomeIcon from '@material-ui/icons/Home';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import { Sidebar } from './Bar';
 import { SidebarItem } from './Items';
+import { renderHook } from '@testing-library/react-hooks';
+import { hexToRgb, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  spotlight: {
+    backgroundColor: '#2b2a2a',
+  },
+});
 
 async function renderSidebar() {
+  const { result } = renderHook(() => useStyles());
+
   await renderInTestApp(
     <Sidebar>
       <SidebarItem text="Home" icon={HomeIcon} to="./" />
@@ -31,6 +41,7 @@ async function renderSidebar() {
         icon={CreateComponentIcon}
         onClick={() => {}}
         text="Create..."
+        className={result.current.spotlight}
       />
     </Sidebar>,
   );
@@ -54,5 +65,11 @@ describe('Items', () => {
         await screen.findByRole('button', { name: /create/i }),
       ).toBeInTheDocument();
     });
+
+    it('should render a button with custom style', async () => {
+      expect(
+        await screen.findByRole('button', { name: /create/i }),
+      ).toHaveStyle(`background-color: ${hexToRgb('2b2a2a')}`);
+    });
   });
 });

packages/core/src/layout/Sidebar/Items.tsx

@@ -128,6 +128,7 @@ type SidebarItemBaseProps = {
   text?: string;
   hasNotifications?: boolean;
   children?: ReactNode;
+  className?: string;
 };
 
 type SidebarItemButtonProps = SidebarItemBaseProps & {
@@ -154,6 +155,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
     hasNotifications = false,
     onClick,
     children,
+    className,
   } = props;
   const classes = useStyles();
   // XXX (@koroeskohr): unsure this is optimal. But I just really didn't want to have the item component
@@ -193,6 +195,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
   const childProps = {
     onClick,
     className: clsx(
+      className,
       classes.root,
       isOpen ? classes.open : classes.closed,
       isButtonItem(props) && classes.buttonItem,