diff --git a/docs/app/Examples/modules/Progress/Content/Bar.js b/docs/app/Examples/modules/Progress/Content/ProgressExampleBar.js
similarity index 59%
rename from docs/app/Examples/modules/Progress/Content/Bar.js
rename to docs/app/Examples/modules/Progress/Content/ProgressExampleBar.js
index b80cc0378c..9a6abd9f95 100644
--- a/docs/app/Examples/modules/Progress/Content/Bar.js
+++ b/docs/app/Examples/modules/Progress/Content/ProgressExampleBar.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressBarExample = () => (
+const ProgressExampleBar = () => (
   <Progress percent={33} />
 )
 
-export default ProgressBarExample
+export default ProgressExampleBar
diff --git a/docs/app/Examples/modules/Progress/Content/Label.js b/docs/app/Examples/modules/Progress/Content/ProgressExampleLabel.js
similarity index 61%
rename from docs/app/Examples/modules/Progress/Content/Label.js
rename to docs/app/Examples/modules/Progress/Content/ProgressExampleLabel.js
index 4800b2f295..d09bf80130 100644
--- a/docs/app/Examples/modules/Progress/Content/Label.js
+++ b/docs/app/Examples/modules/Progress/Content/ProgressExampleLabel.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressLabelExample = () => (
+const ProgressExampleLabel = () => (
   <Progress percent={55}>Label</Progress>
 )
 
-export default ProgressLabelExample
+export default ProgressExampleLabel
diff --git a/docs/app/Examples/modules/Progress/Content/Progress.js b/docs/app/Examples/modules/Progress/Content/ProgressExampleProgress.js
similarity index 58%
rename from docs/app/Examples/modules/Progress/Content/Progress.js
rename to docs/app/Examples/modules/Progress/Content/ProgressExampleProgress.js
index 493b612a50..5aa7d45131 100644
--- a/docs/app/Examples/modules/Progress/Content/Progress.js
+++ b/docs/app/Examples/modules/Progress/Content/ProgressExampleProgress.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressExample = () => (
+const ProgressExampleProgress = () => (
   <Progress percent={44} progress />
 )
 
-export default ProgressExample
+export default ProgressExampleProgress
diff --git a/docs/app/Examples/modules/Progress/Content/index.js b/docs/app/Examples/modules/Progress/Content/index.js
index cba0f33978..d189fad588 100644
--- a/docs/app/Examples/modules/Progress/Content/index.js
+++ b/docs/app/Examples/modules/Progress/Content/index.js
@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class ProgressContentExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Content'>
-        <ComponentExample
-          title='Bar'
-          description='A progress element can contain a bar visually indicating progress.'
-          examplePath='modules/Progress/Content/Bar'
-        />
-        <ComponentExample
-          title='Progress'
-          description='A progress bar can contain a text value indicating current progress.'
-          examplePath='modules/Progress/Content/Progress'
-        />
-        <ComponentExample
-          title='Label'
-          description='A progress element can contain a label.'
-          examplePath='modules/Progress/Content/Label'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressContentExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Bar'
+      description='A progress element can contain a bar visually indicating progress.'
+      examplePath='modules/Progress/Content/ProgressExampleBar'
+    />
+    <ComponentExample
+      title='Progress'
+      description='A progress bar can contain a text value indicating current progress.'
+      examplePath='modules/Progress/Content/ProgressExampleProgress'
+    />
+    <ComponentExample
+      title='Label'
+      description='A progress element can contain a label.'
+      examplePath='modules/Progress/Content/ProgressExampleLabel'
+    />
+  </ExampleSection>
+)
+
+export default ProgressContentExamples
diff --git a/docs/app/Examples/modules/Progress/States/Active.js b/docs/app/Examples/modules/Progress/States/ProgressExampleActive.js
similarity index 63%
rename from docs/app/Examples/modules/Progress/States/Active.js
rename to docs/app/Examples/modules/Progress/States/ProgressExampleActive.js
index 72ed1097d9..ab5ea2b156 100644
--- a/docs/app/Examples/modules/Progress/States/Active.js
+++ b/docs/app/Examples/modules/Progress/States/ProgressExampleActive.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressActiveExample = () => (
+const ProgressExampleActive = () => (
   <Progress percent={60} active>
     Active
   </Progress>
 )
 
-export default ProgressActiveExample
+export default ProgressExampleActive
diff --git a/docs/app/Examples/modules/Progress/States/Disabled.js b/docs/app/Examples/modules/Progress/States/ProgressExampleDisabled.js
similarity index 63%
rename from docs/app/Examples/modules/Progress/States/Disabled.js
rename to docs/app/Examples/modules/Progress/States/ProgressExampleDisabled.js
index db7d3f2280..141e77a1bb 100644
--- a/docs/app/Examples/modules/Progress/States/Disabled.js
+++ b/docs/app/Examples/modules/Progress/States/ProgressExampleDisabled.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressDisabledExample = () => (
+const ProgressExampleDisabled = () => (
   <Progress percent={60} disabled>
     Disabled
   </Progress>
 )
 
-export default ProgressDisabledExample
+export default ProgressExampleDisabled
diff --git a/docs/app/Examples/modules/Progress/States/Error.js b/docs/app/Examples/modules/Progress/States/ProgressExampleError.js
similarity index 66%
rename from docs/app/Examples/modules/Progress/States/Error.js
rename to docs/app/Examples/modules/Progress/States/ProgressExampleError.js
index 8a22ce5edc..f3f1dcc6c0 100644
--- a/docs/app/Examples/modules/Progress/States/Error.js
+++ b/docs/app/Examples/modules/Progress/States/ProgressExampleError.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressErrorExample = () => (
+const ProgressExampleError = () => (
   <Progress percent={100} error>
     There was an error
   </Progress>
 )
 
-export default ProgressErrorExample
+export default ProgressExampleError
diff --git a/docs/app/Examples/modules/Progress/States/Success.js b/docs/app/Examples/modules/Progress/States/ProgressExampleSuccess.js
similarity index 66%
rename from docs/app/Examples/modules/Progress/States/Success.js
rename to docs/app/Examples/modules/Progress/States/ProgressExampleSuccess.js
index 0c778435d4..e484c8529d 100644
--- a/docs/app/Examples/modules/Progress/States/Success.js
+++ b/docs/app/Examples/modules/Progress/States/ProgressExampleSuccess.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressSuccessExample = () => (
+const ProgressExampleSuccess = () => (
   <Progress percent={100} success>
     The progress was successful
   </Progress>
 )
 
-export default ProgressSuccessExample
+export default ProgressExampleSuccess
diff --git a/docs/app/Examples/modules/Progress/States/Warning.js b/docs/app/Examples/modules/Progress/States/ProgressExampleWarning.js
similarity index 65%
rename from docs/app/Examples/modules/Progress/States/Warning.js
rename to docs/app/Examples/modules/Progress/States/ProgressExampleWarning.js
index 5948774123..aec580dedc 100644
--- a/docs/app/Examples/modules/Progress/States/Warning.js
+++ b/docs/app/Examples/modules/Progress/States/ProgressExampleWarning.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressWarningExample = () => (
+const ProgressExampleWarning = () => (
   <Progress percent={100} warning>
     I am warning you
   </Progress>
 )
 
-export default ProgressWarningExample
+export default ProgressExampleWarning
diff --git a/docs/app/Examples/modules/Progress/States/index.js b/docs/app/Examples/modules/Progress/States/index.js
index 40b186c6c9..0e447d570d 100644
--- a/docs/app/Examples/modules/Progress/States/index.js
+++ b/docs/app/Examples/modules/Progress/States/index.js
@@ -1,42 +1,40 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import { Message } from 'semantic-ui-react'
 
-export default class ProgressStatesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='States'>
-        <Message info>
-          Semantic UI states <code>success</code>, <code>warning</code>, and <code>error</code>
-          {' '}are only retained at 100% completion.
-        </Message>
-        <ComponentExample
-          title='Active'
-          description='A progress bar can show activity'
-          examplePath='modules/Progress/States/Active'
-        />
-        <ComponentExample
-          title='Success'
-          description='A progress bar can show a success state.'
-          examplePath='modules/Progress/States/Success'
-        />
-        <ComponentExample
-          title='Warning'
-          description='A progress bar can show a warning state.'
-          examplePath='modules/Progress/States/Warning'
-        />
-        <ComponentExample
-          title='Error'
-          description='A progress bar can show an error state.'
-          examplePath='modules/Progress/States/Error'
-        />
-        <ComponentExample
-          title='Disabled'
-          description='A progress bar can be disabled.'
-          examplePath='modules/Progress/States/Disabled'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressStatesExamples = () => (
+  <ExampleSection title='States'>
+    <Message info>
+      Semantic UI states <code>success</code>, <code>warning</code>, and <code>error</code>
+      {' '}are only retained at 100% completion.
+    </Message>
+    <ComponentExample
+      title='Active'
+      description='A progress bar can show activity.'
+      examplePath='modules/Progress/States/ProgressExampleActive'
+    />
+    <ComponentExample
+      title='Success'
+      description='A progress bar can show a success state.'
+      examplePath='modules/Progress/States/ProgressExampleSuccess'
+    />
+    <ComponentExample
+      title='Warning'
+      description='A progress bar can show a warning state.'
+      examplePath='modules/Progress/States/ProgressExampleWarning'
+    />
+    <ComponentExample
+      title='Error'
+      description='A progress bar can show an error state.'
+      examplePath='modules/Progress/States/ProgressExampleError'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='A progress bar can be disabled.'
+      examplePath='modules/Progress/States/ProgressExampleDisabled'
+    />
+  </ExampleSection>
+)
+
+export default ProgressStatesExamples
diff --git a/docs/app/Examples/modules/Progress/Types/AutoSuccess.js b/docs/app/Examples/modules/Progress/Types/ProgressExampleAutoSuccess.js
similarity index 86%
rename from docs/app/Examples/modules/Progress/Types/AutoSuccess.js
rename to docs/app/Examples/modules/Progress/Types/ProgressExampleAutoSuccess.js
index 582a4e1735..453855f87a 100644
--- a/docs/app/Examples/modules/Progress/Types/AutoSuccess.js
+++ b/docs/app/Examples/modules/Progress/Types/ProgressExampleAutoSuccess.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Button, Progress } from 'semantic-ui-react'
 
-export default class ProgressAutoSuccessExample extends Component {
+export default class ProgressExampleAutoSuccess extends Component {
   state = { percent: 0 }
 
   toggle = () => this.setState({ percent: this.state.percent === 0 ? 100 : 0 })
diff --git a/docs/app/Examples/modules/Progress/Types/Indicating.js b/docs/app/Examples/modules/Progress/Types/ProgressExampleIndicating.js
similarity index 86%
rename from docs/app/Examples/modules/Progress/Types/Indicating.js
rename to docs/app/Examples/modules/Progress/Types/ProgressExampleIndicating.js
index cdeef9edb9..4c74a768c3 100644
--- a/docs/app/Examples/modules/Progress/Types/Indicating.js
+++ b/docs/app/Examples/modules/Progress/Types/ProgressExampleIndicating.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Button, Progress } from 'semantic-ui-react'
 
-export default class ProgressIndicatingExample extends Component {
+export default class ProgressExampleIndicating extends Component {
   state = { percent: 33 }
 
   increment = () => this.setState({
diff --git a/docs/app/Examples/modules/Progress/Types/Standard.js b/docs/app/Examples/modules/Progress/Types/ProgressExampleStandard.js
similarity index 56%
rename from docs/app/Examples/modules/Progress/Types/Standard.js
rename to docs/app/Examples/modules/Progress/Types/ProgressExampleStandard.js
index fa58112fc1..250c5db0ea 100644
--- a/docs/app/Examples/modules/Progress/Types/Standard.js
+++ b/docs/app/Examples/modules/Progress/Types/ProgressExampleStandard.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressStandardExample = () => (
+const ProgressExampleStandard = () => (
   <Progress percent={11} />
 )
 
-export default ProgressStandardExample
+export default ProgressExampleStandard
diff --git a/docs/app/Examples/modules/Progress/Types/index.js b/docs/app/Examples/modules/Progress/Types/index.js
index a28df8dd1d..eecf110658 100644
--- a/docs/app/Examples/modules/Progress/Types/index.js
+++ b/docs/app/Examples/modules/Progress/Types/index.js
@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class ProgressTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Types'>
-        <ComponentExample
-          title='Standard'
-          description='A standard progress bar.'
-          examplePath='modules/Progress/Types/Standard'
-        />
-        <ComponentExample
-          title='Indicating'
-          description='An indicating progress bar visually indicates the current level of progress of a task.'
-          examplePath='modules/Progress/Types/Indicating'
-        />
-        <ComponentExample
-          title='Auto Success'
-          description='A progress bar can automatically trigger the success state when progress completes.'
-          examplePath='modules/Progress/Types/AutoSuccess'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Standard'
+      description='A standard progress bar.'
+      examplePath='modules/Progress/Types/ProgressExampleStandard'
+    />
+    <ComponentExample
+      title='Indicating'
+      description='An indicating progress bar visually indicates the current level of progress of a task.'
+      examplePath='modules/Progress/Types/ProgressExampleIndicating'
+    />
+    <ComponentExample
+      title='Auto Success'
+      description='A progress bar can automatically trigger the success state when progress completes.'
+      examplePath='modules/Progress/Types/ProgressExampleAutoSuccess'
+    />
+  </ExampleSection>
+)
+
+export default ProgressTypesExamples
diff --git a/docs/app/Examples/modules/Progress/Variations/Attached.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleAttached.js
similarity index 73%
rename from docs/app/Examples/modules/Progress/Variations/Attached.js
rename to docs/app/Examples/modules/Progress/Variations/ProgressExampleAttached.js
index 66300c982b..29f8b30d3d 100644
--- a/docs/app/Examples/modules/Progress/Variations/Attached.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleAttached.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress, Segment } from 'semantic-ui-react'
 
-const ProgressAttachedExample = () => (
+const ProgressExampleAttached = () => (
   <Segment>
     <Progress percent={50} attached='top' />
     La la la la
@@ -9,4 +9,4 @@ const ProgressAttachedExample = () => (
   </Segment>
 )
 
-export default ProgressAttachedExample
+export default ProgressExampleAttached
diff --git a/docs/app/Examples/modules/Progress/Variations/Color.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleColor.js
similarity index 90%
rename from docs/app/Examples/modules/Progress/Variations/Color.js
rename to docs/app/Examples/modules/Progress/Variations/ProgressExampleColor.js
index 57d1a3888f..f520f1409a 100644
--- a/docs/app/Examples/modules/Progress/Variations/Color.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleColor.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressColorExample = () => (
+const ProgressExampleColor = () => (
   <div>
     <Progress percent={32} color='red' />
     <Progress percent={59} color='orange' />
@@ -19,4 +19,4 @@ const ProgressColorExample = () => (
   </div>
 )
 
-export default ProgressColorExample
+export default ProgressExampleColor
diff --git a/docs/app/Examples/modules/Progress/Variations/Inverted.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js
similarity index 84%
rename from docs/app/Examples/modules/Progress/Variations/Inverted.js
rename to docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js
index 22b4d8ade9..d430214490 100644
--- a/docs/app/Examples/modules/Progress/Variations/Inverted.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress, Segment } from 'semantic-ui-react'
 
-const ProgressInvertedExample = () => (
+const ProgressExampleInverted = () => (
   <Segment inverted>
     <Progress percent={21} inverted label>
       Uploading Files
@@ -17,4 +17,4 @@ const ProgressInvertedExample = () => (
     </Progress>
   </Segment>
 )
-export default ProgressInvertedExample
+export default ProgressExampleInverted
diff --git a/docs/app/Examples/modules/Progress/Variations/InvertedColor.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js
similarity index 90%
rename from docs/app/Examples/modules/Progress/Variations/InvertedColor.js
rename to docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js
index ba220a4698..51c1ec95d9 100644
--- a/docs/app/Examples/modules/Progress/Variations/InvertedColor.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress, Segment } from 'semantic-ui-react'
 
-const ProgressInvertedColorExample = () => (
+const ProgressExampleInvertedColor = () => (
   <Segment inverted>
     <Progress percent={32} inverted color='red' label />
     <Progress percent={59} inverted color='orange' label />
@@ -19,4 +19,4 @@ const ProgressInvertedColorExample = () => (
   </Segment>
 )
 
-export default ProgressInvertedColorExample
+export default ProgressExampleInvertedColor
diff --git a/docs/app/Examples/modules/Progress/Variations/Size.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleSize.js
similarity index 85%
rename from docs/app/Examples/modules/Progress/Variations/Size.js
rename to docs/app/Examples/modules/Progress/Variations/ProgressExampleSize.js
index 361438e048..69ac2da7d2 100644
--- a/docs/app/Examples/modules/Progress/Variations/Size.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleSize.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Progress } from 'semantic-ui-react'
 
-const ProgressSizeExample = () => (
+const ProgressExampleSize = () => (
   <div>
     <Progress percent={10} size='tiny'>
       tiny
@@ -20,4 +20,4 @@ const ProgressSizeExample = () => (
     </Progress>
   </div>
 )
-export default ProgressSizeExample
+export default ProgressExampleSize
diff --git a/docs/app/Examples/modules/Progress/Variations/index.js b/docs/app/Examples/modules/Progress/Variations/index.js
index 1f8ec6316d..b027c9e9b3 100644
--- a/docs/app/Examples/modules/Progress/Variations/index.js
+++ b/docs/app/Examples/modules/Progress/Variations/index.js
@@ -1,37 +1,35 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class ProgressVariationsExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Variations'>
-        <ComponentExample
-          title='Inverted'
-          description='A progress bar can have its colors inverted'
-          examplePath='modules/Progress/Variations/Inverted'
-        />
-        <ComponentExample
-          title='Attached'
-          description='A progress bar can show progress of an element'
-          examplePath='modules/Progress/Variations/Attached'
-        />
-        <ComponentExample
-          title='Size'
-          description='A progress bar can vary in size'
-          examplePath='modules/Progress/Variations/Size'
-        />
-        <ComponentExample
-          title='Color'
-          description='A progress bar can have different colors'
-          examplePath='modules/Progress/Variations/Color'
-        />
-        <ComponentExample
-          title='Inverted Color'
-          description='These colors can also be inverted for improved contrast on dark backgrounds'
-          examplePath='modules/Progress/Variations/InvertedColor'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const ProgressVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Inverted'
+      description='A progress bar can have its colors inverted.'
+      examplePath='modules/Progress/Variations/ProgressExampleInverted'
+    />
+    <ComponentExample
+      title='Attached'
+      description='A progress bar can show progress of an element.'
+      examplePath='modules/Progress/Variations/ProgressExampleAttached'
+    />
+    <ComponentExample
+      title='Size'
+      description='A progress bar can vary in size.'
+      examplePath='modules/Progress/Variations/ProgressExampleSize'
+    />
+    <ComponentExample
+      title='Color'
+      description='A progress bar can have different colors.'
+      examplePath='modules/Progress/Variations/ProgressExampleColor'
+    />
+    <ComponentExample
+      title='Inverted Color'
+      description='These colors can also be inverted for improved contrast on dark backgrounds.'
+      examplePath='modules/Progress/Variations/ProgressExampleInvertedColor'
+    />
+  </ExampleSection>
+)
+
+export default ProgressVariationsExamples
diff --git a/docs/app/Examples/modules/Progress/index.js b/docs/app/Examples/modules/Progress/index.js
index 9b5a561df5..50d6fb0f2f 100644
--- a/docs/app/Examples/modules/Progress/index.js
+++ b/docs/app/Examples/modules/Progress/index.js
@@ -1,18 +1,16 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Types from './Types'
 import Content from './Content'
 import States from './States'
 import Variations from './Variations'
 
-export default class ProgressExamples extends Component {
-  render() {
-    return (
-      <div>
-        <Types />
-        <Content />
-        <States />
-        <Variations />
-      </div>
-    )
-  }
-}
+const ProgressExamples = () => (
+  <div>
+    <Types />
+    <Content />
+    <States />
+    <Variations />
+  </div>
+)
+
+export default ProgressExamples