Panel Description Tooltip Design Change (#79213) (#79316)

* wrapped Embeddable Panel title in EuiTooltip and centered description icon
elastic · Oct 2, 2020 · 2f9f0ba · 2f9f0ba
1 parent 0ac5e78
commit 2f9f0ba
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss b/src/plugins/embeddable/public/lib/panel/_embeddable_panel.scss
@@ -54,9 +54,14 @@
   .embPanel__titleInner {
     overflow: hidden;
     display: flex;
+    align-items: center;
     padding-right: $euiSizeS;
   }
 
+  .embPanel__titleTooltipAnchor {
+    max-width: 100%;
+  }
+
   .embPanel__titleText {
     @include euiTextTruncate;
   }

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -99,16 +99,6 @@ function renderNotifications(
   });
 }
 
-function renderTooltip(description: string) {
-  return (
-    description !== '' && (
-      <EuiToolTip content={description} delay="regular" position="right">
-        <EuiIcon type="iInCircle" />
-      </EuiToolTip>
-    )
-  );
-}
-
 type EmbeddableWithDescription = IEmbeddable & { getDescription: () => string };
 
 function getViewDescription(embeddable: IEmbeddable | EmbeddableWithDescription) {
@@ -134,9 +124,10 @@ export function PanelHeader({
   embeddable,
   headerId,
 }: PanelHeaderProps) {
-  const viewDescription = getViewDescription(embeddable);
-  const showTitle = !hidePanelTitle && (!isViewMode || title || viewDescription !== '');
-  const showPanelBar = !isViewMode || badges.length > 0 || notifications.length > 0 || showTitle;
+  const description = getViewDescription(embeddable);
+  const showTitle = !hidePanelTitle && (!isViewMode || title);
+  const showPanelBar =
+    !isViewMode || badges.length > 0 || notifications.length > 0 || showTitle || description;
   const classes = classNames('embPanel__header', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     'embPanel__header--floater': !showPanelBar,
@@ -174,26 +165,36 @@ export function PanelHeader({
     );
   }
 
+  const renderTitle = () => {
+    const titleComponent = showTitle ? (
+      <span className={title ? 'embPanel__titleText' : 'embPanel__placeholderTitleText'}>
+        {title || placeholderTitle}
+      </span>
+    ) : undefined;
+    return description ? (
+      <EuiToolTip
+        content={description}
+        delay="regular"
+        position="top"
+        anchorClassName="embPanel__titleTooltipAnchor"
+      >
+        <span className="embPanel__titleInner">
+          {titleComponent} <EuiIcon type="iInCircle" color="subdued" />
+        </span>
+      </EuiToolTip>
+    ) : (
+      titleComponent
+    );
+  };
+
   return (
     <figcaption
       className={classes}
       data-test-subj={`embeddablePanelHeading-${(title || '').replace(/\s/g, '')}`}
     >
       <h2 data-test-subj="dashboardPanelTitle" className="embPanel__title embPanel__dragger">
-        {showTitle ? (
-          <span className="embPanel__titleInner">
-            <span
-              className={title ? 'embPanel__titleText' : 'embPanel__placeholderTitleText'}
-              aria-hidden="true"
-            >
-              {title || placeholderTitle}
-            </span>
-            <EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
-            {renderTooltip(viewDescription)}
-          </span>
-        ) : (
-          <EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
-        )}
+        <EuiScreenReaderOnly>{getAriaLabel()}</EuiScreenReaderOnly>
+        {renderTitle()}
         {renderBadges(badges, embeddable)}
       </h2>
       {renderNotifications(notifications, embeddable)}