Split & improve changesets

Fix & cleanup changes related to review

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

.changeset/fluffy-countries-beam.md

@@ -0,0 +1,10 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-user-settings': patch
+---
+
+**@backstage/plugin-user-settings:** Hide Header on mobile screens to improve the UI & give more space to the content. Furthermore the "Pin Sidebar" setting is removed on mobile screens as the mobile sidebar is always pinned to the bottom.
+
+**Other plugins:** Smaller style adjustments across plugins to improve the UI on mobile devices.

.changeset/fuzzy-olives-impress.md

@@ -1,8 +0,0 @@
----
-'@backstage/core-components': patch
-'@backstage/plugin-catalog': patch
-'@backstage/plugin-shortcuts': patch
-'@backstage/plugin-user-settings': patch
----
-
-Add `MobileSidebar` component & use it for smaller screens to improve the UX on mobile devices by switching to a navigation at the bottom of the screen. For customizing the experience you can group `SidebarItems` in a `SidebarGroup` or create a `SidebarGroup` with a link. For an example take a look at the `Root.tsx` or the updated ["Adding a plugin page to the Sidebar"](https://backstage.io/docs/getting-started/configure-app-with-plugins) documentation.

.changeset/great-bulldogs-provide.md

@@ -0,0 +1,11 @@
+---
+'@backstage/core-components': patch
+---
+
+The `Bar` component will now render a `MobileSidebar` instead of the current sidebar on smaller screens. The state of the `MobileSidebar` will be treated as always open.
+
+---
+
+**Add MobileSidebar:** A navigation component, which sticks to the bottom. If there is no content in the Sidebar, it won't be rendered. If there are `children ` in the `Sidebar`, but no `SidebarGroups` as `children`, it will render all `children` into a default overlay menu, which can be displayed by clicking a menu item. If `SidebarGroups` are provided, it will render them in the bottom navigation. Additionally a `MobileSidebarContext`, which wraps the component, will safe the selected menu item.
+
+**Add SidebarGroup:** Groups items of the `Sidebar` together. On bigger screens this won't have any effect at the moment. On smaller screens it will render a given icon into the `MobileSidebar`. If a route is provided clicking the `SidebarGroup` in the `MobileSidebar` will route to the page. If no route is provided it will add a provided icon to the `MobileSidebar` as a menu item & will render the children into an overlay menu, which will be displayed when the menu item is clicked.

.changeset/stale-brooms-fry.md

@@ -0,0 +1,5 @@
+---
+'@backstage/create-app': patch
+---
+
+// TODO

packages/core-components/api-report.md

@@ -801,7 +801,6 @@ export type SelectInputBaseClassKey = 'root' | 'input';
 // @public (undocumented)
 export const Sidebar: ({
   children,
-  ...props
 }: React_2.PropsWithChildren<Props_17>) => 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)
@@ -1115,7 +1114,10 @@ export const SidebarDivider: React_2.ComponentType<
 // @public (undocumented)
 export const SidebarGroup: ({
   children,
-  ...props
+  to,
+  label,
+  icon,
+  value,
 }: React_2.PropsWithChildren<SidebarGroupProps>) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SidebarGroupProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

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

@@ -64,7 +64,6 @@ const useStyles = makeStyles<BackstageTheme>(
     },
     title: {
       color: theme.palette.bursts.fontColor,
-      // ?
       fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))',
       marginBottom: 0,
     },

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

@@ -20,17 +20,20 @@ import React, { PropsWithChildren } from 'react';
 
 export type PageClassKey = 'root';
 
-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',
-    height: '100%',
-    overflowY: 'auto',
-  },
-}));
+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',
+      height: '100%',
+      overflowY: 'auto',
+    },
+  }),
+  { name: 'BackstagePage' },
+);
 
 type Props = {
   themeId: string;

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

@@ -148,10 +148,7 @@ const DesktopSidebar = ({
   );
 };
 
-export const Sidebar = ({
-  children,
-  ...props
-}: React.PropsWithChildren<Props>) => {
+export const Sidebar = ({ children }: React.PropsWithChildren<Props>) => {
   const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('xs'),
   );
@@ -162,7 +159,7 @@ export const Sidebar = ({
         isOpen: true,
       }}
     >
-      <MobileSidebar {...props}>{children}</MobileSidebar>
+      <MobileSidebar>{children}</MobileSidebar>
     </SidebarContext.Provider>
   ) : (
     <DesktopSidebar>{children}</DesktopSidebar>

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

@@ -124,7 +124,7 @@ export const MobileSidebar = ({ children }: React.PropsWithChildren<{}>) => {
       ),
   );
 
-  if (!sidebarGroups) {
+  if (!children) {
     // If Sidebar has no children the MobileSidebar won't be rendered
     return null;
   } else if (!sidebarGroups.length) {

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

@@ -88,11 +88,18 @@ const MobileSidebarGroup = ({ to, label, icon, value }: SidebarGroupProps) => {
 
 export const SidebarGroup = ({
   children,
-  ...props
+  to,
+  label,
+  icon,
+  value,
 }: React.PropsWithChildren<SidebarGroupProps>) => {
   const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('xs'),
   );
 
-  return isMobileScreen ? <MobileSidebarGroup {...props} /> : <>{children}</>;
+  return isMobileScreen ? (
+    <MobileSidebarGroup to={to} label={label} icon={icon} value={value} />
+  ) : (
+    <>{children}</>
+  );
 };