-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(rating): enhance component's interactivity states #11469
base: dev
Are you sure you want to change the base?
feat(rating): enhance component's interactivity states #11469
Conversation
…ciado88/10015-rating-enhance-component-interactivity-states
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aside from a few comments, code changes LGTM!
"--calcite-rating-color-press": { | ||
shadowSelector: `.${CSS.star}`, | ||
targetProp: "color", | ||
state: { press: { attribute: "class", value: CSS.star } }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The object argument to state.press
is deprecated. Use a selector instead (see example).
@@ -5,7 +5,8 @@ | |||
* | |||
* @prop --calcite-rating-spacing-unit: [Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item. | |||
* @prop --calcite-rating-spacing: Specifies the amount of left and right margin spacing between each item. | |||
* @prop --calcite-rating-color-hover: Specifies the component's item color when hovered or selected. | |||
* @prop --calcite-rating-color-hover: Specifies the component's item color when hovered. | |||
* @prop --calcite-rating-color-press: Specifies the component's item color when active. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+@geospatialem @DitwanP @matgalla for CSS prop doc review.
@@ -70,7 +77,7 @@ | |||
|
|||
.hovered, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is .hovered
still applicable here? It seems like it might be overridden above.
@ashetland @SkyeSeitz Can you please take a look? 👀 |
Related Issue: #10015
Summary
fill
on:hover
.--calcite-color-brand-hover
on:hover
.--calcite-color-brand-press
on:active
.--calcite-rating-color-press
css token.