@backstage/core-components 0.9.4-next.1 → 0.9.5-next.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @backstage/core-components
 
+## 0.9.5-next.0
+
+### Patch Changes
+
+- 65840b17be: Fix issue where right arrow icon was incorrectly added to side bar items without a sub-menu
+- 6968b65ba1: Updated dependency `@react-hookz/web` to `^14.0.0`.
+- 96d1e01641: Accessibility updates:
+
+  - Added `aria-label` to the `Select` component
+  - Changed heading level used in the header of `Table` component
+
+## 0.9.4
+
+### Patch Changes
+
+- ac19f82936: Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
+- 55f68c386a: Enabled select component to be enabled by keyboard
+- c0055ece91: Announce external links to screen readers
+- e210c0cab8: Add ability to customize `Read More` destination with `readMoreUrl` prop for `MissingAnnotationEmptyState` component.
+- 52c02ac02b: Don't set the background color on an Avatar component that has a picture.
+- cfc0f2e5bd: Added optional anchorOrigin alignment prop to AlertDisplay
+- f4380eb602: Add an aria-label to the support button to improve accessibility for screen readers
+- ba97b80421: Updated dependency `@types/react-syntax-highlighter` to `^15.0.0`.
+- e462112be5: Updated dependency `rc-progress` to `3.3.2`.
+- 2bcb0a0e2b: Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)
+- c7f32b53a4: Fixed multiple scrolls appearing on Page when added InfoCard with external bottom link
+- 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
+- 2295b4ab2b: Add controls to Storybook stories
+- 521293b22e: Added a chevron Indicator when the sidebar is collapsed and has a sub-menu
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.2
+  - @backstage/config@1.0.1
+
+## 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

@@ -553,6 +553,7 @@ declare type EmptyStateImageClassKey = 'generalImg';
 
 declare type Props$g = {
     annotation: string;
+    readMoreUrl?: string;
 };
 declare type MissingAnnotationEmptyStateClassKey = 'code';
 declare function MissingAnnotationEmptyState(props: Props$g): JSX.Element;
@@ -1522,8 +1523,8 @@ declare type SidebarSubmenuItemDropdownItem = {
  */
 declare type SidebarSubmenuItemProps = {
     title: string;
-    to: string;
-    icon: IconComponent;
+    to?: string;
+    icon?: IconComponent;
     dropdownItems?: SidebarSubmenuItemDropdownItem[];
 };
 /**
@@ -1611,6 +1612,7 @@ declare type SidebarItemBaseProps = {
     icon: IconComponent;
     text?: string;
     hasNotifications?: boolean;
+    hasSubmenu?: boolean;
     disableHighlight?: boolean;
     className?: string;
 };

package/dist/index.esm.js

@@ -8,6 +8,7 @@ import pluralize from 'pluralize';
 import { makeStyles, createStyles, useTheme, darken, lighten, withStyles, styled, ThemeProvider } from '@material-ui/core/styles';
 import MaterialAvatar from '@material-ui/core/Avatar';
 import Button$1 from '@material-ui/core/Button';
+import classNames from 'classnames';
 import Link$1 from '@material-ui/core/Link';
 import { Link as Link$2, useSearchParams, useLocation, useResolvedPath, resolvePath } from 'react-router-dom';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -27,7 +28,6 @@ import makeStyles$1 from '@material-ui/core/styles/makeStyles';
 import * as d3Shape from 'd3-shape';
 import isFinite from 'lodash/isFinite';
 import useObservable from 'react-use/lib/useObservable';
-import classNames from 'classnames';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -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));
 }
 
@@ -213,6 +217,9 @@ const useStyles$R = makeStyles({
     whiteSpace: "nowrap",
     height: 1,
     width: 1
+  },
+  externalLink: {
+    position: "relative"
   }
 }, { name: "Link" });
 const isExternalUri = (uri) => /^([a-z+.-]+):/.test(uri);
@@ -247,7 +254,8 @@ const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
     href: to,
     onClick: handleClick,
     ...newWindow ? { target: "_blank", rel: "noopener" } : {},
-    ...props
+    ...props,
+    className: classNames(classes.externalLink, props.className)
   }, props.children, /* @__PURE__ */ React.createElement("span", {
     className: classes.visuallyHidden
   }, ", Opens in a new window")) : /* @__PURE__ */ React.createElement(Link$1, {
@@ -942,7 +950,8 @@ const useStyles$J = makeStyles((theme) => ({
   }
 }), { name: "BackstageMissingAnnotationEmptyState" });
 function MissingAnnotationEmptyState(props) {
-  const { annotation } = props;
+  const { annotation, readMoreUrl } = props;
+  const url = readMoreUrl || "https://backstage.io/docs/features/software-catalog/well-known-annotations";
   const classes = useStyles$J();
   const description = /* @__PURE__ */ React.createElement(React.Fragment, null, "The ", /* @__PURE__ */ React.createElement("code", null, annotation), " annotation is missing. You need to add the annotation to your component if you want to enable this tool.");
   return /* @__PURE__ */ React.createElement(EmptyState, {
@@ -962,7 +971,7 @@ function MissingAnnotationEmptyState(props) {
     })), /* @__PURE__ */ React.createElement(Button$1, {
       color: "primary",
       component: Link,
-      to: "https://backstage.io/docs/features/software-catalog/well-known-annotations"
+      to: url
     }, "Read more"))
   });
 }
