From 12ece98cdb7ae98e354b59eb9c2847dc85d7a6c3 Mon Sep 17 00:00:00 2001
From: vitorgrenzel <vitorgrenzel@gmail.com>
Date: Thu, 28 Jan 2021 17:39:44 -0300
Subject: [PATCH] Add className to the SidebarItem

---
 .changeset/dirty-carrots-invent.md              |  5 +++++
 packages/core/package.json                      |  5 +++--
 packages/core/src/layout/Sidebar/Items.test.tsx | 17 +++++++++++++++++
 packages/core/src/layout/Sidebar/Items.tsx      |  3 +++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/dirty-carrots-invent.md

diff --git a/.changeset/dirty-carrots-invent.md b/.changeset/dirty-carrots-invent.md
new file mode 100644
index 0000000000..ceb4e4d2bb
--- /dev/null
+++ b/.changeset/dirty-carrots-invent.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Add className to the SidebarItem
diff --git a/packages/core/package.json b/packages/core/package.json
index 325689e179..d4592d48ac 100644
--- a/packages/core/package.json
+++ b/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",
diff --git a/packages/core/src/layout/Sidebar/Items.test.tsx b/packages/core/src/layout/Sidebar/Items.test.tsx
index 099a3477d3..fb0ee174f8 100644
--- a/packages/core/src/layout/Sidebar/Items.test.tsx
+++ b/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')}`);
+    });
   });
 });
diff --git a/packages/core/src/layout/Sidebar/Items.tsx b/packages/core/src/layout/Sidebar/Items.tsx
index e954dcb4f8..57cf435651 100644
--- a/packages/core/src/layout/Sidebar/Items.tsx
+++ b/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,