From 7e60bee2deaa57e93657650d1a1a2d44bc493a57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Mon, 3 Apr 2023 11:05:31 +0200
Subject: [PATCH] Split out the width as the only prop-using class for the Bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/stale-paws-sparkle.md                    |  5 +++++
 packages/core-components/src/layout/Sidebar/Bar.tsx | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/stale-paws-sparkle.md

diff --git a/.changeset/stale-paws-sparkle.md b/.changeset/stale-paws-sparkle.md
new file mode 100644
index 0000000000..ec4284d44f
--- /dev/null
+++ b/.changeset/stale-paws-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Split the `BackstageSidebar` style `drawer` class, such that the `width` property is in a separate `drawerWidth` class instead. This makes it such that you can style the `drawer` class in your theme again.
diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index 69b77dd5e1..815d6bc0d6 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -39,7 +40,7 @@ import { useSidebarPinState } from './SidebarPinStateContext';
 export type SidebarClassKey = 'drawer' | 'drawerOpen';
 const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
   theme => ({
-    drawer: props => ({
+    drawer: {
       display: 'flex',
       flexFlow: 'column nowrap',
       alignItems: 'flex-start',
@@ -52,7 +53,6 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       overflowX: 'hidden',
       msOverflowStyle: 'none',
       scrollbarWidth: 'none',
-      width: props.sidebarConfig.drawerWidthClosed,
       transition: theme.transitions.create('width', {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.shortest,
@@ -63,6 +63,9 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       '&::-webkit-scrollbar': {
         display: 'none',
       },
+    },
+    drawerWidth: props => ({
+      width: props.sidebarConfig.drawerWidthClosed,
     }),
     drawerOpen: props => ({
       width: props.sidebarConfig.drawerWidthOpen,
@@ -174,7 +177,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
   const isOpen = (state === State.Open && !isSmallScreen) || isPinned;
 
   /**
-   * Close/Open Sidebar directily without delays. Also toggles `SidebarPinState` to avoid hidden content behind Sidebar.
+   * Close/Open Sidebar directly without delays. Also toggles `SidebarPinState` to avoid hidden content behind Sidebar.
    */
   const setOpen = (open: boolean) => {
     if (open) {
@@ -199,7 +202,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
           onBlur={disableExpandOnHover ? () => {} : handleClose}
         >
           <Box
-            className={classnames(classes.drawer, {
+            className={classnames(classes.drawer, classes.drawerWidth, {
               [classes.drawerOpen]: isOpen,
             })}
           >