Cleanup after rebase & adjust components to use class keys

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/core-components/api-report.md

@@ -779,10 +779,10 @@ export type SelectInputBaseClassKey = 'root' | 'input';
 // Warning: (ae-missing-release-tag) "Sidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function Sidebar({
+export const Sidebar: ({
   children,
   ...props
-}: React_2.PropsWithChildren<Props_18>): JSX.Element;
+}: React_2.PropsWithChildren<Props_18>) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SIDEBAR_INTRO_LOCAL_STORAGE" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -790,11 +790,6 @@ export function Sidebar({
 export const SIDEBAR_INTRO_LOCAL_STORAGE =
   '@backstage/core/sidebar-intro-dismissed';
 
-// Warning: (ae-missing-release-tag) "SidebarClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
-
 // Warning: (ae-missing-release-tag) "sidebarConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

packages/core-components/src/layout/Page/Page.tsx

@@ -16,9 +16,11 @@
 
 import React, { PropsWithChildren } from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, ThemeProvider } from '@material-ui/core';
+import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
 import { sidebarConfig } from '../Sidebar';
 
+export type PageClassKey = 'root';
+
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     display: 'grid',

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

@@ -38,83 +38,36 @@ import {
 } from 'react-router-dom';
 import { sidebarConfig, SidebarContext } from './config';
 
+export type SidebarItemClassKey =
+  | 'root'
+  | 'buttonItem'
+  | 'closed'
+  | 'open'
+  | 'label'
+  | 'iconContainer'
+  | 'searchRoot'
+  | 'searchField'
+  | 'searchFieldHTMLInput'
+  | 'searchContainer'
+  | 'secondaryAction'
+  | 'selected';
 
