@backstage/core-components 0.8.6 → 0.8.7-next.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @backstage/core-components
 
+## 0.8.7-next.0
+
+### Patch Changes
+
+- 4c773ed25c: Change subtitle of Header style to use palette.bursts.fontColor
+- f465b63b7f: Fix an issue where changes related to the `MobileSidebar` prevented scrolling pages. Additionally improve the menu of the `MobileSidebar` to not overlay the `BottomNavigation`.
+- a681cb9c2f: Make linkTarget configurable for MarkdownContent component
+
 ## 0.8.6
 
 ### Patch Changes

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { ButtonProps as ButtonProps$1 } from '@material-ui/core/Button';
 import { LinkProps as LinkProps$1 } from '@material-ui/core/Link';
 import { LinkProps as LinkProps$2, NavLinkProps } from 'react-router-dom';
 import CSS from 'csstype';
+import { Options } from 'react-markdown';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { TextTruncateProps } from 'react-text-truncate';
 import { LinearProgressProps } from '@material-ui/core/LinearProgress';
@@ -669,6 +670,7 @@ declare type MarkdownContentClassKey = 'markdown';
 declare type Props$b = {
     content: string;
     dialect?: 'gfm' | 'common-mark';
+    linkTarget?: Options['linkTarget'];
 };
 /**
  * MarkdownContent
@@ -1332,8 +1334,9 @@ declare function ItemCardHeader(props: ItemCardHeaderProps): JSX.Element;
 declare type PageClassKey = 'root';
 declare type Props$3 = {
     themeId: string;
+    children?: React__default.ReactNode;
 };
-declare function Page(props: PropsWithChildren<Props$3>): JSX.Element;
+declare function Page(props: Props$3): JSX.Element;
 
 declare type PageWithHeaderProps = ComponentProps<typeof Header> & {
     themeId: string;

package/dist/index.esm.js

@@ -1673,13 +1673,14 @@ const components = {
   }
 };
 function MarkdownContent(props) {
-  const { content, dialect = "gfm" } = props;
+  const { content, dialect = "gfm", linkTarget } = props;
   const classes = useStyles$C();
   return /* @__PURE__ */ React.createElement(ReactMarkdown, {
     remarkPlugins: dialect === "gfm" ? [gfm] : [],
     className: classes.markdown,
     children: content,
-    components
+    components,
+    linkTarget
   });
 }
 
@@ -3115,6 +3116,9 @@ const useStyles$m = makeStyles((theme) => ({
   },
   overlayHeaderClose: {
     color: theme.palette.bursts.fontColor
+  },
+  marginMobileSidebar: {
+    marginBottom: `${sidebarConfig.mobileSidebarHeight}px`
   }
 }));
 const sortSidebarGroupsForPriority = (children) => orderBy(children, ({ props: { priority } }) => Number.isInteger(priority) ? priority : -1, "desc");
@@ -3130,7 +3134,13 @@ const OverlayMenu = ({
     anchor: "bottom",
     open,
     onClose,
-    classes: { paperAnchorBottom: classes.overlay }
+    ModalProps: {
+      BackdropProps: { classes: { root: classes.marginMobileSidebar } }
+    },
+    classes: {
+      root: classes.marginMobileSidebar,
+      paperAnchorBottom: classes.overlay
+    }
   }, /* @__PURE__ */ React.createElement(Box, {
     className: classes.overlayHeader
   }, /* @__PURE__ */ React.createElement(Typography, {
@@ -5133,7 +5143,7 @@ const useStyles$5 = makeStyles((theme) => ({
     marginBottom: 0
   },
   subtitle: {
-    color: theme.palette.common.white,
+    color: theme.palette.bursts.fontColor,
     opacity: 0.8,
     display: "inline-block",
     marginTop: theme.spacing(1),
@@ -5408,18 +5418,19 @@ function ItemCardGrid(props) {
 }
 
 const useStyles$1 = makeStyles(() => ({
-  root: {
+  root: ({ isMobile }) => ({
     display: "grid",
     gridTemplateAreas: "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: "max-content auto 1fr",
     gridTemplateColumns: "auto 1fr auto",
-    height: "100%",
+    height: isMobile ? "100%" : "100vh",
     overflowY: "auto"
-  }
+  })
 }), { name: "BackstagePage" });
 function Page(props) {
   const { themeId, children } = props;
-  const classes = useStyles$1();
+  const { isMobile } = useContext(SidebarPinStateContext);
+  const classes = useStyles$1({ isMobile });
   return /* @__PURE__ */ React.createElement(ThemeProvider, {
     theme: (baseTheme) => ({
       ...baseTheme,