Indigo Themes: Updates to Toast, Tooltip, Stepper, Rating

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

568 stars 159 forks source link

Indigo Themes: Updates to Toast, Tooltip, Stepper, Rating #14380

Open simeonoff opened 2 weeks ago

simeonoff commented 2 weeks ago

Closes #

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

simeonoff commented 2 weeks ago

@SisIvanova @desig9stein Please fix this warning:

AnjiManova commented 1 week ago

Toast

All themes issue: The top and bottom positions of the Toast shouldn't be aligned to the edges. If we need to define some margins, please don't hesitate to let us know. Also, if these definitions come from the end user, then the comment is not relevant, but at least we could apply some margins in the demos.

The component's minimum width doesn't come from us. For now, 3.25rem works well, but in the future, some changes might be suggested from our side.

The border is now outside the component, which causes it to be different in height from the one in the kit.

AnjiManova commented 1 week ago

Tooltip

Dark and Light Mode: The background colors are correct, but the opacity (90%) needs to be added based on the Indigo styles provided.

AnjiManova commented 1 week ago

Rating should be validated in WebC first.

Currently, the label in Angular is overridden; for some reason, the correct style is applied in WebC, but it is not reproduced here. Based on what Marin said, the rating in Angular is somehow integrated from WebC. First, we should review the component there, and the changes will be represented in Angular.

There are sizes for the symbols provided in the kit, which are - small -18x18; medium - 24x24 (default one) @andiesm813 confirm this pleases; and large - 30x30 (mentioning this because in WebC are applied correctly, only the default size should be changed after confirmation)

AnjiManova commented 1 week ago

Stepper

Hover to all steps in Light Mode is grays.900 with 5% opacity.

WIP - more comments will be added

SisIvanova commented 1 week ago

Tooltip

Dark and Light Mode: The background colors are correct, but the opacity (90%) needs to be added based on the Indigo styles provided.

Fixed in the theming PR - https://github.com/IgniteUI/igniteui-theming/pull/284/commits/607132c72e4f0f433043db17e09003d2fbfbd6b1 You will see the change here once we update the theming package version.

desig9stein commented 1 week ago

Stepper

Hover to all steps in Light Mode is grays.900 with 5% opacity.

WIP - more comments will be added

To clarify the color is 900 with 0.05% opacity, if it is 0.5% it looks way darker from what we have in the UI kit.

imincheva commented 1 week ago

Stepper Hover to all steps in Light Mode is grays.900 with 5% opacity. WIP - more comments will be added

To clarify the color is 900 with 0.05% opacity, if it is 0.5% it looks way darker from what we have in the UI kit.

@desig9stein grays.900 5% is the same as grays.900 0.05, yes. The example you showed is correct.

andiesm813 commented 1 week ago

@SisIvanova @desig9stein i am still seeing this error and not able to run the samples :(

simeonoff commented 6 days ago

@SisIvanova @desig9stein i am still seeing this error and not able to run the samples :(

Should be good now after you git pull and npm install.

imincheva commented 6 days ago

Stepper

Min-height of the vertical lines should be 24px
The Content should be Body 2.
The Title on Current step should be Subtitle 2.

Light Mode

In Invalid state the Title should be grays.900 and the Subtitle should be grays.700. This is applicable for all states - Idle, Hover, Focused

Dark Mode

In Invalid state the Title should be white and the Subtitle should be white 80% opacity. This is applicable for all states - Idle, Hover, Focused
Subtitle should be white 80% in all states - Complete, Incomplete, Invalid and Current, except for disabled. Applies for idle, hover, focused.
Title should be white in all states - Complete, Incomplete, Invalid and Current, except for disabled. Applies for idle, hover, focused.
Indicator in Current step should be white. Applies for idle, hover, focused
Indicator in Invalid step should be white. Applies for idle, hover, focused

desig9stein commented 6 days ago

Stepper

Min-height of the vertical lines should be 24px

The Content should be Body 2.

The Title on Current step should be Subtitle 2.

Light Mode

In Invalid state the Title should be grays.900 and the Subtitle should be grays.700. This is applicable for all states - Idle, Hover, Focused

Dark Mode

In Invalid state the Title should be white and the Subtitle should be white 80% opacity. This is applicable for all states - Idle, Hover, Focused

Subtitle should be white 80% in all states - Complete, Incomplete, Invalid and Current, except for disabled. Applies for idle, hover, focused.

Title should be white 80% in all state - - Complete, Incomplete, Invalid and Current, except for disabled. Applies for idle, hover, focused.

Indicator in Current step should be white. Applies for idle, hover, focused

Indicator in Invalid step should be white. Applies for idle, hover, focused

@imincheva All issues should be fixed, wait for new theming beta to test

imincheva commented 6 days ago

Stepper/All themes In the UI kits, the Content is visually aligned to the Title and Subtitle on the vertical steps, while in the implementation this is not the case. Not sure if this can be fixed and if it can, maybe it's a better idea to make it for all themes in a new PR.

andiesm813 commented 6 days ago

TOAST & TOOLTIP Both look good to me 👌✅✅

andiesm813 commented 6 days ago

RATING Should i be seeing the same "rating" as the Web C. right now @desig9stein ? I already reviewed the Web Components' version and it was all good. If this one comes from there, then it should be good too.

desig9stein commented 5 days ago

RATING Should i be seeing the same "rating" as the Web C. right now @desig9stein ? I already reviewed the Web Components' version and it was all good. If this one comes from there, then it should be good too.

In theory, it should look the same :), but you can't test it for now, once the web components PR is merged we will update the version of the webC in angular, and then it can be tested.

imincheva commented 5 days ago

Stepper/All themes In the UI kits, the Content is visually aligned to the Title and Subtitle on the vertical steps, while in the implementation this is not the case. Not sure if this can be fixed and if it can, maybe it's a better idea to make it for all themes in a new PR.

@desig9stein I just saw the WebC PR for the Stepper and this is fixed already. Can you fix this here as well? I'll log a separate issue for the other themes.

AnjiManova commented 4 days ago

Stepper

Min-width of the horizontal lines should be 40px - it is already added in WebC so it should be applied here as well