@backstage/core-components 0.9.5 → 0.10.0-next.2

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @backstage/core-components
 
+## 0.10.0-next.2
+
+### Minor Changes
+
+- 32204fa794: Add `transformLinkUri` and `transformImageUri` to `MarkdownContent`
+
+### Patch Changes
+
+- b4b711bcc2: Fix the EntityLayout header style so that EntityContextMenu button can display in correct shape when user hover on it
+- 15201b1032: Updated dependency `rc-progress` to `3.4.0`.
+- 385389d23c: Updated to remove usage of the `bursts` object in the theme palette
+- Updated dependencies
+  - @backstage/theme@0.2.16-next.1
+
+## 0.9.6-next.1
+
+### Patch Changes
+
+- 3c440ea77e: Change BackstageIconLinkVertical style to use pallette instead of explicit color
+- 7e115d42f9: Support displaying subtitle text in `SidebarSubmenuItem`
+- Updated dependencies
+  - @backstage/errors@1.1.0-next.0
+  - @backstage/theme@0.2.16-next.0
+
+## 0.9.6-next.0
+
+### Patch Changes
+
+- c3cfc83af2: Updated JSDoc to be MDX compatible.
+
 ## 0.9.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -375,7 +375,7 @@ declare namespace types_d {
  *
  * @public
  * @remarks
