@backstage/core-components 0.9.4-next.1 → 0.9.4-next.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @backstage/core-components
 
+## 0.9.4-next.2
+
+### Patch Changes
+
+- 52c02ac02b: Don't set the background color on an Avatar component that has a picture.
+- 3603014e0e: Add ARIA landmark( <main>), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).
+- 2025d7c123: Properly highlight `SidebarSubmenuItem` dropdown items on hover, use ellipsis styling on long labels in `SidebarSubmenu`, allow `icon` and `to` properties to be optional on `SidebarSubmenuItem`, and fix `SidebarPage` padding to be responsive to pinned state
+
 ## 0.9.4-next.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1522,8 +1522,8 @@ declare type SidebarSubmenuItemDropdownItem = {
  */
 declare type SidebarSubmenuItemProps = {
     title: string;
-    to: string;
-    icon: IconComponent;
+    to?: string;
+    icon?: IconComponent;
     dropdownItems?: SidebarSubmenuItemDropdownItem[];
 };
 /**

package/dist/index.esm.js

@@ -193,14 +193,18 @@ const useStyles$S = makeStyles((theme) => createStyles({
 function Avatar(props) {
   const { displayName, picture, customStyles } = props;
   const classes = useStyles$S();
+  let styles = { ...customStyles };
+  if (!picture) {
+    styles = {
+      backgroundColor: stringToColor(displayName || ""),
+      ...customStyles
+    };
+  }
   return /* @__PURE__ */ React.createElement(MaterialAvatar, {
     alt: displayName,
     src: picture,
     className: classes.avatar,
-    style: {
-      backgroundColor: stringToColor(displayName || picture || ""),
-      ...customStyles
-    }
+    style: styles
   }, displayName && extractInitials(displayName));
 }
 
