feat(Grid): add inverted prop and usage example to docs (#1677)

* add inverted prop to Grid, add inverted Grid example

* add test for inverted prop, move example position

docs/app/Examples/collections/Grid/Variations/GridExampleInverted.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Grid, Segment } from 'semantic-ui-react'
+
+const GridExampleInverted = () => (
+  <Grid columns='equal' divided inverted padded>
+    <Grid.Row color='black' textAlign='center'>
+      <Grid.Column>
+        <Segment color='black' inverted >1</Segment>
+      </Grid.Column>
+      <Grid.Column>
+        <Segment color='black' inverted>2</Segment>
+      </Grid.Column>
+      <Grid.Column>
+        <Segment color='black' inverted>3</Segment>
+      </Grid.Column>
+    </Grid.Row>
+  </Grid>
+)
+
+export default GridExampleInverted

docs/app/Examples/collections/Grid/Variations/index.js

@@ -59,6 +59,12 @@ const GridVariationsExamples = () => (
     />
     <ComponentExample examplePath='collections/Grid/Variations/GridExampleColoredRow' />
 
+    <ComponentExample
+      title='Inverted'
+      description='A grid can be inverted to allow dividers to be seen with a dark background.'
+      examplePath='collections/Grid/Variations/GridExampleInverted'
+    />
+
     <ComponentExample
       title='Centered'
       description='A grid can have its columns centered.'

src/collections/Grid/Grid.d.ts

@@ -40,6 +40,9 @@ export interface GridProps {
   /** A grid can double its column width on tablet and mobile sizes. */
   doubling?: boolean;
 
+  /** A grid's colors can be inverted. */
+  inverted?: boolean;
+
   /** A grid can preserve its vertical and horizontal gutters on first and last columns. */
   padded?: boolean | 'horizontally' | 'vertically';
 

src/collections/Grid/Grid.js

@@ -31,6 +31,7 @@ function Grid(props) {
     container,
     divided,
     doubling,
+    inverted,
     padded,
     relaxed,
     reversed,
@@ -45,6 +46,7 @@ function Grid(props) {
     useKeyOnly(centered, 'centered'),
     useKeyOnly(container, 'container'),
     useKeyOnly(doubling, 'doubling'),
+    useKeyOnly(inverted, 'inverted'),
     useKeyOnly(stackable, 'stackable'),
     useKeyOnly(stretched, 'stretched'),
     useKeyOrValueAndKey(celled, 'celled'),
@@ -106,6 +108,9 @@ Grid.propTypes = {
   /** A grid can double its column width on tablet and mobile sizes. */
   doubling: PropTypes.bool,
 
+  /** A grid's colors can be inverted. */
+  inverted: PropTypes.bool,
+
   /** A grid can preserve its vertical and horizontal gutters on first and last columns. */
   padded: PropTypes.oneOfType([
     PropTypes.bool,

test/specs/collections/Grid/Grid-test.js

@@ -25,6 +25,7 @@ describe('Grid', () => {
   common.propKeyOnlyToClassName(Grid, 'centered')
   common.propKeyOnlyToClassName(Grid, 'container')
   common.propKeyOnlyToClassName(Grid, 'doubling')
+  common.propKeyOnlyToClassName(Grid, 'inverted')
   common.propKeyOnlyToClassName(Grid, 'stackable')
   common.propKeyOnlyToClassName(Grid, 'stretched')