Banner: Update the theme to reflect the latest designs in the UI kit

IgniteUI / igniteui-angular

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.

https://www.infragistics.com/products/ignite-ui-angular

Other

569 stars 159 forks source link

Banner: Update the theme to reflect the latest designs in the UI kit #14264

Closed desig9stein closed 1 month ago

desig9stein commented 1 month ago

Closes https://github.com/IgniteUI/igniteui-webcomponents/issues/1174

Additional information (check all that apply):

[ ] Bug fix
[ ] New functionality
[ ] Documentation
[ ] Demos
[ ] CI/CD

Checklist:

[ ] All relevant tags have been applied to this PR
[ ] This PR includes unit tests covering all the new code (test guidelines)
[ ] This PR includes API docs for newly added methods/properties (api docs guidelines)
[ ] This PR includes feature/README.MD updates for the feature docs
[ ] This PR includes general feature table updates in the root README.MD
[ ] This PR includes CHANGELOG.MD updates for newly added functionality
[ ] This PR contains breaking changes
[ ] This PR includes ng update migrations for the breaking changes (migrations guidelines)
[ ] This PR includes behavioral changes and the feature specification has been updated with them

imincheva commented 1 month ago

Bootstrap

Same as in WebC the divider is adding up to the height of the Banner
The default size should be medium (ignore if irrelevant)
Banner-actions div should take the height from the nested buttons and shouldn't be fixed to 40px

sbayreva commented 1 month ago

Fluent

The height of the message container and the actions container here is 40px in all sizes. The size of theses containers should corresponds with the size of the used buttons ( small - 24px; medium -32px; large- 38px) as in Web Components.
The divider is adding up to the total height. It should be inside like it was implemented for the Web Components. Example from Angular:

AnjiManova commented 1 month ago

Material

same comments like Fluent and Bootstrap (divider + div height) + Irinka's comment about the default density

imincheva commented 1 month ago

Indigo

Not sure what's the case here, but upon switching the size on the wrapper, the buttons and the icon inside the banner don't change their size. Not sure if this was communicated, but in WebC the icon and the buttons change their size.
Border is adding up to the total height of the Banner

sbayreva commented 1 month ago

Fluent

The height of the message container and the actions container here is 40px in all sizes. The size of theses containers should corresponds with the size of the used buttons ( small - 24px; medium -32px; large- 38px) as in Web Components.

The divider is adding up to the total height. It should be inside like it was implemented for the Web Components. Example from Angular:

Everything is applied!

imincheva commented 1 month ago

All themes

Icon and Buttons should be medium by default

desig9stein commented 1 month ago

@kdinev This PR introduces visual-breaking changes to the banner component in all themes. Please verify that you are okay with these changes before we merge the PR:

The changes are: -The default sizes of the action buttons and the icon have been adjusted. -Padding values have been modified. -Some colors have been updated. -A border-bottom has been added to all themes except indigo.

A min-width of 320px is added to the banner in all themes

kdinev commented 1 month ago

@desig9stein Could you just tell me which is the old and which is the new one?

desig9stein commented 1 month ago

@desig9stein Could you just tell me which is the old and which is the new one?

On the screenshot the new one has border-bottom