Merge pull request #3389 from relative-ci/fix-run-info-icon

fix(ui): RunInfo - hide tooltip help icon by default
relative-ci · May 22, 2023 · 2815ab9 · 2815ab9
2 parents b055f5b + e2cf85a
commit 2815ab9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/ui/src/components/run-info/run-info.module.css b/packages/ui/src/components/run-info/run-info.module.css
@@ -40,13 +40,15 @@
 }
 
 /* Hover state */
-.titleIcon span[aria-controls=""] {
+.titleHoverCardIcon span[aria-controls=""],
+.titleTooltipIcon[aria-controls=""] {
   opacity: 0;
   visibility: none;
   transition: var(--ui-transition-out);
 }
 
-.root:hover .titleIcon span {
+.root:hover .titleHoverCardIcon span,
+.root:hover .titleTooltipIcon {
   opacity: 1;
   visibility: visible;
   transition: var(--ui-transition-in);

diff --git a/packages/ui/src/components/run-info/run-info.tsx b/packages/ui/src/components/run-info/run-info.tsx
@@ -73,12 +73,15 @@ export const RunInfo = ({
         <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
           <span>{title}</span>
           {titleHoverCard && (
-            <HoverCard label={<Icon glyph={Icon.ICONS.HELP} />} className={css.titleIcon}>
+            <HoverCard
+              label={<Icon glyph={Icon.ICONS.HELP} />}
+              className={cx(css.titleIcon, css.titleHoverCardIcon)}
+            >
               {titleHoverCard}
             </HoverCard>
           )}
           {titleTooltip && (
-            <Tooltip title={titleTooltip} className={css.titleIcon}>
+            <Tooltip title={titleTooltip} className={cx(css.titleIcon, css.titleTooltipIcon)}>
               <Icon glyph={Icon.ICONS.HELP} />
             </Tooltip>
           )}