NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.86k stars 3.91k forks source link

Dropdown menu-item icons and tabs titles don't have spacing anymore #6909

Open IonelLupu opened 3 years ago

IonelLupu commented 3 years ago

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-g7dq1r?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

For the dropdown problem: create a Dropdown where menu items contain an icon. For the tabs problem: create a tabset with tabs that contain a simple title

What is expected?

For Dropdowns: It is expected that icons in the dropdown menu items to have a margin-right space just like in previous NGZorro versions For Tabs: It is expected that tab items have a padding left and right just like in previous NGZorro versions

What is actually happening?

In NGZorro 12 the margin-right for icons in dropdown menu-items is 0 and the tab items don't have any left and right padding in their title making them too close to the container

Environment Info
ng-zorro-antd 12.0.1
Browser *

I also noticed that now, the menu-item is display: flex and the tabs title are display: flex as well. Maybe this is an Ant design update and the solution might be adjusting the theme (I am not sure). What would be the correct solution to this? Is this the correct behaviour: dropdown menu items with icons to not have a space between them and the text. And tabs titles to not have padding left and right?

IonelLupu commented 3 years ago

bump. I can submit a PR if someone can point me where to do the changes

IonelLupu commented 3 years ago

I also see that Ant Design V4 removed this space as well:

Here is before (Ant Design V3): https://stackblitz.com/edit/react-cfqbgv Here is after (Ant Design V4): https://stackblitz.com/edit/react-s9byc8?file=index.js

I posted a discussion on their repo to see what they have to say about it. I think V3 looks better than V4

IonelLupu commented 3 years ago

I also posted an issue on Ant design and they have a solution to the problem: the menu item component has an icon attribute that can be used to add an icon in the left side of the menu title.

I think we need to add this feature on Ng Zorro as well.

What do you think?

Alegiter commented 2 years ago

+ 1