[material-ui][SpeedDial] Fix horizontal persistent tooltip placement - #49073
Open
Cunninger wants to merge 10 commits into
Open
[material-ui][SpeedDial] Fix horizontal persistent tooltip placement#49073Cunninger wants to merge 10 commits into
Cunninger wants to merge 10 commits into
Conversation
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
sai6855
reviewed
Sep 3, 2026
sai6855
left a comment
sai6855
left a comment
Member
There was a problem hiding this comment.
@Cunninger Existing tests are failing, can you check?
…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.
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.
Also drop the stray backtick from the tooltipPlacement* class descriptions so the placement renders as code in the API docs.
…rt 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.
The class descriptions and the SpeedDial docs still referred to the `tooltipOpen` and `tooltipPlacement` props, which were removed in v9.
… 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.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #41067.
Summary
Persistent SpeedDialAction tooltips (
slotProps.tooltip.open) had no styles for thetopandbottomplacements, which horizontal SpeedDials use by default, so the label was drawn on top of its action.topandbottomstyles for the persistent label. The label sits in a zero-height grid row, so it widens its action instead of overlapping the neighboring labels, and it stays on one line.top-startlike their side, as Tooltip does, and fall back toleftfor placements without a side, likeauto. Both used to get no styles at all.topas the default placement for theleftandrightdirections, so hover tooltips are unchanged.tooltipOpenandtooltipPlacementprops removed in v9, and the accessibility note, which mentioned anaria-describedbythat isn't set.Trade-offs
These follow from giving each label its own space in horizontal speed dials:
leftandrightlabels, the label is drawn outside the action's box: it can be clipped by anoverflow: hiddencontainer, or go past the top of the page for a speed dial at the top edge (useplacement: 'bottom'there).Test plan
auto: 16px from its Fab, centered on it, without making the action taller.autoplacements.SpeedDial/Directionsregression fixture now also renders theleftandrightdirections.