Merge branch 'dev'

* dev: (45 commits) Changed Icon Prop type to String or Element instead of Any. Also fixed an inappropriate example for checkbox. Proper property sorting Add allowBlank to Dropdown Chip - tweak stroke width Chip - Replace fonticon with inline SVG, tweak size and position Add prop to autocomplete to place labels below or above input Clean up chip styling, remove hover and pressed styles Update chip children prop type, readme Use children instead of special label and avatar props in Chip component Add onDeleteClick property Update autocomplete component to use chips Add chip component Added !default to all config values as per react-toolbox#424 Don't show actions container in dialog if no actions exist keepachangelog.com :) only render content of current tab + linting, docs, test have Dialog.jsx import from './style' and not './style.scss' 0.15.0 release 0.14.2 release docs(media): keep navigation for wider screens ...
goalifyplus · Apr 7, 2016 · f9eb892 · f9eb892
2 parents b182c09 + 58679df
commit f9eb892
Show file tree

Hide file tree

Showing 81 changed files with 953 additions and 482 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,44 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+### Changed
+- Tabs now only render the contents of the currently active tab.
+
+## [0.15.0] - 2016-03-24
+
+Click on the link above for this release's commit history.
+
+## [0.14.2] - 2016-03-07
+
+Click on the link above for this release's commit history.
+
+## [0.14.1] - 2016-01-26
+
+Click on the link above for this release's commit history.
+
+## [0.14.0] - 2015-12-20
+### Added
+- A `Ripple` HOC that can be used with your custom components.
+
+### Changed
+- Added `className` for the pickers to customize them.
+- Animated auto-transition in `DatePicker` component.
+- All `Input` components have now an error prop.
+- `Dropdown` improvements and normalization with `Input` component.
+- More `react-toolbox` attributes to easy customize picker components.
+- `btn-colors` mixin extracted to easily define custom `Buttons`.
+- New `neutral` boolean property to avoid taking default styles in `Button`.
+- Remove hidden scroll from webkit browsers by `commons.scss`.
+- Better `Navigation` styles.
+- `Overlay` opacity can now be styled from CSS.
+
+**For previous changes, please see the commit messages in
+https://github.com/react-toolbox/react-toolbox/releases.**
+
+[Unreleased]: https://github.com/react-toolbox/react-toolbox/compare/0.15.0...dev
+[0.15.0]: https://github.com/react-toolbox/react-toolbox/compare/0.14.2...0.15.0
+[0.14.2]: https://github.com/react-toolbox/react-toolbox/compare/0.14.1...0.14.2
+[0.14.1]: https://github.com/react-toolbox/react-toolbox/compare/0.14.0...0.14.1
+[0.14.0]: https://github.com/react-toolbox/react-toolbox/compare/0.13.4...0.14.0
diff --git a/components/app_bar/_config.scss b/components/app_bar/_config.scss
@@ -1,6 +1,6 @@
 $appbar-color: $color-primary-dark !default;
 $appbar-contrast: $color-primary-contrast !default;
-$appbar-title-total-distance: 8 * $unit;
+$appbar-title-total-distance: 8 * $unit !default;
 $appbar-height: 6.4 * $unit !default;
-$appbar-h-padding: 2.4 * $unit;
-$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding;
+$appbar-h-padding: 2.4 * $unit !default;
+$appbar-title-distance: $appbar-title-total-distance - $appbar-h-padding !default;
diff --git a/components/app_bar/readme.md b/components/app_bar/readme.md
@@ -20,5 +20,5 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
 | Name          | Type    | Default  | Description|
 |:-----|:-----|:-----|:-----|
 | `className` | `String`  | `''`     | Set a class for the root component.|
-| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
 | `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
+| `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
diff --git a/components/autocomplete/Autocomplete.jsx b/components/autocomplete/Autocomplete.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
 import Input from '../input';
 import events from '../utils/events';
