From c71efa84375c28fdeb852537ae5b2a33f81cf539 Mon Sep 17 00:00:00 2001
From: "David Z. Han" <zhaohui.han@gmail.com>
Date: Thu, 3 Nov 2016 22:58:20 -0400
Subject: [PATCH] style(Message):  update docs to the latest standards (#789)

---
 ...ddenExample.js => MessageExampleHidden.js} |   6 +-
 ...bleExample.js => MessageExampleVisible.js} |   4 +-
 .../collections/Message/States/index.js       |  20 +++
 ...e.js => MessageExampleDismissibleBlock.js} |   4 +-
 ...geIconExample.js => MessageExampleIcon.js} |   4 +-
 ...opExample.js => MessageExampleIconProp.js} |   4 +-
 ...geListExample.js => MessageExampleList.js} |   4 +-
 ...mple.js => MessageExampleListItemsProp.js} |   4 +-
 ...opExample.js => MessageExampleListProp.js} |   4 +-
 ...ageExample.js => MessageExampleMessage.js} |   4 +-
 ...ample.js => MessageExampleMessageProps.js} |   4 +-
 .../collections/Message/Types/index.js        |  53 +++++++
 ...edExample.js => MessageExampleAttached.js} |   4 +-
 ...ColorExample.js => MessageExampleColor.js} |   4 +-
 ...actExample.js => MessageExampleCompact.js} |   4 +-
 ...ample.js => MessageExampleCompactProps.js} |   4 +-
 ...ErrorExample.js => MessageExampleError.js} |   4 +-
 ...ngExample.js => MessageExampleFloating.js} |   4 +-
 ...mple.js => MessageExampleFloatingProps.js} |   4 +-
 ...geInfoExample.js => MessageExampleInfo.js} |   4 +-
 ...sExample.js => MessageExampleInfoProps.js} |   4 +-
 ...veExample.js => MessageExampleNegative.js} |   4 +-
 ...veExample.js => MessageExamplePositive.js} |   4 +-
 ...geSizeExample.js => MessageExampleSize.js} |   4 +-
 ...essExample.js => MessageExampleSuccess.js} |   4 +-
 ...ingExample.js => MessageExampleWarning.js} |   4 +-
 ...ample.js => MessageExampleWarningProps.js} |   4 +-
 .../collections/Message/Variations/index.js   |  79 ++++++++++
 .../app/Examples/collections/Message/index.js | 136 +-----------------
 29 files changed, 210 insertions(+), 180 deletions(-)
 rename docs/app/Examples/collections/Message/States/{MessageHiddenExample.js => MessageExampleHidden.js} (51%)
 rename docs/app/Examples/collections/Message/States/{MessageVisibleExample.js => MessageExampleVisible.js} (63%)
 create mode 100644 docs/app/Examples/collections/Message/States/index.js
 rename docs/app/Examples/collections/Message/Types/{MessageDismissableBlockExample.js => MessageExampleDismissibleBlock.js} (86%)
 rename docs/app/Examples/collections/Message/Types/{MessageIconExample.js => MessageExampleIcon.js} (81%)
 rename docs/app/Examples/collections/Message/Types/{MessageIconPropExample.js => MessageExampleIconProp.js} (73%)
 rename docs/app/Examples/collections/Message/Types/{MessageListExample.js => MessageExampleList.js} (83%)
 rename docs/app/Examples/collections/Message/Types/{MessageListItemsPropExample.js => MessageExampleListItemsProp.js} (77%)
 rename docs/app/Examples/collections/Message/Types/{MessageListPropExample.js => MessageExampleListProp.js} (76%)
 rename docs/app/Examples/collections/Message/Types/{MessageMessageExample.js => MessageExampleMessage.js} (79%)
 rename docs/app/Examples/collections/Message/Types/{MessageMessagePropsExample.js => MessageExampleMessageProps.js} (73%)
 create mode 100644 docs/app/Examples/collections/Message/Types/index.js
 rename docs/app/Examples/collections/Message/Variations/{MessageAttachedExample.js => MessageExampleAttached.js} (92%)
 rename docs/app/Examples/collections/Message/Variations/{MessageColorExample.js => MessageExampleColor.js} (89%)
 rename docs/app/Examples/collections/Message/Variations/{MessageCompactExample.js => MessageExampleCompact.js} (70%)
 rename docs/app/Examples/collections/Message/Variations/{MessageCompactPropsExample.js => MessageExampleCompactProps.js} (68%)
 rename docs/app/Examples/collections/Message/Variations/{MessageErrorExample.js => MessageExampleError.js} (80%)
 rename docs/app/Examples/collections/Message/Variations/{MessageFloatingExample.js => MessageExampleFloating.js} (61%)
 rename docs/app/Examples/collections/Message/Variations/{MessageFloatingPropsExample.js => MessageExampleFloatingProps.js} (59%)
 rename docs/app/Examples/collections/Message/Variations/{MessageInfoExample.js => MessageExampleInfo.js} (75%)
 rename docs/app/Examples/collections/Message/Variations/{MessageInfoPropsExample.js => MessageExampleInfoProps.js} (69%)
 rename docs/app/Examples/collections/Message/Variations/{MessageNegativeExample.js => MessageExampleNegative.js} (74%)
 rename docs/app/Examples/collections/Message/Variations/{MessagePositiveExample.js => MessageExamplePositive.js} (75%)
 rename docs/app/Examples/collections/Message/Variations/{MessageSizeExample.js => MessageExampleSize.js} (86%)
 rename docs/app/Examples/collections/Message/Variations/{MessageSuccessExample.js => MessageExampleSuccess.js} (74%)
 rename docs/app/Examples/collections/Message/Variations/{MessageWarningExample.js => MessageExampleWarning.js} (76%)
 rename docs/app/Examples/collections/Message/Variations/{MessageWarningPropsExample.js => MessageExampleWarningProps.js} (71%)
 create mode 100644 docs/app/Examples/collections/Message/Variations/index.js

