Merge branch 'master' into feat/flag-names

Semantic-Org · Jun 27, 2018 · 698b7fe · 698b7fe
2 parents 0d212d6 + c8fabc7
commit 698b7fe
Show file tree

Hide file tree

Showing 36 changed files with 627 additions and 328 deletions.
diff --git a/docs/src/examples/elements/Image/States/ImageExampleHidden.js b/docs/src/examples/elements/Image/States/ImageExampleHidden.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import { Image } from 'semantic-ui-react'
 
-const ImageExampleHidden = () => (
-  <Image src='/images/wireframe/image.png' size='small' hidden />
-)
+const ImageExampleHidden = () => <Image src='/images/wireframe/image.png' size='small' hidden />
 
 export default ImageExampleHidden
diff --git a/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js b/docs/src/examples/elements/Image/Types/ImageExampleWrapped.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import { Image } from 'semantic-ui-react'
 
-const ImageExampleWrapped = () => (
-  <Image src='/images/wireframe/image.png' size='small' wrapped />
-)
+const ImageExampleWrapped = () => <Image src='/images/wireframe/image.png' size='small' wrapped />
 
 export default ImageExampleWrapped
diff --git a/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js b/docs/src/examples/modules/Embed/Variations/EmbedExampleAspectRatio.js
@@ -2,12 +2,7 @@ import React from 'react'
 import { Embed } from 'semantic-ui-react'
 
 const EmbedExampleAspectRatio = () => (
-  <Embed
-    aspectRatio='4:3'
-    id='HTZudKi36bo'
-    placeholder='/images/4by3.jpg'
-    source='youtube'
-  />
+  <Embed aspectRatio='4:3' id='HTZudKi36bo' placeholder='/images/4by3.jpg' source='youtube' />
 )
 
 export default EmbedExampleAspectRatio
