feat(Dimmer): Add component

README.md

@@ -140,7 +140,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
 |-----------------|-----------------|-----------------|-----------------|--------------------|
 | ✓ Button        | ✓ Breadcrumb    |   Advertisement | ✓ Accordion     | ✓ Form Validation  |
 | ✓ Container     | ✓ Form          | ✓ Card          | ✓ Checkbox      | *API (NA)*         |
-| ✓ Divider       | ✓ Grid          | ✓ Comment       |   Dimmer        | *Visibility (NA)*  |
+| ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | *Visibility (NA)*  |
 | ✓ Flag          | ✓ Menu          | ✓ Feed          | ✓ Dropdown      |                    |
 | ✓ Header        | ✓ Message       | ✓ Item          |   Embed         |                    |
 | ✓ Icon          | ✓ Table         | ✓ Statistic     | ✓ Modal         |                    |

docs/app/Examples/elements/Loader/States/LoaderExampleIndeterminate.js

@@ -1,14 +1,12 @@
 import React from 'react'
-import { Loader, Image, Segment } from 'semantic-ui-react'
-
-// TODO: Update <Dimmer> usage after its update to v1 API
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
 
 const LoaderExampleIndeterminate = () => (
   <div>
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader indeterminate>Preparing Files</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>

docs/app/Examples/elements/Loader/Types/LoaderExampleLoader.js

@@ -1,13 +1,11 @@
 import React from 'react'
-import { Loader, Image, Segment } from 'semantic-ui-react'
-
-// TODO: Update <Dimmer> usage after its update to v1 API
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
 
 const LoaderExampleLoader = () => (
   <Segment>
-    <div className='ui active dimmer'>
+    <Dimmer active>
       <Loader />
-    </div>
+    </Dimmer>
 
     <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
   </Segment>

docs/app/Examples/elements/Loader/Types/LoaderExampleText.js

@@ -1,22 +1,20 @@
 import React from 'react'
-import { Loader, Image, Segment } from 'semantic-ui-react'
-
-// TODO: Update <Dimmer> usage after its update to v1 API
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
 
 const LoaderExampleText = () => (
   <div>
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active inverted dimmer'>
+      <Dimmer active inverted>
         <Loader inverted>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>

docs/app/Examples/elements/Loader/Types/LoaderExampleTextShorthand.js

@@ -1,22 +1,20 @@
 import React from 'react'
-import { Loader, Image, Segment } from 'semantic-ui-react'
-
-// TODO: Update <Dimmer> usage after its update to v1 API
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
 
 const LoaderExampleTextShorthand = () => (
   <div>
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader content='Loading' />
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active inverted dimmer'>
+      <Dimmer active inverted>
         <Loader inverted content='Loading' />
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>

docs/app/Examples/elements/Loader/Types/index.js

@@ -12,7 +12,7 @@ const LoaderTypesExamples = () => (
       examplePath='elements/Loader/Types/LoaderExampleLoader'
     >
       <Message info>
-        Loaders are hidden unless has prop "active" or inside an "active dimmer".
+        Loaders are hidden unless has prop <code>active</code> or inside an <code>Dimmer active</code>.
       </Message>
     </ComponentExample>
 

docs/app/Examples/elements/Loader/Variations/LoaderExampleSizes.js

@@ -1,77 +1,75 @@
 import React from 'react'
-import { Loader, Image, Segment } from 'semantic-ui-react'
-
-// TODO: Update <Dimmer> usage after its update to v1 API
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
 
 const LoaderExampleSizes = () => (
   <div>
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='mini'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='tiny'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='small'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='medium'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='large'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='big'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='huge'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active dimmer'>
+      <Dimmer active>
         <Loader size='massive'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />

docs/app/Examples/elements/Loader/Variations/LoaderExampleSizesInverted.js

@@ -1,38 +1,36 @@
 import React from 'react'
-import { Loader, Image, Segment } from 'semantic-ui-react'
-
-// TODO: Update <Dimmer> usage after its update to v1 API
+import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
 
 const LoaderExampleSizesInverted = () => (
   <div>
     <Segment>
-      <div className='ui active inverted dimmer'>
+      <Dimmer active inverted>
         <Loader size='mini'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active inverted dimmer'>
+      <Dimmer active inverted>
         <Loader size='small'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active inverted dimmer'>
+      <Dimmer active inverted>
         <Loader size='medium'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
     </Segment>
 
     <Segment>
-      <div className='ui active inverted dimmer'>
+      <Dimmer active inverted>
         <Loader size='large'>Loading</Loader>
-      </div>
+      </Dimmer>
 
       <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
     </Segment>

docs/app/Examples/modules/Dimmer/States/DimmerExampleActive.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Dimmer, Segment } from 'semantic-ui-react'
+
+const DimmerExampleActive = () => (
+  <Segment>
+    <Dimmer active />
+
+    <p>
+      <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    </p>
+    <p>
+      <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    </p>
+  </Segment>
+)
+
+export default DimmerExampleActive

docs/app/Examples/modules/Dimmer/States/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DimmerStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Active'
+      description='An active dimmer will dim its parent container.'
+      examplePath='modules/Dimmer/States/DimmerExampleActive'
+    />
+  </ExampleSection>
+)
+
+export default DimmerStatesExamples

docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { Button, Dimmer, Header, Icon, Image, Segment } from 'semantic-ui-react'
+
+export default class DimmerExampleDimmer extends Component {
+  state = {}
+
+  handleShow = () => this.setState({ active: true })
+  handleHide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Dimmer.Dimmable as={Segment} dimmed={active}>
+          <Dimmer active={active} onClickOutside={this.handleHide}>
+            <Header as='h2' icon inverted>
+              <Icon name='heart' />
+              Dimmed Message!
+            </Header>
+          </Dimmer>
+
+          <Header as='h3'>Overlayable Section</Header>
+
+          <Image.Group size='small' className='ui small images'>
+            <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+            <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+            <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+          </Image.Group>
+
+          <Image size='medium' src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Dimmer.Dimmable>
+
+        <Button.Group>
+          <Button icon='plus' onClick={this.handleShow} />
+          <Button icon='minus' onClick={this.handleHide} />
+        </Button.Group>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react'
+
+export default class DimmerExampleDimmer extends Component {
+  state = {}
+
+  handleShow = () => this.setState({ active: true })
+  handleHide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Dimmer.Dimmable as={Segment} dimmed={active}>
+          <Dimmer active={active} onClickOutside={this.handleHide} />
+
+          <Header as='h3'>Overlayable Section</Header>
+
+          <Image.Group size='small' className='ui small images'>
+            <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+            <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+            <Image src='http://semantic-ui.com/images/wireframe/image.png' />
+          </Image.Group>
+
+          <Image size='medium' src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Dimmer.Dimmable>
+
+        <Button.Group>
+          <Button icon='plus' onClick={this.handleShow} />
+          <Button icon='minus' onClick={this.handleHide} />
+        </Button.Group>
+      </div>
+    )
+  }
+}