Adjust display style & selected behaviour

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

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

@@ -16,24 +16,21 @@
 
 import React, { PropsWithChildren } from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { makeStyles, ThemeProvider } from '@material-ui/core';
+import { sidebarConfig } from '../Sidebar';
 
-export type PageClassKey = 'root';
-
-const useStyles = makeStyles(
-  () => ({
-    root: {
-      display: 'grid',
-      gridTemplateAreas:
-        "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
-      gridTemplateRows: 'max-content auto 1fr',
-      gridTemplateColumns: 'auto 1fr auto',
-      height: '100vh',
-      overflowY: 'auto',
-    },
-  }),
-  { name: 'BackstagePage' },
-);
+const useStyles = makeStyles<BackstageTheme>({
+  root: {
+    display: 'grid',
+    gridTemplateAreas:
+      "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
+    gridTemplateRows: 'max-content auto 1fr',
+    gridTemplateColumns: 'auto 1fr auto',
+    // TODO: Only mobile
+    height: `calc(100vh - ${sidebarConfig.mobileSidebarHeight}px)`,
+    overflowY: 'auto',
+  },
+});
 
 type Props = {
   themeId: string;

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

@@ -38,36 +38,82 @@ 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',
+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: {
+      // Does not apply  on mobile
+      // 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,
       },
       buttonItem: {
         background: 'none',
@@ -136,7 +182,7 @@ const useStyles = makeStyles<BackstageTheme>(
         },
       },
     };
-  },
+  }},
   { name: 'BackstageSidebarItem' },
 );
 

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

@@ -24,6 +24,7 @@ import {
 import React, { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Link } from '../../components';
+import { sidebarConfig } from './config';
 import { MobileSidebarContext } from './MobileSidebar';
 
 interface SidebarGroupProps extends BottomNavigationActionProps {
@@ -32,11 +33,15 @@ interface SidebarGroupProps extends BottomNavigationActionProps {
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
+    flexGrow: 0,
+    margin: `0 ${theme.spacing(2)}px`,
     color: theme.palette.navigation.color,
   },
 
   selected: {
     color: `${theme.palette.navigation.selectedColor}!important`,
+    borderTop: `solid ${sidebarConfig.selectedIndicatorWidth}px ${theme.palette.navigation.indicator}`,
+    marginTop: '-1px',
   },
 
   label: {
@@ -60,17 +65,19 @@ export const SidebarGroup = ({
   const { selectedMenuItemIndex, setSelectedMenuItemIndex } =
     useContext(MobileSidebarContext);
 
-  const onChange = (_, value) => {
-    if (value === selectedMenuItemIndex && to !== location.pathname) {
+  const onChange = (_: React.ChangeEvent<{}>, value: number) => {
+    if (value === selectedMenuItemIndex) {
       setSelectedMenuItemIndex(-1);
-    } else if (value !== selectedMenuItemIndex) {
+    } else {
       setSelectedMenuItemIndex(value);
     }
   };
 
   const selected =
-    value === selectedMenuItemIndex ||
-    (selectedMenuItemIndex >= 0 && to === location.pathname);
+    (value === selectedMenuItemIndex && selectedMenuItemIndex >= 0) ||
+    (!(value === selectedMenuItemIndex) &&
+      !(selectedMenuItemIndex >= 0) &&
+      to === location.pathname);
 
   return (
     // @ts-ignore Material UI issue: https://github.com/mui-org/material-ui/issues/27820

plugins/catalog/src/components/CatalogResultListItem/CatalogResultListItem.tsx

@@ -31,6 +31,7 @@ const useStyles = makeStyles({
   },
   itemText: {
     width: '100%',
+    wordBreak: 'break-all',
     marginBottom: '1rem',
   },
 });

plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx

@@ -23,7 +23,7 @@ export const UserSettingsAppearanceCard = () => (
   <InfoCard title="Appearance" variant="gridItem">
     <List dense>
       <UserSettingsThemeToggle />
-      <UserSettingsPinToggle />
+      {/* <UserSettingsPinToggle /> */}
     </List>
   </InfoCard>
 );