Merge branch 'master' into dropdown_keep_in_viewport

docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -9,10 +9,10 @@ import copyToClipboard from 'copy-to-clipboard'
 
 import {
   exampleContext,
-  repoURL,
-  scrollToAnchor,
   examplePathToHash,
   getFormattedHash,
+  repoURL,
+  scrollToAnchor,
 } from 'docs/app/utils'
 import { Divider, Grid, Menu, Visibility } from 'src'
 import Editor from 'docs/app/Components/Editor/Editor'
@@ -34,12 +34,6 @@ const babelConfig = {
   ],
 }
 
-const headerColumnStyle = {
-  // provide room for absolutely positions toggle code icons
-  minHeight: '4em',
-  paddingRight: '7em',
-}
-
 const childrenStyle = {
   paddingTop: 0,
   maxWidth: '50rem',
@@ -52,11 +46,17 @@ const errorStyle = {
   background: '#fff2f2',
 }
 
+const controlsWrapperStyle = {
+  minHeight: '3rem',
+}
+
 /**
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the the raw `code` code block.
  */
 class ComponentExample extends PureComponent {
+  state = {}
+
   static contextTypes = {
     onPassed: PropTypes.func,
   }
@@ -74,20 +74,35 @@ class ComponentExample extends PureComponent {
 
   componentWillMount() {
     const { examplePath } = this.props
-    const sourceCode = this.getOriginalSourceCode()
-
     this.anchorName = examplePathToHash(examplePath)
 
     const exampleElement = this.renderOriginalExample()
-    const markup = renderToStaticMarkup(exampleElement)
 
     this.setState({
       exampleElement,
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
       showCode: this.isActiveHash(),
-      sourceCode,
-      markup,
+      sourceCode: this.getOriginalSourceCode(),
+      markup: renderToStaticMarkup(exampleElement),
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // deactivate examples when switching from one to the next
+    if (
+      this.isActiveHash() &&
+      this.isActiveState() &&
+      this.props.location.hash !== nextProps.location.hash
+    ) {
+      this.clearActiveState()
+    }
+  }
+
+  clearActiveState = () => {
+    this.setState({
+      showCode: false,
+      showHTML: false,
     })
   }
 
@@ -116,10 +131,7 @@ class ComponentExample extends PureComponent {
 
     history.replace(location.pathname)
 
-    this.setState({
-      showCode: false,
-      showHTML: false,
-    })
+    this.clearActiveState()
   }
 
   handleDirectLinkClick = () => {
@@ -299,50 +311,26 @@ class ComponentExample extends PureComponent {
     }
   }, 100)
 
+  getComponentName = () => this.props.examplePath.split('/')[1]
+
   handleChangeCode = (sourceCode) => {
     this.setState({ sourceCode }, this.renderSourceCode)
   }
 
   setGitHubHrefs = () => {
-    const { examplePath, location } = this.props
+    const { examplePath } = this.props
 
     if (this.ghEditHref && this.ghBugHref) return
 
     // get component name from file path:
     // elements/Button/Types/ButtonButtonExample
     const pathParts = examplePath.split(__PATH_SEP__)
-    const componentName = pathParts[1]
     const filename = pathParts[pathParts.length - 1]
 
     this.ghEditHref = [
       `${repoURL}/edit/master/docs/app/Examples/${examplePath}.js`,
       `?message=docs(${filename}): your description`,
     ].join('')
-
-    this.ghBugHref = [
-      `${repoURL}/issues/new?`,
-      _.map(
-        {
-          title: `fix(${componentName}): your description`,
-          body: [
-            '**Steps to Reproduce**',
-            '1. Do something',
-            '2. Do something else.',
-            '',
-            '**Expected**',
-            `The ${componentName} should do this`,
-            '',
-            '**Result**',
-            `The ${componentName} does not do this`,
-            '',
-            '**Testcase**',
-            `If the docs show the issue, use: ${location.href}`,
-            'Otherwise, fork this to get started: http://codepen.io/levithomason/pen/ZpBaJX',
-          ].join('\n'),
-        },
-        (val, key) => `${key}=${encodeURIComponent(val)}`,
-      ).join('&'),
-    ].join('')
   }
 
   renderJSXControls = () => {
@@ -376,14 +364,6 @@ class ComponentExample extends PureComponent {
             href={this.ghEditHref}
             target='_blank'
           />
-          <Menu.Item
-            active={!!error} // to show the color
-            color={color}
-            icon='bug'
-            content='Issue'
-            href={this.ghBugHref}
-            target='_blank'
-          />
         </Menu>
       </Divider>
     )
@@ -441,7 +421,7 @@ class ComponentExample extends PureComponent {
   }
 
   render() {
-    const { children, description, suiVersion, title } = this.props
+    const { children, description, location, suiVersion, title } = this.props
     const {
       handleMouseLeave,
       handleMouseMove,
@@ -453,9 +433,13 @@ class ComponentExample extends PureComponent {
 
     const isActive = this.isActiveHash() || this.isActiveState()
 
+    const isInFocus = !location.hash || (location.hash && (this.isActiveHash() || isHovering))
+
     const exampleStyle = {
       position: 'relative',
-      transition: 'box-shadow 200ms, background 200ms',
+      transition: 'box-shadow 200ms, background 200ms, opacity 200ms, filter 200ms',
+      opacity: isInFocus ? 1 : 0.4,
+      filter: isInFocus ? 'grayscale(0)' : 'grayscale(1)',
       ...(isActive
         ? {
           background: '#fff',
@@ -479,14 +463,14 @@ class ComponentExample extends PureComponent {
           style={exampleStyle}
         >
           <Grid.Row>
-            <Grid.Column style={headerColumnStyle} width={12}>
+            <Grid.Column width={12}>
               <ComponentExampleTitle
                 description={description}
                 title={title}
                 suiVersion={suiVersion}
               />
             </Grid.Column>
-            <Grid.Column textAlign='right' width={4}>
+            <Grid.Column textAlign='right' width={4} style={controlsWrapperStyle}>
               <ComponentControls
                 anchorName={this.anchorName}
                 onCopyLink={this.handleDirectLinkClick}
@@ -499,9 +483,11 @@ class ComponentExample extends PureComponent {
             </Grid.Column>
           </Grid.Row>
 
-          <Grid.Row columns={1}>
-            {children && <Grid.Column style={childrenStyle}>{children}</Grid.Column>}
-          </Grid.Row>
+          {children && (
+            <Grid.Row columns={1}>
+              <Grid.Column style={childrenStyle}>{children}</Grid.Column>
+            </Grid.Row>
+          )}
 
           <Grid.Row columns={1}>
             <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>

docs/app/Components/ComponentDoc/ComponentExample/ComponentExampleTitle.js

@@ -7,9 +7,6 @@ import { pure } from 'docs/app/HOC'
 const titleStyle = {
   margin: 0,
 }
-const descriptionStyle = {
-  maxWidth: '50rem',
-}
 
 const ComponentExampleTitle = ({ description, title, suiVersion }) => (
   <div>
@@ -27,7 +24,7 @@ const ComponentExampleTitle = ({ description, title, suiVersion }) => (
         )}
       </Header>
     )}
-    {description && <p style={descriptionStyle}>{description}</p>}
+    {description && <p>{description}</p>}
   </div>
 )
 

docs/app/Examples/addons/Confirm/Types/ConfirmExampleConfirm.js

@@ -4,19 +4,14 @@ import { Button, Confirm } from 'semantic-ui-react'
 class ConfirmExampleConfirm extends Component {
   state = { open: false }
 
-  show = () => this.setState({ open: true })
-  handleConfirm = () => this.setState({ open: false })
-  handleCancel = () => this.setState({ open: false })
+  open = () => this.setState({ open: true })
+  close = () => this.setState({ open: false })
 
   render() {
     return (
       <div>
-        <Button onClick={this.show}>Show</Button>
-        <Confirm
-          open={this.state.open}
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-        />
+        <Button onClick={this.open}>Show</Button>
+        <Confirm open={this.state.open} onCancel={this.close} onConfirm={this.close} />
       </div>
     )
   }

docs/app/Examples/modules/Modal/Variations/ModalExampleScrollingContent.js

@@ -6,11 +6,7 @@ const ModalExampleScrollingContent = () => (
   <Modal trigger={<Button>Scrolling Content Modal</Button>}>
     <Modal.Header>Profile Picture</Modal.Header>
     <Modal.Content image scrolling>
-      <Image
-        size='medium'
-        src='/assets/images/wireframe/image.png'
-        wrapped
-      />
+      <Image size='medium' src='/assets/images/wireframe/image.png' wrapped />
 
       <Modal.Description>
         <Header>Modal Header</Header>
@@ -27,11 +23,10 @@ const ModalExampleScrollingContent = () => (
     </Modal.Content>
     <Modal.Actions>
       <Button primary>
-        Proceed <Icon name='right chevron' />
+        Proceed <Icon name='chevron right' />
       </Button>
     </Modal.Actions>
   </Modal>
 )
 
 export default ModalExampleScrollingContent
-

docs/app/utils/index.js

@@ -1,8 +1,8 @@
 export * from './constants'
 export exampleContext from './exampleContext'
+export examplePathToHash from './examplePathToHash'
 export getComponentGroup from './getComponentGroup'
 export getFormattedHash from './getFormattedHash'
 export getSeeItems from './getSeeItems'
-export scrollToAnchor from './scrollToAnchor'
-export examplePathToHash from './examplePathToHash'
 export parentComponents from './parentComponents'
+export scrollToAnchor from './scrollToAnchor'

docs/app/utils/scrollToAnchor.js

@@ -1,27 +1,30 @@
-const mathSign = Math.sign || function (x) {
-  const val = +x
+const mathSign =
+  Math.sign ||
+  function mathSign(x) {
+    const val = +x
 
-  if (val === 0 || isNaN(val)) return val
-  return val > 0 ? 1 : -1
-}
+    if (val === 0 || isNaN(val)) return val
+    return val > 0 ? 1 : -1
+  }
 
-const scrollToAnchor = (lastOffsetY) => {
+const scrollToAnchor = (lastOffsetY, lastAcceleration = 0.1) => {
   const anchor = location.hash && document.querySelector(location.hash)
   const offsetY = window.scrollY || window.pageYOffset
 
   // no scroll to target, stop
   if (!anchor) return
 
   const elementTop = Math.round(anchor.getBoundingClientRect().top)
-  const scrollStep = Math.ceil((Math.abs(elementTop / 8))) * mathSign(elementTop)
+  const scrollStep = Math.ceil(Math.abs(elementTop / 8)) * mathSign(elementTop)
+  const acceleration = Math.min(1, (lastAcceleration * 100) ** 1.1 / 100)
 
   // if our last step was not applied, stop
   // we've either hit the top, bottom, or arrived at the element
   if (lastOffsetY === offsetY) return
 
   // more scrolling to do!
-  scrollBy(0, scrollStep)
-  requestAnimationFrame(() => scrollToAnchor(offsetY))
+  scrollBy(0, scrollStep * acceleration)
+  requestAnimationFrame(() => scrollToAnchor(offsetY, acceleration))
 }
 
 export default scrollToAnchor

docs/src/examples/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/prop-types": 0
+  }
+}

src/addons/Confirm/Confirm.js

@@ -2,11 +2,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-import {
-  customPropTypes,
-  getUnhandledProps,
-  META,
-} from '../../lib'
+import { customPropTypes, getUnhandledProps, META } from '../../lib'
 import Button from '../../elements/Button'
 import Modal from '../../modules/Modal'
 
@@ -82,14 +78,7 @@ class Confirm extends Component {
   })
 
   render() {
-    const {
-      cancelButton,
-      confirmButton,
-      content,
-      header,
-      open,
-      size,
-    } = this.props
+    const { cancelButton, confirmButton, content, header, open, size } = this.props
     const rest = getUnhandledProps(Confirm, this.props)
 
     // `open` is auto controlled by the Modal
@@ -100,11 +89,15 @@ class Confirm extends Component {
 
     return (
       <Modal {...rest} {...openProp} size={size} onClose={this.handleCancel}>
-        {Modal.Header.create(header)}
-        {Modal.Content.create(content)}
+        {Modal.Header.create(header, { autoGenerateKey: false })}
+        {Modal.Content.create(content, { autoGenerateKey: false })}
         <Modal.Actions>
-          {Button.create(cancelButton, { overrideProps: this.handleCancelOverrides })}
+          {Button.create(cancelButton, {
+            autoGenerateKey: false,
+            overrideProps: this.handleCancelOverrides,
+          })}
           {Button.create(confirmButton, {
+            autoGenerateKey: false,
             defaultProps: { primary: true },
             overrideProps: this.handleConfirmOverrides,
           })}