-const useStyles = makeStyles<BackstageTheme>(theme => {
-  const {
-    selectedIndicatorWidth,
-    drawerWidthClosed,
-    drawerWidthOpen,
-    iconContainerWidth,
-  } = sidebarConfig;
-  return {
-    root: {
-      color: theme.palette.navigation.color,
-      display: 'flex',
-      flexFlow: 'row nowrap',
-      alignItems: 'center',
-      height: 48,
-      cursor: 'pointer',
-    },
-    buttonItem: {
-      background: 'none',
-      border: 'none',
-      width: 'auto',
-      margin: 0,
-      padding: 0,
-      textAlign: 'inherit',
-      font: 'inherit',
-    },
-    closed: {
-      width: drawerWidthClosed,
-      justifyContent: 'center',
-    },
-    open: {
-      [theme.breakpoints.up('sm')]: {
-        width: drawerWidthOpen,
-      },
-    },
-    label: {
-      // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs
-      fontWeight: 'bold',
-      whiteSpace: 'nowrap',
-      lineHeight: 'auto',
-      flex: '3 1 auto',
-      width: '110px',
-      overflow: 'hidden',
-      'text-overflow': 'ellipsis',
-    },
-    iconContainer: {
-      boxSizing: 'border-box',
-      height: '100%',
-      width: iconContainerWidth,
-      marginRight: -theme.spacing(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    searchRoot: {
-      marginBottom: 12,
-    },
-    searchField: {
-      color: '#b5b5b5',
-      fontWeight: 'bold',
-      fontSize: theme.typography.fontSize,
-    },
-    searchFieldHTMLInput: {
-      padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`,
-    },
-    searchContainer: {
-      width: drawerWidthOpen - iconContainerWidth,
-    },
-    secondaryAction: {
-      width: theme.spacing(6),
-      textAlign: 'center',
-      marginRight: theme.spacing(1),
-    },
-    selected: {
-      '&$root': {
-        borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
-        color: theme.palette.navigation.selectedColor,
+const useStyles = makeStyles<BackstageTheme>(
+  theme => {
+    const {
+      selectedIndicatorWidth,
+      drawerWidthClosed,
+      drawerWidthOpen,
+      iconContainerWidth,
+    } = sidebarConfig;
+    return {
+      root: {
+        color: theme.palette.navigation.color,
+        display: 'flex',
+        flexFlow: 'row nowrap',
+        alignItems: 'center',
+        height: 48,
+        cursor: 'pointer',
       },
       buttonItem: {
         background: 'none',
@@ -130,7 +83,9 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
         justifyContent: 'center',
       },
       open: {
-        width: drawerWidthOpen,
+        [theme.breakpoints.up('sm')]: {
+          width: drawerWidthOpen,
+        },
       },
       label: {
         // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs
@@ -175,15 +130,75 @@ const useStyles = makeStyles<BackstageTheme>(theme => {
           borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
           color: theme.palette.navigation.selectedColor,
         },
-        '&$closed': {
-          width: drawerWidthClosed - selectedIndicatorWidth,
+        buttonItem: {
+          background: 'none',
+          border: 'none',
+          width: 'auto',
+          margin: 0,
+          padding: 0,
+          textAlign: 'inherit',
+          font: 'inherit',
         },
-        '& $iconContainer': {
-          marginLeft: -selectedIndicatorWidth,
+        closed: {
+          width: drawerWidthClosed,
+          justifyContent: 'center',
+        },
+        open: {
+          width: drawerWidthOpen,
+        },
+        label: {
+          // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs
+          fontWeight: 'bold',
+          whiteSpace: 'nowrap',
+          lineHeight: 'auto',
+          flex: '3 1 auto',
+          width: '110px',
+          overflow: 'hidden',
+          'text-overflow': 'ellipsis',
+        },
+        iconContainer: {
+          boxSizing: 'border-box',
+          height: '100%',
+          width: iconContainerWidth,
+          marginRight: -theme.spacing(2),
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        searchRoot: {
+          marginBottom: 12,
+        },
+        searchField: {
+          color: '#b5b5b5',
+          fontWeight: 'bold',
+          fontSize: theme.typography.fontSize,
+        },
+        searchFieldHTMLInput: {
+          padding: `${theme.spacing(2)} 0 ${theme.spacing(2)}`,
+        },
+        searchContainer: {
+          width: drawerWidthOpen - iconContainerWidth,
+        },
+        secondaryAction: {
+          width: theme.spacing(6),
+          textAlign: 'center',
+          marginRight: theme.spacing(1),
+        },
+        selected: {
+          '&$root': {
+            borderLeft: `solid ${selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
+            color: theme.palette.navigation.selectedColor,
+          },
+          '&$closed': {
+            width: drawerWidthClosed - selectedIndicatorWidth,
+          },
+          '& $iconContainer': {
+            marginLeft: -selectedIndicatorWidth,
+          },
         },
       },
     };
-  }},
+  },
   { name: 'BackstageSidebarItem' },
 );
 

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React, {
   createContext,
   PropsWithChildren,
@@ -25,6 +25,8 @@ import { sidebarConfig } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { LocalStorage } from './localStorage';
 
+export type SidebarPageClassKey = 'root';
+
 const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
   theme => ({
     root: {

packages/core-components/src/overridableComponents.ts

@@ -80,11 +80,7 @@ import {
   CardActionsTopRightClassKey,
   ItemCardGridClassKey,
   ItemCardHeaderClassKey,
-  PageClassKey,
-  SidebarClassKey,
   SidebarIntroClassKey,
-  SidebarItemClassKey,
-  SidebarPageClassKey,
   CustomProviderClassKey,
   SignInPageClassKey,
   TabbedCardClassKey,
@@ -153,11 +149,7 @@ type BackstageComponentsNameToClassKey = {
   BackstageInfoCardCardActionsTopRight: CardActionsTopRightClassKey;
   BackstageItemCardGrid: ItemCardGridClassKey;
   BackstageItemCardHeader: ItemCardHeaderClassKey;
-  BackstagePage: PageClassKey;
-  BackstageSidebar: SidebarClassKey;
   BackstageSidebarIntro: SidebarIntroClassKey;
-  BackstageSidebarItem: SidebarItemClassKey;
-  BackstageSidebarPage: SidebarPageClassKey;
   BackstageCustomProvider: CustomProviderClassKey;
   BackstageSignInPage: SignInPageClassKey;
   BackstageTabbedCard: TabbedCardClassKey;