search

taiga-family / taiga-ui

Angular UI Kit and components library for awesome people
https://taiga-ui.dev
Apache License 2.0
3.3k stars 465 forks source link

🚀 - `Drawer` should not define content styles #9680

Open hakimio opened 3 weeks ago

hakimio commented 3 weeks ago

Description

When migrating from the old Sidebar to the new Drawer component I've noticed that the new component forces content styles on you. Now in order to customize content CSS you have to use ::ng-deep on the .t-content element. This is an issue not only if you want custom paddings, but also if you want custom background or custom content height (ie 100%).

I would suggest making .t-content into display: contents kind of element and let users supply their own content styles instead.

waterplea commented 3 weeks ago

We want it to follow our design specs out of the box but be easily customizable. Maybe we can move padding to host element and then compensate it with negative margins on header and footer? I assume if you want custom padding, you are not using header + footer? Alternatively to negative margins we can use box-shadow to cover content when header is sticky and some of the content might stick out to the padding area.

hakimio commented 3 weeks ago

No, I am not using header and footer. Negative margin workaround works for me.

waterplea commented 3 weeks ago

Would you like to make a PR to speed it up?

hakimio commented 3 weeks ago

I can do it.

hakimio commented 2 weeks ago

Unfortunately, the simple trick with negative margins doesn't work because of the scrollbar:

Image

Feel free to look into this when you have some time.

waterplea commented 2 weeks ago

Ok, but that's not going to be soon because I'll be away for a few weeks

hakimio commented 2 weeks ago

That's ok, it's not a major issue.