@backstage/core-components 0.8.7-next.1 → 0.8.7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage/core-components
 
+## 0.8.7
+
+### Patch Changes
+
+- f7257dff6f: The `<Link />` component now accepts a `noTrack` prop, which prevents the `click` event from being captured by the Analytics API. This can be used if tracking is explicitly not warranted, or in order to use custom link tracking in specific situations.
+- 4c773ed25c: Change subtitle of Header style to use palette.bursts.fontColor
+- f465b63b7f: Fix an issue where changes related to the `MobileSidebar` prevented scrolling pages. Additionally improve the menu of the `MobileSidebar` to not overlay the `BottomNavigation`.
+- 064e750a50: Adding hover message to the Gauge and an info icon to the GaugeCard.
+- a681cb9c2f: Make linkTarget configurable for MarkdownContent component
+
 ## 0.8.7-next.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -766,6 +766,7 @@ declare type Props$9 = {
     children?: ReactNode;
     headerStyle?: object;
     headerProps?: CardHeaderProps;
+    icon?: ReactNode;
     action?: ReactNode;
     actionsClassName?: string;
     actions?: ReactNode;
@@ -784,7 +785,7 @@ declare type Props$9 = {
 declare function InfoCard(props: Props$9): JSX.Element;
 
 /** @public */
-declare type GaugeClassKey = 'root' | 'overlay' | 'circle' | 'colorUnknown';
+declare type GaugeClassKey = 'root' | 'overlay' | 'description' | 'circle' | 'colorUnknown';
 /** @public */
 declare type GaugeProps = {
     value: number;
@@ -792,6 +793,7 @@ declare type GaugeProps = {
     inverse?: boolean;
     unit?: string;
     max?: number;
+    description?: ReactNode;
     getColor?: GaugePropsGetColor;
 };
 /** @public */
@@ -817,6 +819,8 @@ declare type Props$8 = {
     variant?: InfoCardVariants;
     /** Progress in % specified as decimal, e.g. "0.23" */
     progress: number;
+    description?: ReactNode;
+    icon?: ReactNode;
     inverse?: boolean;
     deepLink?: BottomLinkProps;
     getColor?: GaugePropsGetColor;

package/dist/index.esm.js

@@ -1900,7 +1900,10 @@ const useStyles$y = makeStyles((theme) => ({
   },
   headerAvatar: {},
   headerAction: {},
-  headerContent: {}
+  headerContent: {},
+  subheader: {
+    display: "flex"
+  }
 }), { name: "BackstageInfoCard" });
 const CardActionsTopRight = withStyles((theme) => ({
   root: {
@@ -1948,6 +1951,7 @@ function InfoCard(props) {
     children,
     headerStyle,
     headerProps,
+    icon,
     action,
     actionsClassName,
     actions,
@@ -1973,6 +1977,13 @@ function InfoCard(props) {
       };
     });
   }
+  const cardSubTitle = () => {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: classes.headerSubheader
+    }, subheader && /* @__PURE__ */ React.createElement("div", {
+      className: classes.subheader
+    }, subheader), icon);
+  };
   const errProps = errorBoundaryProps || (slackChannel ? { slackChannel } : {});
   return /* @__PURE__ */ React.createElement(Card, {
     style: calculatedStyle,
@@ -1989,7 +2000,7 @@ function InfoCard(props) {
       content: classes.headerContent
     },
     title,
-    subheader,
+    subheader: cardSubTitle(),
     action,
     style: { ...headerStyle },
     titleTypographyProps,
@@ -2020,6 +2031,15 @@ const useStyles$x = makeStyles((theme) => ({
     fontWeight: "bold",
     color: theme.palette.textContrast
   },
+  description: {
+    fontSize: "100%",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    position: "absolute",
+    wordBreak: "break-all",
+    display: "inline-block"
+  },
   circle: {
     width: "80%",
     transform: "translate(10%, 0)"
@@ -2051,16 +2071,35 @@ const getProgressColor = ({
   return palette.status.ok;
 };
 function Gauge(props) {
+  const [hoverRef, setHoverRef] = useState(null);
   const { getColor = getProgressColor } = props;
   const classes = useStyles$x(props);
   const { palette } = useTheme();
-  const { value, fractional, inverse, unit, max } = {
+  const { value, fractional, inverse, unit, max, description } = {
     ...defaultGaugeProps,
     ...props
   };
   const asPercentage = fractional ? Math.round(value * max) : value;
   const asActual = max !== 100 ? Math.round(value) : asPercentage;
+  const [isHovering, setIsHovering] = useState(false);
+  useEffect(() => {
+    const node = hoverRef;
+    const handleMouseOver = () => setIsHovering(true);
+    const handleMouseOut = () => setIsHovering(false);
+    if (node && description) {
+      node.addEventListener("mouseenter", handleMouseOver);
+      node.addEventListener("mouseleave", handleMouseOut);
+      return () => {
+        node.removeEventListener("mouseenter", handleMouseOver);
+        node.removeEventListener("mouseleave", handleMouseOut);
+      };
+    }
+    return () => {
+      setIsHovering(false);
+    };
+  }, [description, hoverRef]);
   return /* @__PURE__ */ React.createElement("div", {
+    ref: setHoverRef,
     className: classes.root
   }, /* @__PURE__ */ React.createElement(Circle, {
     strokeLinecap: "butt",
@@ -2069,7 +2108,9 @@ function Gauge(props) {
     trailWidth: 12,
     strokeColor: getColor({ palette, value: asActual, inverse, max }),
     className: classes.circle
-  }), /* @__PURE__ */ React.createElement("div", {
+  }), description && isHovering ? /* @__PURE__ */ React.createElement("div", {
+    className: classes.description
+  }, description) : /* @__PURE__ */ React.createElement("div", {
     className: classes.overlay
   }, isNaN(value) ? "N/A" : `${asActual}${unit}`));
 }
@@ -2082,9 +2123,20 @@ const useStyles$w = makeStyles({
 }, { name: "BackstageGaugeCard" });
 function GaugeCard(props) {
   const classes = useStyles$w(props);
-  const { title, subheader, progress, inverse, deepLink, variant, getColor } = props;
+  const {
+    title,
+    subheader,
+    progress,
+    inverse,
+    deepLink,
+    description,
+    icon,
+    variant,
+    getColor
+  } = props;
   const gaugeProps = {
     inverse,
+    description,
     getColor,
     value: progress
   };
@@ -2094,7 +2146,8 @@ function GaugeCard(props) {
     title,
     subheader,
     deepLink,
-    variant
+    variant,
+    icon
   }, /* @__PURE__ */ React.createElement(Gauge, {
     ...gaugeProps
   })));