From 58858586856890904a6194d1d83f413552b03664 Mon Sep 17 00:00:00 2001 From: Brian Do Date: Thu, 26 Jul 2018 15:22:46 -0400 Subject: [PATCH 1/7] v1.18.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 67ef4af9a..36d627c1f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-toolbox", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "homepage": "http://www.react-toolbox.com/", - "version": "2.0.0-beta.11", + "version": "1.18.1", "main": "./lib", "module": "./components", "author": { From 4835664c3f9feadbe94bbed6c5b5ccef92079796 Mon Sep 17 00:00:00 2001 From: Brian Do Date: Thu, 26 Jul 2018 16:05:11 -0400 Subject: [PATCH 2/7] v1.18.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36d627c1f..13c9f2a72 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-toolbox", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "homepage": "http://www.react-toolbox.com/", - "version": "1.18.1", + "version": "1.18.2", "main": "./lib", "module": "./components", "author": { From e0212fc94f6f5fcefaf358c290a0ba97056a5a32 Mon Sep 17 00:00:00 2001 From: Brian Do Date: Thu, 26 Jul 2018 16:05:20 -0400 Subject: [PATCH 3/7] v1.18.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 13c9f2a72..36d627c1f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-toolbox", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "homepage": "http://www.react-toolbox.com/", - "version": "1.18.2", + "version": "1.18.1", "main": "./lib", "module": "./components", "author": { From 618848bec3aa5f73ea10f06a1f099c284f445f5c Mon Sep 17 00:00:00 2001 From: Brian Do Date: Thu, 26 Jul 2018 16:15:50 -0400 Subject: [PATCH 4/7] v2.0.0-beta.11 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36d627c1f..67ef4af9a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-toolbox", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "homepage": "http://www.react-toolbox.com/", - "version": "1.18.1", + "version": "2.0.0-beta.11", "main": "./lib", "module": "./components", "author": { From 11067590de478a6079b2ba9ac6802b4ed39a8b6d Mon Sep 17 00:00:00 2001 From: Allin Resposo Date: Mon, 13 Aug 2018 12:59:31 -0400 Subject: [PATCH 5/7] Add description to text input --- components/input/Input.d.ts | 8 ++++++++ components/input/Input.js | 15 +++++++++------ components/input/theme.css | 12 ++++++++++-- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/components/input/Input.d.ts b/components/input/Input.d.ts index dc12e0fcf..aca7e4c2f 100644 --- a/components/input/Input.d.ts +++ b/components/input/Input.d.ts @@ -10,6 +10,10 @@ export interface InputTheme { * Used for the counter element. */ counter?: string; + /** + * Used for the description element. + */ + description?: string; /** * Added to the root class when input is disabled. */ @@ -66,6 +70,10 @@ export interface InputProps extends ReactToolbox.Props { * @default false */ disabled?: boolean; + /** + * Text string to use for description element. + */ + description?: string; /** * Give an error node to display under the field. */ diff --git a/components/input/Input.js b/components/input/Input.js index 9e6757484..7310298c2 100644 --- a/components/input/Input.js +++ b/components/input/Input.js @@ -11,6 +11,7 @@ const factory = (FontIcon) => { children: PropTypes.node, className: PropTypes.string, defaultValue: PropTypes.string, + description: PropTypes.string, disabled: PropTypes.bool, error: PropTypes.oneOfType([ PropTypes.string, @@ -42,6 +43,7 @@ const factory = (FontIcon) => { theme: PropTypes.shape({ bar: PropTypes.string, counter: PropTypes.string, + description: PropTypes.string, disabled: PropTypes.string, error: PropTypes.string, errored: PropTypes.string, @@ -161,15 +163,15 @@ const factory = (FontIcon) => { valuePresent = value => ( value !== null - && value !== undefined - && value !== '' - && !(typeof value === 'number' && isNaN(value)) + && value !== undefined + && value !== '' + && !(typeof value === 'number' && isNaN(value)) ) render() { - const { children, defaultValue, disabled, error, floating, hint, icon, - name, label: labelText, maxLength, multiline, required, role, - theme, type, value, onKeyPress, rows = 1, ...others } = this.props; + const { children, defaultValue, description, disabled, error, floating, hint, icon, + name, label: labelText, maxLength, multiline, required, role, + theme, type, value, onKeyPress, rows = 1, ...others } = this.props; const length = maxLength && value ? value.length : 0; const labelClassName = classnames(theme.label, { [theme.fixed]: !floating }); @@ -221,6 +223,7 @@ const factory = (FontIcon) => { : null} {hint ? : null} {error ? {error} : null} + {description ? {description} : null} {maxLength ? {length}/{maxLength} : null} {children} diff --git a/components/input/theme.css b/components/input/theme.css index a39cb8741..d98c685c6 100644 --- a/components/input/theme.css +++ b/components/input/theme.css @@ -144,11 +144,19 @@ } .error, +.description, .counter { - color: var(--input-text-error-color); font-size: var(--input-label-font-size); line-height: var(--input-underline-height); - margin-bottom: calc(-1 * var(--input-underline-height)); +} + +.error { + color: var(--input-text-error-color); +} + +.description { + color: var(--input-text-label-color); + display: block; } .counter { From bb939d61cc9591a0652e855ed9cc10d71d506bb4 Mon Sep 17 00:00:00 2001 From: Allin Resposo Date: Mon, 13 Aug 2018 16:58:12 -0400 Subject: [PATCH 6/7] Reformat error and description text for text input --- components/input/Input.js | 17 +++++++++++++++-- components/input/theme.css | 5 +++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/components/input/Input.js b/components/input/Input.js index 7310298c2..271eda765 100644 --- a/components/input/Input.js +++ b/components/input/Input.js @@ -222,9 +222,22 @@ const factory = (FontIcon) => { : null} {hint ? : null} - {error ? {error} : null} - {description ? {description} : null} + {maxLength ? {length}/{maxLength} : null} + {error + ? + {error} + + : null} + {description + ? + {description} + + : null} {children} ); diff --git a/components/input/theme.css b/components/input/theme.css index d98c685c6..a4f3b0f4a 100644 --- a/components/input/theme.css +++ b/components/input/theme.css @@ -152,6 +152,7 @@ .error { color: var(--input-text-error-color); + display: block; } .description { @@ -165,6 +166,10 @@ right: 0; } +.withCounter { + padding-right: 3.125rem; +} + .disabled > .inputElement { border-bottom-style: dotted; color: var(--input-text-disabled-text-color); From 46ce9a121daf2c0c874b1228e05b2222900dac77 Mon Sep 17 00:00:00 2001 From: Jordan Caras Date: Thu, 18 Oct 2018 14:01:05 -0500 Subject: [PATCH 7/7] Removes randomness from RadioButton and Checkbox render Removes calls to uuid.v4() from the render methods of the above components. This avoids unnecessarily flushing to the DOM when the component hasn't changed. --- components/checkbox/Checkbox.js | 10 ++++++++-- components/radio/RadioButton.js | 10 ++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js index a17a2ac64..ebd6e9be0 100644 --- a/components/checkbox/Checkbox.js +++ b/components/checkbox/Checkbox.js @@ -10,6 +10,7 @@ import checkFactory from './Check'; const factory = (Check) => { class Checkbox extends Component { + static propTypes = { checked: PropTypes.bool, children: PropTypes.node, @@ -38,6 +39,11 @@ const factory = (Check) => { disabled: false, }; + constructor(props) { + super(props); + this._id = uuidv4(); + } + handleToggle = (event) => { if (event.pageX !== 0 && event.pageY !== 0) this.blur(); if (!this.props.disabled && this.props.onChange) { @@ -63,8 +69,8 @@ const factory = (Check) => { const className = classnames(theme.field, { [theme.disabled]: this.props.disabled, }, this.props.className); - const inputId = `input_${uuidv4()}`; - const labelId = `label_${uuidv4()}`; + const inputId = `input_${this._id}`; + const labelId = `label_${this._id}`; return (