refactor(progressbar): Animate the value change using CSS counters and custom CSS props #1492
Conversation
…ation BREAKING CHANGE: floating numbers are not supported with this implementation.
…y have a default from the scss
…the tests and add new ones.
- refactor the base spec - update the value for screen reader in _updateARIA - move the variables form host to the base element - optimize the styles - change the indeterminate animation for the fluent theme
Removed base test module.
src/components/progress/themes/circular/shared/circular.progress.common.scss
Outdated
Show resolved
Hide resolved
| } | ||
|
|
||
| :host-context([dir='rtl']), |
There was a problem hiding this comment.
As far as I am aware, this does not yet work in Safari and Firefox?
There was a problem hiding this comment.
They don't support it and AFAIK they have no plans to ever do. Also, it does not correctly handles auto and inherited values.
:dir is the one which should be used here.
There was a problem hiding this comment.
@desig9stein This should be fixed.
| @@ -13,13 +13,13 @@ $theme: $bootstrap; | |||
| font-weight: 700; | |||
| } | |||
|
|
|||
| [part~='svg'][part~='indeterminate'] { | |||
| [part='svg indeterminate'] { | |||
There was a problem hiding this comment.
Are you sure that these are the only parts that can be applied to this element? As soon as any other part is applied the styles will stop working.
There was a problem hiding this comment.
@desig9stein This is also not addressed.
| } | ||
| } | ||
|
|
||
| :host-context([dir='rtl']), |
There was a problem hiding this comment.
Again, if this doesn't work in all browsers, we can't rely on it.
src/components/progress/themes/linear/linear.progress.base.scss
Outdated
Show resolved
Hide resolved
| } | ||
|
|
||
| :host-context([dir='rtl'])[indeterminate], |
src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss
Outdated
Show resolved
Hide resolved
src/components/progress/themes/linear/shared/linear.progress.common.scss
Outdated
Show resolved
Hide resolved
|
@desig9stein check the review comments. |
- remove the --linear-animation-duration: 3000ms from fluent theme since we expos property on the component and the user is able to change the value.
| } | ||
|
|
||
| :host-context([dir='rtl']), |
There was a problem hiding this comment.
@desig9stein This should be fixed.
…ss.indigo.scss Co-authored-by: Simeon Simeonoff <[email protected]>
closes #1441