@@ -1718,7 +1722,6 @@ const LoginRequestListItem = ({ request, busy, setBusy }) => {
   };
   const IconComponent = request.provider.icon;
   return /* @__PURE__ */ React.createElement(ListItem, {
-    button: true,
     disabled: busy,
     classes: { root: classes.root }
   }, /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(IconComponent, {
@@ -1742,6 +1745,9 @@ const useStyles$A = makeStyles((theme) => ({
   title: {
     minWidth: 0
   },
+  titleHeading: {
+    fontSize: theme.typography.h6.fontSize
+  },
   contentList: {
     padding: 0
   },
@@ -1761,10 +1767,15 @@ function OAuthRequestDialog(_props) {
     open: Boolean(requests.length),
     fullWidth: true,
     maxWidth: "xs",
-    classes: { paper: classes.dialog }
-  }, /* @__PURE__ */ React.createElement(DialogTitle, {
-    classes: { root: classes.title }
-  }, "Login Required"), /* @__PURE__ */ React.createElement(DialogContent, {
+    classes: { paper: classes.dialog },
+    "aria-labelledby": "oauth-req-dialog-title"
+  }, /* @__PURE__ */ React.createElement("main", null, /* @__PURE__ */ React.createElement(DialogTitle, {
+    classes: { root: classes.title },
+    id: "oauth-req-dialog-title"
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    className: classes.titleHeading,
+    variant: "h1"
+  }, "Login Required")), /* @__PURE__ */ React.createElement(DialogContent, {
     dividers: true,
     classes: { root: classes.contentList }
   }, /* @__PURE__ */ React.createElement(List, null, requests.map((request) => /* @__PURE__ */ React.createElement(LoginRequestListItem, {
@@ -1772,7 +1783,7 @@ function OAuthRequestDialog(_props) {
     request,
     busy,
     setBusy
-  })))), /* @__PURE__ */ React.createElement(DialogActions, {
+  }))))), /* @__PURE__ */ React.createElement(DialogActions, {
     classes: { root: classes.actionButtons }
   }, /* @__PURE__ */ React.createElement(Button$1, {
     onClick: handleRejectAll
@@ -3069,17 +3080,17 @@ const LocalStorage = {
 };
 
 const useStyles$n = makeStyles((theme) => ({
-  root: (props) => ({
+  root: {
     width: "100%",
     transition: "padding-left 0.1s ease-out",
     isolation: "isolate",
     [theme.breakpoints.up("sm")]: {
-      paddingLeft: () => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed
+      paddingLeft: (props) => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed
     },
     [theme.breakpoints.down("xs")]: {
-      paddingBottom: props.sidebarConfig.mobileSidebarHeight
+      paddingBottom: (props) => props.sidebarConfig.mobileSidebarHeight
     }
-  }),
+  },
   content: {
     zIndex: 0,
     isolation: "isolate",
@@ -3478,7 +3489,10 @@ const useStyles$j = makeStyles((theme) => ({
   label: {
     margin: 14,
     marginLeft: 7,
-    fontSize: 14
+    fontSize: 14,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    "text-overflow": "ellipsis"
   },
   dropdownArrow: {
     position: "absolute",
@@ -3491,17 +3505,20 @@ const useStyles$j = makeStyles((theme) => ({
   },
   dropdownItem: {
     width: "100%",
-    padding: "10px 0 10px 0"
+    padding: "10px 0 10px 0",
+    "&:hover": {
+      background: "#6f6f6f",
+      color: theme.palette.navigation.selectedColor
+    }
   },
   textContent: {
     color: theme.palette.navigation.color,
-    display: "flex",
-    justifyContent: "center",
-    [theme.breakpoints.down("xs")]: {
-      display: "block",
-      paddingLeft: theme.spacing(4)
-    },
-    fontSize: "14px"
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(1),
+    fontSize: "14px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    "text-overflow": "ellipsis"
   }
 }), { name: "BackstageSidebarSubmenuItem" });
 const SidebarSubmenuItem = (props) => {
@@ -3511,7 +3528,7 @@ const SidebarSubmenuItem = (props) => {
   const closeSubmenu = () => {
     setIsHoveredOn(false);
   };
-  const toLocation = useResolvedPath(to);
+  const toLocation = useResolvedPath(to != null ? to : "");
   const currentLocation = useLocation();
   let isActive = isLocationMatch(currentLocation, toLocation);
   const [showDropDown, setShowDropDown] = useState(false);
@@ -3526,11 +3543,15 @@ const SidebarSubmenuItem = (props) => {
     });
     return /* @__PURE__ */ React.createElement("div", {
       className: classes.itemContainer
+    }, /* @__PURE__ */ React.createElement(Tooltip, {
+      title,
+      enterDelay: 500,
+      enterNextDelay: 500
     }, /* @__PURE__ */ React.createElement("button", {
       onClick: handleClickDropdown,
       onTouchStart: (e) => e.stopPropagation(),
       className: classNames(classes.item, isActive ? classes.selected : void 0)
-    }, /* @__PURE__ */ React.createElement(Icon, {
+    }, Icon && /* @__PURE__ */ React.createElement(Icon, {
       fontSize: "small"
     }), /* @__PURE__ */ React.createElement(Typography, {
       variant: "subtitle1",
@@ -3539,33 +3560,41 @@ const SidebarSubmenuItem = (props) => {
       className: classes.dropdownArrow
     }) : /* @__PURE__ */ React.createElement(ArrowDropDownIcon, {
       className: classes.dropdownArrow
-    })), dropdownItems && showDropDown && /* @__PURE__ */ React.createElement("div", {
+    }))), dropdownItems && showDropDown && /* @__PURE__ */ React.createElement("div", {
       className: classes.dropdown
-    }, dropdownItems.map((object, key) => /* @__PURE__ */ React.createElement(Link, {
+    }, dropdownItems.map((object, key) => /* @__PURE__ */ React.createElement(Tooltip, {
+      key,
+      title: object.title,
+      enterDelay: 500,
+      enterNextDelay: 500
+    }, /* @__PURE__ */ React.createElement(Link, {
       to: object.to,
       underline: "none",
       className: classes.dropdownItem,
       onClick: closeSubmenu,
-      onTouchStart: (e) => e.stopPropagation(),
-      key
+      onTouchStart: (e) => e.stopPropagation()
     }, /* @__PURE__ */ React.createElement(Typography, {
       className: classes.textContent
-    }, object.title)))));
+    }, object.title))))));
   }
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.itemContainer
+  }, /* @__PURE__ */ React.createElement(Tooltip, {
+    title,
+    enterDelay: 500,
+    enterNextDelay: 500
   }, /* @__PURE__ */ React.createElement(Link, {
     to,
     underline: "none",
     className: classNames(classes.item, isActive ? classes.selected : void 0),
     onClick: closeSubmenu,
     onTouchStart: (e) => e.stopPropagation()
-  }, /* @__PURE__ */ React.createElement(Icon, {
+  }, Icon && /* @__PURE__ */ React.createElement(Icon, {
     fontSize: "small"
   }), /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
-  }, title)));
+  }, title))));
 };
 
 const useStyles$i = makeStyles((theme) => ({