@backstage/core-components 0.12.5-next.0 → 0.12.5-next.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @backstage/core-components
 
+## 0.12.5-next.2
+
+### Patch Changes
+
+- 8bbf95b5507: Button labels in the sidebar (previously displayed in uppercase) will be displayed in the case that is provided without any transformations.
+  For example, a sidebar button with the label "Search" will appear as Search, "search" will appear as search, "SEARCH" will appear as SEARCH etc.
+  This can potentially affect any overriding styles previously applied to change the appearance of Button labels in the Sidebar.
+- fa004f66871: Use media queries to change layout instead of `isMobile` prop in `BackstagePage` component
+- Updated dependencies
+  - @backstage/core-plugin-api@1.5.0-next.2
+  - @backstage/config@1.0.7-next.0
+
+## 0.12.5-next.1
+
+### Patch Changes
+
+- cb8ec97cdeb: Change black & white colors to be theme aware
+- c10384a9235: Switch to using `LinkButton` instead of the deprecated `Button`
+- 52b0022dab7: Updated dependency `msw` to `^1.0.0`.
+- e1aae2f5a0c: Updated the `aria-label` of the `HeaderTabs` component.
+- Updated dependencies
+  - @backstage/errors@1.1.5-next.0
+  - @backstage/core-plugin-api@1.4.1-next.1
+  - @backstage/config@1.0.7-next.0
+  - @backstage/theme@0.2.18-next.0
+  - @backstage/version-bridge@1.0.3
+
 ## 0.12.5-next.0
 
 ### Patch Changes

package/dist/index.d.ts

@@ -120,12 +120,12 @@ declare type LinkButtonProps = ButtonProps$1 & Omit<LinkProps, 'variant' | 'colo
  * @public
  * @remarks
  */
-declare const LinkButton: (props: ButtonProps) => JSX.Element;
+declare const LinkButton: (props: LinkButtonProps) => JSX.Element;
 /**
  * @public
  * @deprecated use LinkButton instead
  */
-declare const Button: (props: ButtonProps) => JSX.Element;
+declare const Button: (props: LinkButtonProps) => JSX.Element;
 /**
  * @public
  * @deprecated use LinkButtonProps instead

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import { Alert } from '@material-ui/lab';
 import pluralize from 'pluralize';
 import React, { useState, useEffect, useRef, useCallback, useLayoutEffect, lazy, Suspense, useMemo, Component as Component$3, Children, isValidElement, useContext, Fragment, createContext, forwardRef } from 'react';
 import MaterialAvatar from '@material-ui/core/Avatar';
-import { makeStyles, createStyles, useTheme, darken, lighten, withStyles, styled, ThemeProvider } from '@material-ui/core/styles';
+import { makeStyles, useTheme, darken, lighten, withStyles, createStyles, styled, ThemeProvider } from '@material-ui/core/styles';
 import Button$1 from '@material-ui/core/Button';
 import MaterialLink from '@material-ui/core/Link';
 import classNames from 'classnames';
@@ -206,11 +206,11 @@ function extractInitials(value) {
 }
 
 const useStyles$S = makeStyles(
-  (theme) => createStyles({
+  (theme) => ({
     avatar: {
       width: "4rem",
       height: "4rem",
-      color: "#fff"
+      color: theme.palette.common.white
     },
     avatarText: {
       fontWeight: theme.typography.fontWeightBold,
@@ -385,7 +385,9 @@ const Link = React.forwardRef(
 );
 
 const LinkWrapper = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(Link, { ref, ...props, color: "initial" }));
-const LinkButton = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(Button$1, { ref, component: LinkWrapper, ...props }));
+const LinkButton = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ React.createElement(Button$1, { ref, component: LinkWrapper, ...props })
+);
 const Button = LinkButton;
 
 function CopyTextButton(props) {
@@ -1149,7 +1151,7 @@ const useStyles$J = makeStyles(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === "dark" ? "#444" : "#fff"
+      background: theme.palette.type === "dark" ? "#444" : theme.palette.common.white
     }
   }),
   { name: "BackstageMissingAnnotationEmptyState" }
@@ -1488,7 +1490,7 @@ function useShowCallout(featureId) {
 }
 
 const useStyles$F = makeStyles(
-  {
+  (theme) => ({
     "@keyframes pulsateSlightly": {
       "0%": { transform: "scale(1.0)" },
       "100%": { transform: "scale(1.1)" }
@@ -1524,17 +1526,17 @@ const useStyles$F = makeStyles(
       height: "100%",
       backgroundColor: "transparent",
       borderRadius: "100%",
-      border: "2px solid white",
+      border: `2px solid ${theme.palette.common.white}`,
       zIndex: 2001,
       transformOrigin: "center center",
       animation: "$pulsateAndFade 872ms 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite"
     },
     text: {
       position: "absolute",
-      color: "white",
+      color: theme.palette.common.white,
       zIndex: 2003
     }
-  },
+  }),
   { name: "BackstageFeatureCalloutCircular" }
 );
 function FeatureCalloutCircular(props) {
@@ -1880,9 +1882,9 @@ function HorizontalScrollGrid(props) {
 }
 
 const useStyles$C = makeStyles(
-  {
+  (theme) => ({
     alpha: {
-      color: "#ffffff",
+      color: theme.palette.common.white,
       fontFamily: "serif",
       fontWeight: "normal",
       fontStyle: "italic"
@@ -1893,7 +1895,7 @@ const useStyles$C = makeStyles(
       fontWeight: "normal",
       fontStyle: "italic"
     }
-  },
+  }),
   { name: "BackstageLifecycle" }
 );
 function Lifecycle(props) {
@@ -2177,7 +2179,7 @@ const SlackLink = (props) => {
   } else if (!slackChannel.href) {
     return /* @__PURE__ */ React.createElement(Typography, null, "Please contact ", slackChannel.name, " for help.");
   }
