From d5b49a200fab07c4262b5cbced0dfc118c5ead2a Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 22 May 2017 17:24:19 +0100 Subject: [PATCH 001/184] Document usage with Create React App (#1482) --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fa6963195..7ced80ba6 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,13 @@ Although we recommend [webpack](https://webpack.github.io/), you are free to use Of course this is a set of React components so you should be familiar with [React](https://facebook.github.io/react/). If want to customize your components via themes, you may want to take a look to [react-css-themr](https://github.com/javivelasco/react-css-themr) which is used by React Toolbox to make components easily themeable. -### Setting up PostCSS+cssnext in Webpack: +### Usage in Create React App Projects + +[Create React App](https://github.com/facebookincubator/create-react-app) does not allow to change the default configuration, so you need an additional build step to configure `react-toolbox` in its project. + +Follow [these instructions](https://github.com/react-toolbox/react-toolbox-themr) to add `react-toolbox` to a project created with Create React App. + +### Usage in Webpack Projects (*Not* Create React App) ```bash npm install postcss-loader --save-dev @@ -67,6 +73,13 @@ ReactDOM.render( ); ``` +>**Note:** if you use it with Create React App, you need to make this additional change: +> +>```diff +>- import {Button} from 'react-toolbox/lib/button'; +>+ import Button from 'react-toolbox/lib/button/Button'; +>``` + Take into account that any required style will be included in the final CSS so your final CSS would include `Button` styles in this case. It's more efficient to import components this way (`from 'react-toolbox/lib/button'`) (or with raw imports) because if you require from the project root (i.e. `from 'react-toolbox'`), every stylesheet of React Toolbox will be included, even if you don't use it. ## Importing components From f90958d53c151d4f173f877834ee950dfccb176d Mon Sep 17 00:00:00 2001 From: Brian Gates Date: Mon, 22 May 2017 09:26:56 -0700 Subject: [PATCH 002/184] Update readme.md (#1478) Fixed typo. --- components/button/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/button/readme.md b/components/button/readme.md index 053c83ec0..623b4e91d 100644 --- a/components/button/readme.md +++ b/components/button/readme.md @@ -54,7 +54,7 @@ If you want to provide a theme via context, the component key is `RTButton`. | `primary` | `Boolean` | `false` | Indicates if the button should have primary color.| | `raised` | `Boolean` | `false` | If true, the button will have a raised look. | | `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.| -| `theme` | `Object` | | Theme object will classnames that will be used to style the component.| +| `theme` | `Object` | | Theme object with classnames that will be used to style the component.| | `type` | `String` | `button` | Component root container type.| By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. From 9619d859164298ae7674fc848dbb30c9ae5726ba Mon Sep 17 00:00:00 2001 From: Daniel Barreiro Date: Mon, 22 May 2017 18:28:16 +0200 Subject: [PATCH 003/184] Fixes #1452 (#1454) * Fixes #1452 Avoid using .bind within the render method of components. * Fixed JS comment into proper JSX comment --- components/input/readme.md | 12 ++++++------ .../main/modules/examples/input_example_1.txt | 17 +++++++++-------- spec/components/input.js | 19 ++++++++++--------- 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/components/input/readme.md b/components/input/readme.md index 97b9ea9b5..d5e4a9984 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -9,18 +9,18 @@ import Input from 'react-toolbox/lib/input'; class InputTest extends React.Component { state = { name: '', phone: '', email: '', hint: '' }; - handleChange = (name, value) => { - this.setState({ [name]: value }); + handleChange = (value, ev) => { + this.setState({ [ev.target.name]: value }); }; render () { return (
- + - - - J} /> + + + J} />
); } diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt index 80cdde523..c16db9223 100644 --- a/docs/app/components/layout/main/modules/examples/input_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt @@ -1,20 +1,21 @@ class InputTest extends React.Component { state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' }; - handleChange = (name, value) => { - this.setState({...this.state, [name]: value}); + handleChange = (value, ev) => { + this.setState({[ev.target.name]: value}); }; render () { return (
- - + + - - - - + + + + + {/* Just an example. Defining functions in a property, such as onClick, is a bad idea: */} Error!! { e.preventDefault(); console.log('some help'); }}>?} />
); diff --git a/spec/components/input.js b/spec/components/input.js index 8801cdf4d..d3e40c412 100644 --- a/spec/components/input.js +++ b/spec/components/input.js @@ -12,8 +12,8 @@ class InputTest extends React.Component { multilineRows: 'A\n\B\nC\nD\nE\nF', }; - handleChange = (name, value) => { - this.setState({ ...this.state, [name]: value }); + handleChange = (value, ev) => { + this.setState({[ev.target.name]: value }); }; render() { @@ -23,18 +23,19 @@ class InputTest extends React.Component {

lorem ipsum...

- + - - + + - - - + + + ); } From 2981da40949c9efc093b2118d423cd93ca0fa24b Mon Sep 17 00:00:00 2001 From: Gabriel Villenave Date: Mon, 22 May 2017 09:30:39 -0700 Subject: [PATCH 004/184] Updated dependencies (#1448) --- components/date_picker/Calendar.js | 2 +- components/time_picker/Clock.js | 2 +- docs/package.json | 4 ++-- package.json | 18 +++++++++--------- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/components/date_picker/Calendar.js b/components/date_picker/Calendar.js index 360f9cb05..2be228719 100644 --- a/components/date_picker/Calendar.js +++ b/components/date_picker/Calendar.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import CssTransitionGroup from 'react-addons-css-transition-group'; +import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup'; import { range, getAnimationModule } from '../utils/utils'; import time from '../utils/time'; import CalendarMonth from './CalendarMonth'; diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js index b8a4fef63..e256fc42e 100644 --- a/components/time_picker/Clock.js +++ b/components/time_picker/Clock.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import CssTransitionGroup from 'react-addons-css-transition-group'; +import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup'; import { getAnimationModule } from '../utils/utils'; import time from '../utils/time'; import Hours from './ClockHours'; diff --git a/docs/package.json b/docs/package.json index 5d393b31f..b83534746 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,9 +13,9 @@ "classnames": "^2.2.5", "codemirror": "^5.14.2", "history": "^2.1.1", - "react": "^15.2.0", + "react": "^15.5.0", "react-css-themr": "^1.2.0", - "react-dom": "^15.2.0", + "react-dom": "^15.5.0", "react-router": "^2.4.0" }, "devDependencies": { diff --git a/package.json b/package.json index ee22066f3..dbbcb2a73 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,9 @@ "classnames": "^2.2.5", "core-js": "^2.4.0", "ramda": "^0.23.0", - "react-addons-css-transition-group": "^15.4.2", "react-css-themr": "^1.7.2", - "react-style-proptype": "^2.0.0" + "react-style-proptype": "^2.0.0", + "react-transition-group": "^1.1.3" }, "devDependencies": { "babel-cli": "^6.22.2", @@ -78,10 +78,10 @@ "postcss-reporter": "^3.0.0", "pre-commit": "^1.2.2", "prop-types": "^15.5.7", - "react": "^15.4.2", - "react-addons-test-utils": "^15.4.2", - "react-dom": "^15.4.2", - "react-test-renderer": "^15.4.2", + "react": "^15.5.0", + "react-addons-test-utils": "^15.5.0", + "react-dom": "^15.5.0", + "react-test-renderer": "^15.5.0", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "redbox-react": "^1.3.2", @@ -136,9 +136,9 @@ "peerDependencies": { "classnames": "^2.2.0", "prop-types": "^15.5.7", - "react": "^0.14 || ~15.4.0", - "react-addons-css-transition-group": "^0.14.0 || ~15.4.0", - "react-dom": "^0.14.0 || ~15.4.0" + "react": "^15.5.0", + "react-transition-group": "^1.1.3", + "react-dom": "^15.5.0" }, "pre-commit": "lint:staged" } From 66a47bb7961e740a49f4c6c6d61cb35288cb0432 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 23 May 2017 11:14:05 +0200 Subject: [PATCH 005/184] Upgrade to node 7 --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index 6b9255cf0..758bb9c82 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -6.9.2 +7.10.0 From be80e0bb85d4c0069ed02a09fa4da22f4c7d9ee0 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 23 May 2017 12:07:41 +0200 Subject: [PATCH 006/184] Update dependencies --- .eslintrc | 2 + .stylelintrc | 4 +- components/dialog/Dialog.js | 2 +- gulpfile.js | 1 + package.json | 89 +- webpack/postcss.config.js | 17 + webpack/webpack.config.dev.js | 37 +- yarn.lock | 3274 +++++++++++++++++---------------- 8 files changed, 1803 insertions(+), 1623 deletions(-) create mode 100644 webpack/postcss.config.js diff --git a/.eslintrc b/.eslintrc index aeaa0b404..5cd336d3e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -20,6 +20,8 @@ "react/no-find-dom-node": 0, "react/jsx-filename-extension": 0, "import/prefer-default-export": 0, + "jsx-a11y/no-noninteractive-tabindex": 0, + "jsx-a11y/no-noninteractive-element-interactions": 0, "jsx-a11y/no-static-element-interactions": 0, "jsx-a11y/label-has-for": 0, "import/no-extraneous-dependencies": [ diff --git a/.stylelintrc b/.stylelintrc index edc4ab556..78537f057 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -14,11 +14,11 @@ ] }], "color-hex-case": "lower", - "order/declaration-block-order": [ + "order/order": [ "custom-properties", "declarations" ], - "order/declaration-block-properties-alphabetical-order": true, + "order/properties-alphabetical-order": true, "font-family-name-quotes": "always-where-recommended", "string-quotes": "single", "selector-pseudo-class-no-unknown": [ diff --git a/components/dialog/Dialog.js b/components/dialog/Dialog.js index 5f9e2d406..7687c23cc 100644 --- a/components/dialog/Dialog.js +++ b/components/dialog/Dialog.js @@ -39,7 +39,7 @@ const factory = (Overlay, Button) => { {props.children} {actions.length - ?