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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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

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;

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';
@@ -217,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);
@@ -251,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, {
@@ -946,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, {
@@ -966,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"))
   });
 }
@@ -3908,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