Borders & shadows on dropdowns - Minimalist Skin 7

[amilica]

Heyy!

This proposal concerns dropdowns and their borders and shadows.

While they look quite okay at the moment, I think that they could be a bit improved by having no borders on them and a blurrier shadow.

Current Dropdown look

On the Iceberg theme:

On the Darkly theme:

Change in Dropdowns

On the Iceberg theme: (the change simplifies the UI of the dropdown without losing the contrast between the dropdown and the background elements)

On the Darkly theme (the change is minimal on dark themes):

CSS change for dropdowns

Proposal vs Bootstrap 5

While Bootstrap 5 chose to go full flat style on every UI component, as well as dropdowns, I believe shadows should stay when it comes to modals, dropdowns and pop-ups because they should feel like they go a level up from the level the rest of the UI is at.

This is how Bootstrap 5’s dropdowns look:

What do you think?

[CharpentierLucas]

For reference, here is the styles for .dropdown-menu before those changes:

So if I understand well, those are the changes on .dropdown-menu:

• Removed both border values

Is there a change made on the shadows? What is the value you would pick instead of the current one?

Thank you for this proposal

[amilica]

@CharpentierLucas

Is there a change made on the shadows? What is the value you would pick instead of the current one?

Oops, yes, there was actually, I pasted the wrong printscreen. Will modify it in the the initial post as well:

The shadow was changed to:

box-shadow: 0 6px 24px rgba(0, 0, 0, 0.175);

[mleduc]

hi @amilica. Thanks for the proposal.

Can you point out the visual differences we are expected to see?
I could see the border being removed, and the shadow being slightly “larger”, bother changes are very subtle change for the light theme, and can’t be seen with a dark them.

Did I miss something?

[amilica]

@mleduc

I could see the border being removed, and the shadow being slightly “larger”, bother changes are very subtle change for the light theme, and can’t be seen with a dark them.

The changes are pretty subtle, yes. Compared to the other stuff I’ve posted, this change is not as impactful, for sure. I thought: if we can do easy small & quick improvements to the UI, why not do them?

Personally, I always disliked the border on the dropdown menu and never seen its purpose (maybe I’m missing something and there actually is a purpose).

[mleduc]

@amilica

The changes are pretty subtle, yes. Compared to the other stuff I’ve posted, this change is not as impactful, for sure. I thought: if we can do easy small & quick improvements to the UI, why not do them?

Thanks for confirming
+1 for this change then!

[tmortagne]

+1 for the change

[amilica]

Great, thanks so much!

[surli]

I think I’m -0 for this change. When looking on the screenshot I slightly prefer the old version with the border and a bit less shadow, I do like the clear separation of the box it makes. On the proposal I feel it’s less separated against the white background.

[surli]

Actually I just noticed that your proposal concerns all dropdowns but the screenshot only shows the effect on notification dropdown. It would be nice to see what happens for the “More action” menu dropdown for example. Or the advanced edit dropdown.

[MichaelHamann]

@surli

Actually I just noticed that your proposal concerns all dropdowns but the screenshot only shows the effect on notification dropdown. It would be nice to see what happens for the “More action” menu dropdown for example. Or the advanced edit dropdown.

I just manually tried removing the border from the edit dropdown and this looks weird to me as the buttons still have borders which creates quite an inconsistency. Could you maybe provide a screenshot with your exact proposed changes? To me, what Bootstrap 5 proposes would look a lot more consistent as these dropdowns are basically a list of buttons.

Now, notifications are different and I wouldn’t object to removing the border from the dropdowns that are launched from the top bar. So +0 for removing the border from the dropdowns that expand from the top bar but -0 for removing the border from other dropdowns that are launched from buttons like the “More Actions” dropdown.

[mleduc]

I’ve opened a PR to apply the change on the dropdown of the header only XWIKI-21550: Remove the border and increase the shadown of the header dropdowns by manuelleduc · Pull Request #2607 · xwiki/xwiki-platform · GitHub
As the agreement is rather weak, there is still time to give you opinion.
Thanks

[amilica]

Thank you for working on this and sorry for the delay in reply!

While I like the look of the dropdown coming from the navbar without borders, I think it’s more important to stay cohesive (especially in the context of bordered buttons). Based on the feedback provided by others here, I think the only improvement than can be done right now is making the shadows a little lighter and blurrier, but still keeping the borders as they are.

I modified the following properties of the dropdown-menu class as:

-webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

A preview (the change is minimal, but I think it looks slightly better):

You can see how the menus look in my instance.

October News - XWiki