Skip to content
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.

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

[docs] Base Popper style revisions and final review #32412

Merged
merged 2 commits into from
Apr 27, 2022
Merged

[docs] Base Popper style revisions and final review #32412

merged 2 commits into from
Apr 27, 2022

Conversation

samuelsycamore
Copy link
Contributor

This PR reviews the Base PopperUnstyled document. The current version is mostly copypasta from the Material UI doc, so I did a fair bit of rewriting to make it a proper standalone piece. The "Features" section felt more like a list of random details, so I reworked it and dispersed those details throughout the doc.

The earlier version mentions transitions and links to a section that doesn't exist—looks like this was pulled directly from the Material UI doc. So I grabbed the text about transitions from that piece and added it here. I'm thinking we should probably add a Base version of the corresponding demo as well.

@samuelsycamore samuelsycamore added docs Improvements or additions to the documentation component: Popper The React component. See <Popup> for the latest version. package: base-ui Specific to @mui/base labels Apr 21, 2022
@samuelsycamore samuelsycamore requested a review from a team April 21, 2022 17:18
@mui-bot
Copy link

mui-bot commented Apr 21, 2022

No bundle size changes

Generated by 🚫 dangerJS against 0bc03bd

Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

By default, the popper is mounted to the DOM when its `open` prop is set to `true` and removed from it when `open` turns `false`. If you want that to happen with a transition, use the `keepMounted` prop (see the [Transition](#transition) example below).
`anchorEl` is passed as the reference object to create a new `Popper.js` instance.
The children are placed in a [`Portal`](/base/react-portal/) prepended to the body of the document to avoid rendering problems.
You can disable this behavior with `disablePortal` prop.

{{"demo": "SimplePopper.js"}}
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli Apr 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @samuelsycamore , I was going through the docs on the main website and noticed that in the SimplePopper demo, the popper is not visible in dark mode - https://mui.com/base/react-popper/#basic-popper.

I think we need to simply remove the backgroundColor: '#fff' style applied in the child div for it to work in both modes. In dark mode, the background overlaps with the white text.

Found this PR, so commenting here. It can probably be fixed in this PR.

Preview: https://deploy-preview-32412--material-ui.netlify.app/base/react-popper/#basic-popper

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ZeeshanTamboli nice catch! I think we can open a dedicated PR for this, as this PR is mostly focused on the copy writing.

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢 it :)

@samuelsycamore samuelsycamore merged commit 243d6c5 into mui:master Apr 27, 2022
@samuelsycamore samuelsycamore deleted the base-popper-style-review branch April 27, 2022 15:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Popper The React component. See <Popup> for the latest version. docs Improvements or additions to the documentation package: base-ui Specific to @mui/base
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants