[Tooltip] Add arrow prop (#18323)

mui · Nov 13, 2019 · 45779b9 · 45779b9
1 parent 9eb38da
commit 45779b9
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 351 deletions.
diff --git a/docs/pages/api/tooltip.md b/docs/pages/api/tooltip.md
@@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">arrow</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, adds an arrow to the tooltip. |
 | <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">element</span> |  | Tooltip reference element.<br>⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">disableFocusListener</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Do not respond to focus events. |
@@ -57,7 +58,10 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">popper</span> | <span class="prop-name">.MuiTooltip-popper</span> | Styles applied to the Popper component.
 | <span class="prop-name">popperInteractive</span> | <span class="prop-name">.MuiTooltip-popperInteractive</span> | Styles applied to the Popper component if `interactive={true}`.
+| <span class="prop-name">popperArrow</span> | <span class="prop-name">.MuiTooltip-popperArrow</span> | Styles applied to the Popper component if `arrow={true}`.
 | <span class="prop-name">tooltip</span> | <span class="prop-name">.MuiTooltip-tooltip</span> | Styles applied to the tooltip (label wrapper) element.
+| <span class="prop-name">tooltipArrow</span> | <span class="prop-name">.MuiTooltip-tooltipArrow</span> | Styles applied to the tooltip (label wrapper) element if `arrow={true}`.
+| <span class="prop-name">arrow</span> | <span class="prop-name">.MuiTooltip-arrow</span> | Styles applied to the arrow element.
 | <span class="prop-name">touch</span> | <span class="prop-name">.MuiTooltip-touch</span> | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch.
 | <span class="prop-name">tooltipPlacementLeft</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementLeft</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "left".
 | <span class="prop-name">tooltipPlacementRight</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementRight</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "right".

diff --git a/docs/src/pages/components/tooltips/ArrowTooltips.js b/docs/src/pages/components/tooltips/ArrowTooltips.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function ArrowTooltips() {
+  return (
+    <Tooltip title="Add" arrow>
+      <Button>Arrow</Button>
+    </Tooltip>
+  );
+}
diff --git a/docs/src/pages/components/tooltips/ArrowTooltips.tsx b/docs/src/pages/components/tooltips/ArrowTooltips.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function ArrowTooltips() {
+  return (
+    <Tooltip title="Add" arrow>
+      <Button>Arrow</Button>
+    </Tooltip>
+  );
+}
diff --git a/docs/src/pages/components/tooltips/CustomizedTooltips.js b/docs/src/pages/components/tooltips/CustomizedTooltips.js
@@ -1,57 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 
-function arrowGenerator(color) {
-  return {
-    '&[x-placement*="bottom"] $arrow': {
-      top: 0,
-      left: 0,
-      marginTop: '-0.95em',
-      width: '2em',
-      height: '1em',
-      '&::before': {
-        borderWidth: '0 1em 1em 1em',
-        borderColor: `transparent transparent ${color} transparent`,
-      },
-    },
-    '&[x-placement*="top"] $arrow': {
-      bottom: 0,
-      left: 0,
-      marginBottom: '-0.95em',
-      width: '2em',
-      height: '1em',
-      '&::before': {
-        borderWidth: '1em 1em 0 1em',
-        borderColor: `${color} transparent transparent transparent`,
-      },
-    },
-    '&[x-placement*="right"] $arrow': {
-      left: 0,
-      marginLeft: '-0.95em',
-      height: '2em',
-      width: '1em',
-      '&::before': {
-        borderWidth: '1em 1em 1em 0',
-        borderColor: `transparent ${color} transparent transparent`,
-      },
-    },
-    '&[x-placement*="left"] $arrow': {
-      right: 0,
-      marginRight: '-0.95em',
-      height: '2em',
-      width: '1em',
-      '&::before': {
-        borderWidth: '1em 0 1em 1em',
-        borderColor: `transparent transparent transparent ${color}`,
-      },
-    },
-  };
-}
-
 const LightTooltip = withStyles(theme => ({
   tooltip: {
     backgroundColor: theme.palette.common.white,
@@ -61,121 +13,21 @@ const LightTooltip = withStyles(theme => ({
   },
 }))(Tooltip);
 
-const useStylesArrow = makeStyles(theme => ({
-  tooltip: {
-    position: 'relative',
-  },
-  arrow: {
-    position: 'absolute',
-    fontSize: 6,
-    '&::before': {
-      content: '""',
-      margin: 'auto',
-      display: 'block',
-      width: 0,
-      height: 0,
-      borderStyle: 'solid',
-    },
-  },
-  popper: arrowGenerator(theme.palette.grey[700]),
-}));
-
-function ArrowTooltip(props) {
-  const { arrow, ...classes } = useStylesArrow();
-  const [arrowRef, setArrowRef] = React.useState(null);
-
-  return (
-    <Tooltip
-      classes={classes}
-      PopperProps={{
-        popperOptions: {
-          modifiers: {
-            arrow: {
-              enabled: Boolean(arrowRef),
-              element: arrowRef,
-            },
-          },
-        },
-      }}
-      {...props}
-      title={
-        <React.Fragment>
-          {props.title}
-          <span className={arrow} ref={setArrowRef} />
-        </React.Fragment>
-      }
-    />
-  );
-}
-
-ArrowTooltip.propTypes = {
-  title: PropTypes.node,
-};
-
 const useStylesBootstrap = makeStyles(theme => ({
   arrow: {
-    position: 'absolute',
-    fontSize: 6,
-    '&::before': {
-      content: '""',
-      margin: 'auto',
-      display: 'block',
-      width: 0,
-      height: 0,
-      borderStyle: 'solid',
-    },
+    color: theme.palette.common.black,
   },
-  popper: arrowGenerator(theme.palette.common.black),
   tooltip: {
-    position: 'relative',
     backgroundColor: theme.palette.common.black,
   },
-  tooltipPlacementLeft: {
-    margin: '0 8px',
-  },
-  tooltipPlacementRight: {
-    margin: '0 8px',
-  },
-  tooltipPlacementTop: {
-    margin: '8px 0',
-  },
-  tooltipPlacementBottom: {
-    margin: '8px 0',
-  },
 }));
 
 function BootstrapTooltip(props) {
-  const { arrow, ...classes } = useStylesBootstrap();
-  const [arrowRef, setArrowRef] = React.useState(null);
+  const classes = useStylesBootstrap();
 
-  return (
-    <Tooltip
-      classes={classes}
-      PopperProps={{
-        popperOptions: {
-          modifiers: {
-            arrow: {
-              enabled: Boolean(arrowRef),
-              element: arrowRef,
-            },
-          },
-        },
-      }}
-      {...props}
-      title={
-        <React.Fragment>
-          {props.title}
-          <span className={arrow} ref={setArrowRef} />
-        </React.Fragment>
-      }
-    />
-  );
+  return <Tooltip arrow classes={classes} {...props} />;
 }
 
-BootstrapTooltip.propTypes = {
-  title: PropTypes.node,
-};
-
 const HtmlTooltip = withStyles(theme => ({
   tooltip: {
     backgroundColor: '#f5f5f9',
@@ -192,9 +44,6 @@ export default function CustomizedTooltips() {
       <LightTooltip title="Add">
         <Button>Light</Button>
       </LightTooltip>
-      <ArrowTooltip title="Add">
-        <Button>Arrow</Button>
-      </ArrowTooltip>
       <BootstrapTooltip title="Add">
         <Button>Bootstrap</Button>
       </BootstrapTooltip>