diff --git a/README.md b/README.md index b7ea4406..cffe5292 100644 --- a/README.md +++ b/README.md @@ -177,6 +177,8 @@ render( A couple of things here. First you need to use raw components to get this styles properly applied. Second, you have to add dependency themes by yourself. For example, the `Button` requires `Ripple` so you have to provide styles for both of them. +Also, recall that all components accepts a theme verifying required classNames but there may be some missing. If any property is missing you can check the selectors you want to override straight in the DevTools. + ## Roboto Font and Material Design Icons React Toolbox assumes that you are importing [Roboto Font](https://fonts.google.com/specimen/Roboto) and [Material Design Icons](https://material.io/icons/). @@ -207,6 +209,7 @@ To start the documentation site locally, you'll need to install the dependencies ``` $ git clone https://github.com/react-toolbox/react-toolbox.git +$ cd react-toolbox/ $ npm install $ cd docs/ $ npm install @@ -215,6 +218,10 @@ $ npm start Local documentation will then be available at `http://localhost:8081/`. +## Extensions + +We don't officially support components that are not covered by [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html). If you want to implement some complementary component feel free to open a PR adding your a link in this section. For now you can check [on github: react-toolbox-additions](https://github.com/MaximKomlev/react-toolbox-additions) and [on npm: react-toolbox-additions](https://www.npmjs.com/package/react-toolbox-additions). + ## License This project is licensed under the terms of the [MIT license](https://github.com/react-toolbox/react-toolbox/blob/master/LICENSE). diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js index a85a3cdf..ca3aa07a 100644 --- a/components/autocomplete/Autocomplete.js +++ b/components/autocomplete/Autocomplete.js @@ -54,8 +54,8 @@ const factory = (Chip, Input) => { keepFocusOnChange: false, multiple: true, selectedPosition: 'above', - showSuggestionsWhenValueIsSet: false, showSelectedWhenNotInSource: false, + showSuggestionsWhenValueIsSet: false, source: {}, suggestionMatch: 'start' }; @@ -108,9 +108,9 @@ const factory = (Chip, Input) => { } }; - handleMouseDown = () => { - this.selectOrCreateActiveItem(); - }; + handleMouseDown = (event) => { + this.selectOrCreateActiveItem(event); + } handleQueryBlur = (event) => { if (this.state.focus) this.setState({focus: false}); @@ -140,7 +140,7 @@ const factory = (Chip, Input) => { } if (event.which === 13) { - this.selectOrCreateActiveItem(); + this.selectOrCreateActiveItem(event); } }; @@ -180,7 +180,7 @@ const factory = (Chip, Input) => { return query_value; } - selectOrCreateActiveItem () { + selectOrCreateActiveItem (event) { let target = this.state.active; if (!target) { target = this.props.allowCreate diff --git a/components/button/_config.scss b/components/button/_config.scss index 4a37d8b0..98aa2c24 100644 --- a/components/button/_config.scss +++ b/components/button/_config.scss @@ -9,6 +9,8 @@ $button-accent-color-hover: rgba($color-accent, .2) !default; $button-accent-color: $color-accent !default; $button-disabled-text-color: rgba($color-black, 0.26) !default; $button-disabled-background-color: rgba($color-black, 0.12) !default; +$button-disabled-text-color-inverse: rgba($color-white, 0.54) !default; +$button-disabled-background-inverse: rgba($color-white, 0.08) !default; $button-border-radius: 0.2 * $unit !default; $button-floating-font-size: $unit * 2.4 !default; $button-floating-height: $unit * 5.6 !default; diff --git a/components/button/theme.scss b/components/button/theme.scss index adf91cd0..9c450ef8 100644 --- a/components/button/theme.scss +++ b/components/button/theme.scss @@ -178,5 +178,10 @@ } } +.neutral.inverse[disabled] { + color: $button-disabled-text-color-inverse; + background-color: $button-disabled-background-inverse; +} + @include btn-colors("primary", $button-primary-color-contrast, $button-primary-color, $button-primary-color-hover); @include btn-colors("accent", $button-accent-color-contrast, $button-accent-color, $button-accent-color-hover); diff --git a/components/checkbox/Checkbox.js b/components/checkbox/Checkbox.js index 5a187785..e963deb2 100644 --- a/components/checkbox/Checkbox.js +++ b/components/checkbox/Checkbox.js @@ -18,6 +18,8 @@ const factory = (Check) => { ]), name: PropTypes.string, onChange: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, style: PropTypes.object, theme: PropTypes.shape({ disabled: PropTypes.string, @@ -49,17 +51,25 @@ const factory = (Check) => { } render () { - const { checked, children, disabled, label, style, theme, ...others } = this.props; + const { checked, children, disabled, label, name, style, onChange, // eslint-disable-line + onMouseEnter, onMouseLeave, theme, ...others } = this.props; const className = classnames(theme.field, { [theme.disabled]: this.props.disabled }, this.props.className); return ( -