@backstage/core-components 0.9.6-next.0 → 0.9.6-next.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage/core-components
 
+## 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

package/dist/index.d.ts

@@ -1504,6 +1504,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 +1513,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: {
@@ -3545,6 +3545,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 +3582,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 +3616,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 +3657,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) => ({