diff --git a/docs/app/Examples/collections/Message/States/MessageHiddenExample.js b/docs/app/Examples/collections/Message/States/MessageExampleHidden.js
similarity index 51%
rename from docs/app/Examples/collections/Message/States/MessageHiddenExample.js
rename to docs/app/Examples/collections/Message/States/MessageExampleHidden.js
index 35bc5da751..7e2ca3616c 100644
--- a/docs/app/Examples/collections/Message/States/MessageHiddenExample.js
+++ b/docs/app/Examples/collections/Message/States/MessageExampleHidden.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageHiddenExample = () => (
+const MessageExampleHidden = () => (
   <Message hidden>
-    You can always see me
+    You can't see me
   </Message>
 )
 
-export default MessageHiddenExample
+export default MessageExampleHidden
diff --git a/docs/app/Examples/collections/Message/States/MessageVisibleExample.js b/docs/app/Examples/collections/Message/States/MessageExampleVisible.js
similarity index 63%
rename from docs/app/Examples/collections/Message/States/MessageVisibleExample.js
rename to docs/app/Examples/collections/Message/States/MessageExampleVisible.js
index b6f8fa9377..b9624fe059 100644
--- a/docs/app/Examples/collections/Message/States/MessageVisibleExample.js
+++ b/docs/app/Examples/collections/Message/States/MessageExampleVisible.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageVisibleExample = () => (
+const MessageExampleVisible = () => (
   <Message visible>
     You can always see me
   </Message>
 )
 
-export default MessageVisibleExample
+export default MessageExampleVisible
diff --git a/docs/app/Examples/collections/Message/States/index.js b/docs/app/Examples/collections/Message/States/index.js
new file mode 100644
index 0000000000..2f47c1c375
--- /dev/null
+++ b/docs/app/Examples/collections/Message/States/index.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+const MessageStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Hidden'
+      description='A message can be hidden.'
+      examplePath='collections/Message/States/MessageExampleHidden'
+    />
+    <ComponentExample
+      title='Visible'
+      description='A message can be set to visible to force itself to be shown.'
+      examplePath='collections/Message/States/MessageExampleVisible'
+    />
+  </ExampleSection>
+)
+
+export default MessageStatesExamples
diff --git a/docs/app/Examples/collections/Message/Types/MessageDismissableBlockExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleDismissibleBlock.js
similarity index 86%
rename from docs/app/Examples/collections/Message/Types/MessageDismissableBlockExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleDismissibleBlock.js
index 6e8c93e491..00e044787a 100644
--- a/docs/app/Examples/collections/Message/Types/MessageDismissableBlockExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleDismissibleBlock.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Message } from 'semantic-ui-react'
 