@@ -1718,7 +1727,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 +1750,9 @@ const useStyles$A = makeStyles((theme) => ({
   title: {
     minWidth: 0
   },
+  titleHeading: {
+    fontSize: theme.typography.h6.fontSize
+  },
   contentList: {
     padding: 0
   },
@@ -1761,10 +1772,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 +1788,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
@@ -2344,6 +2360,7 @@ function SelectComponent(props) {
   }, /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.formLabel
   }, label), /* @__PURE__ */ React.createElement(Select, {
+    "aria-label": label,
     value,
     native,
     disabled,
@@ -3069,17 +3086,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 +3495,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 +3511,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 +3534,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 +3549,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 +3566,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) => ({
@@ -3870,6 +3905,7 @@ const SidebarItemBase = forwardRef((props, ref) => {
     icon: Icon,
     text,
     hasNotifications = false,
+    hasSubmenu = false,
     disableHighlight = false,
     onClick,
     children,
@@ -3879,15 +3915,19 @@ const SidebarItemBase = forwardRef((props, ref) => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
   const { isOpen } = useContext(SidebarContext);
+  const divStyle = !isOpen && hasSubmenu ? { display: "flex", marginLeft: "24px" } : {};
+  const displayItemIcon = /* @__PURE__ */ React.createElement("div", {
+    style: divStyle
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    fontSize: "small"
+  }), !isOpen && hasSubmenu ? /* @__PURE__ */ React.createElement(ArrowRightIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null));
   const itemIcon = /* @__PURE__ */ React.createElement(Badge, {
     color: "secondary",
     variant: "dot",
     overlap: "circular",
     invisible: !hasNotifications,
     className: classNames({ [classes.closedItemIcon]: !isOpen })
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    fontSize: "small"
-  }));
+  }, displayItemIcon);
   const openContent = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     "data-testid": "login-button",
     className: classes.iconContainer
@@ -3961,6 +4001,7 @@ const SidebarItemWithSubmenu = ({
     onMouseEnter: handleMouseEnter,
     className: classNames(isHoveredOn && classes.highlighted)
   }, /* @__PURE__ */ React.createElement(SidebarItemBase, {
+    hasSubmenu: true,
     className: isActive ? classes.selected : "",
     ...props
   }, arrowIcon()), isHoveredOn && children));
@@ -4785,7 +4826,7 @@ function Table(props) {
     icons: tableIcons,
     title: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
       variant: "h5",
-      component: "h3"
+      component: "h2"
     }, title), subtitle && /* @__PURE__ */ React.createElement(Typography, {
       color: "textSecondary",
       variant: "body1"