diff --git a/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js b/docs/src/examples/modules/Modal/Variations/ModalExampleScrollingContent.js
@@ -13,11 +13,7 @@ const ModalExampleScrollingContent = () => (
         <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
 
         {_.times(8, i => (
-          <Image
-            key={i}
-            src='/images/wireframe/paragraph.png'
-            style={{ paddingBottom: 5 }}
-          />
+          <Image key={i} src='/images/wireframe/paragraph.png' style={{ paddingBottom: 5 }} />
         ))}
       </Modal.Description>
     </Modal.Content>

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+class PopupExampleContextControlled extends React.Component {
+  state = {}
+
+  handleRef = node => this.setState({ node })
+
+  render() {
+    const { node } = this.state
+    const trigger = <Button content='Trigger Popup' />
+
+    return (
+      <div>
+        <Popup trigger={trigger} context={node} content='Hello' position='top center' />
+        ---------->
+        <strong ref={this.handleRef}>here</strong>
+      </div>
+    )
+  }
+}
+
+export default PopupExampleContextControlled
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContextControlled.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+class PopupExampleContextControlled extends React.Component {
+  state = {}
+
+  toggle = () => this.setState({ open: !this.state.open })
+
+  handleRef = node => this.setState({ node })
+
+  render() {
+    const { node, open } = this.state
+    return (
+      <div>
+        <Button content='Open controlled Popup' onClick={this.toggle} />
+        <Popup context={node} content='Hello' position='top center' open={open} />
+        ---------->
+        <strong ref={this.handleRef}>here</strong>
+      </div>
+    )
+  }
+}
+
+export default PopupExampleContextControlled
diff --git a/docs/src/examples/modules/Popup/Usage/index.js b/docs/src/examples/modules/Popup/Usage/index.js
@@ -34,6 +34,15 @@ const PopupUsageExamples = () => (
       description='A popup can have its visibility controlled from outside.'
       examplePath='modules/Popup/Usage/PopupExampleControlled'
     />
+    <ComponentExample
+      title='Context'
+      description='A popup can open over a DOM node when using a trigger.'
+      examplePath='modules/Popup/Usage/PopupExampleContext'
+    />
+    <ComponentExample
+      description='A popup can open over a DOM node when controlled.'
+      examplePath='modules/Popup/Usage/PopupExampleContextControlled'
+    />
   </ExampleSection>
 )
 

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header } from 'semantic-ui-react'
+import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const getResults = () =>
   _.times(5, () => ({
@@ -76,10 +76,12 @@ export default class SearchExampleCategory extends Component {
           />
         </Grid.Column>
         <Grid.Column width={8}>
-          <Header>State</Header>
-          <pre>{JSON.stringify(this.state, null, 2)}</pre>
-          <Header>Options</Header>
-          <pre>{JSON.stringify(source, null, 2)}</pre>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+          </Segment>
         </Grid.Column>
       </Grid>
     )

diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import faker from 'faker'
 import React, { Component } from 'react'
-import { Search, Grid, Header } from 'semantic-ui-react'
+import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
@@ -40,7 +40,7 @@ export default class SearchExampleStandard extends Component {
 
     return (
       <Grid>
-        <Grid.Column width={8}>
+        <Grid.Column width={6}>
           <Search
             loading={isLoading}
             onResultSelect={this.handleResultSelect}
@@ -50,11 +50,13 @@ export default class SearchExampleStandard extends Component {
             {...this.props}
           />
         </Grid.Column>
-        <Grid.Column width={8}>
-          <Header>State</Header>
-          <pre>{JSON.stringify(this.state, null, 2)}</pre>
-          <Header>Options</Header>
-          <pre>{JSON.stringify(source, null, 2)}</pre>
+        <Grid.Column width={10}>
+          <Segment>
+            <Header>State</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <Header>Options</Header>
+            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+          </Segment>
         </Grid.Column>
       </Grid>
     )

diff --git a/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js b/docs/src/examples/views/Feed/Content/FeedExampleExtraImagesShorthand.js
@@ -4,10 +4,7 @@ import { Feed } from 'semantic-ui-react'
 const image = '/images/avatar/small/helen.jpg'
 const date = '3 days ago'
 const summary = 'Helen Troy added 2 photos'
-const extraImages = [
-  '/images/wireframe/image.png',
-  '/images/wireframe/image-text.png',
-]
+const extraImages = ['/images/wireframe/image.png', '/images/wireframe/image-text.png']
 
 const FeedExampleExtraImagesShorthand = () => (
   <Feed>

diff --git a/examples/webpack3/scripts/build.js b/examples/webpack3/scripts/build.js
@@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production'
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', (err) => {
+process.on('unhandledRejection', err => {
   throw err
 })
 
@@ -24,8 +24,7 @@ const printHostingInstructions = require('react-dev-utils/printHostingInstructio
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
 const printBuildError = require('react-dev-utils/printBuildError')
 
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild
+const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild
 const useYarn = fs.existsSync(paths.yarnLockFile)
 
@@ -41,7 +40,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 // First, read the current file sizes in build directory.
 // This lets us display how much they changed later.
 measureFileSizesBeforeBuild(paths.appBuild)
-  .then((previousFileSizes) => {
+  .then(previousFileSizes => {
     // Remove all content but keep the directory so that
     // if you're in it, you don't end up in Trash
     fs.emptyDirSync(paths.appBuild)
@@ -56,14 +55,12 @@ measureFileSizesBeforeBuild(paths.appBuild)
         console.log(chalk.yellow('Compiled with warnings.\n'))
         console.log(warnings.join('\n\n'))
         console.log(
-          `\nSearch for the ${
-            chalk.underline(chalk.yellow('keywords'))
-          } to learn more about each warning.`
+          `\nSearch for the ${chalk.underline(
+            chalk.yellow('keywords'),
+          )} to learn more about each warning.`,
         )
         console.log(
-          `To ignore, add ${
-            chalk.cyan('// eslint-disable-next-line')
-          } to the line before.\n`
+          `To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`,
         )
       } else {
         console.log(chalk.green('Compiled successfully.\n'))
@@ -75,27 +72,21 @@ measureFileSizesBeforeBuild(paths.appBuild)
         previousFileSizes,
         paths.appBuild,
         WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
+        WARN_AFTER_CHUNK_GZIP_SIZE,
       )
       console.log()
 
       const appPackage = require(paths.appPackageJson)
       const publicUrl = paths.publicUrl
       const publicPath = config.output.publicPath
       const buildFolder = path.relative(process.cwd(), paths.appBuild)
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      )
+      printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn)
     },
-    (err) => {
+    err => {
       console.log(chalk.red('Failed to compile.\n'))
       printBuildError(err)
       process.exit(1)
-    }
+    },
   )
 
 // Create the production build and print the deployment instructions.
@@ -119,15 +110,14 @@ function build(previousFileSizes) {
       }
       if (
         process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
+        (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') &&
         messages.warnings.length
       ) {
         console.log(
           chalk.yellow(
             '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
+              'Most CI servers set it automatically.\n',
+          ),
         )
         return reject(new Error(messages.warnings.join('\n\n')))
       }