-  return /* @__PURE__ */ React.createElement(Button, { to: slackChannel.href, variant: "contained" }, slackChannel.name);
+  return /* @__PURE__ */ React.createElement(LinkButton, { to: slackChannel.href, variant: "contained" }, slackChannel.name);
 };
 const ErrorBoundary = class ErrorBoundary2 extends Component$3 {
   constructor(props) {
@@ -3814,9 +3816,6 @@ const useStyles$k = makeStyles(
       },
       "&::-webkit-scrollbar": {
         display: "none"
-      },
-      "& .MuiButtonBase-root": {
-        textTransform: "none"
       }
     }),
     drawerOpen: (props) => ({
@@ -3972,72 +3971,75 @@ function isLocationMatch(currentLocation, toLocation) {
 }
 
 const useStyles$j = makeStyles(
-  (theme) => ({
-    item: {
-      height: 48,
-      width: "100%",
-      "&:hover": {
-        background: "#6f6f6f",
-        color: theme.palette.navigation.selectedColor
+  (theme) => {
+    var _a, _b;
+    return {
+      item: {
+        height: 48,
+        width: "100%",
+        "&:hover": {
+          background: ((_a = theme.palette.navigation.navItem) == null ? void 0 : _a.hoverBackground) || "#6f6f6f",
+          color: theme.palette.navigation.selectedColor
+        },
+        display: "flex",
+        alignItems: "center",
+        color: theme.palette.navigation.color,
+        padding: theme.spacing(2.5),
+        cursor: "pointer",
+        position: "relative",
+        background: "none",
+        border: "none"
       },
-      display: "flex",
-      alignItems: "center",
-      color: theme.palette.navigation.color,
-      padding: theme.spacing(2.5),
-      cursor: "pointer",
-      position: "relative",
-      background: "none",
-      border: "none"
-    },
-    itemContainer: {
-      width: "100%"
-    },
-    selected: {
-      background: "#6f6f6f",
-      color: "#FFF"
-    },
-    label: {
-      margin: theme.spacing(1.75),
-      marginLeft: theme.spacing(1),
-      fontSize: theme.typography.body2.fontSize,
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      "text-overflow": "ellipsis",
-      lineHeight: 1
-    },
-    subtitle: {
-      fontSize: 10,
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      "text-overflow": "ellipsis"
-    },
-    dropdownArrow: {
-      position: "absolute",
-      right: 21
-    },
-    dropdown: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "end"
-    },
-    dropdownItem: {
-      width: "100%",
-      padding: "10px 0 10px 0",
-      "&:hover": {
+      itemContainer: {
+        width: "100%"
+      },
+      selected: {
         background: "#6f6f6f",
-        color: theme.palette.navigation.selectedColor
+        color: theme.palette.common.white
+      },
+      label: {
+        margin: theme.spacing(1.75),
+        marginLeft: theme.spacing(1),
+        fontSize: theme.typography.body2.fontSize,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        "text-overflow": "ellipsis",
+        lineHeight: 1
+      },
+      subtitle: {
+        fontSize: 10,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        "text-overflow": "ellipsis"
+      },
+      dropdownArrow: {
+        position: "absolute",
+        right: 21
+      },
+      dropdown: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "end"
+      },
+      dropdownItem: {
+        width: "100%",
+        padding: "10px 0 10px 0",
+        "&:hover": {
+          background: ((_b = theme.palette.navigation.navItem) == null ? void 0 : _b.hoverBackground) || "#6f6f6f",
+          color: theme.palette.navigation.selectedColor
+        }
+      },
+      textContent: {
+        color: theme.palette.navigation.color,
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(1),
+        fontSize: theme.typography.body2.fontSize,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        "text-overflow": "ellipsis"
       }
-    },
-    textContent: {
-      color: theme.palette.navigation.color,
-      paddingLeft: theme.spacing(4),
-      paddingRight: theme.spacing(1),
-      fontSize: theme.typography.body2.fontSize,
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      "text-overflow": "ellipsis"
-    }
-  }),
+    };
+  },
   { name: "BackstageSidebarSubmenuItem" }
 );
 const SidebarSubmenuItem = (props) => {
@@ -4165,7 +4167,7 @@ const useStyles$i = makeStyles(
     title: {
       fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightMedium,
-      color: "#FFF",
+      color: theme.palette.common.white,
       padding: theme.spacing(2.5),
       [theme.breakpoints.down("xs")]: {
         display: "none"
@@ -4247,7 +4249,8 @@ const makeSidebarStyles = (sidebarConfig) => makeStyles(
         margin: 0,
         padding: 0,
         textAlign: "inherit",
-        font: "inherit"
+        font: "inherit",
+        textTransform: "none"
       },
       closed: {
         width: sidebarConfig.drawerWidthClosed,
@@ -4874,7 +4877,7 @@ function HeaderTabs(props) {
       textColor: "inherit",
       variant: "scrollable",
       scrollButtons: "auto",
-      "aria-label": "scrollable auto tabs example",
+      "aria-label": "tabs",
       onChange: handleChange,
       value: selectedTab
     },
@@ -5984,6 +5987,11 @@ const ActionItem = ({
   ));
 };
 function HeaderActionMenu(props) {
+  const {
+    palette: {
+      common: { white }
+    }
+  } = useTheme();
   const { actionItems } = props;
   const [open, setOpen] = React.useState(false);
   const anchorElRef = React.useRef(null);
@@ -5994,7 +6002,7 @@ function HeaderActionMenu(props) {
       "data-testid": "header-action-menu",
       ref: anchorElRef,
       style: {
-        color: "white",
+        color: white,
         height: 56,
         width: 56,
         marginRight: -4,
@@ -6070,7 +6078,7 @@ function ItemCardHeader(props) {
 
 function ItemCard(props) {
   const { description, tags, title, type, subtitle, label, onClick, href } = props;
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, { title, subtitle: subtitle || type })), /* @__PURE__ */ React.createElement(CardContent, null, (tags == null ? void 0 : tags.length) ? /* @__PURE__ */ React.createElement(Box, null, tags.map((tag, i) => /* @__PURE__ */ React.createElement(Chip, { size: "small", label: tag, key: i }))) : null, description), /* @__PURE__ */ React.createElement(CardActions, null, !href && /* @__PURE__ */ React.createElement(Button, { to: "#", onClick, color: "primary" }, label), href && /* @__PURE__ */ React.createElement(Button, { to: href, color: "primary" }, label)));
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardMedia, null, /* @__PURE__ */ React.createElement(ItemCardHeader, { title, subtitle: subtitle || type })), /* @__PURE__ */ React.createElement(CardContent, null, (tags == null ? void 0 : tags.length) ? /* @__PURE__ */ React.createElement(Box, null, tags.map((tag, i) => /* @__PURE__ */ React.createElement(Chip, { size: "small", label: tag, key: i }))) : null, description), /* @__PURE__ */ React.createElement(CardActions, null, !href && /* @__PURE__ */ React.createElement(LinkButton, { to: "#", onClick, color: "primary" }, label), href && /* @__PURE__ */ React.createElement(LinkButton, { to: href, color: "primary" }, label)));
 }
 
 const styles = (theme) => createStyles({
@@ -6089,22 +6097,24 @@ function ItemCardGrid(props) {
 }
 
 const useStyles$1 = makeStyles(
-  () => ({
-    root: ({ isMobile }) => ({
+  (theme) => ({
+    root: {
       display: "grid",
       gridTemplateAreas: "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
       gridTemplateRows: "max-content auto 1fr",
       gridTemplateColumns: "auto 1fr auto",
-      height: isMobile ? "100%" : "100vh",
-      overflowY: "auto"
-    })
+      overflowY: "auto",
+      height: "100vh",
+      [theme.breakpoints.down("xs")]: {
+        height: "100%"
+      }
+    }
   }),
   { name: "BackstagePage" }
 );
 function Page(props) {
   const { themeId, children } = props;
-  const { isMobile } = useSidebarPinState();
-  const classes = useStyles$1({ isMobile });
+  const classes = useStyles$1();
   return /* @__PURE__ */ React.createElement(
     ThemeProvider,
     {