Tab panel hidden state can be broken by adjusting display

[damyanpetev]

Description

If you attempt to adjust the display property on a tab panel it'll override the built-in [hidden] styling. For example if you want to setup layout for multiple elements in the panel and go igc-tab-panel { display: flex; } that will override the hidden and all panels will be visible all the time, breaking the tabs really.

Steps to reproduce

1. Apply display: x to any tab panel in tabs with more than one
   OR
2. Open https://codesandbox.io/s/polished-architecture-6sznf2?file=/src/index.css
3. Inpect the tabs

Result

Hidden doesn't do much anymore and all panels are visible:

Expected result

Sample is taken from https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tabs#alignment so with this level of content I'd expect it to look just the same

There's already a :host(:not([hidden])) applying the default display block (which is fine) and I think this is one of those spots where a style for :host[hidden] with display none and !important would make sense.

PS: Angular's themes have this as well, likely for a similar reason https://github.com/IgniteUI/igniteui-angular/blob/72b65610d26823e8950fb8891e3503317f750387/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss#L93-L95

[desig9stein]

I am not sure that we expect users to override our styles, they can have a wrapping element inside the panel and apply any display property to achieve any layout. However, if the user really wants to override the default display this can be done using this selector igc-tab-panel:not([hidden]) {display: flex;}

Example

[simeonoff]

@desig9stein The solution is to set !important to the display property in the Shadow DOM stylesheet.