+import Chip from '../chip';
 import style from './style';
 
 const POSITION = {
@@ -20,13 +21,15 @@ class Autocomplete extends React.Component {
    label: React.PropTypes.string,
    multiple: React.PropTypes.bool,
    onChange: React.PropTypes.func,
+   selectedPosition: React.PropTypes.oneOf(['above', 'below']),
    source: React.PropTypes.any,
    value: React.PropTypes.any
  };
 
  static defaultProps = {
    className: '',
    direction: 'auto',
+   selectedPosition: 'above',
    multiple: true,
    source: {}
  };
@@ -153,7 +156,16 @@ class Autocomplete extends React.Component {
  renderSelected () {
    if (this.props.multiple) {
      const selectedItems = [...this.values()].map(([key, value]) => {
-       return <li key={key} className={style.value} onClick={this.unselect.bind(this, key)}>{value}</li>;
+       return (
+         <Chip
+           key={key}
+           className={style.value}
+           deletable
+           onDeleteClick={this.unselect.bind(this, key)}
+         >
+           {value}
+         </Chip>
+       );
      });
 
      return <ul className={style.values}>{selectedItems}</ul>;
@@ -187,7 +199,7 @@ class Autocomplete extends React.Component {
 
    return (
      <div data-react-toolbox='autocomplete' className={className}>
-       {this.renderSelected()}
+       {this.props.selectedPosition === 'above' ? this.renderSelected() : null}
        <Input
          {...other}
          ref='input'
@@ -201,6 +213,7 @@ class Autocomplete extends React.Component {
          value={this.state.query}
        />
        {this.renderSuggestions()}
+       {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
      </div>
    );
  }

diff --git a/components/autocomplete/_config.scss b/components/autocomplete/_config.scss
@@ -1,9 +1,7 @@
 $autocomplete-color-primary-contrast: $color-primary-contrast !default;
 $autocomplete-color-primary: $color-primary !default;
-$autocomplete-overflow-max-height: 45vh;
+$autocomplete-overflow-max-height: 45vh !default;
 $autocomplete-suggestion-active-background: $palette-grey-200 !default;
-$autocomplete-suggestion-padding: $unit;
+$autocomplete-suggestion-padding: $unit !default;
 $autocomplete-suggestions-background: $color-white !default;
-$autocomplete-value-border-radius: .2 * $unit;
-$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0;
-$autocomplete-value-padding: $unit * .5 $unit * .75;
+$autocomplete-value-margin: $unit * .25 $unit * .5 $unit * .25 0 !default;
diff --git a/components/autocomplete/readme.md b/components/autocomplete/readme.md
@@ -1,20 +1,20 @@
 # Autocomplete
 
-An input field with a set of predeterminated labeled values. When it's focused it shows a list of hints that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determined at opening time depending on the current position.
+An input field with a set of predeterminated labeled values. When it's focused it shows a list of options that are filtered by label as the user types. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determined by its current position at opening time.
 
 <!-- example -->
 ```jsx
 import Autocomplete from 'react-toolbox/lib/autocomplete';
 
 const source = {
-  'ES-es': 'Spain', 
-  'TH-th': 'Thailand', 
-  'EN-gb': 'England', 
+  'ES-es': 'Spain',
+  'TH-th': 'Thailand',
+  'EN-gb': 'England',
   'EN-en': 'USA'
 };
 
 class AutocompleteTest extends React.Component {
-  state = { 
+  state = {
     countries: ['ES-es', 'TH-th']
   }
 
@@ -26,6 +26,7 @@ class AutocompleteTest extends React.Component {
     return (
       <Autocomplete
         direction="down"
+        selectedPosition="above"
         label="Choose countries"
         onChange={this.handleChange}
         source={source}
@@ -38,16 +39,17 @@ class AutocompleteTest extends React.Component {
 
 ## Properties
 
-| Name              | Type          | Default         | Description|
+| Name                | Type                   | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`      | `''`            | Sets a class to style of the Component.|
-| `direction`    | `String`       |  `auto`        | Determines the opening direction. It can be `auto`, `top` or `bottom`. |
-| `disabled`      | `Bool`        |  `false`         | If true, component will be disabled.|
-| `error`         | `String`      |         | Sets the error string for the internal input element.|
-| `label`         | `String`      |         | The text string to use for the floating label element.|
-| `multiple`      | `Bool`        | `true`          | If true, component can hold multiple values.|
-| `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `source`    | `Object` or `Array`   |           | Object of key/values or array representing all items suggested. |
-| `value`         | `String` or `Array`    |        | Value or array of values currently selected component.|
-
-Additional properties will be passed to the input element so you can use `name`, `type`... etc.
+| `className`         | `String`               | `''`            | Sets a class to style of the Component.|
+| `direction`         | `String`               |  `auto`         | Determines the opening direction. It can be `auto`, `top` or `bottom`.|
+| `disabled`          | `Bool`                 |  `false`        | If true, component will be disabled.|
+| `error`             | `String`               |                 | Sets the error string for the internal input element.|
+| `label`             | `String`               |                 | The text string to use for the floating label element.|
+| `multiple`          | `Bool`                 | `true`          | If true, component can hold multiple values.|
+| `onChange`          | `Function`             |                 | Callback function that is fired when the components's value changes.|
+| `source`            | `Object` or `Array`    |                 | Object of key/values or array representing all items suggested. |
+| `selectedPosition`  | `String`               |  `above`        | Determines if the selected list is shown above or below input. It can be `above` or `below`. |
+| `value`             | `String` or `Array`    |                 | Value or array of values currently selected component.|
+
+Additional properties will be passed to the Input Component so you can use `hint`, `name` ... etc.
diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss
@@ -30,14 +30,7 @@
 }
 
 .value {
-  display: inline-block;
-  padding: $autocomplete-value-padding;
   margin: $autocomplete-value-margin;
-  font-size: $font-size-tiny;
-  color: $autocomplete-color-primary-contrast;
-  cursor: pointer;
-  background-color: $autocomplete-color-primary;
-  border-radius: $autocomplete-value-border-radius;
 }
 
 .suggestions {

diff --git a/components/avatar/readme.md b/components/avatar/readme.md
@@ -1,6 +1,6 @@
 # Avatar
 
-Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand
+Avatars can be used to represent people. This offer users the ability to personalize their avatar or provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand.
 
 <!-- example -->
 ```jsx
@@ -25,10 +25,10 @@ const AvatarTest = () => (
 
 ## Properties
 
-| Name      | Type      | Default         | Description|
+| Name          | Type                    | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `children`    | `Node`   | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `icon`  | `String` or `Element` |  | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
-| `image`      | `String` or `Element`  |  | An image source or an image element. |
-| `title`  | `String`  | `false` | A title for the image. If there is image, the first letter will be displayed as avatar. |
+| `children`    | `Node`                  |             | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
+| `className`   | `String`                | `''`        | Set a class to style the Component.|
+| `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
+| `image`       | `String` or `Element`   |             | An image source or an image element. |
+| `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |
diff --git a/components/button/Button.jsx b/components/button/Button.jsx
@@ -13,7 +13,10 @@ class Button extends React.Component {
     flat: React.PropTypes.bool,
     floating: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     inverse: React.PropTypes.bool,
     label: React.PropTypes.string,
     mini: React.PropTypes.bool,

diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx
@@ -11,9 +11,14 @@ class IconButton extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     href: React.PropTypes.string,
-    icon: React.PropTypes.any,
+    icon: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     inverse: React.PropTypes.bool,
     neutral: React.PropTypes.bool,
+    onMouseLeave: React.PropTypes.func,
+    onMouseUp: React.PropTypes.func,
     primary: React.PropTypes.bool,
     type: React.PropTypes.string
   };
@@ -25,8 +30,14 @@ class IconButton extends React.Component {
     primary: false
   };
 
-  handleMouseUp = () => {
+  handleMouseUp = (event) => {
     this.refs.button.blur();
+    if (this.props.onMouseUp) this.props.onMouseUp(event);
+  };
+
+  handleMouseLeave = (event) => {
+    this.refs.button.blur();
+    if (this.props.onMouseLeave) this.props.onMouseLeave(event);
   };
 
   render () {

diff --git a/components/button/_config.scss b/components/button/_config.scss
@@ -9,13 +9,13 @@ $button-accent-color-hover: rgba($color-accent, 0.20) !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-border-radius: 0.2 * $unit;
-$button-floating-font-size: $unit * 2.4;
-$button-floating-height: $unit * 5.6;
-$button-floating-mini-height: $unit * 4;
-$button-floating-mini-font-size: $button-floating-mini-height / 2.25;
-$button-height: $unit * 3.6;
-$button-squared-icon-margin: $unit * .6;
-$button-squared-min-width: 9 * $unit;
-$button-squared-padding: 0 $unit * 1.2;
-$button-toggle-font-size: $unit * 2;
+$button-border-radius: 0.2 * $unit !default;
+$button-floating-font-size: $unit * 2.4 !default;
+$button-floating-height: $unit * 5.6 !default;
+$button-floating-mini-height: $unit * 4 !default;
+$button-floating-mini-font-size: $button-floating-mini-height / 2.25 !default;
+$button-height: $unit * 3.6 !default;
+$button-squared-icon-margin: $unit * .6 !default;
+$button-squared-min-width: 9 * $unit !default;
+$button-squared-padding: 0 $unit * 1.2 !default;
+$button-toggle-font-size: $unit * 2 !default;
diff --git a/components/button/readme.md b/components/button/readme.md
@@ -32,28 +32,31 @@ const TestButtons = () => (
 
 ## Properties
 
-| Name      | Type      | Default         | Description|
+| Name              | Type                  | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `accent`    | `Boolean`   | `false` | Indicates if the button should have accent color.|
-| `className` | `String`  | `''` | Set a class to style the Component.|
-| `disabled`  | `Boolean` | `false` | If true, component will be disabled.|
-| `flat`      | `Boolean`  | `false` | If true, the button will have a flat look. |
-| `floating`  | `Boolean`  | `false` | If true, the button will have a floating look. |
-| `icon`      | `String`  |  | Value of the icon (See icon component). |
-| `inverse`    | `Boolean`  |  | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
-| `label`     | `String`  |  | The text string to use for the name of the button.|
-| `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
-| `neutral`  | `Boolean` | `true`  | Set it to `false` if you don't want the neutral styles to be included.|
-| `primary`  | `false` | `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.|
-
-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. 
+| `accent`          | `Boolean`             | `false`     | Indicates if the button should have accent color.|
+| `className`       | `String`              | `''`        | Set a class to style the Component.|
+| `disabled`        | `Boolean`             | `false`     | If true, component will be disabled.|
+| `flat`            | `Boolean`             | `false`     | If true, the button will have a flat look. |
+| `floating`        | `Boolean`             | `false`     | If true, the button will have a floating look. |
+| `href`            | `String`              |             | Creates a link for the button. |
+| `icon`            | `String` or `Element` |             | Value of the icon (See Font Icon Component). |
+| `inverse`         | `Boolean`             |             | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
+| `label`           | `String`              |             | The text string to use for the name of the button.|
+| `mini`            | `Boolean`             | `false`     | To be used with floating button. If true, the button will be smaller.|
+| `neutral`         | `Boolean`             | `true`      | Set it to `false` if you don't want the neutral styles to be included.|
+| `onMouseLeave`    | `Function`            |             | Fires after the mouse leaves the Component.|
+| `onMouseUp`       | `Function`            |             | Fires after the mouse is released from the Component.|
+| `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.|
+
+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.
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
 
 ## Icon Button
 
 Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
 
-We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding aspect properties.
+We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding onMouseLeave, onMouseUp and aspect properties.
diff --git a/components/card/_config.scss b/components/card/_config.scss
@@ -1,7 +1,7 @@
 $card-color-white: $color-white !default;
 $card-text-overlay: rgba($color-black, 0.35) !default;
 $card-background-color: $card-color-white !default;
-$card-padding-sm: .8 * $unit;
-$card-padding: 1.6 * $unit;
-$card-padding-lg: 2 * $unit;
-$card-font-size: $font-size-small;
+$card-padding-sm: .8 * $unit !default;
+$card-padding: 1.6 * $unit !default;
+$card-padding-lg: 2 * $unit !default;
+$card-font-size: $font-size-small !default;