From f935f5e42e372e675d88f82a933db4b4abf1d3a1 Mon Sep 17 00:00:00 2001 From: wusiyuan05 Date: Mon, 31 Aug 2026 21:28:39 +0800 Subject: [PATCH 1/8] [material-ui][SpeedDial] Fix horizontal persistent tooltip placement --- .../mui-material/src/SpeedDial/SpeedDial.js | 2 +- .../src/SpeedDial/SpeedDial.test.js | 4 +-- .../src/SpeedDialAction/SpeedDialAction.js | 26 +++++++++++++++++++ .../SpeedDialAction/SpeedDialAction.test.js | 17 ++++++++++++ .../SpeedDialAction/speedDialActionClasses.ts | 6 +++++ 5 files changed, 52 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 65b815b670044e..10ea5b002ab96c 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -374,7 +374,7 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { const { fab: { ref: fabSlotOrigButtonRef, ...fabSlotProps } = {}, ...restOfSlotProps } = childSlotProps; - const defaultPlacement = getOrientation(direction) === 'vertical' ? 'left' : 'top'; + const defaultPlacement = getOrientation(direction) === 'vertical' ? 'left' : 'bottom'; return React.cloneElement(child, { slotProps: { diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index 9e4190be3602c0..bdef86c80122af 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -175,8 +175,8 @@ describe('', () => { [ ['up', 'tooltipPlacementLeft'], ['down', 'tooltipPlacementLeft'], - ['left', 'tooltipPlacementTop'], - ['right', 'tooltipPlacementTop'], + ['left', 'tooltipPlacementBottom'], + ['right', 'tooltipPlacementBottom'], ].forEach(([direction, className]) => { it(`should place the tooltip in the correct position when direction=${direction}`, () => { render( diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index 86c6a96f7a9810..ec037b7f068107 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -125,6 +125,32 @@ const SpeedDialActionStaticTooltip = styled('span', { }, }, }, + { + props: { + tooltipPlacement: 'top', + }, + style: { + flexDirection: 'column-reverse', + [`& .${speedDialActionClasses.staticTooltipLabel}`]: { + transformOrigin: '50% 100%', + bottom: '100%', + marginBottom: 8, + }, + }, + }, + { + props: { + tooltipPlacement: 'bottom', + }, + style: { + flexDirection: 'column', + [`& .${speedDialActionClasses.staticTooltipLabel}`]: { + transformOrigin: '50% 0%', + top: '100%', + marginTop: 8, + }, + }, + }, ], })), ); diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js index 7d07866a91719a..f94e9e6a0be316 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js @@ -199,6 +199,23 @@ describe('', () => { expect(staticToolTipLabel).to.have.class(classes.staticTooltipLabel); }); + [ + ['top', { bottom: '100%', marginBottom: '8px' }], + ['bottom', { top: '100%', marginTop: '8px' }], + ].forEach(([placement, styles]) => { + it(`positions a static tooltip label when placement is ${placement}`, () => { + const { container } = render( + add} + open + slotProps={{ tooltip: { open: true, placement, title: 'placeholder' } }} + />, + ); + + expect(container.querySelector(`.${classes.staticTooltipLabel}`)).toHaveComputedStyle(styles); + }); + }); + it('should have staticToolTip and staticToolTipLabel classes if slotProps.tooltip.open is true and custom slots are provided', () => { const CustomStaticTooltip = React.forwardRef(({ ownerState, ...props }, ref) => (
diff --git a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts index 500cb4d75c6d29..769657d3379c54 100644 --- a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts +++ b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts @@ -16,6 +16,10 @@ export interface SpeedDialActionClasses { tooltipPlacementLeft: string; /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`` */ tooltipPlacementRight: string; + /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="top"`` */ + tooltipPlacementTop: string; + /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="bottom"`` */ + tooltipPlacementBottom: string; } export type SpeedDialActionClassKey = keyof SpeedDialActionClasses; @@ -34,6 +38,8 @@ const speedDialActionClasses: SpeedDialActionClasses = generateUtilityClasses( 'staticTooltipLabel', 'tooltipPlacementLeft', 'tooltipPlacementRight', + 'tooltipPlacementTop', + 'tooltipPlacementBottom', ], ); From 722e6201d294805123b6d9743f08ab73fd5b0d5d Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 11 Sep 2026 13:55:26 +0530 Subject: [PATCH 2/8] [SpeedDial] Keep top as the default tooltip placement for horizontal directions The new top and bottom static tooltip styles fix the overlap on their own, so the default placement doesn't need to change. Switching it to bottom would also move the hover tooltip of every horizontal SpeedDial. --- packages/mui-material/src/SpeedDial/SpeedDial.js | 2 +- packages/mui-material/src/SpeedDial/SpeedDial.test.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 0ba72482f04132..7d49ae4832f5fe 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -374,7 +374,7 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { const { fab: { ref: fabSlotOrigButtonRef, ...fabSlotProps } = {}, ...restOfSlotProps } = childSlotProps; - const defaultPlacement = getOrientation(direction) === 'vertical' ? 'left' : 'bottom'; + const defaultPlacement = getOrientation(direction) === 'vertical' ? 'left' : 'top'; return React.cloneElement(child, { slotProps: { diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index ccfa43fa71a2d8..6b85c65d8b0c8e 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -191,8 +191,8 @@ describe('', () => { [ ['up', 'tooltipPlacementLeft'], ['down', 'tooltipPlacementLeft'], - ['left', 'tooltipPlacementBottom'], - ['right', 'tooltipPlacementBottom'], + ['left', 'tooltipPlacementTop'], + ['right', 'tooltipPlacementTop'], ].forEach(([direction, className]) => { it(`should place the tooltip in the correct position when direction=${direction}`, () => { render( From 426633e472ca08e24a84c9263c24c5578052b7d6 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 11 Sep 2026 13:55:26 +0530 Subject: [PATCH 3/8] [SpeedDialAction] Assert static tooltip label layout in real browsers Browsers resolve `bottom: 100%` to a pixel value in getComputedStyle, so the computed style assertion only passed in JSDOM. Check where the label sits relative to the Fab instead, and skip in JSDOM since it has no layout. --- .../SpeedDialAction/SpeedDialAction.test.js | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js index f94e9e6a0be316..46e64ed7585448 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js @@ -199,22 +199,43 @@ describe('', () => { expect(staticToolTipLabel).to.have.class(classes.staticTooltipLabel); }); - [ - ['top', { bottom: '100%', marginBottom: '8px' }], - ['bottom', { top: '100%', marginTop: '8px' }], - ].forEach(([placement, styles]) => { - it(`positions a static tooltip label when placement is ${placement}`, () => { - const { container } = render( + it.skipIf(isJsdom())( + 'places the static tooltip label above the Fab when placement is top', + () => { + render( add} open - slotProps={{ tooltip: { open: true, placement, title: 'placeholder' } }} + slotProps={{ tooltip: { open: true, placement: 'top', title: 'placeholder' } }} />, ); - expect(container.querySelector(`.${classes.staticTooltipLabel}`)).toHaveComputedStyle(styles); - }); - }); + const label = screen.getByText('placeholder').getBoundingClientRect(); + const fab = screen.getByRole('menuitem').getBoundingClientRect(); + + expect(label.bottom).to.be.at.most(fab.top); + expect(Math.abs(label.left + label.width / 2 - (fab.left + fab.width / 2))).to.be.lessThan(1); + }, + ); + + it.skipIf(isJsdom())( + 'places the static tooltip label below the Fab when placement is bottom', + () => { + render( + add} + open + slotProps={{ tooltip: { open: true, placement: 'bottom', title: 'placeholder' } }} + />, + ); + + const label = screen.getByText('placeholder').getBoundingClientRect(); + const fab = screen.getByRole('menuitem').getBoundingClientRect(); + + expect(label.top).to.be.at.least(fab.bottom); + expect(Math.abs(label.left + label.width / 2 - (fab.left + fab.width / 2))).to.be.lessThan(1); + }, + ); it('should have staticToolTip and staticToolTipLabel classes if slotProps.tooltip.open is true and custom slots are provided', () => { const CustomStaticTooltip = React.forwardRef(({ ownerState, ...props }, ref) => ( From d7f9c85a924f28355978e5a2019e33f32c1ca8b0 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 11 Sep 2026 13:55:26 +0530 Subject: [PATCH 4/8] [SpeedDialAction] Regenerate API docs for the new placement classes Also drop the stray backtick from the tooltipPlacement* class descriptions so the placement renders as code in the API docs. --- .../material-ui/api/speed-dial-action.json | 16 ++++++++++++++-- .../speed-dial-action/speed-dial-action.json | 18 ++++++++++++++++-- .../SpeedDialAction/speedDialActionClasses.ts | 8 ++++---- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial-action.json b/docs/pages/material-ui/api/speed-dial-action.json index 3e9e0e225d1857..6068dc3c64b3a5 100644 --- a/docs/pages/material-ui/api/speed-dial-action.json +++ b/docs/pages/material-ui/api/speed-dial-action.json @@ -71,16 +71,28 @@ "description": "Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.", "isGlobal": false }, + { + "key": "tooltipPlacementBottom", + "className": "MuiSpeedDialAction-tooltipPlacementBottom", + "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"bottom\"`.", + "isGlobal": false + }, { "key": "tooltipPlacementLeft", "className": "MuiSpeedDialAction-tooltipPlacementLeft", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"left\"``", + "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"left\"`.", "isGlobal": false }, { "key": "tooltipPlacementRight", "className": "MuiSpeedDialAction-tooltipPlacementRight", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"right\"``", + "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"right\"`.", + "isGlobal": false + }, + { + "key": "tooltipPlacementTop", + "className": "MuiSpeedDialAction-tooltipPlacementTop", + "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"top\"`.", "isGlobal": false } ], diff --git a/docs/translations/api-docs/speed-dial-action/speed-dial-action.json b/docs/translations/api-docs/speed-dial-action/speed-dial-action.json index 76cf8ad3e6888c..02ebe99ba283b1 100644 --- a/docs/translations/api-docs/speed-dial-action/speed-dial-action.json +++ b/docs/translations/api-docs/speed-dial-action/speed-dial-action.json @@ -27,11 +27,25 @@ "nodeName": "the root element", "conditions": "tooltipOpen={true} and open={false}" }, + "tooltipPlacementBottom": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "tooltipOpen={true} and tooltipPlacement=\"bottom\"" + }, "tooltipPlacementLeft": { - "description": "Styles applied to the root element if tooltipOpen={true} and `tooltipPlacement="left"``" + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "tooltipOpen={true} and tooltipPlacement=\"left\"" }, "tooltipPlacementRight": { - "description": "Styles applied to the root element if tooltipOpen={true} and `tooltipPlacement="right"``" + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "tooltipOpen={true} and tooltipPlacement=\"right\"" + }, + "tooltipPlacementTop": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "tooltipOpen={true} and tooltipPlacement=\"top\"" } }, "slotDescriptions": { diff --git a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts index 769657d3379c54..5018fda827ba02 100644 --- a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts +++ b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts @@ -12,13 +12,13 @@ export interface SpeedDialActionClasses { 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"`` */ + /** 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"`` */ + /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`. */ tooltipPlacementRight: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="top"`` */ + /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="top"`. */ tooltipPlacementTop: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="bottom"`` */ + /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="bottom"`. */ tooltipPlacementBottom: string; } From 3e3fe67d1363f1385c5b311367183e573b3aa3ed Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 11 Sep 2026 16:44:56 +0530 Subject: [PATCH 5/8] [SpeedDialAction] Keep persistent labels next to their action and apart from neighbors - Style compound placements like `top-start` like their side, as Tooltip does. They used to get no styles, which left the label on top of the Fab. - Lay out top and bottom labels in a zero-height grid row, so each label widens its action instead of overlapping its neighbors or wrapping. - Center the root on the cross axis, so a larger sibling action doesn't stretch it and pull the Fab away from its label. - Render the left and right directions in the SpeedDial regression fixture. --- .../src/SpeedDial/SpeedDial.test.js | 56 ++++++++++++- .../src/SpeedDialAction/SpeedDialAction.js | 26 ++++-- .../SpeedDialAction/SpeedDialAction.test.js | 80 +++++++++++-------- .../fixtures/SpeedDial/Directions.js | 6 +- 4 files changed, 125 insertions(+), 43 deletions(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index 6b85c65d8b0c8e..a8fca5a84fdbcd 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -11,7 +11,7 @@ import { } from '@mui/internal-test-utils'; import Icon from '@mui/material/Icon'; import SpeedDial, { speedDialClasses as classes } from '@mui/material/SpeedDial'; -import SpeedDialAction from '@mui/material/SpeedDialAction'; +import SpeedDialAction, { speedDialActionClasses } from '@mui/material/SpeedDialAction'; import { tooltipClasses } from '@mui/material/Tooltip'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import describeConformance from '../../test/describeConformance'; @@ -207,7 +207,61 @@ describe('', () => { clock.runAll(); expect(screen.getByRole('tooltip').firstChild).to.have.class(tooltipClasses[className]); }); + + it(`should place the persistent tooltip in the correct position when direction=${direction}`, () => { + const { container } = render( + + + , + ); + + expect(container.querySelector(`.${speedDialActionClasses.staticTooltip}`)).to.have.class( + speedDialActionClasses[className], + ); + }); }); + + it.skipIf(isJsdom())( + 'should lay out persistent tooltips side by side when direction is horizontal', + () => { + const titles = ['Copy', 'Save', 'Print this page', 'Large']; + render( + + {titles.map((title) => ( + + ))} + , + ); + + const fabs = screen.getAllByRole('menuitem').map((fab) => fab.getBoundingClientRect()); + const labels = titles.map((title) => screen.getByText(title).getBoundingClientRect()); + const verticalCenter = (rect) => rect.top + rect.height / 2; + + // Each label sits 16px above its own Fab, on a single line. + labels.forEach((label, index) => { + expect(Math.abs(fabs[index].top - label.bottom - 16)).to.be.lessThan(1); + expect(label.height).to.equal(labels[0].height); + }); + // Labels don't overlap their neighbors. + for (let i = 1; i < labels.length; i += 1) { + expect(labels[i].left).to.be.at.least(labels[i - 1].right); + } + // Fabs of different sizes stay on one center line. + fabs.forEach((fab) => { + expect(Math.abs(verticalCenter(fab) - verticalCenter(fabs[0]))).to.be.lessThan(1); + }); + }, + ); }); describe('keyboard', () => { diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index ec037b7f068107..1a4d55e60ac569 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -85,6 +85,8 @@ const SpeedDialActionStaticTooltip = styled('span', { position: 'relative', display: 'flex', alignItems: 'center', + // Stay as tall as the Fab when a sibling action is larger. + alignSelf: 'center', [`& .${speedDialActionClasses.staticTooltipLabel}`]: { ...getTransitionStyles(theme, ['transform', 'opacity'], { duration: theme.transitions.duration.shorter, @@ -130,11 +132,18 @@ const SpeedDialActionStaticTooltip = styled('span', { tooltipPlacement: 'top', }, style: { - flexDirection: 'column-reverse', + // The label sits in a zero-height row, so it widens the action to keep + // neighboring labels apart without making the action taller. + display: 'grid', + gridTemplateRows: '0 auto', + justifyItems: 'center', [`& .${speedDialActionClasses.staticTooltipLabel}`]: { + position: 'static', + alignSelf: 'end', transformOrigin: '50% 100%', - bottom: '100%', marginBottom: 8, + marginLeft: 8, + marginRight: 8, }, }, }, @@ -143,11 +152,17 @@ const SpeedDialActionStaticTooltip = styled('span', { tooltipPlacement: 'bottom', }, style: { - flexDirection: 'column', + display: 'grid', + gridTemplateRows: 'auto 0', + justifyItems: 'center', [`& .${speedDialActionClasses.staticTooltipLabel}`]: { + position: 'static', + gridRow: 2, + alignSelf: 'start', transformOrigin: '50% 0%', - top: '100%', marginTop: 8, + marginLeft: 8, + marginRight: 8, }, }, }, @@ -179,7 +194,8 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : (slotProps.tooltip ?? {}); - const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left'; + // Compound placements like `top-start` are styled like their side. + const tooltipPlacement = (resolvedTooltipSlotProps.placement ?? 'left').split('-')[0]; const ownerState = { ...props, tooltipPlacement }; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js index 46e64ed7585448..cfaf5e50795f24 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js @@ -199,43 +199,53 @@ describe('', () => { expect(staticToolTipLabel).to.have.class(classes.staticTooltipLabel); }); - it.skipIf(isJsdom())( - 'places the static tooltip label above the Fab when placement is top', - () => { - render( - add} - open - slotProps={{ tooltip: { open: true, placement: 'top', title: 'placeholder' } }} - />, - ); - - const label = screen.getByText('placeholder').getBoundingClientRect(); - const fab = screen.getByRole('menuitem').getBoundingClientRect(); - - expect(label.bottom).to.be.at.most(fab.top); - expect(Math.abs(label.left + label.width / 2 - (fab.left + fab.width / 2))).to.be.lessThan(1); - }, - ); - - it.skipIf(isJsdom())( - 'places the static tooltip label below the Fab when placement is bottom', - () => { - render( - add} - open - slotProps={{ tooltip: { open: true, placement: 'bottom', title: 'placeholder' } }} - />, - ); + it('styles compound placements like their side', () => { + const { container } = render( + add} + slotProps={{ tooltip: { open: true, placement: 'top-start', title: 'placeholder' } }} + />, + ); - const label = screen.getByText('placeholder').getBoundingClientRect(); - const fab = screen.getByRole('menuitem').getBoundingClientRect(); + expect(container.querySelector(`.${classes.staticTooltip}`)).to.have.class( + classes.tooltipPlacementTop, + ); + }); - expect(label.top).to.be.at.least(fab.bottom); - expect(Math.abs(label.left + label.width / 2 - (fab.left + fab.width / 2))).to.be.lessThan(1); - }, - ); + describe.skipIf(isJsdom())('static tooltip label layout', () => { + function center(rect, axis) { + return axis === 'x' ? rect.left + rect.width / 2 : rect.top + rect.height / 2; + } + + [ + ['top', 'x', (label, fab) => fab.top - label.bottom], + ['bottom', 'x', (label, fab) => label.top - fab.bottom], + ['left', 'y', (label, fab) => fab.left - label.right], + ['right', 'y', (label, fab) => label.left - fab.right], + ['top-start', 'x', (label, fab) => fab.top - label.bottom], + ['left-end', 'y', (label, fab) => fab.left - label.right], + ].forEach(([placement, axis, getGap]) => { + it(`places the label next to the Fab when placement is ${placement}`, () => { + // SpeedDial lays out its actions in a flex container. + render( +
+ add} + open + slotProps={{ tooltip: { open: true, placement, title: 'placeholder' } }} + /> +
, + ); + + const label = screen.getByText('placeholder').getBoundingClientRect(); + const fab = screen.getByRole('menuitem').getBoundingClientRect(); + + // 8px margin on the label plus 8px margin on the Fab. + expect(Math.abs(getGap(label, fab) - 16)).to.be.lessThan(1); + expect(Math.abs(center(label, axis) - center(fab, axis))).to.be.lessThan(1); + }); + }); + }); it('should have staticToolTip and staticToolTipLabel classes if slotProps.tooltip.open is true and custom slots are provided', () => { const CustomStaticTooltip = React.forwardRef(({ ownerState, ...props }, ref) => ( diff --git a/test/regressions/fixtures/SpeedDial/Directions.js b/test/regressions/fixtures/SpeedDial/Directions.js index 84b5eeed054e56..06f621894e78d5 100644 --- a/test/regressions/fixtures/SpeedDial/Directions.js +++ b/test/regressions/fixtures/SpeedDial/Directions.js @@ -39,13 +39,15 @@ SimpleSpeedDial.propTypes = { function Directions() { return ( - - {['up', 'down'].map((direction) => ( + + {['up', 'down', 'left', 'right'].map((direction) => ( Date: Fri, 11 Sep 2026 16:44:57 +0530 Subject: [PATCH 6/8] [docs][SpeedDialAction] Describe persistent tooltips with slotProps The class descriptions and the SpeedDial docs still referred to the `tooltipOpen` and `tooltipPlacement` props, which were removed in v9. --- .../material/components/speed-dial/speed-dial.md | 7 +++++-- docs/pages/material-ui/api/speed-dial-action.json | 10 +++++----- .../speed-dial-action/speed-dial-action.json | 10 +++++----- .../src/SpeedDialAction/speedDialActionClasses.ts | 14 +++++++------- 4 files changed, 22 insertions(+), 19 deletions(-) diff --git a/docs/data/material/components/speed-dial/speed-dial.md b/docs/data/material/components/speed-dial/speed-dial.md index bb13c916cc39e2..57be46197c3b30 100644 --- a/docs/data/material/components/speed-dial/speed-dial.md +++ b/docs/data/material/components/speed-dial/speed-dial.md @@ -41,9 +41,12 @@ of the `SpeedDialIcon` component. ## Persistent action tooltips -The SpeedDialActions tooltips can be displayed persistently so that users don't have to long-press to see the tooltip on touch devices. +The SpeedDialActions tooltips can be displayed persistently with `slotProps.tooltip.open` so that users don't have to long-press to see the tooltip on touch devices. -It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the prop. +It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set it. + +The labels are placed to the left of the actions for the `up` and `down` directions, and above them for `left` and `right`. +Use `slotProps.tooltip.placement` to place them on another side. {{"demo": "SpeedDialTooltipOpen.js"}} diff --git a/docs/pages/material-ui/api/speed-dial-action.json b/docs/pages/material-ui/api/speed-dial-action.json index 6068dc3c64b3a5..b7930c882c0c82 100644 --- a/docs/pages/material-ui/api/speed-dial-action.json +++ b/docs/pages/material-ui/api/speed-dial-action.json @@ -68,31 +68,31 @@ { "key": "staticTooltipClosed", "className": "MuiSpeedDialAction-staticTooltipClosed", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `open={false}`.", + "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `open={false}`.", "isGlobal": false }, { "key": "tooltipPlacementBottom", "className": "MuiSpeedDialAction-tooltipPlacementBottom", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"bottom\"`.", + "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"bottom\".", "isGlobal": false }, { "key": "tooltipPlacementLeft", "className": "MuiSpeedDialAction-tooltipPlacementLeft", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"left\"`.", + "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"left\".", "isGlobal": false }, { "key": "tooltipPlacementRight", "className": "MuiSpeedDialAction-tooltipPlacementRight", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"right\"`.", + "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"right\".", "isGlobal": false }, { "key": "tooltipPlacementTop", "className": "MuiSpeedDialAction-tooltipPlacementTop", - "description": "Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement=\"top\"`.", + "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"top\".", "isGlobal": false } ], diff --git a/docs/translations/api-docs/speed-dial-action/speed-dial-action.json b/docs/translations/api-docs/speed-dial-action/speed-dial-action.json index 02ebe99ba283b1..e4581b919ae8bc 100644 --- a/docs/translations/api-docs/speed-dial-action/speed-dial-action.json +++ b/docs/translations/api-docs/speed-dial-action/speed-dial-action.json @@ -25,27 +25,27 @@ "staticTooltipClosed": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "tooltipOpen={true} and open={false}" + "conditions": "slotProps.tooltip.open={true} and open={false}" }, "tooltipPlacementBottom": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "tooltipOpen={true} and tooltipPlacement=\"bottom\"" + "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "bottom"" }, "tooltipPlacementLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "tooltipOpen={true} and tooltipPlacement=\"left\"" + "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "left"" }, "tooltipPlacementRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "tooltipOpen={true} and tooltipPlacement=\"right\"" + "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "right"" }, "tooltipPlacementTop": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "tooltipOpen={true} and tooltipPlacement=\"top\"" + "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "top"" } }, "slotDescriptions": { diff --git a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts index 5018fda827ba02..7bd297d4ebdd52 100644 --- a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts +++ b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts @@ -6,19 +6,19 @@ 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}`. */ + /** Styles applied to the root element if `slotProps.tooltip.open={true}`. */ staticTooltip: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `open={false}`. */ + /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `open={false}`. */ staticTooltipClosed: string; - /** Styles applied to the static tooltip label if `tooltipOpen={true}`. */ + /** Styles applied to the static tooltip label if `slotProps.tooltip.open={true}`. */ staticTooltipLabel: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="left"`. */ + /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "left". */ tooltipPlacementLeft: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"`. */ + /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "right". */ tooltipPlacementRight: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="top"`. */ + /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "top". */ tooltipPlacementTop: string; - /** Styles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="bottom"`. */ + /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "bottom". */ tooltipPlacementBottom: string; } From 70555574ce5651fced20c6d435cf5df77997ef79 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 11 Sep 2026 18:39:10 +0530 Subject: [PATCH 7/8] [SpeedDialAction] Keep vertical dials unchanged and handle placements without a side - Only center the root for top and bottom labels, so vertical speed dials keep their label column when action sizes differ. - Fall back to the left for placements without a side, like `auto`, instead of leaving the label unstyled on top of the Fab. - Test the left direction, the closed state, the spacing between labels, and that the label doesn't make the action taller. --- .../src/SpeedDial/SpeedDial.test.js | 91 +++++++++++++------ .../src/SpeedDialAction/SpeedDialAction.js | 13 ++- .../SpeedDialAction/SpeedDialAction.test.js | 31 ++++--- 3 files changed, 91 insertions(+), 44 deletions(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index a8fca5a84fdbcd..1fa9d139f0d726 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -224,42 +224,75 @@ describe('', () => { }); }); + ['left', 'right'].forEach((direction) => { + it.skipIf(isJsdom())( + `should lay out persistent tooltips side by side when direction=${direction}`, + () => { + const titles = ['Copy', 'Save', 'Print this page', 'Large']; + const { setProps } = render( + + {titles.map((title) => ( + + ))} + , + ); + + const fabs = screen.getAllByRole('menuitem').map((fab) => fab.getBoundingClientRect()); + const labels = titles.map((title) => screen.getByText(title).getBoundingClientRect()); + const verticalCenter = (rect) => rect.top + rect.height / 2; + + // Each label sits 16px above its own Fab, on a single line. + labels.forEach((label, index) => { + expect(Math.abs(fabs[index].top - label.bottom - 16)).to.be.lessThan(1); + expect(label.height).to.equal(labels[0].height); + }); + // Labels stay 16px apart, in whichever order the direction shows them. + const labelsFromLeft = [...labels].sort((a, b) => a.left - b.left); + for (let i = 1; i < labelsFromLeft.length; i += 1) { + expect(Math.round(labelsFromLeft[i].left - labelsFromLeft[i - 1].right)).to.be.at.least( + 16, + ); + } + // Fabs of different sizes stay on one center line. + expect(fabs[3].height).to.be.greaterThan(fabs[0].height); + fabs.forEach((fab) => { + expect(Math.abs(verticalCenter(fab) - verticalCenter(fabs[0]))).to.be.lessThan(1); + }); + + // The labels keep their space while the speed dial is closed, so closing it moves nothing. + const openActions = screen.getByRole('menu').getBoundingClientRect(); + setProps({ open: false }); + const closedActions = screen.getByRole('menu').getBoundingClientRect(); + expect(closedActions.left).to.equal(openActions.left); + expect(closedActions.width).to.equal(openActions.width); + }, + ); + }); + it.skipIf(isJsdom())( - 'should lay out persistent tooltips side by side when direction is horizontal', + 'should line up persistent tooltips when direction is vertical and action sizes differ', () => { - const titles = ['Copy', 'Save', 'Print this page', 'Large']; render( - - {titles.map((title) => ( - - ))} + + + , ); - const fabs = screen.getAllByRole('menuitem').map((fab) => fab.getBoundingClientRect()); - const labels = titles.map((title) => screen.getByText(title).getBoundingClientRect()); - const verticalCenter = (rect) => rect.top + rect.height / 2; + const small = screen.getByText('Small').getBoundingClientRect(); + const large = screen.getByText('Large').getBoundingClientRect(); - // Each label sits 16px above its own Fab, on a single line. - labels.forEach((label, index) => { - expect(Math.abs(fabs[index].top - label.bottom - 16)).to.be.lessThan(1); - expect(label.height).to.equal(labels[0].height); - }); - // Labels don't overlap their neighbors. - for (let i = 1; i < labels.length; i += 1) { - expect(labels[i].left).to.be.at.least(labels[i - 1].right); - } - // Fabs of different sizes stay on one center line. - fabs.forEach((fab) => { - expect(Math.abs(verticalCenter(fab) - verticalCenter(fabs[0]))).to.be.lessThan(1); - }); + expect(Math.abs(small.right - large.right)).to.be.lessThan(1); }, ); }); diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js index 1a4d55e60ac569..d7f2cdae25641c 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js @@ -85,8 +85,6 @@ const SpeedDialActionStaticTooltip = styled('span', { position: 'relative', display: 'flex', alignItems: 'center', - // Stay as tall as the Fab when a sibling action is larger. - alignSelf: 'center', [`& .${speedDialActionClasses.staticTooltipLabel}`]: { ...getTransitionStyles(theme, ['transform', 'opacity'], { duration: theme.transitions.duration.shorter, @@ -137,6 +135,8 @@ const SpeedDialActionStaticTooltip = styled('span', { display: 'grid', gridTemplateRows: '0 auto', justifyItems: 'center', + // Stay as tall as the Fab when a sibling action is larger. + alignSelf: 'center', [`& .${speedDialActionClasses.staticTooltipLabel}`]: { position: 'static', alignSelf: 'end', @@ -155,6 +155,7 @@ const SpeedDialActionStaticTooltip = styled('span', { display: 'grid', gridTemplateRows: 'auto 0', justifyItems: 'center', + alignSelf: 'center', [`& .${speedDialActionClasses.staticTooltipLabel}`]: { position: 'static', gridRow: 2, @@ -194,8 +195,12 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(inProps, ref) const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : (slotProps.tooltip ?? {}); - // Compound placements like `top-start` are styled like their side. - const tooltipPlacement = (resolvedTooltipSlotProps.placement ?? 'left').split('-')[0]; + // The label is styled per side: compound placements like `top-start` use their side, + // and placements without one, like `auto`, fall back to the left. + const placementSide = String(resolvedTooltipSlotProps.placement).split('-')[0]; + const tooltipPlacement = ['top', 'right', 'bottom', 'left'].includes(placementSide) + ? placementSide + : 'left'; const ownerState = { ...props, tooltipPlacement }; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js index cfaf5e50795f24..908009d432bca2 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js @@ -199,17 +199,22 @@ describe('', () => { expect(staticToolTipLabel).to.have.class(classes.staticTooltipLabel); }); - it('styles compound placements like their side', () => { - const { container } = render( - add} - slotProps={{ tooltip: { open: true, placement: 'top-start', title: 'placeholder' } }} - />, - ); + [ + ['top-start', 'tooltipPlacementTop'], + ['auto', 'tooltipPlacementLeft'], + ].forEach(([placement, className]) => { + it(`styles the static tooltip with ${className} when placement is ${placement}`, () => { + const { container } = render( + add} + slotProps={{ tooltip: { open: true, placement, title: 'placeholder' } }} + />, + ); - expect(container.querySelector(`.${classes.staticTooltip}`)).to.have.class( - classes.tooltipPlacementTop, - ); + expect(container.querySelector(`.${classes.staticTooltip}`)).to.have.class( + classes[className], + ); + }); }); describe.skipIf(isJsdom())('static tooltip label layout', () => { @@ -224,10 +229,11 @@ describe('', () => { ['right', 'y', (label, fab) => label.left - fab.right], ['top-start', 'x', (label, fab) => fab.top - label.bottom], ['left-end', 'y', (label, fab) => fab.left - label.right], + ['auto', 'y', (label, fab) => fab.left - label.right], ].forEach(([placement, axis, getGap]) => { it(`places the label next to the Fab when placement is ${placement}`, () => { // SpeedDial lays out its actions in a flex container. - render( + const { container } = render(
add} @@ -237,12 +243,15 @@ describe('', () => {
, ); + const root = container.querySelector(`.${classes.staticTooltip}`).getBoundingClientRect(); const label = screen.getByText('placeholder').getBoundingClientRect(); const fab = screen.getByRole('menuitem').getBoundingClientRect(); // 8px margin on the label plus 8px margin on the Fab. expect(Math.abs(getGap(label, fab) - 16)).to.be.lessThan(1); expect(Math.abs(center(label, axis) - center(fab, axis))).to.be.lessThan(1); + // The label doesn't make the action taller. + expect(Math.abs(root.height - (fab.height + 16))).to.be.lessThan(1); }); }); }); From b80f67a5cf548abd5e76b2d33ebd0961217cf9b4 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 11 Sep 2026 18:39:11 +0530 Subject: [PATCH 8/8] [docs][SpeedDial] Clarify persistent tooltip placement and labeling Say which placements suit each direction and how horizontal speed dials make room for their labels. Also correct the accessibility note: actions are labeled by their tooltip title, not described by it. --- .../material/components/speed-dial/speed-dial.md | 9 +++++++-- docs/pages/material-ui/api/speed-dial-action.json | 10 +++++----- .../speed-dial-action/speed-dial-action.json | 10 +++++----- .../src/SpeedDialAction/speedDialActionClasses.ts | 14 +++++++------- 4 files changed, 24 insertions(+), 19 deletions(-) diff --git a/docs/data/material/components/speed-dial/speed-dial.md b/docs/data/material/components/speed-dial/speed-dial.md index 57be46197c3b30..345322b17034f5 100644 --- a/docs/data/material/components/speed-dial/speed-dial.md +++ b/docs/data/material/components/speed-dial/speed-dial.md @@ -46,7 +46,12 @@ The SpeedDialActions tooltips can be displayed persistently with `slotProps.tool It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set it. The labels are placed to the left of the actions for the `up` and `down` directions, and above them for `left` and `right`. -Use `slotProps.tooltip.placement` to place them on another side. +Use `slotProps.tooltip.placement` to move them to the opposite side: `right` for vertical speed dials, or `bottom` for horizontal ones. +Other combinations make the labels cover the neighboring actions. +Compound placements like `top-start` are centered like `top`. + +In horizontal speed dials, each action is as wide as its label so that the labels don't overlap. +The actions keep that space while the speed dial is closed. {{"demo": "SpeedDialTooltipOpen.js"}} @@ -69,7 +74,7 @@ Use `transitionDuration` to control the timing. - The Fab has `aria-haspopup`, `aria-expanded` and `aria-controls` attributes. - The speed dial actions container has `role="menu"` and `aria-orientation` set according to the direction. -- The speed dial actions have `role="menuitem"`, and an `aria-describedby` attribute that references the associated tooltip. +- The speed dial actions have `role="menuitem"` and are labeled by their tooltip title. ### Keyboard diff --git a/docs/pages/material-ui/api/speed-dial-action.json b/docs/pages/material-ui/api/speed-dial-action.json index b7930c882c0c82..e5daca77e660b3 100644 --- a/docs/pages/material-ui/api/speed-dial-action.json +++ b/docs/pages/material-ui/api/speed-dial-action.json @@ -68,31 +68,31 @@ { "key": "staticTooltipClosed", "className": "MuiSpeedDialAction-staticTooltipClosed", - "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `open={false}`.", + "description": "Styles applied to the root element if `slotProps.tooltip.open` is `true` and `open` is `false`.", "isGlobal": false }, { "key": "tooltipPlacementBottom", "className": "MuiSpeedDialAction-tooltipPlacementBottom", - "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"bottom\".", + "description": "Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains \"bottom\".", "isGlobal": false }, { "key": "tooltipPlacementLeft", "className": "MuiSpeedDialAction-tooltipPlacementLeft", - "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"left\".", + "description": "Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains \"left\".", "isGlobal": false }, { "key": "tooltipPlacementRight", "className": "MuiSpeedDialAction-tooltipPlacementRight", - "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"right\".", + "description": "Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains \"right\".", "isGlobal": false }, { "key": "tooltipPlacementTop", "className": "MuiSpeedDialAction-tooltipPlacementTop", - "description": "Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains \"top\".", + "description": "Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains \"top\".", "isGlobal": false } ], diff --git a/docs/translations/api-docs/speed-dial-action/speed-dial-action.json b/docs/translations/api-docs/speed-dial-action/speed-dial-action.json index e4581b919ae8bc..e13f0424cee957 100644 --- a/docs/translations/api-docs/speed-dial-action/speed-dial-action.json +++ b/docs/translations/api-docs/speed-dial-action/speed-dial-action.json @@ -25,27 +25,27 @@ "staticTooltipClosed": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "slotProps.tooltip.open={true} and open={false}" + "conditions": "slotProps.tooltip.open is true and open is false" }, "tooltipPlacementBottom": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "bottom"" + "conditions": "slotProps.tooltip.open is true and slotProps.tooltip.placement contains "bottom"" }, "tooltipPlacementLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "left"" + "conditions": "slotProps.tooltip.open is true and slotProps.tooltip.placement contains "left"" }, "tooltipPlacementRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "right"" + "conditions": "slotProps.tooltip.open is true and slotProps.tooltip.placement contains "right"" }, "tooltipPlacementTop": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "slotProps.tooltip.open={true} and slotProps.tooltip.placement contains "top"" + "conditions": "slotProps.tooltip.open is true and slotProps.tooltip.placement contains "top"" } }, "slotDescriptions": { diff --git a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts index 7bd297d4ebdd52..680b36a56e51aa 100644 --- a/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts +++ b/packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts @@ -6,19 +6,19 @@ export interface SpeedDialActionClasses { fab: string; /** Styles applied to the Fab component if `open={false}`. */ fabClosed: string; - /** Styles applied to the root element if `slotProps.tooltip.open={true}`. */ + /** Styles applied to the root element if `slotProps.tooltip.open` is `true`. */ staticTooltip: string; - /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `open={false}`. */ + /** Styles applied to the root element if `slotProps.tooltip.open` is `true` and `open` is `false`. */ staticTooltipClosed: string; - /** Styles applied to the static tooltip label if `slotProps.tooltip.open={true}`. */ + /** Styles applied to the static tooltip label if `slotProps.tooltip.open` is `true`. */ staticTooltipLabel: string; - /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "left". */ + /** Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains "left". */ tooltipPlacementLeft: string; - /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "right". */ + /** Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains "right". */ tooltipPlacementRight: string; - /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "top". */ + /** Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains "top". */ tooltipPlacementTop: string; - /** Styles applied to the root element if `slotProps.tooltip.open={true}` and `slotProps.tooltip.placement` contains "bottom". */ + /** Styles applied to the root element if `slotProps.tooltip.open` is `true` and `slotProps.tooltip.placement` contains "bottom". */ tooltipPlacementBottom: string; }