search

ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
92.55k stars 49.85k forks source link

Tooltips in the inline menu doesn't have a consistent design in collapsible state #50721

Open phaseur opened 2 months ago

phaseur commented 2 months ago

What problem does this feature solve?

When the inline menu is collapsed, we can see a very different design between tooltip for single title, and tooltips to show children of a menu. Ideally, design should look the same (at the moment we can see a black backgrounded tooltip for single item and white backgrounded modal for multiple children or one child).

We can see a much better behavior on vertical menu, but they are not collapsible and we can't expand children on the list using this type of menu. The tooltips are more consistent.

This will solved misleading consistency for users, where for a same menu you can have 2 totally different tooltips.

What does the proposed API look like?

I think components are already created and present on the library. It's just a matter of exposing the right components at the right place to ensure consistency on what the end user is going to see on screen.

afc163 commented 2 months ago

I don't realy understand which is the two different design of tooltip, could you put some screenshots?

phaseur commented 2 months ago

Antd docs example is using dark mode, but let's say we are in light mode and the menu is light.

The tooltip to show a single item will look like this in light mode/inline-menu:

Screenshot 2024-09-05 at 15 38 51

For multiple children we will have the same with white background:

Screenshot 2024-09-05 at 15 38 57

Ideally, we should have something like the vertical menu all the time in light mode, even if there is only one item to show on the tooltip to ensure consistency

Screenshot 2024-09-05 at 15 39 10
afc163 commented 2 months ago
image

This is a tooltip indicator of Menu Item when it's content has been collapsed.

image

This is a submenu, those two are different components actually.

phaseur commented 2 months ago
image

This is a tooltip indicator of Menu Item.

image

This is a submenu, those two are different components.

That's what I'm saying. Let's say you are using the light mode. The user will see the first tooltip with black background, and then the submenu with a white background + it's a different component. Ideally the tooltip indicator should look like you have one submenu. Because if we have one submenu, then it's showing only one element differently than the tooltip. I think it's a bit weird for the end user to have such kind of differences