refactor(progress): update typography styles

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

refactor(progress): update typography styles #14377

Closed SisIvanova closed 1 week ago

SisIvanova commented 2 weeks ago

Closes #14350

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

SisIvanova commented 2 weeks ago

@imincheva Please verify the typography styles for all themes for both linear and circular progress bars as well as the size/width/height of the components.

imincheva commented 2 weeks ago

Linear Progress

Bootstrap

Stripes color opacity should be updated to 20% in both Light and Dark Mode
Stripes color in Dark Mode should be updated to grays.900 in Dark Mode

Circular Progress

There's a slight discrepancy, because the SVG size corresponds to the size of the component in the UI kits, but the circle elements inside are slightly smaller. IMO this is hardly noticeable, but I'm mentioning it, so we're on the same page.

Please note that the color update suggestions shouldn't necessarily be implemented in this PR. I'm mentioning them here, because I'm verifying the component as a whole.

imincheva commented 1 week ago

In addition to my previous comment, after the latest updates in the UI kits, the following changes need to be applied here as well:

Material

The size of the circular progress should be 32x32px and the typography should be:

Fluent

The circular progress typography should be:
Gap of 2px should be applied between the Linear Progress and its Value Label; The typography should be updated to Subtitle 2

SisIvanova commented 1 week ago

Linear Progress

Bootstrap

Stripes color opacity should be updated to 20% in both Light and Dark Mode

Stripes color in Dark Mode should be updated to grays.900 in Dark Mode

Circular Progress

There's a slight discrepancy, because the SVG size corresponds to the size of the component in the UI kits, but the circle elements inside are slightly smaller. IMO this is hardly noticeable, but I'm mentioning it, so we're on the same page.

Please note that the color update suggestions shouldn't necessarily be implemented in this PR. I'm mentioning them here, because I'm verifying the component as a whole.

The colors are fixed here https://github.com/IgniteUI/igniteui-theming/pull/296