Tmp form fixes

demo/Demo.js

@@ -9,6 +9,7 @@ import ModalDemo from './content/Modal'
 import ViewDemo from './content/View'
 import Welcome from './content/Welcome'
 import ExamplesWindow from './examples/Window'
+import ExamplesGrid from './examples/Grid'
 
 // eslint-disable-next-line no-unused-vars
 import styles from '../src/foundation/styles.less'
@@ -65,6 +66,9 @@ export default class Demo extends Component {
          buttons: [{
             name: 'Window',
             link: '/examples/window'
+         }, {
+            name: 'Grid',
+            link: '/example-grid'
          }]
       }]
 
@@ -107,6 +111,7 @@ export default class Demo extends Component {
                      <Route path="/view" component={ViewDemo} />
                      <Route path="/text" component={TextDemo} />
                      <Route path="/examples" component={ExamplesWindow} />
+                     <Route path="/example-grid" component={ExamplesGrid} />
                   </View>
                </View>
             </View>

demo/content/Button.js

@@ -41,6 +41,7 @@ export default class DemoContentButton extends Component {
                         <Button name="Button" icon="ion-ios-plus" />
                         <Button name="Translucent" translucent />
                         <Button name="Outline" outline />
+                        <Button name="Button" outline rounded />
                         <Button name="Plain" plain />
                      </ButtonGroup>
                      <Spacer size="1" />
@@ -81,27 +82,31 @@ export default class DemoContentButton extends Component {
                            <Button size="large" name="Large Button" />
                            <Button size="large" name="Icon" icon="ion-ios-plus" />
                            <Button size="large" name="Outline" outline />
+                           <Button size="large" name="Rounded" outline rounded />
                            <Button size="large" name="Plain" plain />
                         </ButtonGroup>
                         <Spacer size="1" />
                         <ButtonGroup>
                            <Button name="Medium Button" />
                            <Button name="Icon" icon="ion-ios-plus" />
                            <Button name="Outline" outline />
+                           <Button name="Rounded" outline rounded />
                            <Button name="Plain" plain />
                         </ButtonGroup>
                         <Spacer size="1" />
                         <ButtonGroup>
                            <Button size="small" name="Small Button" />
                            <Button size="small" name="Icon" icon="ion-ios-plus" />
                            <Button size="small" name="Outline" outline />
+                           <Button size="small" name="Rounded" outline rounded />
                            <Button size="small" name="Plain" plain />
                         </ButtonGroup>
                         <Spacer size="1" />
                         <ButtonGroup>
                            <Button size="tiny" name="Tiny Button" />
                            <Button size="tiny" name="Icon" icon="ion-ios-plus" />
                            <Button size="tiny" name="Outline" outline />
+                           <Button size="tiny" name="Rounded" outline rounded />
                            <Button size="tiny" name="Plain" plain />
                         </ButtonGroup>
                      </OIO>
@@ -225,6 +230,15 @@ export default class DemoContentButton extends Component {
                            <td>Gives button a translucent appearance</td>
                            <td>N</td>
                         </tr>
+                        <tr>
+                           <td><b>width</b></td>
+                           <td>string</td>
+                           <td>
+                              <code>auto</code>
+                           </td>
+                           <td>Enter a pixel-based or percentage-based width</td>
+                           <td>Y</td>
+                        </tr>
                      </tbody>
                   </table>
                   <Spacer size="6" />

demo/content/ButtonGroup.js

@@ -46,6 +46,17 @@ export default class DemoContentButtonGroup extends Component {
                               </ButtonGroup>
                            </View>
                         </GridCell>
+                        <GridCell>
+                           <Text weight="semibold" size="3">Plain</Text>
+                           <Spacer size="3" />
+                           <View width="100%">
+                              <ButtonGroup>
+                                 <Button name="Button One" plain />
+                                 <Button name="Button Two" plain />
+                                 <Button name="Button Three" plain />
+                              </ButtonGroup>
+                           </View>
+                        </GridCell>
                         <GridCell>
                            <Text weight="semibold" size="3">List</Text>
                            <Spacer size="3" />

demo/content/Modal/index.js

@@ -160,6 +160,29 @@ export default class DemoContentModal extends Component {
                               {'Pass a function that will fire when Modal window is closed'}
                            </td>
                         </tr>
+                        <tr>
+                           <td><b>overlayBackground</b></td>
+                           <td>string</td>
+                           <td>
+                              <code>-</code>
+                           </td>
+                           <td>
+                              Enter a value to overide the default OIO Modal background overlay.
+                               You can enter a value that would be equivalent to one that can be
+                              passed to the css <code>background</code> property
+                           </td>
+                        </tr>
+                        <tr>
+                           <td><b>overlayOpacity</b></td>
+                           <td>Number</td>
+                           <td>
+                              <code>0.97</code>
+                           </td>
+                           <td>
+                              Set a number for the opacity of the Modal component&apos;s
+                               overlay background
+                           </td>
+                        </tr>
                         <tr>
                            <td><b>width</b></td>
                            <td>String</td>

demo/content/Text.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import {
    Grid,
@@ -13,10 +12,6 @@ import {
 import style from '../style.less'
 
 export default class DemoContentText extends Component {
-   static propTypes = {
-      contents: PropTypes.array
-   }
-
    constructor(props) {
       super(props)
 
@@ -176,8 +171,10 @@ export default class DemoContentText extends Component {
                               <td>String</td>
                               <td>-</td>
                               <td>
-                                 <p>CSS color (e.g. #CCC)</p>
-                                 <p>Will be able to pass hex, rgba, or preset classes</p>
+                                 <p>
+                                    All css color values supported including hex,
+                                     rgba, or hsl (e.g. #CCC)
+                                 </p>
                               </td>
                            </tr>
                            <tr>

demo/examples/Grid.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import {
+   Grid,
+   GridCell,
+   Spacer,
+   Text,
+   TitleBar,
+   View
+} from '../../src'
+import style from '../style.less'
+
+export default class DemoExampleWindow extends Component {
+   render() {
+      return (
+         <View width="100%" className={style.docs}>
+            <TitleBar title="Grid" flush />
+            <Spacer size="9" />
+            <Grid gutter="60px" columns="1[a] 2[a-c] 3[d-e]" hideBottomGutter>
+               <GridCell>
+                  Cell 1
+               </GridCell>
+               <GridCell>
+                  Cell 2
+               </GridCell>
+               <GridCell>
+                  Cell 3
+               </GridCell>
+               <GridCell>
+                  Cell 4
+               </GridCell>
+               <GridCell>
+                  Cell 5
+               </GridCell>
+            </Grid>
+            <Text>Some Text at the end</Text>
+         </View>
+      )
+   }
+}

demo/index.html

@@ -4,6 +4,7 @@
       <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
       <meta name="apple-mobile-web-app-capable" content="yes"/>
       <meta name="apple-mobile-web-app-status-bar-style" content="default">
+      <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    </head>
    <body>
       <div id="container"></div>