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-infra] Adjust the tabs and layout selection design #41084

Conversation

danilo-leal
Copy link
Contributor

@danilo-leal danilo-leal commented Feb 13, 2024

This PR changes the component to toggle between different API content layout views from a toggle button to a dropdown menu. This does consist of an additional click, but ultimately, I feel like it improves the feature's discoverability. The "View" word within the button, clearly stating which view you're seeing, gives it away that you may find other options by clicking on the button. Regardless of the tooltip, the icons alone in the current version did not feel intuitive to use. I've received feedback that, at a glance, it was not clear what they were for. Aside from that, also added in some stray design tweaks.

https://deploy-preview-41084--material-ui.netlify.app/base-ui/react-button/components-api/#button

Related discussion: #40862 (comment)

@danilo-leal danilo-leal added design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product labels Feb 13, 2024
@danilo-leal danilo-leal self-assigned this Feb 13, 2024
@mui-bot
Copy link

mui-bot commented Feb 13, 2024

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a17a848

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 14, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 14, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 20, 2024
Signed-off-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 20, 2024
Copy link

netlify bot commented Feb 26, 2024

Deploy Preview for resonant-twilight-4b0c91 ready!

Name Link
🔨 Latest commit 31625b8
🔍 Latest deploy log https://app.netlify.com/sites/resonant-twilight-4b0c91/deploys/65dd07e83bf00a0008e47377
😎 Deploy Preview https://deploy-preview-41084--resonant-twilight-4b0c91.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@danilo-leal danilo-leal marked this pull request as ready for review February 27, 2024 11:33
Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

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

I'm wondering with this new design if it would make sens to remove the collapse

Copy link
Contributor

@zanivan zanivan left a comment

Choose a reason for hiding this comment

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

Cool! Just one comment—not so related to the change itself, however it's an opportunity to polish this out:

Screenshot 2024-02-27 at 10 51 39

I reckon the box-shadows could be softened a bit here, mostly in the dark theme. It'd be more consistent with the light mode, and look less muddy in the borders.

I tried this tiny tweak:

 boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${alpha(theme.palette.primaryDark[900], 0.5, )} 0 -2px 1px inset, ${theme.palette.common.black} 0 1px 2px 0`,`

And it looked better IMO:
Screenshot 2024-02-27 at 10 44 48

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 27, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 27, 2024
@danilo-leal
Copy link
Contributor Author

@alexfauquette little bump here; when you have the time! :)

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

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

Looks good 👍

@danilo-leal danilo-leal merged commit b58dbbf into mui:master Mar 6, 2024
22 checks passed
@danilo-leal danilo-leal deleted the docs-infra-improve-tabs-and-layout-selection branch March 6, 2024 12:26
cipherlogs pushed a commit to cipherlogs/material-ui that referenced this pull request Mar 8, 2024
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Mar 8, 2024
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 scope: docs-infra Specific to the docs-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants