upgrade to React 16.2 and stylelint's latest standard and… (#437)

* Upgrade to React 16.2 and stylelint's latest standard and recommended-scss configs. * add comment * ignore package-lock.json
HBM · Mar 16, 2018 · e14d793 · e14d793
1 parent 8443922
commit e14d793
Show file tree

Hide file tree

Showing 18 changed files with 220 additions and 213 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@ npm-debug.log
 *.swp
 coverage/
 npm-debug.log*
+package-lock.json
 
 # ignore auto generated es5 directory
 lib/

diff --git a/examples/src/radiobuttonRoute.js b/examples/src/radiobuttonRoute.js
@@ -4,7 +4,7 @@ import {Radiobutton} from 'md-components'
 
 export default class RadiobuttonRoute extends React.Component {
   state = {
-    selectedValue: 'Germany'
+    selectedValue: ''
   }
 
   onChange = (value) => {

diff --git a/package.json b/package.json
@@ -47,21 +47,21 @@
     "coveralls": "^3.0.0",
     "cpx": "^1.5.0",
     "cross-env": "^5.0.5",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-15": "^1.0.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "jsdom": "11.6.2",
     "mocha": "^5.0.0",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.8.2",
     "npm-run-all": "^4.1.1",
     "nyc": "^11.2.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.2.0",
     "standard": "^11.0.0-beta.0",
     "stylelint": "^9.0.0",
-    "stylelint-config-recommended-scss": "^2.0.0",
-    "stylelint-config-standard": "^17.0.0",
+    "stylelint-config-recommended-scss": "^3.1.0",
+    "stylelint-config-standard": "^18.2.0",
     "stylelint-scss": "^2.1.0",
     "tarball-extract": "0.0.6"
   },

diff --git a/src/js/navigation/test/test.js b/src/js/navigation/test/test.js
@@ -12,7 +12,7 @@ describe('Navigation', () => {
     assert(wrapper.find('nav'))
   })
 
-  it.skip('should have state.visible === false initially', () => {
+  it('should have state.visible === false initially', () => {
     const wrapper = shallow(<Navigation links={[{link: 'one', text: 'one'}]} />)
     assert.equal(wrapper.state('visible'), false)
   })

diff --git a/src/js/slider/index.js b/src/js/slider/index.js
@@ -17,19 +17,6 @@ const clip = (v, min, max) => {
 }
 
 export default class Slider extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    min: PropTypes.number.isRequired,
-    max: PropTypes.number.isRequired,
-    step: PropTypes.number,
-    onChange: PropTypes.func,
-    onMove: PropTypes.func
-  }
-
-  defaultProps = {
-    value: 0
-  }
-
   getSteppedValue = (value) => {
     if (this.props.step) {
       const steps = (value - this.state.prevValue) / this.props.step
@@ -175,3 +162,16 @@ export default class Slider extends React.Component {
     )
   }
 }
+
+Slider.propTypes = {
+  value: PropTypes.number,
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  step: PropTypes.number,
+  onChange: PropTypes.func,
+  onMove: PropTypes.func
+}
+
+Slider.defaultProps = {
+  value: 0
+}
diff --git a/src/js/table/test/test.js b/src/js/table/test/test.js
@@ -213,7 +213,7 @@ describe('Table', () => {
       <table>
         <tbody>
           <tr>
-            <TableBodyCell editable onChange={() => {}}>
+            <TableBodyCell onChange={() => {}}>
               hello world
             </TableBodyCell>
           </tr>

diff --git a/src/js/textfield/index.js b/src/js/textfield/index.js
@@ -172,6 +172,9 @@ export class Textarea extends React.Component {
       resizable,
       value,
       htmlFor,
+      // Added getComputedStyle and maxRows to get rid of enzyme warnings during npm test run.
+      getComputedStyle,
+      maxRows,
       ...rest
     } = this.props
 

diff --git a/src/scss/base.scss b/src/scss/base.scss
@@ -15,6 +15,9 @@ $header-height: 64px;
 // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 html {
   box-sizing: border-box;
+
+  // Changes the default tap highlight to be completely transparent in iOS.
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 *,
@@ -23,11 +26,6 @@ html {
   box-sizing: inherit;
 }
 
-html {
-  // Changes the default tap highlight to be completely transparent in iOS.
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
 body {
   font-family: 'Roboto', sans-serif;
   font-size: 1em;

diff --git a/src/scss/checkbox.scss b/src/scss/checkbox.scss
@@ -10,6 +10,41 @@
   display: flex;
   align-items: center;
 
+  &-icon {
+    padding: 10px;
+    padding-left: 0;
+    line-height: 0;
+    outline: 0;
+    fill: rgba(0, 0, 0, 0.54);
+
+    @include medium {
+      padding: 5px;
+      padding-left: 0;
+    }
+  }
+
+  &-label {
+    color: rgba(0, 0, 0, 0.54);
+  }
+
+  /**
+   * focus
+   */
+  &-focus {
+    position: absolute;
+
+    /* 48px - 18px = 30px / 2 = 15px */
+    top: 15px;
+    left: 3px;
+
+    /* use the same width as svg path element for checkbox icon */
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: none;
+    transition: all 0.15s ease;
+  }
+
   &-input {
     position: absolute;
     left: 0;
@@ -50,39 +85,4 @@
       }
     }
   }
-
-  &-icon {
-    padding: 10px;
-    padding-left: 0;
-    line-height: 0;
-    outline: 0;
-    fill: rgba(0, 0, 0, 0.54);
-
-    @include medium {
-      padding: 5px;
-      padding-left: 0;
-    }
-  }
-
-  &-label {
-    color: rgba(0, 0, 0, 0.54);
-  }
-
-  /**
-   * focus
-   */
-  &-focus {
-    position: absolute;
-
-    /* 48px - 18px = 30px / 2 = 15px */
-    top: 15px;
-    left: 3px;
-
-    /* use the same width as svg path element for checkbox icon */
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    display: none;
-    transition: all 0.15s ease;
-  }
 }
diff --git a/src/scss/list.scss b/src/scss/list.scss
@@ -32,14 +32,35 @@
   margin-bottom: 0;
 }
 
+.mdc-List-row--selectable {
+  cursor: pointer;
+}
+
 .mdc-List-row--selectable:hover {
   background-color: #f5f5f5;
   transition: background-color 0.3s ease;
   outline: none;
 }
 
-.mdc-List-row--selectable {
-  cursor: pointer;
+.mdc-List-row {
+  transition: background-color 0.3s ease;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  /** This article suggest to increase padding for table and above
+   * https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
+   */
+  @include medium {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  text-decoration: none;
+  width: 100%;
+  color: inherit;
 }
 
 .mdc-List-row:focus {
@@ -76,25 +97,24 @@
   }
 }
 
-.mdc-List-row {
-  transition: background-color 0.3s ease;
-  min-height: 48px;
+.mdc-List-row-icon-right {
+  margin-left: auto;
+
+  svg {
+    float: right;
+  }
+}
+
+.mdc-List-row-avatar {
+  height: 56px;
   display: flex;
   align-items: center;
-  padding-left: 16px;
-  padding-right: 16px;
 
-  /** This article suggest to increase padding for table and above
-   * https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
-   */
-  @include medium {
-    padding-left: 24px;
-    padding-right: 24px;
+  // use wildcard since element is user defined and can be anything
+  & > * {
+    border-radius: 100%;
+    width: 40px;
   }
-
-  text-decoration: none;
-  width: 100%;
-  color: inherit;
 }
 
 .mdc-List-row-icon-left,
@@ -119,23 +139,3 @@
     align-items: flex-start;
   }
 }
-
-.mdc-List-row-icon-right {
-  margin-left: auto;
-
-  svg {
-    float: right;
-  }
-}
-
-.mdc-List-row-avatar {
-  height: 56px;
-  display: flex;
-  align-items: center;
-
-  // use wildcard since element is user defined and can be anything
-  & > * {
-    border-radius: 100%;
-    width: 40px;
-  }
-}
diff --git a/src/scss/navigation.scss b/src/scss/navigation.scss
@@ -73,15 +73,15 @@ $nav-link-height: 44px;
   color: rgba(0, 0, 0, 0.87);
 }
 
-.mdc-Navigation-group--opened .mdc-Navigation-group-icon {
-  transform: rotate(-90deg);
-}
-
 .mdc-Navigation-group-icon {
   transform: rotate(90deg);
   transition: transform 0.15s ease-in-out;
 }
 
+.mdc-Navigation-group--opened .mdc-Navigation-group-icon {
+  transform: rotate(-90deg);
+}
+
 .mdc-Navigation-group-links {
   transition: max-height 0.15s ease-in-out;
   overflow: hidden;

diff --git a/src/scss/radiobutton.scss b/src/scss/radiobutton.scss
@@ -36,7 +36,6 @@
   transition: all 0.15s ease;
 }
 
-.mdc-RadioButton--keyboard .mdc-RadioButton-input:checked ~ .mdc-RadioButton-icon,
 .mdc-RadioButton-item--keyboard .mdc-RadioButton-icon {
   box-shadow: 0 0 0 8px rgba(27, 50, 95, 0.12);
   border-radius: 100%;
@@ -53,10 +52,16 @@
 }
 
 /**
- * disabled
- */
+  * disabled
+  */
 .mdc-RadioButton-input:disabled ~ .mdc-RadioButton-icon,
 .mdc-RadioButton-input:disabled ~ .mdc-RadioButton-label {
   fill: rgba(0, 0, 0, 0.26);
   color: rgba(0, 0, 0, 0.26);
 }
+
+.mdc-RadioButton--keyboard .mdc-RadioButton-input:checked ~ .mdc-RadioButton-icon {
+  box-shadow: 0 0 0 8px rgba(27, 50, 95, 0.12);
+  border-radius: 100%;
+  background-color: rgba(27, 50, 95, 0.12);
+}