[EuiToolTip] Convert to Emotion styling (#6104)

* convert euitooltip to function component * account for exposed methods: forwardRef and useImperativeHandle * convert euitooltippopover to function component * fix aria-describedby id * convert euitooltip to emotion styling * convert euitooltippopover to emotion styling * removed unused sass * lint * snapshot updates * CL * manual merge main * remove comment * use RTL * refactor to make subcomponents responsible for their own styling * fix merge * update CL
elastic · Sep 7, 2022 · 545b362 · 545b362
1 parent 27d7b78
commit 545b362
Show file tree

Hide file tree

Showing 25 changed files with 823 additions and 488 deletions.
diff --git a/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`EuiBetaBadge props size s is rendered 1`] = `
 
 exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
 <span
-  class="euiToolTipAnchor customAnchorClass"
+  class="euiToolTipAnchor customAnchorClass emotion-euiToolTipAnchor-inlineBlock"
   data-test-subj="DTS"
 >
   <span

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`CollapsedItemActions render 1`] = `
     class="euiPopover__anchor css-16vtueo-render"
   >
     <span
-      class="euiToolTipAnchor"
+      class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
     >
       <button
         aria-label="All actions"

diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -990,7 +990,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -1009,7 +1009,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
@@ -1435,7 +1435,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -1454,7 +1454,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
@@ -2221,7 +2221,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -2240,7 +2240,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"
@@ -2665,7 +2665,7 @@ Array [
               class="euiPopover__anchor css-16vtueo-render"
             >
               <span
-                class="euiToolTipAnchor"
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
               >
                 <button
                   aria-label="Display options"
@@ -2684,7 +2684,7 @@ Array [
             </div>
           </div>
           <span
-            class="euiToolTipAnchor"
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
             <button
               aria-label="Enter fullscreen"

diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, MouseEventHandler, Ref } from 'react';
+import React, { Component, MouseEventHandler, ElementRef } from 'react';
 import classNames from 'classnames';
 
 import { EuiButton, EuiButtonProps } from '../../button';
@@ -15,6 +15,8 @@ import { EuiToolTip, EuiToolTipProps } from '../../tool_tip';
 import { EuiBreakpointSize } from '../../../services/breakpoint';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
 
+type ToolTipRef = ElementRef<typeof EuiToolTip> | null;
+
 type EuiSuperUpdateButtonInternalProps = {
   isDisabled?: boolean;
   isLoading?: boolean;
@@ -58,7 +60,7 @@ export class EuiSuperUpdateButton extends Component<
   };
   _isMounted = false;
   tooltipTimeout: number | undefined;
-  tooltip: EuiToolTip | null = null;
+  tooltip: ToolTipRef = null;
 
   componentWillUnmount() {
     this._isMounted = false;
@@ -82,7 +84,7 @@ export class EuiSuperUpdateButton extends Component<
     }
   }
 
-  setTootipRef: Ref<EuiToolTip> = (node) => {
+  setTootipRef = (node: ToolTipRef) => {
     this.tooltip = node;
   };
 

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -35,4 +35,3 @@
 @import 'suggest/index';
 @import 'table/index';
 @import 'tabs/index';
-@import 'tool_tip/index';
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`EuiKeyPadMenuItem is rendered 1`] = `
 
 exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
@@ -128,7 +128,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders 1`] = `
 
 exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1`] = `
 <span
-  class="euiToolTipAnchor customTooltipClass"
+  class="euiToolTipAnchor customTooltipClass emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
@@ -161,7 +161,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders extra betaBadgeTooltipProps 1
 
 exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"
@@ -199,7 +199,7 @@ exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeIconType 1`] =
 
 exports[`EuiKeyPadMenuItem props betaBadge renders with betaBadgeTooltipContent 1`] = `
 <span
-  class="euiToolTipAnchor"
+  class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
 >
   <button
     class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge"