Add docs for snackbar

components/index.js

@@ -27,6 +27,7 @@ import RadioGroup from './radio/radio_group';
 import RadioButton from './radio/radio_button';
 import Ripple from './ripple';
 import Slider from './slider';
+import Snackbar from './snackbar';
 import Switch from './switch';
 import Tab from './tabs/tab';
 import Tabs from './tabs/tabs';
@@ -36,4 +37,4 @@ export default { App, AppBar, Autocomplete, Button, Card, Checkbox, DatePicker,
   Dialog, Drawer, Dropdown, FontIcon, Form, Input, Link, List, ListItem,
   ListDivider, ListCheckbox, ListSubHeader, Menu, MenuItem, MenuDivider,
   IconMenu, Navigation, ProgressBar, RadioGroup, RadioButton, Ripple, Slider,
-  Switch, Tab, Tabs, TimePicker };
+  Snackbar, Switch, Tab, Tabs, TimePicker };

components/snackbar/index.jsx

@@ -6,8 +6,9 @@ import FontIcon from '../font_icon';
 class Snackbar extends React.Component {
   static propTypes = {
     action: React.PropTypes.string,
+    className: React.PropTypes.string,
     icon: React.PropTypes.string,
-    label: React.PropTypes.string,
+    label: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
     timeout: React.PropTypes.number,
     type: React.PropTypes.string

components/snackbar/readme.md

@@ -1,2 +1,54 @@
-# snackbar
-    
+# Snackbar
+
+Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
+
+<!-- example -->
+```jsx
+import { Button, Snackbar } from 'react-toolbox';
+
+class SnackbarTest extends React.Component {
+  handleClick = () => {
+    this.refs.snackbar.show();
+  };
+
+  handleSnackbarClick = () => {
+    this.refs.snackbar.hide();
+  };
+
+  render () {
+    return (
+      <section>
+        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Snackbar
+          action='Nice'
+          icon='question-answer'
+          label='A new developer started using React Toolbox'
+          onClick={this.handleSnackbarClick}
+          ref='snackbar'
+          type='accept'
+      />
+      </section>
+    );
+  }
+}
+```
+
+## Properties
+
+| Name          | Type    | Default   | Description|
+|:-----|:-----|:-----|:-----|
+| `action`  | `String` |   | Label for the action component inside the Snackbar.|
+| `className` | `String`  | `''`      | Additional class name to provide custom styling.|
+| `icon` | `String`  |       | String key for an icon displayed in left side of the snackbar.|
+| `label` | `String`  |       | Text to display in the content.|
+| `onClick` | `Function`  |       | Callback function that will be called when the button action is clicked.|
+| `timeout` | `Number`  |       | Amount of time after the Snackbar will be automatically hidden.|
+| `type` | `String`  |       | Indicates the action type. Can be `accept`, `warning` or `cancel`|
+
+## Methods
+
+The Snackbar, in a similar way to the Dialog and Drawer holds state to check whether it's being displayed or not. It exposes methods to hide and show it manually:
+
+- `hide` used to hide the Snackbar.
+- `show` used to show the Snackbar.
+

components/snackbar/style.scss

@@ -44,8 +44,9 @@
 
 .button {
   min-width: inherit;
-  height: inherit;
-  padding: 0;
+  margin-top: - $snackbar-vertical-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
+  margin-right: - $snackbar-horizontal-offset / 2;
   margin-left: $snackbar-button-offset;
   color: white;
   > abbr {

docs/app/components/layout/main/modules/components.js

@@ -40,6 +40,7 @@ import NavigationExample1 from './examples/navigation_example_1.txt';
 import ProgressBarExample1 from './examples/progressbar_example_1.txt';
 import RadioExample1 from './examples/radio_example_1.txt';
 import SliderExample1 from './examples/slider_example_1.txt';
+import SnackbarExample1 from './examples/snackbar_example_1.txt';
 import TimePickerTest from './examples/timepicker_example_1.txt';
 
 export default {
@@ -153,7 +154,8 @@ export default {
   snackbar: {
     name: 'Snackbar',
     docs: Snackbar,
-    path: '/components/snackbar'
+    path: '/components/snackbar',
+    examples: [SnackbarExample1]
   },
   switch: {
     name: 'Switch',

docs/app/components/layout/main/modules/examples/snackbar_example_1.txt

@@ -0,0 +1,27 @@
+class SnackbarTest extends React.Component {
+  handleClick = () => {
+    this.refs.snackbar.show();
+  };
+
+  handleSnackbarClick = () => {
+    this.refs.snackbar.hide();
+  };
+
+  render () {
+    return (
+      <section>
+        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Snackbar
+          action='Nice'
+          icon='question-answer'
+          label='A new developer started using React Toolbox'
+          onClick={this.handleSnackbarClick}
+          ref='snackbar'
+          type='accept'
+      />
+      </section>
+    );
+  }
+}
+
+return <SnackbarTest />;