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-ui] Overall demos design review #38820

Merged
merged 93 commits into from
Oct 18, 2023

Conversation

zanivan
Copy link
Contributor

@zanivan zanivan commented Sep 5, 2023

Doing a short design pass to improve the design and reduce the inconsistency among Base UI demos before the stable release. Mostly tweaking shadows and standardizing buttons and colors.

@zanivan zanivan added docs Improvements or additions to the documentation design This is about UI or UX design, please involve a designer package: base-ui Specific to @mui/base labels Sep 5, 2023
@zanivan zanivan self-assigned this Sep 5, 2023
@mui-bot
Copy link

mui-bot commented Sep 5, 2023

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against f05c487

@zanivan zanivan marked this pull request as ready for review September 8, 2023 14:45
@zanivan zanivan marked this pull request as draft September 8, 2023 16:58
@zanivan zanivan marked this pull request as ready for review September 8, 2023 19:09
danilo-leal

This comment was marked as resolved.

@zanivan

This comment was marked as resolved.

@mj12albert
Copy link
Member

  • Base UI Button disabled style flashes - I noticed this for the first time now, could be regression done in this PR

There is an open issue & PR about this! #39212

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 16, 2023
@michaldudak

This comment was marked as resolved.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 16, 2023
@@ -73,7 +73,7 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
return {
...resolvedSlotProps,
className: clsx(
`absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 shadow-[inset_0_1_1_rgb(0_0_0_/_0.05)] dark:shadow-[inset_0_1_1_rgb(0_0_0_/_0.5)] focus:ring-2
`absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 shadow-[inset_0_1_1_rgb(0_0_0_/_0.05)] dark:shadow-[inset_0_1_1_rgb(0_0_0_/_0.5)] focus:shadow-purple-200 dark:focus:shadow-purple-600
Copy link
Contributor

Choose a reason for hiding this comment

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

@mnajdova — I've been trying to help Victor out with the focus state on the Switch Tailwind demo, but this simply doesn't work 😞 I tried various combinations, and even in different places (for the sake of debugging), and I can't tell why it's not picking up. Other styles were also not working, such as a hover state when the Switch is checked on (doing stuff like hover:bg-purple-600 on line 79 down below has no effect).

Would love your help here to get this PR out of the door! 🙏

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can we address this and the other remaining tweaks/issues on separate PRs? This is already insanely huge, and I believe all remaining fixes are tiny or not necessarily related.

Copy link
Member

Choose a reason for hiding this comment

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

Yes, let's merge the PR and open separate pull request for the different issues we found

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.

This is a great improvement already, let's merge and iterate on the things we found as potential improvements. Great job @zanivan 🚀 👏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation package: base-ui Specific to @mui/base
Projects
Status: Done
Status: Recently completed
6 participants