From bd296b584785d44a35d16f04c8e25fb35c40e175 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Thu, 14 Jul 2016 20:09:41 +0300
Subject: [PATCH] (fix) Rail review fixes #181

---
 .../Rail/Types/RailDividingExample.js         |  6 ++--
 .../elements/Rail/Types/RailExample.js        |  6 ++--
 .../Rail/Types/RailInternalExample.js         |  6 ++--
 .../Rail/Variations/RailAttachedExample.js    | 30 +++++++++----------
 .../Variations/RailAttachedInternalExample.js |  4 ++-
 .../Rail/Variations/RailCloseExample.js       |  6 ++--
 .../Rail/Variations/RailSizeExample.js        | 30 +++++++++----------
 .../Rail/Variations/RailVeryCloseExample.js   |  6 ++--
 src/elements/Rail/Rail.js                     |  3 ++
 9 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/docs/app/Examples/elements/Rail/Types/RailDividingExample.js b/docs/app/Examples/elements/Rail/Types/RailDividingExample.js
index 98d2deb860..da592e1ba8 100644
--- a/docs/app/Examples/elements/Rail/Types/RailDividingExample.js
+++ b/docs/app/Examples/elements/Rail/Types/RailDividingExample.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import { Grid, Rail, Segment } from 'stardust'
+import { Image, Grid, Rail, Segment } from 'stardust'
 
 const RailDividingExample = () => (
   <Grid className='three column'>
     <Grid.Column className='centered'>
       <Segment>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+
         <Rail dividing position='left'>
           <Segment>Left Rail Content</Segment>
         </Rail>
@@ -12,8 +14,6 @@ const RailDividingExample = () => (
         <Rail dividing position='right'>
           <Segment>Right Rail Content</Segment>
         </Rail>
-
-        Segment content
       </Segment>
     </Grid.Column>
   </Grid>
diff --git a/docs/app/Examples/elements/Rail/Types/RailExample.js b/docs/app/Examples/elements/Rail/Types/RailExample.js
index 11476ef592..a3152c0960 100644
--- a/docs/app/Examples/elements/Rail/Types/RailExample.js
+++ b/docs/app/Examples/elements/Rail/Types/RailExample.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import { Grid, Rail, Segment } from 'stardust'
+import { Image, Grid, Rail, Segment } from 'stardust'
 
 const RailExample = () => (
   <Grid className='three column'>
     <Grid.Column className='centered'>
       <Segment>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+
         <Rail position='left'>
           <Segment>Left Rail Content</Segment>
         </Rail>
@@ -12,8 +14,6 @@ const RailExample = () => (
         <Rail position='right'>
           <Segment>Right Rail Content</Segment>
         </Rail>
-
-        Segment content
       </Segment>
     </Grid.Column>
   </Grid>
diff --git a/docs/app/Examples/elements/Rail/Types/RailInternalExample.js b/docs/app/Examples/elements/Rail/Types/RailInternalExample.js
index 9253bb9aee..831c2271d3 100644
--- a/docs/app/Examples/elements/Rail/Types/RailInternalExample.js
+++ b/docs/app/Examples/elements/Rail/Types/RailInternalExample.js
@@ -1,8 +1,10 @@
 import React from 'react'
-import { Rail, Segment } from 'stardust'
+import { Image, Rail, Segment } from 'stardust'
 
 const RailInternalExample = () => (
   <Segment className='center aligned'>
+    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+
     <Rail internal position='left'>
       <Segment>Left Rail Content</Segment>
     </Rail>
@@ -10,8 +12,6 @@ const RailInternalExample = () => (
     <Rail internal position='right'>
       <Segment>Right Rail Content</Segment>
     </Rail>
-
-    Segment content
   </Segment>
 )
 
diff --git a/docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js b/docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js
index 4c9751f0ed..f951bd9ecd 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Grid, Rail, Segment } from 'stardust'
+import { Image, Grid, Rail, Segment } from 'stardust'
 
 const RailAttachedExample = () => (
-      <Grid className='three column'>
-        <Grid.Column className='centered'>
-          <Segment className='center aligned'>
-            <Rail attached position='left'>
-              <Segment>Left Rail Content</Segment>
-            </Rail>
+  <Grid className='three column'>
+    <Grid.Column className='centered'>
+      <Segment className='center aligned'>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
 
-            <Rail attached position='right'>
-              <Segment>Right Rail Content</Segment>
-            </Rail>
+        <Rail attached position='left'>
+          <Segment>Left Rail Content</Segment>
+        </Rail>
 
-            Segment content
-          </Segment>
-        </Grid.Column>
-      </Grid>
-    )
+        <Rail attached position='right'>
+          <Segment>Right Rail Content</Segment>
+        </Rail>
+      </Segment>
+    </Grid.Column>
+  </Grid>
+)
 
 export default RailAttachedExample
diff --git a/docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js b/docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js
index 879aec50f7..960f81ae7b 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js
@@ -1,8 +1,10 @@
 import React from 'react'
-import { Rail, Segment } from 'stardust'
+import { Image, Rail, Segment } from 'stardust'
 
 const RailAttachedInternalExample = () => (
   <Segment>
+    <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+
     <Rail attached internal position='left'>
       <Segment>Left Rail Content</Segment>
     </Rail>
diff --git a/docs/app/Examples/elements/Rail/Variations/RailCloseExample.js b/docs/app/Examples/elements/Rail/Variations/RailCloseExample.js
index db76089af1..62d2aa00ab 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailCloseExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailCloseExample.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import { Grid, Rail, Segment } from 'stardust'
+import { Image, Grid, Rail, Segment } from 'stardust'
 
 const RailCloseExample = () => (
   <Grid className='three column'>
     <Grid.Column className='centered'>
       <Segment>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+
         <Rail close position='left'>
           <Segment>Left Rail Content</Segment>
         </Rail>
@@ -12,8 +14,6 @@ const RailCloseExample = () => (
         <Rail close position='right'>
           <Segment>Right Rail Content</Segment>
         </Rail>
-
-        Segment content
       </Segment>
     </Grid.Column>
   </Grid>
diff --git a/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js b/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js
index 2f676fdbe0..f00eb4359f 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailSizeExample.js
@@ -1,22 +1,22 @@
 import React from 'react'
-import { Grid, Rail, Segment } from 'stardust'
+import { Image, Grid, Rail, Segment } from 'stardust'
 
 const RailSizeExample = () => (
-      <Grid className='three column'>
-        <Grid.Column className='centered'>
-          <Segment>
-            <Rail size='mini' position='left'>
-              <Segment>Left Rail Content</Segment>
-            </Rail>
+  <Grid className='three column'>
+    <Grid.Column className='centered'>
+      <Segment>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
 
-            <Rail size='mini' position='right'>
-              <Segment>Right Rail Content</Segment>
-            </Rail>
+        <Rail size='tiny' position='left'>
+          <Segment>Left Rail Content</Segment>
+        </Rail>
 
-            Segment content
-          </Segment>
-        </Grid.Column>
-      </Grid>
-    )
+        <Rail size='tiny' position='right'>
+          <Segment>Right Rail Content</Segment>
+        </Rail>
+      </Segment>
+    </Grid.Column>
+  </Grid>
+)
 
 export default RailSizeExample
diff --git a/docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js b/docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js
index 3428434e8d..a15f02b990 100644
--- a/docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js
+++ b/docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import { Grid, Rail, Segment } from 'stardust'
+import { Image, Grid, Rail, Segment } from 'stardust'
 
 const RailVeryCloseExample = () => (
   <Grid className='three column'>
     <Grid.Column className='centered'>
       <Segment>
+        <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+
         <Rail close='very' position='left'>
           <Segment>Left Rail Content</Segment>
         </Rail>
@@ -12,8 +14,6 @@ const RailVeryCloseExample = () => (
         <Rail close='very' position='right'>
           <Segment>Right Rail Content</Segment>
         </Rail>
-
-        Segment content
       </Segment>
     </Grid.Column>
   </Grid>
diff --git a/src/elements/Rail/Rail.js b/src/elements/Rail/Rail.js
index f29d8defdd..b07402ac78 100644
--- a/src/elements/Rail/Rail.js
+++ b/src/elements/Rail/Rail.js
@@ -6,6 +6,9 @@ import * as sui from '../../utils/semanticUtils'
 import { getUnhandledProps, useKeyOnly, useKeyOrValueAndKey } from '../../utils/propUtils'
 import META from '../../utils/Meta'
 
+/**
+ * A rail is used to show accompanying content outside the boundaries of the main view of a site.
+ */
 function Rail(props) {
   const { attached, className, close, children, dividing, internal, position, size } = props
   const classes = cx(