Improve documentation for appbar autocomplete and button

components/app_bar/readme.md

@@ -6,14 +6,14 @@ The app bar is a special kind of toolbar that’s used for branding, navigation,
 import AppBar from 'react-toolbox/app_bar';
 
 const AppBarTest = () => (
-  <AppBar className="my-site-bar" fixed flat>
+  <AppBar fixed flat>
     <a href="/home">React Toolbox Docs</a>
     <Navigation />
   </AppBar>
 );
 ```
 
-Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title.
+Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
 
 ## Properties
 

components/autocomplete/index.jsx

@@ -99,12 +99,18 @@ class Autocomplete extends React.Component {
     this._unselectOption(event.target.getAttribute('id'));
   };
 
+  renderLabel () {
+    if (this.props.label) {
+      return <label data-role='label' className={style.label}>{this.props.label}</label>;
+    }
+  }
+
   renderSelected () {
     if (this.props.multiple) {
       return (
-        <ul className={style.values} onClick={this.handleUnselect}>
+        <ul className={style.values} data-role='selections' onClick={this.handleUnselect}>
           {[...this.state.values].map(([key, value]) => {
-            return (<li className={style.value} key={key} id={key}>{value}</li>);
+            return <li key={key} id={key} data-role='selection' className={style.value}>{value}</li>;
           })}
         </ul>
       );
@@ -115,7 +121,7 @@ class Autocomplete extends React.Component {
     return [...this._getSuggestions()].map(([key, value]) => {
       let className = style.suggestion;
       if (this.state.active === key) className += ` ${style.active}`;
-      return <li id={key} key={key} className={className}>{value}</li>;
+      return <li id={key} key={key} data-role='suggestion' className={className}>{value}</li>;
     });
   }
 
@@ -130,13 +136,14 @@ class Autocomplete extends React.Component {
 
     return (
       <div data-react-toolbox='autocomplete' className={className}>
-        {this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
+        {this.renderLabel()}
         {this.renderSelected()}
         <Input
           ref='input'
           {...this.props}
           label=''
           value=''
+          data-role='input'
           className={style.input}
           onBlur={this.handleBlur}
           onChange={this.handleQueryChange}
@@ -144,6 +151,7 @@ class Autocomplete extends React.Component {
           onKeyUp={this.handleKeyPress} />
         <ul
           ref='suggestions'
+          data-role='suggestions'
           className={suggestionsClassName}
           onMouseDown={this.handleSelect}
           onMouseOver={this.handleHover}

components/autocomplete/readme.md

@@ -1,6 +1,6 @@
 # Autocomplete
 
-An input field with a set of predeterminated values and labels. When it's focused it shows a list of hints that are filtered as the user types content. They can be simple or multiple depending on the amount of values that can be selected. The opening direction is determinated 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 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 determinated at opening time depending on the current position.
 
 <!-- example -->
 ```
@@ -46,9 +46,9 @@ This component has state to control how is it rendered and the values currently
 - `getValue` is used to retrieve the current value.
 - `setValue` to force a new value.
 
-## Customization
+## Structure
 
-The component has a complex structure that can be customized by giving a custom `className` and targeting `react-toolbox` data attributes. The structure is similar to:
+The component has a complex structure that can be customized by giving a custom `className` and targeting `data-role` attributes. The structure is similar to:
 
 ```html
 <div data-react-toolbox="autocomplete">

components/button/index.jsx

@@ -32,28 +32,29 @@ class Button extends React.Component {
   handleMouseDown = (event) => {
     events.pauseEvent(event);
     this.refs.ripple.start(event);
+    if (this.props.onMouseDown) this.props.onMouseDown(event);
   };
 
   render () {
     let className = style[this.props.kind];
-    if (!this.props.primary && !this.props.accent) className += ` ${style.primary}`;
+    const {label, icon, loading, ripple, primary, accent, mini, kind, ...others} = this.props;
     if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.primary) className += ` ${style.primary}`;
-    if (this.props.accent) className += ` ${style.accent}`;
-    if (this.props.mini) className += ` ${style.mini}`;
+    if (!primary && !accent) className += ` ${style.primary}`;
+    if (primary) className += ` ${style.primary}`;
+    if (accent) className += ` ${style.accent}`;
+    if (mini) className += ` ${style.mini}`;
 
     return (
       <button
-        {...this.props}
-        label=''
+        {...others}
         className={className}
         data-react-toolbox='button'
         onMouseDown={this.handleMouseDown}
         disabled={this.props.disabled || this.props.loading}
       >
-        { this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
-        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
-        { this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
+        { ripple ? <Ripple ref='ripple' loading={loading}/> : null }
+        { icon ? <FontIcon className={style.icon} value={icon}/> : null }
+        { label ? <abbr className={style.label}>{label}</abbr> : null }
       </button>
     );
   }

components/button/readme.md

@@ -32,3 +32,17 @@ const TestButtons = () => (
 | onClick  | `Function` |  | Callback called when the button is clicked.|
 | primary  | `false` | | If true, component will have the primary color.|
 | ripple  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
+
+Also, any additional properties will be directly transferred to the `button` tag.
+
+## Structure
+
+The inner markup depends on the given properties. It can result in:
+
+```
+<button data-react-toolbox="button">
+  <span data-react-toolbox="ripple"></span>
+  <span data-react-toolbox="icon"></span>
+  <abbr>Raised accent</abbr>
+</button>
+```

components/button/style.scss

@@ -16,10 +16,11 @@
   border: 0;
   outline: none;
   transition: box-shadow .2s $animation-curve-fast-out-linear-in,
-              background-color .2s $animation-curve-default,
-              color .2s $animation-curve-default;
+                background-color .2s $animation-curve-default,
+                color .2s $animation-curve-default;
   align-content: center;
   justify-content: center;
+
   &::-moz-focus-inner {
     border: 0;
   }
@@ -105,8 +106,8 @@
   }
 
   [data-react-toolbox="ripple"] {
-    border-radius: 50%;
     overflow: hidden;
+    border-radius: 50%;
   }
 }