Merge pull request #15646 from PatAKnight/hightlight-tech-radar

Add highlighting of legend item

.changeset/metal-ducks-promise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': minor
+---
+
+Add highlighting of legend item and show bubble on hover within the Tech Radar

plugins/tech-radar/src/components/Radar/utils.ts

@@ -141,6 +141,7 @@ export const adjustEntries = (
         activeEntry && entry.id === activeEntry?.id
           ? entry.ring.color
           : color(entry.ring.color).desaturate(0.5).lighten(0.1).string(),
+      active: activeEntry && entry.id === activeEntry?.id ? true : false,
     };
   });
 

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -68,8 +68,16 @@ const useStyles = makeStyles<Theme>(theme => ({
     userSelect: 'none',
     fontSize: '11px',
   },
+  activeEntry: {
+    pointerEvents: 'visiblePainted',
+    userSelect: 'none',
+    fontSize: '11px',
+    background: '#6f6f6f',
+    color: '#FFF',
+  },
   entryLink: {
     pointerEvents: 'visiblePainted',
+    cursor: 'pointer',
   },
 }));
 

plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx

@@ -23,6 +23,7 @@ type RadarLegendLinkProps = {
   description?: string;
   title?: string;
   classes: ClassNameMap<string>;
+  active?: boolean;
 };
 
 export const RadarLegendLink = ({
@@ -30,6 +31,7 @@ export const RadarLegendLink = ({
   description,
   title,
   classes,
+  active,
 }: RadarLegendLinkProps) => {
   const [open, setOpen] = React.useState(false);
 
@@ -55,7 +57,9 @@ export const RadarLegendLink = ({
           tabIndex={0}
           onKeyPress={toggle}
         >
-          <span className={classes.entry}>{title}</span>
+          <span className={active ? classes.activeEntry : classes.entry}>
+            {title}
+          </span>
         </span>
         {open && (
           <RadarDescription
@@ -71,7 +75,9 @@ export const RadarLegendLink = ({
   }
   return (
     <WithLink url={url} className={classes.entryLink}>
-      <span className={classes.entry}>{title}</span>
+      <span className={active ? classes.activeEntry : classes.entry}>
+        {title}
+      </span>
     </WithLink>
   );
 };

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -57,6 +57,7 @@ export const RadarLegendRing = ({
                 url={entry.url}
                 title={entry.title}
                 description={entry.description}
+                active={entry.active}
               />
             </li>
           ))}