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.

Sign up for GitHub

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

Jump to bottom

[joy-ui][docs] Add UI improvements to the side navigation demo #41461

Merged
merged 14 commits into from Mar 13, 2024
Merged

[joy-ui][docs] Add UI improvements to the side navigation demo #41461

merged 14 commits into from Mar 13, 2024

Conversation

cipherlogs
Copy link
Contributor

@cipherlogs cipherlogs commented Mar 12, 2024 •
edited by danilo-leal

Several enhancements to the side navigation in this pull request.

https://deploy-preview-41461--material-ui.netlify.app/joy-ui/main-features/color-inversion/#side-navigation

Here’s a concise overview:

1. Fixing IconButton Interactions:

  • Resolved issues related to light and dark mode interactions.
  • Improved consistency across both color schemes.

2. Avatar Interaction Enhancement:

  • When an Avatar contains a picture, all icon button properties are now accessible.
  • Before the only remaining visual cue is the cursor pointer, which indicates that the avatar is clickable, now all iconbutton behaviour is inherited.

3. Specific Fixes and Modifications:

  • Corrected distortion in the plus icon button.

Screenshot Capture - 2024-03-12 - 11-16-40

  • Enhanced visual separation between the right and left sidebars, especially noticeable when switching color schemes.

Before
Screenshot Capture - 2024-03-11 - 21-59-14

After
Screenshot Capture - 2024-03-11 - 21-59-47

  • Ensured consistency in the select menu colors.
    Before

Screenshot Capture - 2024-03-12 - 11-18-14

After
Screenshot Capture - 2024-03-12 - 11-18-45

Other changes are explained withing each commit message.

@cipherlogs
[joy-ui][docs] Optimize side navigation's relative contrast
e41b24f 
The right sidebar has been updated to the ‘solid’ variant for improved interaction with IconButtons.
It is now darker than the left sidebar, creating better relative contrast and lifting the left
sidebar higher on the screen. Additionally, the styles are consistent whether in light or dark mode,
addressing previous issue where the right sidebar appeared higher/lower based on the color
scheme.
@cipherlogs
[joy-ui][docs] Fix Side navigation IconButton interaction issues.
3673658 
1. **Avatar Visibility Improvement:** Previously, when the avatar contained a picture, the interaction was hidden. But now, it's fixed, You’ll see the hover, active, and all the props
that we expect from a button. (tested on dark/light mode).

2. **Plus Icon Enhancement:** The plus icon shape used to look distorted. We’ve standardized the size for all icon buttons in the right sidebar. Additionally, we’ve ensured that they are neatly aligned using align-items.
@cipherlogs
[joy-ui][docs] Unify the rest of the right sidebar IconButtons
75dc7b4
@cipherlogs
Remove solid variant ring color from all badges
a2aadd7
@cipherlogs
Make color success global to all badges withing the right sidebar
a14ea41 
If there are several users online, it’s a good idea to use the color ‘success’ for all badges with `color="success"`.

ps: the badgecolorsuccess import was removed, it isn't needed.
@cipherlogs
Fix the chip color clash inside the left sidebar
f99e023
@cipherlogs
Fix Select placeholder styling
11d8026
@cipherlogs
Change Select to soft and unifty its styling with the rest of the UI
3c1e74d
@cipherlogs
remove redundant props
cc98476
@cipherlogs
Apply pnpm prettier
6a1dc6a
@mui-bot
Copy link

mui-bot commented Mar 12, 2024 •
edited

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2f4468a

@zannager zannager added docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy labels Mar 12, 2024
danilo-leal
danilo-leal reviewed Mar 12, 2024
View reviewed changes
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.

Great PR — thanks for refining this further! My comments are mostly just fine-tuned tweaks. 😃

docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Outdated Show resolved Hide resolved
docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Outdated Show resolved Hide resolved
docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Outdated Show resolved Hide resolved
docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Show resolved Hide resolved
docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Outdated Show resolved Hide resolved
docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Outdated Show resolved Hide resolved
docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js Outdated Show resolved Hide resolved
@danilo-leal danilo-leal changed the title [joy-ui][docs] Refactoring and UI Improvements for Side Navigation [joy-ui][docs] Add UI improvements to the side navigation demo Mar 12, 2024
@danilo-leal danilo-leal added the design This is about UI or UX design, please involve a designer label Mar 12, 2024
@cipherlogs
Copy link
Contributor Author

Thank you, @danilo-leal I’ve applied all the modifications except for '--IconButton-size': '3rem'.

When --IconButton-size is the same as the Avatar size, the avatar hides all of the IconButton interactivity, like "hover, active, click" etc. the only thing that's left is the pointer cursor.

Don't you think that the IconButton should be capable of handling this matter? Should I open an issue for that, because Material UI's item button is capable of wrapping around bigger/same size element while keeping all the button interactivity visible.

if --IconButton-size: "3rem" is removed, we won't have the following:

normal state:

Screenshot Capture - 2024-03-12 - 15-13-31

hover state:

Screenshot Capture - 2024-03-12 - 15-13-42

active state:

Screenshot Capture - 2024-03-12 - 15-13-58

Minor changes

I made a small change to the Plus Icon and the palette icon. They now have the text.tertiary color to blend well with the background. I also removed the aria-label from the plus icon button and wrapped it with a Tooltip. This helps users understand the button’s purpose and automatically adds an aria-label(win-win).

danilo-leal
danilo-leal approved these changes Mar 13, 2024
View reviewed changes
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.

Looking great! Agree with your point there about Joy's Icon Button; an issue would be appreciated, even though we might take a while to get to it :)

@danilo-leal danilo-leal enabled auto-merge (squash) March 13, 2024 12:51
@danilo-leal danilo-leal merged commit 85e709f into mui:master Mar 13, 2024
18 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danilo-leal danilo-leal danilo-leal approved these changes

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

Assignees
No one assigned
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@cipherlogs @mui-bot @danilo-leal @zannager