diff --git a/.changeset/fluffy-countries-beam.md b/.changeset/fluffy-countries-beam.md new file mode 100644 index 0000000000..145428267b --- /dev/null +++ b/.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. diff --git a/.changeset/fuzzy-olives-impress.md b/.changeset/fuzzy-olives-impress.md deleted file mode 100644 index 9f9c8f755b..0000000000 --- a/.changeset/fuzzy-olives-impress.md +++ /dev/null @@ -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. diff --git a/.changeset/great-bulldogs-provide.md b/.changeset/great-bulldogs-provide.md new file mode 100644 index 0000000000..636f9f3380 --- /dev/null +++ b/.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. diff --git a/.changeset/stale-brooms-fry.md b/.changeset/stale-brooms-fry.md new file mode 100644 index 0000000000..a3804f13eb --- /dev/null +++ b/.changeset/stale-brooms-fry.md @@ -0,0 +1,5 @@ +--- +'@backstage/create-app': patch +--- + +// TODO diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index a03e8c1447..2fa3315fe1 100644 --- a/packages/core-components/api-report.md +++ b/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) => 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) => 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) diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 92f28c1d07..954575a95a 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -64,7 +64,6 @@ const useStyles = makeStyles( }, title: { color: theme.palette.bursts.fontColor, - // ? fontSize: 'calc(24px + 6 * ((100vw - 320px) / 680))', marginBottom: 0, }, diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index a0c84bb56a..a1efe4dda9 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -20,17 +20,20 @@ import React, { PropsWithChildren } from 'react'; 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: '100%', - overflowY: 'auto', - }, -})); +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: '100%', + overflowY: 'auto', + }, + }), + { name: 'BackstagePage' }, +); type Props = { themeId: string; diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 056a5ae38e..db85ca77d7 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -148,10 +148,7 @@ const DesktopSidebar = ({ ); }; -export const Sidebar = ({ - children, - ...props -}: React.PropsWithChildren) => { +export const Sidebar = ({ children }: React.PropsWithChildren) => { const isMobileScreen = useMediaQuery(theme => theme.breakpoints.down('xs'), ); @@ -162,7 +159,7 @@ export const Sidebar = ({ isOpen: true, }} > - {children} + {children} ) : ( {children} diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index 247c191dee..33505987bc 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/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) { diff --git a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx b/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx index d71657ac5a..51ae35c2db 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarGroup.tsx +++ b/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) => { const isMobileScreen = useMediaQuery(theme => theme.breakpoints.down('xs'), ); - return isMobileScreen ? : <>{children}; + return isMobileScreen ? ( + + ) : ( + <>{children} + ); };