- * <NodeData> and <EdgeData> are useful when rendering custom or edge labels
+ * `<NodeData>` and `<EdgeData>` are useful when rendering custom or edge labels
  */
 interface DependencyGraphProps<NodeData, EdgeData> extends React__default.SVGProps<SVGSVGElement> {
     /**
@@ -686,6 +686,8 @@ declare type Props$b = {
     content: string;
     dialect?: 'gfm' | 'common-mark';
     linkTarget?: Options['linkTarget'];
+    transformLinkUri?: (href: string) => string;
+    transformImageUri?: (href: string) => string;
 };
 /**
  * MarkdownContent
@@ -1344,7 +1346,7 @@ declare type ItemCardHeaderProps = Partial<WithStyles<typeof styles>> & {
  * A simple card header, rendering a default look for "item cards" - cards that
  * are arranged in a grid for users to select among several options.
  *
- * This component expects to be placed within a MUI <CardMedia>.
+ * This component expects to be placed within a MUI `<CardMedia>`.
  *
  * Styles for the header can be overridden using the `classes` prop, e.g.:
  *
@@ -1504,6 +1506,7 @@ declare type SidebarSubmenuItemDropdownItem = {
  * Holds submenu item content.
  *
  * title: Text content of submenu item
+ * subtitle: A subtitle displayed under the main title
  * to: Path to navigate to when item is clicked
  * icon: Icon displayed on the left of text content
  * dropdownItems: Optional array of dropdown items displayed when submenu item is clicked.
@@ -1512,6 +1515,7 @@ declare type SidebarSubmenuItemDropdownItem = {
  */
 declare type SidebarSubmenuItemProps = {
     title: string;
+    subtitle?: string;
     to?: string;
     icon?: IconComponent;
     dropdownItems?: SidebarSubmenuItemDropdownItem[];

package/dist/index.esm.js

@@ -1384,7 +1384,7 @@ const useIconStyles = makeStyles((theme) => ({
     textAlign: "center"
   },
   disabled: {
-    color: "gray",
+    color: theme.palette.text.secondary,
     cursor: "default"
   },
   primary: {
@@ -1697,14 +1697,22 @@ const components = {
   }
 };
 function MarkdownContent(props) {
-  const { content, dialect = "gfm", linkTarget } = props;
+  const {
+    content,
+    dialect = "gfm",
+    linkTarget,
+    transformLinkUri,
+    transformImageUri
+  } = props;
   const classes = useStyles$B();
   return /* @__PURE__ */ React.createElement(ReactMarkdown, {
     remarkPlugins: dialect === "gfm" ? [gfm] : [],
     className: classes.markdown,
     children: content,
     components,
-    linkTarget
+    linkTarget,
+    transformLinkUri,
+    transformImageUri
   });
 }
 
@@ -3271,13 +3279,13 @@ const useStyles$l = makeStyles((theme) => ({
   }),
   overlayHeader: {
     display: "flex",
-    color: theme.palette.bursts.fontColor,
+    color: theme.palette.text.primary,
     alignItems: "center",
     justifyContent: "space-between",
     padding: theme.spacing(2, 3)
   },
   overlayHeaderClose: {
-    color: theme.palette.bursts.fontColor
+    color: theme.palette.text.primary
   },
   marginMobileSidebar: (props) => ({
     marginBottom: `${props.sidebarConfig.mobileSidebarHeight}px`
@@ -3545,6 +3553,13 @@ const useStyles$j = makeStyles((theme) => ({
     fontSize: 14,
     whiteSpace: "nowrap",
     overflow: "hidden",
+    "text-overflow": "ellipsis",
+    lineHeight: 1
+  },
+  subtitle: {
+    fontSize: 10,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
     "text-overflow": "ellipsis"
   },
   dropdownArrow: {
@@ -3575,7 +3590,7 @@ const useStyles$j = makeStyles((theme) => ({
   }
 }), { name: "BackstageSidebarSubmenuItem" });
 const SidebarSubmenuItem = (props) => {
-  const { title, to, icon: Icon, dropdownItems } = props;
+  const { title, subtitle, to, icon: Icon, dropdownItems } = props;
   const classes = useStyles$j();
   const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   const closeSubmenu = () => {
@@ -3609,7 +3624,10 @@ const SidebarSubmenuItem = (props) => {
     }), /* @__PURE__ */ React.createElement(Typography, {
       variant: "subtitle1",
       className: classes.label
-    }, title), showDropDown ? /* @__PURE__ */ React.createElement(ArrowDropUpIcon, {
+    }, title, /* @__PURE__ */ React.createElement("br", null), subtitle && /* @__PURE__ */ React.createElement(Typography, {
+      variant: "caption",
+      className: classes.subtitle
+    }, subtitle)), showDropDown ? /* @__PURE__ */ React.createElement(ArrowDropUpIcon, {
       className: classes.dropdownArrow
     }) : /* @__PURE__ */ React.createElement(ArrowDropDownIcon, {
       className: classes.dropdownArrow
@@ -3647,7 +3665,10 @@ const SidebarSubmenuItem = (props) => {
   }), /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
-  }, title))));
+  }, title, /* @__PURE__ */ React.createElement("br", null), subtitle && /* @__PURE__ */ React.createElement(Typography, {
+    variant: "caption",
+    className: classes.subtitle
+  }, subtitle)))));
 };
 
 const useStyles$i = makeStyles((theme) => ({
@@ -5335,16 +5356,17 @@ const useStyles$5 = makeStyles((theme) => ({
     flexGrow: 1
   },
   rightItemsBox: {
-    width: "auto"
+    width: "auto",
+    alignItems: "center"
   },
   title: {
-    color: theme.palette.bursts.fontColor,
+    color: theme.page.fontColor,
     wordBreak: "break-word",
     fontSize: theme.typography.h3.fontSize,
     marginBottom: 0
   },
   subtitle: {
-    color: theme.palette.bursts.fontColor,
+    color: theme.page.fontColor,
     opacity: 0.8,
     display: "inline-block",
     marginTop: theme.spacing(1),
@@ -5355,10 +5377,10 @@ const useStyles$5 = makeStyles((theme) => ({
     fontSize: 11,
     opacity: 0.8,
     marginBottom: theme.spacing(1),
-    color: theme.palette.bursts.fontColor
+    color: theme.page.fontColor
   },
   breadcrumb: {
-    color: theme.palette.bursts.fontColor
+    color: theme.page.fontColor
   },
   breadcrumbType: {
     fontSize: "inherit",
@@ -5561,7 +5583,7 @@ const styles$1 = (theme) => createStyles({
   root: {
     color: theme.palette.common.white,
     padding: theme.spacing(2, 2, 3),
-    backgroundImage: theme.palette.bursts.gradient.linear,
+    backgroundImage: theme.getPageTheme({ themeId: "card" }).backgroundImage,
     backgroundPosition: 0,
     backgroundSize: "inherit"
   }