Banner - add themes styling

IgniteUI / igniteui-webcomponents

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

https://www.infragistics.com/products/ignite-ui-web-components

Other

113 stars 2 forks source link

Banner - add themes styling #1217

Closed desig9stein closed 1 month ago

desig9stein commented 1 month ago

closes #1174

imincheva commented 1 month ago

Bootstrap:

Min-width 320px hasn't been applied. Relevant for all themes.
Not sure about this, but I believe the divider is adding up to the total height. It should be inside like it was implemented for the Nav Drawer.
In Dark Mode the background is missing. It should be surface. The variable --banner-background seems to be inactive

Text and Icon in Dark Mode should be grays.800, not 600

imincheva commented 1 month ago

Indigo:

Min-width 88px of the button is missing. In the UI kits this hasn't been implemented yet, but in both implementation it's been implemented for all themes, except for Indigo. Maybe you should discuss this with @andiesm813 as well
I believe the border is adding up to the total height. It should be inside, similar to how it was implemented for the Nav Drawer.
Same as all themes, min-width 320px on the whole banner hasn't been applied

sbayreva commented 1 month ago

Fluent

The min width of the banner should be 320px
The same comment for the divider from Bootstrap - "Not sure about this, but I believe the divider is adding up to the total height. It should be inside like it was implemented for the Nav Drawer"
There should be background in the Dark Mode - surface

imincheva commented 1 month ago

Bootstrap

Min-width should be applied on the WHOLE Banner, not only on the message (relevant for all themes)
Banner-message-color in Dark Mode is still grays.600, not 800 like mentioned in the previous comment

sbayreva commented 1 month ago

Fluent

The min width of the banner should be 320px

The same comment for the divider from Bootstrap - "Not sure about this, but I believe the divider is adding up to the total height. It should be inside like it was implemented for the Nav Drawer"

There should be background in the Dark Mode - surface

Min width 320px should be applied to the whole banner
Applied
Applied

AnjiManova commented 1 month ago

Material

the banner border color should be grays.300 in both Dark and Light

sbayreva commented 1 month ago

Fluent

The min width of the banner should be 320px

The same comment for the divider from Bootstrap - "Not sure about this, but I believe the divider is adding up to the total height. It should be inside like it was implemented for the Nav Drawer"

There should be background in the Dark Mode - surface

Min width 320px should be applied to the whole banner

Applied

Applied

Everything from the comment is applied.