Fixing tooltip theming by enforcing default theme (#14992)

* Fixing tooltip theming by enforcing background color

* Removing wide prop

ui/components/app/edit-gas-fee-popover/network-statistics/tooltips.js

@@ -11,7 +11,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 
 const NetworkStatusTooltip = ({ children, html, title }) => (
-  <Tooltip position="top" html={html} title={title} theme="tippy-tooltip-info">
+  <Tooltip position="top" html={html} title={title}>
     <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
       {children}
     </Box>

ui/components/ui/info-tooltip/index.scss

@@ -11,58 +11,10 @@
   }
 }
 
-.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow],
-.tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-top-color: var(--color-background-default);
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow],
-.tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-right-color: var(--color-background-default);
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow],
-.tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-left-color: var(--color-background-default);
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow],
-.tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] {
-  border-bottom-color: var(--color-background-default);
-}
-
 .tippy-tooltip {
-  &#{&}-info-theme,
+  &#{&}-info-theme {
-  &#{&}-wideInfo-theme {
+    max-width: 200px;
-    background: var(--color-background-default);
-    color: var(--color-text-default);
-    box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
-    border-radius: 8px;
-    max-width: 203px;
     padding: 16px;
-    padding-bottom: 15px;
+    padding-bottom: 16px;
-
-    .tippy-tooltip-content {
-      @include H7;
-
-      text-align: left;
-      color: var(--color-text-alternative);
-
-      a {
-        color: var(--color-primary-default);
-      }
-
-      p {
-        margin-bottom: 12px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-
-  &#{&}-wideInfo-theme {
-    max-width: 260px;
   }
 }

ui/components/ui/info-tooltip/info-tooltip.js

@@ -16,7 +16,6 @@ export default function InfoTooltip({
   position = '',
   containerClassName,
   wrapperClassName,
-  wide,
   iconFillColor = 'var(--color-icon-alternative)',
 }) {
   return (
@@ -32,7 +31,7 @@ export default function InfoTooltip({
         tooltipInnerClassName="info-tooltip__tooltip-content"
         tooltipArrowClassName={positionArrowClassMap[position]}
         html={contentText}
-        theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
+        theme="tippy-tooltip-info"
       >
         <InfoTooltipIcon fillColor={iconFillColor} />
       </Tooltip>
@@ -49,10 +48,6 @@ InfoTooltip.propTypes = {
    * Shows position of the tooltip
    */
   position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
-  /**
-   * Set if the tooltip wide
-   */
-  wide: PropTypes.bool,
   /**
    * Add custom CSS class for container
    */

ui/components/ui/info-tooltip/info-tooltip.stories.js

@@ -17,7 +17,6 @@ export default {
       control: 'select',
       options: ['top', 'left', 'bottom', 'right'],
     },
-    wide: { control: 'boolean' },
     containerClassName: { control: 'text' },
     wrapperClassName: { control: 'text' },
     iconFillColor: { control: 'text' },

ui/components/ui/tooltip/index.scss

@@ -1,4 +1,5 @@
-.tippy-tooltip.white-theme {
+.tippy-popper {
+  .tippy-tooltip.tippy-tooltip--mm-custom-theme {
     background: var(--color-background-default);
     color: var(--color-text-default);
     box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
@@ -10,21 +11,34 @@
 
       text-align: left;
       color: var(--color-text-alternative);
+
+      a {
+        color: var(--color-primary-default);
+      }
+
+      p {
+        margin-bottom: 16px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 
-.tippy-popper[x-placement^=top] .white-theme [x-arrow] {
+  &[x-placement^=top] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
     border-top-color: var(--color-background-default);
   }
 
-.tippy-popper[x-placement^=right] .white-theme [x-arrow] {
+  &[x-placement^=right] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
     border-right-color: var(--color-background-default);
   }
 
-.tippy-popper[x-placement^=left] .white-theme [x-arrow] {
+  &[x-placement^=left] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
     border-left-color: var(--color-background-default);
   }
 
-.tippy-popper[x-placement^=bottom] .white-theme [x-arrow] {
+  &[x-placement^=bottom] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
     border-bottom-color: var(--color-background-default);
   }
+}

ui/components/ui/tooltip/tooltip.js

@@ -82,7 +82,7 @@ export default class Tooltip extends PureComponent {
         style={style}
         title={disabled ? '' : title}
         trigger={trigger}
-        theme={theme}
+        theme={`tippy-tooltip--mm-custom ${theme}`} // Required for correct theming
         tabIndex={tabIndex || 0}
         tag={tag}
       >

ui/components/ui/tooltip/tooltip.stories.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import Box from '../box/box';
+import Typography from '../typography/typography';
+import Tooltip from '.';
+
+export default {
+  title: 'Components/UI/Tooltip',
+  id: __filename,
+  argTypes: {
+    containerClassName: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    html: {
+      control: 'html',
+    },
+    interactive: {
+      control: 'boolean',
+    },
+    onHidden: {
+      action: 'onHidden',
+    },
+    position: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'regular', 'big'],
+    },
+    title: {
+      control: 'text',
+    },
+    trigger: {
+      control: 'any',
+    },
+    wrapperClassName: {
+      control: 'text',
+    },
+    style: {
+      control: 'object',
+    },
+    tabIndex: {
+      control: 'number',
+    },
+    tag: {
+      control: 'text',
+    },
+  },
+  args: {
+    position: 'top',
+    title: 'Title of the tooltip',
+    trigger: 'mouseenter',
+  },
+};
+
+export const DefaultStory = (args) => (
+  <Box display="flex">
+    <Typography>Hover over the info icon to see the tooltip</Typography>
+    <Tooltip {...args}>
+      <i
+        className="fa fa-sm fa-info-circle"
+        style={{ color: 'var(--color-icon-alternative)' }}
+      />
+    </Tooltip>
+  </Box>
+);
+
+DefaultStory.storyName = 'Default';
+
+export const HTML = (args) => (
+  <Box display="flex">
+    <Typography>This tooltips content is html</Typography>
+    <Tooltip {...args}>
+      <i
+        className="fa fa-sm fa-info-circle"
+        style={{ color: 'var(--color-icon-alternative)' }}
+      />
+    </Tooltip>
+  </Box>
+);
+
+HTML.args = {
+  interactive: true,
+  html: (
+    <Box>
+      And includes a <a href="#">link</a>
+    </Box>
+  ),
+};

ui/pages/swaps/fee-card/fee-card.js

@@ -109,7 +109,6 @@ export default function FeeCard({
                     }
                     containerClassName="fee-card__info-tooltip-content-container"
                     wrapperClassName="fee-card__row-label fee-card__info-tooltip-container"
-                    wide
                   />
                 </>
               }

ui/pages/swaps/main-quote-summary/main-quote-summary.js

@@ -93,7 +93,6 @@ export default function MainQuoteSummary({
               position="bottom"
               html={amountToDisplay}
               disabled={ellipsedAmountToDisplay === amountToDisplay}
-              theme="white"
             >
               <span
                 className="main-quote-summary__quote-large-number"

ui/pages/swaps/view-quote/view-quote-price-difference.js

@@ -73,11 +73,7 @@ export default function ViewQuotePriceDifference(props) {
                 <div className="view-quote__price-difference-warning-contents-title">
                   {priceDifferenceTitle}
                 </div>
-                <Tooltip
+                <Tooltip position="bottom" title={t('swapPriceImpactTooltip')}>
-                  position="bottom"
-                  theme="white"
-                  title={t('swapPriceImpactTooltip')}
-                >
                   <i className="fa fa-info-circle" />
                 </Tooltip>
               </Box>