From 1f80bb87db7c06debd03bc8d9ea9e44742a2b7f7 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Tue, 3 Aug 2021 14:23:56 -0600
Subject: [PATCH 1/3] Support z index for WithTooltip & Tooltip

---
 src/components/tooltip/Tooltip.js     | 13 +++++++++++--
 src/components/tooltip/WithTooltip.js |  4 ++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 6b42981f..abbebb77 100644
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -44,7 +44,7 @@ const Arrow = styled.div`
 
 const TooltipWrapper = styled.div`
   display: ${(props) => (props.hidden ? 'none' : 'inline-block')};
-  z-index: 2147483647;
+  z-index: ${(props) => props.zIndex || '2147483647'};
 
   ${(props) =>
     !props.hasChrome &&
@@ -80,10 +80,17 @@ export function Tooltip({
   arrowProps,
   tooltipRef,
   arrowRef,
+  zIndex,
   ...props
 }) {
   return (
-    <TooltipWrapper hasChrome={hasChrome} data-placement={placement} ref={tooltipRef} {...props}>
+    <TooltipWrapper
+      hasChrome={hasChrome}
+      data-placement={placement}
+      ref={tooltipRef}
+      zIndex={zIndex}
+      {...props}
+    >
       <Arrow isVisible={hasChrome} data-placement={placement} ref={arrowRef} {...arrowProps} />
       {children}
     </TooltipWrapper>
@@ -98,6 +105,7 @@ Tooltip.propTypes = {
   placement: PropTypes.string,
   arrowRef: PropTypes.any, // eslint-disable-line react/forbid-prop-types
   tooltipRef: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  zIndex: PropTypes.number,
 };
 Tooltip.defaultProps = {
   children: undefined,
@@ -106,4 +114,5 @@ Tooltip.defaultProps = {
   arrowProps: null,
   arrowRef: undefined,
   tooltipRef: undefined,
+  zIndex: undefined,
 };
diff --git a/src/components/tooltip/WithTooltip.js b/src/components/tooltip/WithTooltip.js
index a233f904..fc5e0eea 100644
--- a/src/components/tooltip/WithTooltip.js
+++ b/src/components/tooltip/WithTooltip.js
@@ -102,6 +102,7 @@ function WithTooltip({
   startOpen,
   delayHide,
   onVisibilityChange,
+  tooltipZIndex,
   ...props
 }) {
   const id = React.useMemo(() => uuid.v4(), []);
@@ -152,6 +153,7 @@ function WithTooltip({
           id={id}
           role="tooltip"
           hasTooltipContent={!!tooltip}
+          zIndex={tooltipZIndex}
         >
           {typeof tooltip === 'function' ? tooltip({ onHide: closeTooltip }) : tooltip}
         </StyledTooltip>
@@ -192,6 +194,7 @@ WithTooltip.propTypes = {
   startOpen: PropTypes.bool,
   delayHide: PropTypes.number,
   onVisibilityChange: PropTypes.func,
+  tooltipZIndex: PropTypes.number,
 };
 
 WithTooltip.defaultProps = {
@@ -205,6 +208,7 @@ WithTooltip.defaultProps = {
   startOpen: false,
   delayHide: 100,
   onVisibilityChange: () => {},
+  tooltipZIndex: undefined,
 };
 
 export default WithTooltip;

From 0485563ab4cdaa95adb3c796e8b9374e1e581284 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Mon, 9 Aug 2021 12:02:15 -0600
Subject: [PATCH 2/3] Fix zIndex naming conflict

---
 src/components/shared/styles.ts   | 7 +++++--
 src/components/tooltip/Tooltip.js | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/shared/styles.ts b/src/components/shared/styles.ts
index 345bd8c4..a2839eb8 100644
--- a/src/components/shared/styles.ts
+++ b/src/components/shared/styles.ts
@@ -101,8 +101,7 @@ export const pageMargins = css`
 export const hoverEffect = css`
   border: 1px solid ${color.border};
   border-radius: ${spacing.borderRadius.small}px;
-  transition: background 150ms ease-out, border 150ms ease-out,
-    transform 150ms ease-out;
+  transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
 
   &:hover,
   &.__hover {
@@ -117,3 +116,7 @@ export const hoverEffect = css`
     transform: translate3d(0, 0, 0);
   }
 `;
+
+export const zIndex = {
+  tooltip: 2147483647,
+};
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index abbebb77..54233ea8 100644
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { typography, spacing } from '../shared/styles';
+import { typography, spacing, zIndex as sharedZIndex } from '../shared/styles';
 
 const ifPlacementEquals = (placement, value, fallback = 0) => (props) =>
   props['data-placement'].split('-')[0] === placement ? value : fallback;
@@ -44,7 +44,7 @@ const Arrow = styled.div`
 
 const TooltipWrapper = styled.div`
   display: ${(props) => (props.hidden ? 'none' : 'inline-block')};
-  z-index: ${(props) => props.zIndex || '2147483647'};
+  z-index: ${(props) => props.zIndex};
 
   ${(props) =>
     !props.hasChrome &&
@@ -114,5 +114,5 @@ Tooltip.defaultProps = {
   arrowProps: null,
   arrowRef: undefined,
   tooltipRef: undefined,
-  zIndex: undefined,
+  zIndex: sharedZIndex.tooltip,
 };

From e52e5d5143bff870dcb267ab33930b10ece51693 Mon Sep 17 00:00:00 2001
From: Kyle Suss <susskyle@gmail.com>
Date: Mon, 9 Aug 2021 12:09:18 -0600
Subject: [PATCH 3/3] Empty commit