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

[core] Rename CSS vars to include component name #820

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Nov 15, 2024

@atomiks atomiks added the core Infrastructure work going on behind the scenes label Nov 15, 2024
Comment on lines +3 to +4
max-width: var(--popover-available-width);
max-height: var(--popover-available-height);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

If we add component prefixes, this makes classes like this non-reusable across different popups... @vladmoroz. In fact, I'm not sure if this popup is used for popover specifically.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm yeah good point, I was thinking that the Popup component would be used across different popups, such as Popovers, Preview Cards, Dialogs, etc. Let's discuss it on Monday in detail. We need to consider whether prefixing everything maps well to how components would be styled.

Comment on lines +191 to 192
elements.floating.style.setProperty(`--${name}-arrow-origin`, arrowOrigin);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The arrow origin and transform origin are a bit different. For edge-aligned popups, you want the transform-origin to be at the edge, not arrow's point/anchor center.

@mui-bot
Copy link

mui-bot commented Nov 15, 2024

Netlify deploy preview

https://deploy-preview-820--base-ui.netlify.app/

Generated by 🚫 dangerJS against 1e67f26

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes PR: out-of-date The pull request has merge conflicts and can't be merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants