[Tooltip] Use media queries for applying "mobile styles"

mui · Nov 9, 2020 · 626b3e8 · 626b3e8
1 parent abe5246
commit 626b3e8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 19 deletions.
diff --git a/docs/pages/api-docs/tooltip.md b/docs/pages/api-docs/tooltip.md
@@ -67,7 +67,6 @@ Any other props supplied will be provided to the root element (native element).
 | <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".
 | <span class="prop-name">tooltipPlacementTop</span> | <span class="prop-name">.MuiTooltip-tooltipPlacementTop</span> | Styles applied to the tooltip (label wrapper) element if `placement` contains "top".

diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts
@@ -29,8 +29,6 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
     tooltipArrow?: string;
     /** Styles applied to the arrow element. */
     arrow?: string;
-    /** Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
-    touch?: string;
     /** Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
     tooltipPlacementLeft?: string;
     /** Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */

diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -80,6 +80,12 @@ export const styles = (theme) => ({
     maxWidth: 300,
     wordWrap: 'break-word',
     fontWeight: theme.typography.fontWeightMedium,
+    '@media (pointer: coarse)': {
+      padding: '8px 16px',
+      fontSize: theme.typography.pxToRem(14),
+      lineHeight: `${round(16 / 14)}em`,
+      fontWeight: theme.typography.fontWeightRegular,
+    },
   },
   /* Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */
   tooltipArrow: {
@@ -104,13 +110,6 @@ export const styles = (theme) => ({
       transform: 'rotate(45deg)',
     },
   },
-  /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */
-  touch: {
-    padding: '8px 16px',
-    fontSize: theme.typography.pxToRem(14),
-    lineHeight: `${round(16 / 14)}em`,
-    fontWeight: theme.typography.fontWeightRegular,
-  },
   /* Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */
   tooltipPlacementLeft: {
     transformOrigin: 'right center',
@@ -353,20 +352,17 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     }
   };
 
-  const detectTouchStart = (event) => {
+  const handleMouseOver = handleEnter;
+  const handleMouseLeave = handleLeave;
+
+  const handleTouchStart = (event) => {
     ignoreNonTouchEvents.current = true;
 
     const childrenProps = children.props;
     if (childrenProps.onTouchStart) {
       childrenProps.onTouchStart(event);
     }
-  };
 
-  const handleMouseOver = handleEnter;
-  const handleMouseLeave = handleLeave;
-
-  const handleTouchStart = (event) => {
-    detectTouchStart(event);
     clearTimeout(leaveTimer.current);
     clearTimeout(closeTimer.current);
     clearTimeout(touchTimer.current);
@@ -451,7 +447,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
     ...other,
     ...children.props,
     className: clsx(other.className, children.props.className),
-    onTouchStart: detectTouchStart,
     ref: handleRef,
     ...(followCursor ? { onMouseMove: handleMouseMove } : {}),
   };
@@ -573,7 +568,6 @@ const Tooltip = React.forwardRef(function Tooltip(props, ref) {
               className={clsx(
                 classes.tooltip,
                 {
-                  [classes.touch]: ignoreNonTouchEvents.current,
                   [classes.tooltipArrow]: arrow,
                 },
                 classes[`tooltipPlacement${capitalize(placementInner.split('-')[0])}`],