[Drilldowns][IE] fix welcome bar layout in IE (#65676)

* fix drilldown hello bar in IE * fix comment * use children instead of title for EuiCallOut content Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · May 12, 2020 · 724f282 · 724f282
1 parent f3548d6
commit 724f282
Showing 1 changed file with 25 additions and 28 deletions.
diff --git a/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.tsx b/x-pack/plugins/drilldowns/public/components/drilldown_hello_bar/drilldown_hello_bar.tsx
@@ -30,33 +30,30 @@ export const DrilldownHelloBar: React.FC<DrilldownHelloBarProps> = ({
   onHideClick = () => {},
 }) => {
   return (
-    <EuiCallOut
-      data-test-subj={WELCOME_MESSAGE_TEST_SUBJ}
-      title={
-        <EuiFlexGroup className="drdHelloBar__content">
-          <EuiFlexItem grow={false}>
-            <div style={{ marginLeft: '8px' }}>
-              <EuiIcon type="help" />
-            </div>
-          </EuiFlexItem>
-          <EuiFlexItem grow={true}>
-            <EuiText size={'s'}>
-              <EuiTextColor color="subdued">{txtHelpText}</EuiTextColor>
-            </EuiText>
-            {docsLink && (
-              <>
-                <EuiSpacer size={'xs'} />
-                <EuiLink href={docsLink}>{txtViewDocsLinkLabel}</EuiLink>
-              </>
-            )}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty size="xs" onClick={onHideClick}>
-              {txtHideHelpButtonLabel}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      }
-    />
+    <EuiCallOut data-test-subj={WELCOME_MESSAGE_TEST_SUBJ}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <div style={{ marginLeft: '8px' }}>
+            <EuiIcon type="help" />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem grow={1}>
+          <EuiText size={'s'}>
+            <EuiTextColor color="subdued">{txtHelpText}</EuiTextColor>
+          </EuiText>
+          {docsLink && (
+            <>
+              <EuiSpacer size={'xs'} />
+              <EuiLink href={docsLink}>{txtViewDocsLinkLabel}</EuiLink>
+            </>
+          )}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty size="xs" onClick={onHideClick}>
+            {txtHideHelpButtonLabel}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiCallOut>
   );
 };