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

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @backstage/core-components
 
+## 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
+
+- 55f68c386a: Enabled select component to be enabled by keyboard
+- ba97b80421: Updated dependency `@types/react-syntax-highlighter` to `^15.0.0`.
+- 2bcb0a0e2b: Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)
+- Updated dependencies
+  - @backstage/config@1.0.1-next.0
+  - @backstage/core-plugin-api@1.0.2-next.1
+
 ## 0.9.4-next.0
 
 ### 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[];
 };
 /**

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';
@@ -71,6 +71,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import Chip from '@material-ui/core/Chip';
 import FormControl from '@material-ui/core/FormControl';
 import InputBase from '@material-ui/core/InputBase';
+import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import SvgIcon from '@material-ui/core/SvgIcon';
@@ -192,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));
 }
 
@@ -212,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);
@@ -246,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, {
@@ -941,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, {
@@ -961,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"))
   });
 }
@@ -1717,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, {
@@ -1741,6 +1750,9 @@ const useStyles$A = makeStyles((theme) => ({
   title: {
     minWidth: 0
   },
+  titleHeading: {
+    fontSize: theme.typography.h6.fontSize
+  },
   contentList: {
     padding: 0
   },
@@ -1760,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, {
@@ -1771,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
@@ -2264,6 +2281,16 @@ const useStyles$s = makeStyles((theme) => createStyles({
       color: theme.palette.text.primary
     }
   },
+  formLabel: {
+    transform: "initial",
+    fontWeight: "bold",
+    fontSize: 14,
+    fontFamily: theme.typography.fontFamily,
+    color: theme.palette.text.primary,
+    "&.Mui-focused": {
+      color: theme.palette.text.primary
+    }
+  },
   chips: {
     display: "flex",
     flexWrap: "wrap"
@@ -2326,13 +2353,13 @@ function SelectComponent(props) {
   };
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.root
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, label), /* @__PURE__ */ React.createElement(ClickAwayListener, {
+  }, /* @__PURE__ */ React.createElement(ClickAwayListener, {
     onClickAway: handleClickAway
   }, /* @__PURE__ */ React.createElement(FormControl, {
     className: classes.formControl
-  }, /* @__PURE__ */ React.createElement(Select, {
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    className: classes.formLabel
+  }, label), /* @__PURE__ */ React.createElement(Select, {
     value,
     native,
     disabled,
@@ -2343,6 +2370,8 @@ function SelectComponent(props) {
     onClick: handleClick,
     open: isOpen,
     input: /* @__PURE__ */ React.createElement(BootstrapInput, null),
+    label,
+    tabIndex: 0,
     renderValue: (s) => {
       var _a;
       return multiple && value.length !== 0 ? /* @__PURE__ */ React.createElement("div", {
@@ -3056,17 +3085,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",
@@ -3380,7 +3409,8 @@ const DesktopSidebar = (props) => {
     }
   };
   return /* @__PURE__ */ React.createElement("nav", {
-    style: {}
+    style: {},
+    "aria-label": "sidebar nav"
   }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
     value: { isOpen, setOpen }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -3464,7 +3494,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",
@@ -3477,17 +3510,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) => {
@@ -3497,7 +3533,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);
@@ -3512,11 +3548,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",
@@ -3525,33 +3565,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) => ({
@@ -3865,15 +3913,19 @@ const SidebarItemBase = forwardRef((props, ref) => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
   const { isOpen } = useContext(SidebarContext);
+  const divStyle = !isOpen && children ? { display: "flex", marginLeft: "24px" } : {};
+  const displayItemIcon = /* @__PURE__ */ React.createElement("div", {
+    style: divStyle
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    fontSize: "small"
+  }), !isOpen && children ? /* @__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