[material-ui][SpeedDial] Fix the SpeedDial tooltip placement #41067

packages/mui-material/src/SpeedDialAction/SpeedDialAction.js

@@ -9,20 +9,13 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fab from '../Fab';
 import Tooltip from '../Tooltip';
-import capitalize from '../utils/capitalize';
-import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
+import { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { open, tooltipPlacement, classes } = ownerState;
+  const { open, classes } = ownerState;
 
   const slots = {
     fab: ['fab', !open && 'fabClosed'],
-    staticTooltip: [
-      'staticTooltip',
-      `tooltipPlacement${capitalize(tooltipPlacement)}`,
-      !open && 'staticTooltipClosed',
-    ],
-    staticTooltipLabel: ['staticTooltipLabel'],
   };
 
   return composeClasses(slots, getSpeedDialActionUtilityClass, classes);
@@ -46,69 +39,12 @@ const SpeedDialActionFab = styled(Fab, {
       ? theme.vars.palette.SpeedDialAction.fabHoverBg
       : emphasize(theme.palette.background.paper, 0.15),
   },
-  transition: `${theme.transitions.create('transform', {
-    duration: theme.transitions.duration.shorter,
-  })}, opacity 0.8s`,
   opacity: 1,
   ...(!ownerState.open && {
     opacity: 0,
-    transform: 'scale(0)',
   }),
 }));
 
-const SpeedDialActionStaticTooltip = styled('span', {
-  name: 'MuiSpeedDialAction',
-  slot: 'StaticTooltip',
-  overridesResolver: (props, styles) => {
-    const { ownerState } = props;
-
-    return [
-      styles.staticTooltip,
-      !ownerState.open && styles.staticTooltipClosed,
-      styles[`tooltipPlacement${capitalize(ownerState.tooltipPlacement)}`],
-    ];
-  },
-})(({ theme, ownerState }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  [`& .${speedDialActionClasses.staticTooltipLabel}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.shorter,
-    }),
-    opacity: 1,
-    ...(!ownerState.open && {
-      opacity: 0,
-      transform: 'scale(0.5)',
-    }),
-    ...(ownerState.tooltipPlacement === 'left' && {
-      transformOrigin: '100% 50%',
-      right: '100%',
-      marginRight: 8,
-    }),
-    ...(ownerState.tooltipPlacement === 'right' && {
-      transformOrigin: '0% 50%',
-      left: '100%',
-      marginLeft: 8,
-    }),
-  },
-}));
-
-const SpeedDialActionStaticTooltipLabel = styled('span', {
-  name: 'MuiSpeedDialAction',
-  slot: 'StaticTooltipLabel',
-  overridesResolver: (props, styles) => styles.staticTooltipLabel,
-})(({ theme }) => ({
-  position: 'absolute',
-  ...theme.typography.body1,
-  backgroundColor: (theme.vars || theme).palette.background.paper,
-  borderRadius: (theme.vars || theme).shape.borderRadius,
-  boxShadow: (theme.vars || theme).shadows[1],
-  color: (theme.vars || theme).palette.text.secondary,
-  padding: '4px 16px',
-  wordBreak: 'keep-all',
-}));
-
 const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiSpeedDialAction' });
   const {
@@ -157,30 +93,6 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref)
     </SpeedDialActionFab>
   );
 
-  if (tooltipOpenProp) {
-    return (
-      <SpeedDialActionStaticTooltip
-        id={id}
-        ref={ref}
-        className={classes.staticTooltip}
-        ownerState={ownerState}
-        {...other}
-      >
-        <SpeedDialActionStaticTooltipLabel
-          style={transitionStyle}
-          id={`${id}-label`}
-          className={classes.staticTooltipLabel}
-          ownerState={ownerState}
-        >
-          {tooltipTitle}
-        </SpeedDialActionStaticTooltipLabel>
-        {React.cloneElement(fab, {
-          'aria-labelledby': `${id}-label`,
-        })}
-      </SpeedDialActionStaticTooltip>
-    );
-  }
-
   if (!open && tooltipOpen) {
     setTooltipOpen(false);
   }
@@ -193,7 +105,7 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref)
       placement={tooltipPlacement}
       onClose={handleTooltipClose}
       onOpen={handleTooltipOpen}
-      open={open && tooltipOpen}
+      open={open && (tooltipOpen || tooltipOpenProp)}
       classes={TooltipClasses}
       {...other}
     >

packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts

@@ -6,16 +6,6 @@ export interface SpeedDialActionClasses {
   fab: string;
   /** Styles applied to the Fab component if `open={false}`. */
   fabClosed: string;
-  /** Styles applied to the root element if `tooltipOpen={true}`. */
-  staticTooltip: string;
-  /** Styles applied to the root element if `tooltipOpen={true}` and `open={false}`. */
-  staticTooltipClosed: string;
-  /** Styles applied to the static tooltip label if `tooltipOpen={true}`. */
-  staticTooltipLabel: string;
-  /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="left"`` */
-  tooltipPlacementLeft: string;
-  /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`` */
-  tooltipPlacementRight: string;
 }
 
 export type SpeedDialActionClassKey = keyof SpeedDialActionClasses;
@@ -29,11 +19,6 @@ const speedDialActionClasses: SpeedDialActionClasses = generateUtilityClasses(
   [
     'fab',
     'fabClosed',
-    'staticTooltip',
-    'staticTooltipClosed',
-    'staticTooltipLabel',
-    'tooltipPlacementLeft',
-    'tooltipPlacementRight',
   ],
 );