-export default class MessageDismissableBlockExample extends Component {
+class MessageExampleDismissibleBlock extends Component {
   state = { visible: true }
 
   handleDismiss = () => {
@@ -33,3 +33,5 @@ export default class MessageDismissableBlockExample extends Component {
     )
   }
 }
+
+export default MessageExampleDismissibleBlock
diff --git a/docs/app/Examples/collections/Message/Types/MessageIconExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleIcon.js
similarity index 81%
rename from docs/app/Examples/collections/Message/Types/MessageIconExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleIcon.js
index 86c93d374a..6e68a85faa 100644
--- a/docs/app/Examples/collections/Message/Types/MessageIconExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleIcon.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message, Icon } from 'semantic-ui-react'
 
-const MessageIconExample = () => (
+const MessageExampleIcon = () => (
   <Message icon>
     <Icon name='circle notched' loading />
     <Message.Content>
@@ -11,4 +11,4 @@ const MessageIconExample = () => (
   </Message>
 )
 
-export default MessageIconExample
+export default MessageExampleIcon
diff --git a/docs/app/Examples/collections/Message/Types/MessageIconPropExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleIconProp.js
similarity index 73%
rename from docs/app/Examples/collections/Message/Types/MessageIconPropExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleIconProp.js
index 99469496d9..dce3647724 100644
--- a/docs/app/Examples/collections/Message/Types/MessageIconPropExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleIconProp.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageIconPropExample = () => (
+const MessageExampleIconProp = () => (
   <Message
     icon='inbox'
     header='Have you heard about our mailing list?'
@@ -9,4 +9,4 @@ const MessageIconPropExample = () => (
   />
 )
 
-export default MessageIconPropExample
+export default MessageExampleIconProp
diff --git a/docs/app/Examples/collections/Message/Types/MessageListExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleList.js
similarity index 83%
rename from docs/app/Examples/collections/Message/Types/MessageListExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleList.js
index bf13c699c6..329a14ae69 100644
--- a/docs/app/Examples/collections/Message/Types/MessageListExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleList.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageListExample = () => (
+const MessageExampleList = () => (
   <Message>
     <Message.Header>New Site Features</Message.Header>
     <Message.List>
@@ -11,4 +11,4 @@ const MessageListExample = () => (
   </Message>
 )
 
-export default MessageListExample
+export default MessageExampleList
diff --git a/docs/app/Examples/collections/Message/Types/MessageListItemsPropExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleListItemsProp.js
similarity index 77%
rename from docs/app/Examples/collections/Message/Types/MessageListItemsPropExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleListItemsProp.js
index e0653015ac..e405121c81 100644
--- a/docs/app/Examples/collections/Message/Types/MessageListItemsPropExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleListItemsProp.js
@@ -6,11 +6,11 @@ const items = [
   'Drafts will now auto-save while writing',
 ]
 
-const MessageListItemsPropExample = () => (
+const MessageExampleListItemsProp = () => (
   <Message>
     <Message.Header>New Site Features</Message.Header>
     <Message.List items={items} />
   </Message>
 )
 
-export default MessageListItemsPropExample
+export default MessageExampleListItemsProp
diff --git a/docs/app/Examples/collections/Message/Types/MessageListPropExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleListProp.js
similarity index 76%
rename from docs/app/Examples/collections/Message/Types/MessageListPropExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleListProp.js
index 4391db72d5..1302ec7807 100644
--- a/docs/app/Examples/collections/Message/Types/MessageListPropExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleListProp.js
@@ -6,11 +6,11 @@ const list = [
   'Drafts will now auto-save while writing',
 ]
 
-const MessageListPropExample = () => (
+const MessageExampleListProp = () => (
   <Message
     header='New Site Features'
     list={list}
   />
 )
 
-export default MessageListPropExample
+export default MessageExampleListProp
diff --git a/docs/app/Examples/collections/Message/Types/MessageMessageExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleMessage.js
similarity index 79%
rename from docs/app/Examples/collections/Message/Types/MessageMessageExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleMessage.js
index bf3bb1c00d..57cd95bf17 100644
--- a/docs/app/Examples/collections/Message/Types/MessageMessageExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleMessage.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageMessageExample = () => (
+const MessageExampleMessage = () => (
   <Message>
     <Message.Header>
       Changes in Service
@@ -12,4 +12,4 @@ const MessageMessageExample = () => (
   </Message>
 )
 
-export default MessageMessageExample
+export default MessageExampleMessage
diff --git a/docs/app/Examples/collections/Message/Types/MessageMessagePropsExample.js b/docs/app/Examples/collections/Message/Types/MessageExampleMessageProps.js
similarity index 73%
rename from docs/app/Examples/collections/Message/Types/MessageMessagePropsExample.js
rename to docs/app/Examples/collections/Message/Types/MessageExampleMessageProps.js
index 2e1b5e6b03..cc63cdea54 100644
--- a/docs/app/Examples/collections/Message/Types/MessageMessagePropsExample.js
+++ b/docs/app/Examples/collections/Message/Types/MessageExampleMessageProps.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageMessagePropsExample = () => (
+const MessageExampleMessageProps = () => (
   <Message
     header='Changes in Service'
     content='We updated our privacy policy here to better service our customers. We recommend reviewing the changes.'
   />
 )
 
-export default MessageMessagePropsExample
+export default MessageExampleMessageProps
diff --git a/docs/app/Examples/collections/Message/Types/index.js b/docs/app/Examples/collections/Message/Types/index.js
new file mode 100644
index 0000000000..a431dda4f8
--- /dev/null
+++ b/docs/app/Examples/collections/Message/Types/index.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+const MessageTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Message'
+      description='A basic message.'
+      examplePath='collections/Message/Types/MessageExampleMessage'
+    />
+    <ComponentExample
+      description='A basic message built with props.'
+      examplePath='collections/Message/Types/MessageExampleMessageProps'
+    />
+    <ComponentExample
+      title='List Message'
+      description='A message with a list.'
+      examplePath='collections/Message/Types/MessageExampleList'
+    />
+    <ComponentExample
+      description='Pass array of items to the Message list prop.'
+      examplePath='collections/Message/Types/MessageExampleListProp'
+    />
+    <ComponentExample
+      description='Pass an array of items to the MessageList items prop.'
+      examplePath='collections/Message/Types/MessageExampleListItemsProp'
+    />
+    <ComponentExample
+      title='Icon Message'
+      description='A message can contain an icon.'
+      examplePath='collections/Message/Types/MessageExampleIcon'
+    />
+    <ComponentExample
+      description='You can pass an Icon name to the Message icon prop.'
+      examplePath='collections/Message/Types/MessageExampleIconProp'
+    />
+    <ComponentExample
+      title='Dismissible Block'
+      description='A message that the user can choose to hide.'
+      examplePath='collections/Message/Types/MessageExampleDismissibleBlock'
+    >
+      <strong>
+        <Icon name='warning circle' />
+        Dismissible blocks do not automatically close.
+        Use the <code>onDismiss</code> callback to remove the message.
+      </strong>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default MessageTypesExamples
diff --git a/docs/app/Examples/collections/Message/Variations/MessageAttachedExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleAttached.js
similarity index 92%
rename from docs/app/Examples/collections/Message/Variations/MessageAttachedExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleAttached.js
index 09f5b74385..bff7f8892d 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageAttachedExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleAttached.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Checkbox, Form, Icon, Message } from 'semantic-ui-react'
 
-const MessageAttachedExample = () => (
+const MessageExampleAttached = () => (
   <div>
     <Message
       attached
@@ -25,4 +25,4 @@ const MessageAttachedExample = () => (
   </div>
 )
 
-export default MessageAttachedExample
+export default MessageExampleAttached
diff --git a/docs/app/Examples/collections/Message/Variations/MessageColorExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleColor.js
similarity index 89%
rename from docs/app/Examples/collections/Message/Variations/MessageColorExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleColor.js
index ce7be5fb32..d985edf697 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageColorExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleColor.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageColorExample = () => (
+const MessageExampleColor = () => (
   <div>
     <Message color='red'>Red</Message>
     <Message color='orange'>Orange</Message>
@@ -18,4 +18,4 @@ const MessageColorExample = () => (
   </div>
 )
 
-export default MessageColorExample
+export default MessageExampleColor
diff --git a/docs/app/Examples/collections/Message/Variations/MessageCompactExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleCompact.js
similarity index 70%
rename from docs/app/Examples/collections/Message/Variations/MessageCompactExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleCompact.js
index e6e6187bb6..621a28809e 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageCompactExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleCompact.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageCompactExample = () => (
+const MessageExampleCompact = () => (
   <Message compact>
     Get all the best inventions in your e-mail every day. Sign up now!
   </Message>
 )
 
-export default MessageCompactExample
+export default MessageExampleCompact
diff --git a/docs/app/Examples/collections/Message/Variations/MessageCompactPropsExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleCompactProps.js
similarity index 68%
rename from docs/app/Examples/collections/Message/Variations/MessageCompactPropsExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleCompactProps.js
index 54af0aacfc..ec231572a1 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageCompactPropsExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleCompactProps.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageCompactPropsExample = () => (
+const MessageExampleCompactProps = () => (
   <Message
     compact
     content='Get all the best inventions in your e-mail every day. Sign up now!'
   />
 )
 
-export default MessageCompactPropsExample
+export default MessageExampleCompactProps
diff --git a/docs/app/Examples/collections/Message/Variations/MessageErrorExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleError.js
similarity index 80%
rename from docs/app/Examples/collections/Message/Variations/MessageErrorExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleError.js
index 180e1b6def..71ba2683b3 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageErrorExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleError.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageErrorExample = () => (
+const MessageExampleError = () => (
   <Message
     error
     header='There was some errors with your submission'
@@ -12,4 +12,4 @@ const MessageErrorExample = () => (
   />
 )
 
-export default MessageErrorExample
+export default MessageExampleError
diff --git a/docs/app/Examples/collections/Message/Variations/MessageFloatingExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleFloating.js
similarity index 61%
rename from docs/app/Examples/collections/Message/Variations/MessageFloatingExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleFloating.js
index cc5b19c626..d87473354c 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageFloatingExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleFloating.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageFloatingExample = () => (
+const MessageExampleFloating = () => (
   <Message floating>
     Way to go!
   </Message>
 )
 
-export default MessageFloatingExample
+export default MessageExampleFloating
diff --git a/docs/app/Examples/collections/Message/Variations/MessageFloatingPropsExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleFloatingProps.js
similarity index 59%
rename from docs/app/Examples/collections/Message/Variations/MessageFloatingPropsExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleFloatingProps.js
index 85ea062c79..48b311f3f7 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageFloatingPropsExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleFloatingProps.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageFloatingPropsExample = () => (
+const MessageExampleFloatingProps = () => (
   <Message
     floating
     content='Way to go!'
   />
 )
 
-export default MessageFloatingPropsExample
+export default MessageExampleFloatingProps
diff --git a/docs/app/Examples/collections/Message/Variations/MessageInfoExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleInfo.js
similarity index 75%
rename from docs/app/Examples/collections/Message/Variations/MessageInfoExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleInfo.js
index 412324c0a2..41d3f34c7c 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageInfoExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleInfo.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageInfoExample = () => (
+const MessageExampleInfo = () => (
   <Message info>
     <Message.Header>Was this what you wanted?</Message.Header>
     <p>Did you know it's been a while?</p>
   </Message>
 )
 
-export default MessageInfoExample
+export default MessageExampleInfo
diff --git a/docs/app/Examples/collections/Message/Variations/MessageInfoPropsExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleInfoProps.js
similarity index 69%
rename from docs/app/Examples/collections/Message/Variations/MessageInfoPropsExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleInfoProps.js
index 79c7c8a048..ee7bf87522 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageInfoPropsExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleInfoProps.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageInfoPropsExample = () => (
+const MessageExampleInfoProps = () => (
   <Message
     info
     header='Was this what you wanted?'
@@ -9,4 +9,4 @@ const MessageInfoPropsExample = () => (
   />
 )
 
-export default MessageInfoPropsExample
+export default MessageExampleInfoProps
diff --git a/docs/app/Examples/collections/Message/Variations/MessageNegativeExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleNegative.js
similarity index 74%
rename from docs/app/Examples/collections/Message/Variations/MessageNegativeExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleNegative.js
index cb8c669eb5..c7a15087d0 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageNegativeExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleNegative.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageNegativeExample = () => (
+const MessageExampleNegative = () => (
   <Message negative>
     <Message.Header>We're sorry we can't apply that discount</Message.Header>
     <p>That offer has expired</p>
   </Message>
 )
 
-export default MessageNegativeExample
+export default MessageExampleNegative
diff --git a/docs/app/Examples/collections/Message/Variations/MessagePositiveExample.js b/docs/app/Examples/collections/Message/Variations/MessageExamplePositive.js
similarity index 75%
rename from docs/app/Examples/collections/Message/Variations/MessagePositiveExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExamplePositive.js
index 1df27e5a4a..c199869ab7 100644
--- a/docs/app/Examples/collections/Message/Variations/MessagePositiveExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExamplePositive.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessagePositiveExample = () => (
+const MessageExamplePositive = () => (
   <Message positive>
     <Message.Header>You are eligible for a reward</Message.Header>
     <p>Go to your <b>special offers</b> page to see now.</p>
   </Message>
 )
 
-export default MessagePositiveExample
+export default MessageExamplePositive
diff --git a/docs/app/Examples/collections/Message/Variations/MessageSizeExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleSize.js
similarity index 86%
rename from docs/app/Examples/collections/Message/Variations/MessageSizeExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleSize.js
index 6679295efd..68f8161c1a 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageSizeExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageColorExample = () => (
+const MessageExampleSize = () => (
   <div>
     <Message size='mini'>This is a mini message.</Message>
     <Message size='tiny'>This is a tiny message.</Message>
@@ -13,4 +13,4 @@ const MessageColorExample = () => (
   </div>
 )
 
-export default MessageColorExample
+export default MessageExampleSize
diff --git a/docs/app/Examples/collections/Message/Variations/MessageSuccessExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleSuccess.js
similarity index 74%
rename from docs/app/Examples/collections/Message/Variations/MessageSuccessExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleSuccess.js
index 4b853d3a93..3e925f8e99 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageSuccessExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleSuccess.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageSuccessExample = () => (
+const MessageExampleSuccess = () => (
   <Message
     success
     header='Your user registration was successful'
@@ -9,4 +9,4 @@ const MessageSuccessExample = () => (
   />
 )
 
-export default MessageSuccessExample
+export default MessageExampleSuccess
diff --git a/docs/app/Examples/collections/Message/Variations/MessageWarningExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleWarning.js
similarity index 76%
rename from docs/app/Examples/collections/Message/Variations/MessageWarningExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleWarning.js
index 4b62de3e28..485fa36e65 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageWarningExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleWarning.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageWarningExample = () => (
+const MessageExampleWarning = () => (
   <Message warning>
     <Message.Header>You must register before you can do that!</Message.Header>
     <p>Visit our registration page, then try again.</p>
   </Message>
 )
 
-export default MessageWarningExample
+export default MessageExampleWarning
diff --git a/docs/app/Examples/collections/Message/Variations/MessageWarningPropsExample.js b/docs/app/Examples/collections/Message/Variations/MessageExampleWarningProps.js
similarity index 71%
rename from docs/app/Examples/collections/Message/Variations/MessageWarningPropsExample.js
rename to docs/app/Examples/collections/Message/Variations/MessageExampleWarningProps.js
index 7cf32e132e..1780db6993 100644
--- a/docs/app/Examples/collections/Message/Variations/MessageWarningPropsExample.js
+++ b/docs/app/Examples/collections/Message/Variations/MessageExampleWarningProps.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MessageWarningPropsExample = () => (
+const MessageExampleWarningProps = () => (
   <Message
     warning
     header='You must register before you can do that!'
@@ -9,4 +9,4 @@ const MessageWarningPropsExample = () => (
   />
 )
 
-export default MessageWarningPropsExample
+export default MessageExampleWarningProps
diff --git a/docs/app/Examples/collections/Message/Variations/index.js b/docs/app/Examples/collections/Message/Variations/index.js
new file mode 100644
index 0000000000..68fb55beee
--- /dev/null
+++ b/docs/app/Examples/collections/Message/Variations/index.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+const MessageVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Floating'
+      description='A message can float above content that it is related to.'
+      examplePath='collections/Message/Variations/MessageExampleFloating'
+    />
+    <ComponentExample
+      description='You can also use props to configure the markup.'
+      examplePath='collections/Message/Variations/MessageExampleFloatingProps'
+    />
+    <ComponentExample
+      title='Compact'
+      description='A message can only take up the width of its content.'
+      examplePath='collections/Message/Variations/MessageExampleCompact'
+    />
+    <ComponentExample
+      description='You can also use props to configure the markup.'
+      examplePath='collections/Message/Variations/MessageExampleCompactProps'
+    />
+    <ComponentExample
+      title='Attached'
+      description='A message can be formatted to attach itself to other content.'
+      examplePath='collections/Message/Variations/MessageExampleAttached'
+    />
+    <ComponentExample
+      title='Info'
+      description='A message may be formatted to display information.'
+      examplePath='collections/Message/Variations/MessageExampleInfo'
+    />
+    <ComponentExample
+      description='You can also use props to configure the markup.'
+      examplePath='collections/Message/Variations/MessageExampleInfoProps'
+    />
+    <ComponentExample
+      title='Warning'
+      description='A message may be formatted to display warning message.'
+      examplePath='collections/Message/Variations/MessageExampleWarning'
+    />
+    <ComponentExample
+      description='You can also use props to configure the markup.'
+      examplePath='collections/Message/Variations/MessageExampleWarningProps'
+    />
+    <ComponentExample
+      title='Positive/Success'
+      description='A message may be formatted to display a positive message.'
+      examplePath='collections/Message/Variations/MessageExamplePositive'
+    />
+    <ComponentExample
+      description='You can also use props to configure the markup.'
+      examplePath='collections/Message/Variations/MessageExampleSuccess'
+    />
+    <ComponentExample
+      title='Negative/Error'
+      description='A message may be formatted to display a negative message.'
+      examplePath='collections/Message/Variations/MessageExampleNegative'
+    />
+    <ComponentExample
+      description='You can also use props to configure the markup.'
+      examplePath='collections/Message/Variations/MessageExampleError'
+    />
+    <ComponentExample
+      title='Colored'
+      description='A message can be formatted to be different colors.'
+      examplePath='collections/Message/Variations/MessageExampleColor'
+    />
+    <ComponentExample
+      title='Size'
+      description='A message can have different sizes.'
+      examplePath='collections/Message/Variations/MessageExampleSize'
+    />
+  </ExampleSection>
+)
+
+export default MessageVariationsExamples
diff --git a/docs/app/Examples/collections/Message/index.js b/docs/app/Examples/collections/Message/index.js
index 53deb6cbbf..7791f15161 100644
--- a/docs/app/Examples/collections/Message/index.js
+++ b/docs/app/Examples/collections/Message/index.js
@@ -1,138 +1,14 @@
 import React from 'react'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-import { Icon } from 'semantic-ui-react'
+import Types from './Types'
+import States from './States'
+import Variations from './Variations'
 
 const MessageExamples = () => (
   <div>
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Message'
-        description='A basic message'
-        examplePath='collections/Message/Types/MessageMessageExample'
-      />
-      <ComponentExample
-        description='A basic message built with props'
-        examplePath='collections/Message/Types/MessageMessagePropsExample'
-      />
-      <ComponentExample
-        title='List Message'
-        description='A message with a list'
-        examplePath='collections/Message/Types/MessageListExample'
-      />
-      <ComponentExample
-        description='Pass array of items to the Message list prop'
-        examplePath='collections/Message/Types/MessageListPropExample'
-      />
-      <ComponentExample
-        description='Pass an array of items to the MessageList items prop'
-        examplePath='collections/Message/Types/MessageListItemsPropExample'
-      />
-      <ComponentExample
-        title='Icon Message'
-        description='A message can contain an icon'
-        examplePath='collections/Message/Types/MessageIconExample'
-      />
-      <ComponentExample
-        description='You can pass an Icon name to the Message icon prop'
-        examplePath='collections/Message/Types/MessageIconPropExample'
-      />
-      <ComponentExample
-        title='Dismissable Block'
-        description='A message that the user can choose to hide'
-        examplePath='collections/Message/Types/MessageDismissableBlockExample'
-      >
-        <strong>
-          <Icon name='warning circle' />
-          Dismissable blocks do not automatically close.
-          Use the <code>onDismiss</code> callback to remove the message.
-        </strong>
-      </ComponentExample>
-    </ExampleSection>
-    <ExampleSection title='States'>
-      <ComponentExample
-        title='Hidden'
-        description='A message can be hidden'
-        examplePath='collections/Message/States/MessageHiddenExample'
-      />
-      <ComponentExample
-        title='Visible'
-        description='A message can be set to visible to force itself to be shown'
-        examplePath='collections/Message/States/MessageVisibleExample'
-      />
-    </ExampleSection>
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Floating'
-        description='A message can float above content that it is related to'
-        examplePath='collections/Message/Variations/MessageFloatingExample'
-      />
-      <ComponentExample
-        description='You can also use props to configure the markup'
-        examplePath='collections/Message/Variations/MessageFloatingPropsExample'
-      />
-      <ComponentExample
-        title='Compact'
-        description='A message can only take up the width of its content'
-        examplePath='collections/Message/Variations/MessageCompactExample'
-      />
-      <ComponentExample
-        description='You can also use props to configure the markup'
-        examplePath='collections/Message/Variations/MessageCompactPropsExample'
-      />
-      <ComponentExample
-        title='Attached'
-        description='A message can be formatted to attach itself to other content'
-        examplePath='collections/Message/Variations/MessageAttachedExample'
-      />
-      <ComponentExample
-        title='Info'
-        description='A message may be formatted to display information'
-        examplePath='collections/Message/Variations/MessageInfoExample'
-      />
-      <ComponentExample
-        description='You can also use props to configure the markup'
-        examplePath='collections/Message/Variations/MessageInfoPropsExample'
-      />
-      <ComponentExample
-        title='Warning'
-        description='A message may be formatted to display warning message'
-        examplePath='collections/Message/Variations/MessageWarningExample'
-      />
-      <ComponentExample
-        description='You can also use props to configure the markup'
-        examplePath='collections/Message/Variations/MessageWarningPropsExample'
-      />
-      <ComponentExample
-        title='Positive/Success'
-        description='A message may be formatted to display a positive message'
-        examplePath='collections/Message/Variations/MessagePositiveExample'
-      />
-      <ComponentExample
-        description='You can also use props to configure the markup'
-        examplePath='collections/Message/Variations/MessageSuccessExample'
-      />
-      <ComponentExample
-        title='Negative/Error'
-        description='A message may be formatted to display a negative message'
-        examplePath='collections/Message/Variations/MessageNegativeExample'
-      />
-      <ComponentExample
-        description='You can also use props to configure the markup'
-        examplePath='collections/Message/Variations/MessageErrorExample'
-      />
-      <ComponentExample
-        title='Colored'
-        description='A message can be formatted to be different colors'
-        examplePath='collections/Message/Variations/MessageColorExample'
-      />
-      <ComponentExample
-        title='Size'
-        description='A message can have different sizes'
-        examplePath='collections/Message/Variations/MessageSizeExample'
-      />
-    </ExampleSection>
+    <Types />
+    <States />
+    <Variations />
   </div>
 )