Skip to content

[material-ui][TimelineItem] Fix extra ::before spacing when TimelineOppositeContent is present#46663

Open
tyalau wants to merge 2 commits intomui:masterfrom
tyalau:fix/timelineitem-extra-space
Open

[material-ui][TimelineItem] Fix extra ::before spacing when TimelineOppositeContent is present#46663
tyalau wants to merge 2 commits intomui:masterfrom
tyalau:fix/timelineitem-extra-space

Conversation

@tyalau
Copy link
Copy Markdown

@tyalau tyalau commented Aug 4, 2025

Closes #46639

Summary

This PR updates the logic to use a pure CSS approach by leveraging the :has() and :not() selectors. The ::before styling is now applied only when .MuiTimelineOppositeContent-root is not present within a TimelineItem.

This ensures consistent layout behavior regardless of whether TimelineItem is used in a Server or Client Component.

useEffect() is used to check children after hydration and set hasOppositeContent accordingly, which is then used to conditionally apply the missingOppositeContent class.

@mui-bot
Copy link
Copy Markdown

mui-bot commented Aug 4, 2025

Netlify deploy preview

https://deploy-preview-46663--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 🔺+32B(+0.09%) 🔺+6B(+0.07%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against bf08002

@tyalau tyalau force-pushed the fix/timelineitem-extra-space branch 2 times, most recently from 0536f73 to 505434c Compare August 4, 2025 14:32
@zannager zannager added the scope: timeline Changes related to the timeline. label Aug 4, 2025
@zannager zannager requested a review from siriwatknp August 4, 2025 14:34
@ZeeshanTamboli ZeeshanTamboli added breaking change Introduces changes that are not backward compatible. v8.x labels Aug 6, 2025
@tyalau tyalau force-pushed the fix/timelineitem-extra-space branch from 505434c to f760873 Compare August 8, 2025 02:55
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui] [TimelineItem] Fix extra ::before spacing when TimelineOppositeContent is present [material-ui][TimelineItem] Fix extra ::before spacing when TimelineOppositeContent is present Aug 9, 2025
@tyalau tyalau force-pushed the fix/timelineitem-extra-space branch from f760873 to 0a3eb16 Compare August 11, 2025 07:13
@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Feb 23, 2026
@siriwatknp
Copy link
Copy Markdown
Member

Thanks for fixing this and sorry to keep you waiting!

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 24, 2026
@tyalau tyalau force-pushed the fix/timelineitem-extra-space branch from 63f6e74 to 5ba702b Compare March 31, 2026 12:12
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 31, 2026
@tyalau
Copy link
Copy Markdown
Author

tyalau commented Mar 31, 2026

@siriwatknp Thanks for your review. I've resolved the conflict. Sorry for the late address.

@mj12albert mj12albert removed the v8.x label Apr 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. scope: timeline Changes related to the timeline.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[TimelineItem] Extra space due to ::before even when TimelineOppositeContent is present

6 participants