refactor: Use BEM naming conventinon for CSS

.sass-lint.yml

@@ -3,9 +3,9 @@ files:
 options:
   formatter: stylish
 rules:
-  class-name-format: &class-name-format
+  class-name-format:
     - 2
-    - convention: ^(([A-Z][a-z]*)+$|(([A-Z][a-z]*)+|u|is|js)(-|--)([a-z]+([a-z]|[A-Z])*)+|(([A-Z][a-z]*)+|u|is|js)(-|--)([a-z]+([a-z]|[A-Z])*)+(--[a-z]+([a-z]|[A-Z])*)+)|[ng]-(\w)+(-(\w)*)*$
+    - convention: hyphenatedbem
   empty-line-between-blocks:
     - 2
     - ignore-single-line-rulesets: false
@@ -28,8 +28,12 @@ rules:
     - max-depth: 2
   no-ids: 2
   no-important: 2
-  placeholder-name-format: *class-name-format
+  placeholder-name-format:
+    - 2
+    - convention: hyphenatedbem
   quotes:
     - 2
     - style: single
-  variable-name-format: *class-name-format
+  variable-name-format:
+    - 2
+    - convention: hyphenatedlowercase

example/scss/index.scss

@@ -5,6 +5,6 @@
   width: 60%;
 }
 
