Star Rating

[louismaximepiton]

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 #917

DoD

Development

• Should match specs (eg. either the Web UI Kit or any pattern from the WAI — or both…)
• Docs added:
  • including the "Sass" part using scss-docs shortcode
  • in /about/overview/#custom-components if it is a new Orange custom component
  • in /gettings-started/introduction/#components if it is a new Orange custom component that requires JavaScript (and Popper)
  • in /customize/overview#csps-and-embedded-svgs if it is a new Orange custom component that includes embedded SVGs in our CSS
  • in /forms/validation/?#supported-elements if it is a new Orange custom component that is a form control
  • in /forms/overview/ if it is a new Orange custom component that is a form control
• Check (and fix) RTL version
• Run linters
• Run compilers
• Tests added for JS-side
• Run tests
• Cross-browser test:
  • Firefox ESR
  • Latest Edge, Chrome, Firefox, Safari
  • iOS Safari
  • Chrome & Firefox on Android
• Clean up the branch using rebase -i
• Commited with feat(…): … message
• Mention it in Migration Guide (if back-from-v4): renamed variables, changes in markup requirement, etc.

Reviews

• Code review
• A11y review
• Design review

---

In order to import everything in forms but star rating system, please comment the last line.

@import "../../Orange-Boosted-Bootstrap/scss/functions";

@import "../../Orange-Boosted-Bootstrap/scss/variables";
@import "../../Orange-Boosted-Bootstrap/scss/maps";
@import "../../Orange-Boosted-Bootstrap/scss/mixins";
@import "../../Orange-Boosted-Bootstrap/scss/root";

@import "../../Orange-Boosted-Bootstrap/scss/helpers/visually-hidden";
@import "../../Orange-Boosted-Bootstrap/scss/forms/form-check";
@import "../../Orange-Boosted-Bootstrap/scss/forms/form-control";
@import "../../Orange-Boosted-Bootstrap/scss/forms/form-range";
@import "../../Orange-Boosted-Bootstrap/scss/forms/form-select";
@import "../../Orange-Boosted-Bootstrap/scss/forms/form-text";
@import "../../Orange-Boosted-Bootstrap/scss/forms/input-group";
@import "../../Orange-Boosted-Bootstrap/scss/forms/labels";
@import "../../Orange-Boosted-Bootstrap/scss/forms/validation";
@import "../../Orange-Boosted-Bootstrap/scss/forms/star-rating";

[julien-deramond]

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".

[Franco-Riccitelli]

Hi, Here are my design comments.

• For the large version, reduce the spacing between the stars by 2px.
• For the small version, reduce the spacing between the stars by 1px.

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

[louismaximepiton]

Hi, I modified some things to fit your comment @Franco-Riccitelli.

However, the orange star on focus will be hard to implement with the actual version. I think that it'll be easier for each project to implement it if they want so.

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);
      }
    }
  }

[julien-deramond]

Sounds good to me after the latest modifications, the a11y and design reviews 🚀