-
Notifications
You must be signed in to change notification settings - Fork 56
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
Star Rating #887
Star Rating #887
Conversation
Signed-off-by: louismaximepiton <[email protected]>
Signed-off-by: louismaximepiton <[email protected]>
Signed-off-by: louismaximepiton <[email protected]>
a7eeab5
to
466e59b
Compare
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.
Even if it is placed in the documentation in "Forms", I'm wondering if we shouldn't be able to load it on demand. Not every projects would want to have this "component".
Signed-off-by: louismaximepiton <[email protected]>
Signed-off-by: louismaximepiton <[email protected]>
…Source/Orange-Boosted-Bootstrap into main-lmp-star-rating
Hi, Here are my design comments.
Regarding the behaviour, now I've seen it working with the state changes, I think it would be better if the pressed state changes to orange. I appreciate this is different to what is specified in the Sketch artboards. Thanks |
Signed-off-by: louismaximepiton <[email protected]>
Signed-off-by: louismaximepiton <[email protected]>
Hi, I modified some things to fit your comment @Franco-Riccitelli.
The orange star is possible with the following code. However, it won't be implemented because it adds too much css only for a little change + the overrride of browsers native behavior isn't wanted here. .star-rating {
...
&:active {
& input + label{
@include form-star-rating($accessible-orange);
}
> input:checked ~ label {
@include form-star-rating($gray-500);
}
> input:checked + label {
@include form-star-rating($accessible-orange);
}
> input:active ~ label {
@include form-star-rating($gray-500);
}
> input:active + label {
@include form-star-rating($accessible-orange);
}
}
} |
Signed-off-by: louismaximepiton <[email protected]>
Signed-off-by: louismaximepiton <[email protected]>
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.
Sounds good to me after the latest modifications, the a11y and design reviews 🚀
Adding feature #61 to Boosted v5.
Preview: https://deploy-preview-887--boosted.netlify.app/docs/5.1/forms/checks-radios/#star-rating
Didn't know where to put disabled state of this component.
Dark version of this component may be removed with the resolution of #917DoD
Development
scss-docs
shortcodeTests added for JS-sideRun testsrebase -i
feat(…): …
messageMention it in Migration Guide (ifback-from-v4
): renamed variables, changes in markup requirement, etc.Reviews
In order to import everything in forms but star rating system, please comment the last line.