Add documentation for dialog

components/dialog/index.jsx

@@ -13,6 +13,7 @@ class Dialog extends React.Component {
 
   static defaultProps = {
     actions: [],
+    active: false,
     type: 'normal'
   };
 

components/dialog/readme.md

@@ -1,40 +1,52 @@
 # Dialog
 
-```
+[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
-var Dialog  = require('react-toolbox/components/dialog');
-var actions = [
-  { caption: "Cancel", style: "transparent", onClick: this.onClose }
-,
-  { caption: "Save", style: "transparent", onClick: this.onSave }
-]
 
-<Dialog title='Hello World' actions={actions}>
+<!-- example -->
-  /* -- more content -- */
+```
-</Dialog>
+import Dialog from 'react-toolbox/dialog';
+
+class DialogTest extends React.Component {
+  showDialog = () => {
+    this.refs.dialog.show();
+  };
+
+  closeDialog = () => {
+    this.refs.dialog.hide();
+  };
+
+  actions = [
+    { label: "Cancel", onClick: this.closeDialog },
+    { label: "Save", onClick: this.closeDialog }
+  ];
+
+  render () {
+    return (
+      <div>
+        <Button label='Show my dialog' onClick={this.showDialog} />
+        <Dialog ref='dialog' title='My awesome dialog' actions={this.actions}>
+          <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
+        </Dialog>
+      </div>
+    );
+  }
+}
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
 |:-                 |:-:            | :-              |:-|
-| **actions**       | Array         |                 | A array of actions callbacks for the component.|
+| actions       | Array         |    `[]`         | A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons.|
-| **active**        | Boolean       |                 | If true, component will be shows.|
+| active        | Boolean       |  `false`        | If true, the dialog will be active by default.|
-| **className**     | String        | "normal"        | Set the class-styles of the Component.|
+| className     | String        |     `''`        | Sets a class to give customized styles to the time picker.|
-| **title**         | String        |                 | The text string to use for the title of the component.|
+| title         | String        |                 | The text string to use as standar title of the dialog.|
-| **type**          | String        |                 | Type of the component, overwrite this property if you need set a different stylesheet.|
+| type          | String        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
 
 ## Methods
 
-#### show
+The Dialog has state to determine if it is being shown or not. It exposes method to show and hide:
-Shows the dialog.
 
-```
+- `show` is used to show the dialog.
-dialog_instance.show();
+- `hide` is used to hide the dialog.
-```
 
-#### hide
-Hides the dialog.
-
-```
-dialog_instance.hide();
-```

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

@@ -29,6 +29,7 @@ import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
 import CardExample1 from './examples/card_example_1.txt';
 import CheckboxExample1 from './examples/checkbox_example_1.txt';
 import DatePickerExample1 from './examples/datepicker_example_1.txt';
+import DialogExample1 from './examples/dialog_example_1.txt';
 import TimePickerTest from './examples/timepicker_example_1.txt';
 
 export default {
@@ -70,7 +71,8 @@ export default {
   dialog: {
     name: 'Dialog',
     docs: Dialog,
-    path: '/components/dialog'
+    path: '/components/dialog',
+    examples: [DialogExample1]
   },
   drawer: {
     name: 'Drawer',

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

@@ -0,0 +1,27 @@
+class DialogTest extends React.Component {
+  showDialog = () => {
+    this.refs.dialog.show();
+  };
+
+  closeDialog = () => {
+    this.refs.dialog.hide();
+  };
+
+  actions = [
+    { label: "Cancel", onClick: this.closeDialog },
+    { label: "Save", onClick: this.closeDialog }
+  ];
+
+  render () {
+    return (
+      <div>
+        <Button label='Show my dialog' onClick={this.showDialog} />
+        <Dialog ref='dialog' title='My awesome dialog' type='small' actions={this.actions}>
+          <p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+return <DialogTest />;