Adds display prop to EuiTooltip for common display block needs (#4148)

Adds a display prop to `EuiToolTip` for the common need of making the anchors block level elements.

.gitignore

@@ -20,6 +20,7 @@ test-env/
 npm-debug.log
 yarn-error.log
 .cache-loader
+**/*.out
 
 # typescript output
 types/

CHANGELOG.md

@@ -1,10 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `display` prop to `EuiToolTip` for common display block needs ([#4148](https://github.com/elastic/eui/pull/4148))
+
 **Bug fixes**
 
 - Fix issue with duplicate checkmarks in `EuiComboBox` ([4162](https://github.com/elastic/eui/pull/4162))
 
-
 ## [`30.0.0`](https://github.com/elastic/eui/tree/v30.0.0)
 
 - Deprecated `EuiKeyboardAccessible` ([4135]https://github.com/elastic/eui/pull/4135)

src-docs/src/views/tool_tip/tool_tip.js

@@ -56,6 +56,19 @@ export default () => (
 
     <EuiSpacer />
 
+    <p>
+      <EuiToolTip
+        position="top"
+        content="Here is some tooltip text"
+        display="block">
+        <EuiButton fullWidth>
+          I am a block level tooltip, applied to a button with fullWidth
+        </EuiButton>
+      </EuiToolTip>
+    </p>
+
+    <EuiSpacer />
+
     <EuiToolTip position="right" content="Works on anything">
       <EuiFieldText
         placeholder="Hover over me"

src/components/tool_tip/__snapshots__/tool_tip.test.tsx.snap

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiToolTip display prop renders block 1`] = `
+<span
+  class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+>
+  <button>
+    Trigger
+  </button>
+</span>
+`;
+
 exports[`EuiToolTip is rendered 1`] = `
 <span
   class="euiToolTipAnchor"

src/components/tool_tip/_tool_tip.scss

@@ -65,6 +65,10 @@
   *[disabled] {
     pointer-events: none;
   }
+
+  &.euiToolTipAnchor--displayBlock {
+    display: block;
+  }
 }
 
 // Keyframes to animate in the tooltip.

src/components/tool_tip/tool_tip.test.tsx

@@ -54,4 +54,19 @@ describe('EuiToolTip', () => {
     await sleep(260); // wait for showToolTip setTimout
     expect(takeMountedSnapshot(component)).toMatchSnapshot();
   });
+
+  test('display prop renders block', async () => {
+    const component = render(
+      <EuiToolTip
+        title="title"
+        id="id"
+        content="content"
+        {...requiredProps}
+        display="block">
+        <button>Trigger</button>
+      </EuiToolTip>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/tool_tip/tool_tip.tsx

@@ -61,6 +61,11 @@ interface ToolTipStyles {
   opacity?: number;
 }
 
+const displayToClassNameMap = {
+  inlineBlock: undefined,
+  block: 'euiToolTipAnchor--displayBlock',
+};
+
 const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -89,6 +94,10 @@ export interface Props {
    * The main content of your tooltip.
    */
   content?: ReactNode;
+  /**
+   * Common display alternatives for the anchor wrapper
+   */
+  display?: keyof typeof displayToClassNameMap;
   /**
    * Delay before showing tooltip. Good for repeatable items.
    */
@@ -286,6 +295,7 @@ export class EuiToolTip extends Component<Props, State> {
       content,
       title,
       delay,
+      display = 'inlineBlock',
       ...rest
     } = this.props;
 
@@ -297,7 +307,11 @@ export class EuiToolTip extends Component<Props, State> {
       className
     );
 
-    const anchorClasses = classNames('euiToolTipAnchor', anchorClassName);
+    const anchorClasses = classNames(
+      'euiToolTipAnchor',
+      display ? displayToClassNameMap[display] : null,
+      anchorClassName
+    );
 
     let tooltip;
     if (visible && (content || title)) {