Skip to content

[material-ui][SpeedDial] Fix horizontal persistent tooltip placement #49073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Cunninger wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[material-ui][SpeedDial] Fix horizontal persistent tooltip placement #49073

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f935f5e
[material-ui][SpeedDial] Fix horizontal persistent tooltip placement
Aug 31, 2026
cab7a4e
Merge branch 'master' into codex/issue-41067-speeddial-tooltip-placement
sai6855 Sep 11, 2026
722e620
[SpeedDial] Keep top as the default tooltip placement for horizontal …
sai6855 Sep 11, 2026
426633e
[SpeedDialAction] Assert static tooltip label layout in real browsers
sai6855 Sep 11, 2026
d7f9c85
[SpeedDialAction] Regenerate API docs for the new placement classes
sai6855 Sep 11, 2026
3e3fe67
[SpeedDialAction] Keep persistent labels next to their action and apa…
sai6855 Sep 11, 2026
2d6eb2c
[docs][SpeedDialAction] Describe persistent tooltips with slotProps
sai6855 Sep 11, 2026
4513eb4
Merge branch 'master' into codex/issue-41067-speeddial-tooltip-placement
sai6855 Sep 11, 2026
7055557
[SpeedDialAction] Keep vertical dials unchanged and handle placements…
sai6855 Sep 11, 2026
b80f67a
[docs][SpeedDial] Clarify persistent tooltip placement and labeling
sai6855 Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/mui-material/src/SpeedDial/SpeedDial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/SpeedDial/SpeedDial.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,8 @@ describe('<SpeedDial />', () => {
[
['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(
Expand Down
26 changes: 26 additions & 0 deletions packages/mui-material/src/SpeedDialAction/SpeedDialAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
},
],
})),
);
Expand Down
17 changes: 17 additions & 0 deletions packages/mui-material/src/SpeedDialAction/SpeedDialAction.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,23 @@ describe('<SpeedDialAction />', () => {
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(
<SpeedDialAction
icon={<Icon>add</Icon>}
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) => (
<div {...props} ref={ref}>
Expand Down
6 changes: 6 additions & 0 deletions packages/mui-material/src/SpeedDialAction/speedDialActionClasses.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -34,6 +38,8 @@ const speedDialActionClasses: SpeedDialActionClasses = generateUtilityClasses(
'staticTooltipLabel',
'tooltipPlacementLeft',
'tooltipPlacementRight',
'tooltipPlacementTop',
'tooltipPlacementBottom',
],
);

Expand Down
Loading