diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index b1a44948531dc8..30b19f674adec2 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/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) ); - if (tooltipOpenProp) { - return ( - - - {tooltipTitle} - - {React.cloneElement(fab, { - 'aria-labelledby': `${id}-label`, - })} - - ); - } - 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} > diff --git a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts index 500cb4d75c6d29..a868b11369f6a8 100644 --- a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts +++ b/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', ], );