-.InputRange {
+.input-range {
   margin-bottom: 10rem;
 }

src/js/input-range/default-class-names.js

@@ -12,16 +12,16 @@
 * @property {string} trackContainer
 */
 const defaultClassNames = {
-  component: 'InputRange',
-  labelContainer: 'InputRange-labelContainer',
-  labelMax: 'InputRange-label InputRange-label--max',
-  labelMin: 'InputRange-label InputRange-label--min',
-  labelValue: 'InputRange-label InputRange-label--value',
-  slider: 'InputRange-slider',
-  sliderContainer: 'InputRange-sliderContainer',
-  trackActive: 'InputRange-track InputRange-track--active',
-  trackContainer: 'InputRange-track InputRange-track--container',
-  disabled: 'is-disabled',
+  component: 'input-range',
+  disabled: 'input-range--disabled',
+  labelContainer: 'input-range__label-container',
+  labelMax: 'input-range__label input-range__label--max',
+  labelMin: 'input-range__label input-range__label--min',
+  labelValue: 'input-range__label input-range__label--value',
+  slider: 'input-range__slider',
+  sliderContainer: 'input-range__slider-container',
+  trackActive: 'input-range__track input-range__track--active',
+  trackContainer: 'input-range__track input-range__track--container',
 };
 
 export default defaultClassNames;

src/scss/input-range/_input-range-label-container.scss

@@ -1,8 +1,8 @@
-.InputRange-labelContainer {
+.input-range__label-container {
   left: -50%;
   position: relative;
 
-  .InputRange-label--max & {
+  .input-range__label--max & {
     left: 50%;
   }
 }

src/scss/input-range/_input-range-label.scss

@@ -1,25 +1,25 @@
-.InputRange-label {
-  color: $InputRange-label-color;
-  font-family: $InputRange-fontFamily;
+.input-range__label {
+  color: $input-range-label-color;
+  font-family: $input-range-font-family;
   font-size: 0.8rem;
   white-space: nowrap;
 }
 
-.InputRange-label--min,
-.InputRange-label--max {
+.input-range__label--min,
+.input-range__label--max {
   bottom: -1.4rem;
   position: absolute;
 }
 
-.InputRange-label--min {
+.input-range__label--min {
   left: 0;
 }
 
-.InputRange-label--max {
+.input-range__label--max {
   right: 0;
 }
 
-.InputRange-label--value {
+.input-range__label--value {
   position: absolute;
   top: -1.8rem;
 }

src/scss/input-range/_input-range-slider.scss

@@ -1,35 +1,35 @@
-.InputRange-slider {
+.input-range__slider {
   appearance: none;
-  background: $InputRange-slider-background;
-  border: $InputRange-slider-border;
+  background: $input-range-slider-background;
+  border: $input-range-slider-border;
   border-radius: 100%;
   cursor: pointer;
   display: block;
-  height: $InputRange-slider-height;
-  margin-left: $InputRange-slider-width / -2;
-  margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2;
+  height: $input-range-slider-height;
+  margin-left: $input-range-slider-width / -2;
+  margin-top: $input-range-slider-height / -2 + $input-range-track-height / -2;
   outline: none;
   position: absolute;
   top: 50%;
-  transition: $InputRange-slider-transition;
-  width: $InputRange-slider-width;
+  transition: $input-range-slider-transition;
+  width: $input-range-slider-width;
 
   &:active {
-    transform: $InputRange-slider--active-transform;
+    transform: $input-range-slider-active-transform;
   }
 
   &:focus {
-    box-shadow: 0 0 0 5px transparentize($InputRange-slider-background, 0.8);
+    box-shadow: 0 0 0 5px transparentize($input-range-slider-background, 0.8);
   }
 
-  .InputRange.is-disabled & {
-    background: $InputRange-slider--is-disabled-background;
-    border: $InputRange-slider--is-disabled-border;
+  .input-range--disabled & {
+    background: $input-range-slider-disabled-background;
+    border: $input-range-slider-disabled-border;
     box-shadow: none;
     transform: none;
   }
 }
 
-.InputRange-sliderContainer {
-  transition: $InputRange-sliderContainer-transition;
+.input-range__slider-container {
+  transition: $input-range-slider-container-transition;
 }

src/scss/input-range/_input-range-track.scss

@@ -1,25 +1,25 @@
-.InputRange-track {
-  background: $InputRange-track-background;
-  border-radius: $InputRange-track-height;
+.input-range__track {
+  background: $input-range-track-background;
+  border-radius: $input-range-track-height;
   cursor: pointer;
   display: block;
-  height: $InputRange-track-height;
+  height: $input-range-track-height;
   position: relative;
-  transition: $InputRange-track-transition;
+  transition: $input-range-track-transition;
 
-  .InputRange.is-disabled & {
-    background: $InputRange-track--is-disabled-background;
+  .input-range--disabled & {
+    background: $input-range-track-disabled-background;
   }
 }
 
-.InputRange-track--container {
+.input-range__track--container {
   left: 0;
-  margin-top: -0.5 * $InputRange-track-height;
+  margin-top: -0.5 * $input-range-track-height;
   position: absolute;
   right: 0;
   top: 50%;
 }
 
-.InputRange-track--active {
-  background: $InputRange-track--active-background;
+.input-range__track--active {
+  background: $input-range-track-active-background;
 }

src/scss/input-range/_input-range-variables.scss

@@ -1,26 +1,26 @@
-$InputRange-fontFamily: 'Helvetica Neue', san-serif !default;
-$InputRange-primaryColor: #3f51b5 !default;
-$InputRange-neutralColor: #aaaaaa !default;
-$InputRange-neutralLightColor: #eeeeee !default;
-$InputRange-disabledColor: #cccccc !default;
+$input-range-font-family: 'Helvetica Neue', san-serif !default;
+$input-range-primary-color: #3f51b5 !default;
+$input-range-neutral-color: #aaaaaa !default;
+$input-range-neutral-light-color: #eeeeee !default;
+$input-range-disabled-color: #cccccc !default;
 
-// InputRange-slider
-$InputRange-slider-background: $InputRange-primaryColor !default;
-$InputRange-slider-border: 1px solid $InputRange-primaryColor !default;
-$InputRange-slider-height: 1rem !default;
-$InputRange-slider-width: 1rem !default;
-$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
-$InputRange-sliderContainer-transition: left 0.3s ease-out !default;
-$InputRange-slider--active-transform: scale(1.3) !default;
-$InputRange-slider--is-disabled-background: $InputRange-disabledColor !default;
-$InputRange-slider--is-disabled-border: 1px solid $InputRange-disabledColor !default;
+// input-range-slider
+$input-range-slider-background: $input-range-primary-color !default;
+$input-range-slider-border: 1px solid $input-range-primary-color !default;
+$input-range-slider-height: 1rem !default;
+$input-range-slider-width: 1rem !default;
+$input-range-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
+$input-range-slider-container-transition: left 0.3s ease-out !default;
+$input-range-slider-active-transform: scale(1.3) !default;
+$input-range-slider-disabled-background: $input-range-disabled-color !default;
+$input-range-slider-disabled-border: 1px solid $input-range-disabled-color !default;
 
-// InputRange-label
-$InputRange-label-color: $InputRange-neutralColor !default;
+// input-range-label
+$input-range-label-color: $input-range-neutral-color !default;
 
-// InputRange-track
-$InputRange-track-background: $InputRange-neutralLightColor !default;
-$InputRange-track-height: 0.3rem !default;
-$InputRange-track-transition: left 0.3s ease-out, width 0.3s ease-out !default;
-$InputRange-track--active-background: $InputRange-primaryColor !default;
-$InputRange-track--is-disabled-background: $InputRange-neutralLightColor !default;
+// input-range-track
+$input-range-track-background: $input-range-neutral-light-color !default;
+$input-range-track-height: 0.3rem !default;
+$input-range-track-transition: left 0.3s ease-out, width 0.3s ease-out !default;
+$input-range-track-active-background: $input-range-primary-color !default;
+$input-range-track-disabled-background: $input-range-neutral-light-color !default;

src/scss/input-range/input-range.scss

@@ -4,8 +4,8 @@
 @import 'input-range-label-container';
 @import 'input-range-track';
 
-.InputRange {
-  height: $InputRange-slider-height;
+.input-range {
+  height: $input-range-slider-height;
   position: relative;
   width: 100%;
 }

test/input-range/input-range.spec.js

@@ -27,16 +27,16 @@ describe('InputRange', () => {
   describe('initialize', () => {
     it('should set default class names for its sub-components and itself', () => {
       expect(inputRange.props.classNames).toEqual({
-        component: 'InputRange',
-        labelContainer: 'InputRange-labelContainer',
-        labelMax: 'InputRange-label InputRange-label--max',
-        labelMin: 'InputRange-label InputRange-label--min',
-        labelValue: 'InputRange-label InputRange-label--value',
-        slider: 'InputRange-slider',
-        sliderContainer: 'InputRange-sliderContainer',
-        trackActive: 'InputRange-track InputRange-track--active',
-        trackContainer: 'InputRange-track InputRange-track--container',
-        disabled: 'is-disabled',
+        component: 'input-range',
+        disabled: 'input-range--disabled',
+        labelContainer: 'input-range__label-container',
+        labelMax: 'input-range__label input-range__label--max',
+        labelMin: 'input-range__label input-range__label--min',
+        labelValue: 'input-range__label input-range__label--value',
+        slider: 'input-range__slider',
+        sliderContainer: 'input-range__slider-container',
+        trackActive: 'input-range__track input-range__track--active',
+        trackContainer: 'input-range__track input-range__track--container',
       });
     });
   });