From 8c56cb9e8873cee958cf657892ad78198b4a83ae Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Wed, 12 Jul 2017 18:34:30 +0300
Subject: [PATCH 1/8] feat(Breakpoint): add component

---
 src/addons/Breakpoint/Breakpoint.d.ts         |  42 +++++
 src/addons/Breakpoint/Breakpoint.js           | 152 ++++++++++++++++++
 src/addons/Breakpoint/index.d.ts              |   1 +
 src/addons/Breakpoint/index.js                |   1 +
 src/index.js                                  |   1 +
 .../addons/Breakpoint/Breakpoint-test.js      |  87 ++++++++++
 test/specs/commonTests/isConformant.js        |  14 +-
 7 files changed, 291 insertions(+), 7 deletions(-)
 create mode 100644 src/addons/Breakpoint/Breakpoint.d.ts
 create mode 100644 src/addons/Breakpoint/Breakpoint.js
 create mode 100644 src/addons/Breakpoint/index.d.ts
 create mode 100644 src/addons/Breakpoint/index.js
 create mode 100644 test/specs/addons/Breakpoint/Breakpoint-test.js

diff --git a/src/addons/Breakpoint/Breakpoint.d.ts b/src/addons/Breakpoint/Breakpoint.d.ts
new file mode 100644
index 0000000000..5d0eed3f38
--- /dev/null
+++ b/src/addons/Breakpoint/Breakpoint.d.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { GridOnlyProp } from '../../collections/Grid/GridColumn';
+
+export interface BreakpointProps {
+  [key: string]: any;
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** A row can appear only for a specific device, or screen sizes. */
+  only: GridOnlyProp;
+
+  /**
+   * Called on update.
+   *
+   * @param {SyntheticEvent} event - The React SyntheticEvent object
+   * @param {object} data - All props and the event value.
+   */
+  onUpdate?: BreakpointOnUpdateData;
+
+  /** Breakpoints definition. */
+  points?: BreakpointPoints;
+}
+
+export interface BreakpointPoints {
+  computer: number;
+  largeScreen: number;
+  mobile: number;
+  tablet: number;
+  widescreen: number;
+}
+
+export interface BreakpointOnUpdateData extends BreakpointProps {
+  number: string;
+}
+
+declare const Confirm: React.ComponentClass<BreakpointProps>;
+
+export default Confirm;
diff --git a/src/addons/Breakpoint/Breakpoint.js b/src/addons/Breakpoint/Breakpoint.js
new file mode 100644
index 0000000000..5183c2b315
--- /dev/null
+++ b/src/addons/Breakpoint/Breakpoint.js
@@ -0,0 +1,152 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+  SUI,
+} from '../../lib'
+
+/**
+ * A Breakpoint can control visibility of content.
+ */
+export default class Breakpoint extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** A row can appear only for a specific device, or screen sizes. */
+    only: customPropTypes.onlyProp(SUI.VISIBILITY).isRequired,
+
+    /**
+     * Called on update.
+     *
+     * @param {SyntheticEvent} event - The React SyntheticEvent object
+     * @param {object} data - All props and the event value.
+     */
+    onUpdate: PropTypes.func,
+
+    /** Breakpoints definition. */
+    points: PropTypes.shape({
+      computer: PropTypes.number.isRequired,
+      largeScreen: PropTypes.number.isRequired,
+      mobile: PropTypes.number.isRequired,
+      tablet: PropTypes.number.isRequired,
+      widescreen: PropTypes.number.isRequired,
+    }),
+  }
+
+  static defaultProps = {
+    points: {
+      computer: 992,
+      largeScreen: 1200,
+      mobile: 320,
+      tablet: 768,
+      widescreen: 1920,
+    },
+    wait: 200,
+  }
+
+  static _meta = {
+    name: 'Breakpoint',
+    type: META.TYPES.ADDON,
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.state = { width: window.innerWidth }
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleUpdate)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleUpdate)
+  }
+
+  // ----------------------------------------
+  // Breakpoint matchers
+  // ----------------------------------------
+
+  computer = () => {
+    const { points: { computer } } = this.props
+    const { width } = this.state
+
+    return width >= computer
+  }
+
+  largeScreen = () => {
+    const { points: { largeScreen, widescreen } } = this.props
+    const { width } = this.state
+
+    return width >= largeScreen && width < widescreen
+  }
+
+  mobile = () => {
+    const { points: { mobile, tablet } } = this.props
+    const { width } = this.state
+
+    return width >= mobile && width < tablet
+  }
+
+  tablet = () => {
+    const { points: { computer, tablet } } = this.props
+    const { width } = this.state
+
+    return width >= tablet && width < computer
+  }
+
+  widescreen = () => {
+    const { points: { widescreen } } = this.props
+    const { width } = this.state
+
+    return width >= widescreen
+  }
+
+  // ----------------------------------------
+  // Helpers
+  // ----------------------------------------
+
+  visible = () => {
+    const { only } = this.props
+    const points = only.replace('large screen', 'largeScreen').split(' ')
+
+    return _.some(points, point => _.invoke(this, point))
+  }
+
+  // ----------------------------------------
+  // Event handlers
+  // ----------------------------------------
+
+  handleUpdate = e => {
+    requestAnimationFrame(() => {
+      const width = window.innerWidth
+
+      this.setState({ width })
+      _.invoke(this.props, 'onUpdate', e, { ...this.props, width })
+    })
+  }
+
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
+
+  render() {
+    const { children } = this.props
+
+    const ElementType = getElementType(Breakpoint, this.props)
+    const rest = getUnhandledProps(Breakpoint, this.props)
+
+    if (this.visible()) return <ElementType {...rest}>{children}</ElementType>
+    return null
+  }
+}
+
+
diff --git a/src/addons/Breakpoint/index.d.ts b/src/addons/Breakpoint/index.d.ts
new file mode 100644
index 0000000000..ee3195b503
--- /dev/null
+++ b/src/addons/Breakpoint/index.d.ts
@@ -0,0 +1 @@
+export { default, BreakpointPoints, BreakpointProps } from './Breakpoint';
diff --git a/src/addons/Breakpoint/index.js b/src/addons/Breakpoint/index.js
new file mode 100644
index 0000000000..3d0e973b25
--- /dev/null
+++ b/src/addons/Breakpoint/index.js
@@ -0,0 +1 @@
+export default from './Breakpoint'
diff --git a/src/index.js b/src/index.js
index e6875c7bbe..999ca664ca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 // Addons
+export { default as Breakpoint } from './addons/Breakpoint'
 export { default as Confirm } from './addons/Confirm'
 export { default as Portal } from './addons/Portal'
 export { default as Radio } from './addons/Radio'
diff --git a/test/specs/addons/Breakpoint/Breakpoint-test.js b/test/specs/addons/Breakpoint/Breakpoint-test.js
new file mode 100644
index 0000000000..198bf8b551
--- /dev/null
+++ b/test/specs/addons/Breakpoint/Breakpoint-test.js
@@ -0,0 +1,87 @@
+import _ from 'lodash'
+import React from 'react'
+
+import Breakpoint from 'src/addons/Breakpoint/Breakpoint'
+import * as common from 'test/specs/commonTests'
+import { domEvent, sandbox } from 'test/utils'
+
+const { points } = Breakpoint.defaultProps
+const requiredProps = { only: 'mobile' }
+
+beforeEach(() => {
+  sandbox.stub(window, 'innerWidth').value(points.mobile)
+})
+
+describe('Breakpoint', () => {
+  common.isConformant(Breakpoint, { requiredProps })
+  common.rendersChildren(Breakpoint, { requiredProps })
+
+  describe('children', () => {
+    _.each(points, (value, point) => {
+      it(`renders when point "${point}" fits`, () => {
+        sandbox.stub(window, 'innerWidth').value(value)
+
+        shallow(<Breakpoint only={point} />)
+          .should.have.tagName('div')
+      })
+    })
+
+    _.each(points, (value, point) => {
+      it(`return null when point "${point}" doesn't fit`, () => {
+        sandbox.stub(window, 'innerWidth').value(value - 1)
+
+        shallow(<Breakpoint only={point} />)
+          .should.be.blank()
+      })
+    })
+
+    it('renders when fits multiple points', () => {
+      sandbox.stub(window, 'innerWidth').value(points.largeScreen)
+
+      shallow(<Breakpoint only='large screen' />)
+        .should.have.tagName('div')
+      shallow(<Breakpoint only='large screen' />)
+        .should.have.tagName('div')
+
+      shallow(<Breakpoint only='computer large screen' />)
+        .should.have.tagName('div')
+    })
+
+    it('renders when fits one of points', () => {
+      shallow(<Breakpoint only='mobile' />)
+        .should.have.tagName('div')
+      shallow(<Breakpoint only='tablet' />)
+        .should.be.blank()
+
+      shallow(<Breakpoint only='mobile tablet' />)
+        .should.have.tagName('div')
+    })
+  })
+
+  describe('onUpdate', () => {
+    it('listens for resize', () => {
+      const wrapper = mount(<Breakpoint only='mobile' />)
+      wrapper.should.have.tagName('div')
+
+      sandbox.stub(window, 'innerWidth').value(points.tablet)
+      domEvent.fire(window, 'resize')
+      wrapper.should.be.blank()
+    })
+
+    it('is called with (e, data) when window was resized', done => {
+      const onUpdate = sandbox.spy()
+      const width = points.tablet
+
+      mount(<Breakpoint only='mobile' onUpdate={onUpdate} />)
+      sandbox.stub(window, 'innerWidth').value(width)
+      domEvent.fire(window, 'resize')
+
+      setTimeout(() => {
+        onUpdate.should.have.been.calledOnce()
+        onUpdate.should.have.been.calledWithMatch({}, { width, only: 'mobile' })
+
+        done()
+      }, 10)
+    })
+  })
+})
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index d97e5024e6..6bd17e0355 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -131,12 +131,12 @@ export default (Component, options = {}) => {
       const tags = ['a', 'em', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'p', 'span', 'strong']
       try {
         tags.forEach((tag) => {
-          shallow(<Component as={tag} />)
+          shallow(<Component {...requiredProps} as={tag} />)
             .should.have.tagName(tag)
         })
       } catch (err) {
         tags.forEach((tag) => {
-          const wrapper = shallow(<Component as={tag} />)
+          const wrapper = shallow(<Component {...requiredProps} as={tag} />)
           wrapper.type().should.not.equal(Component)
           wrapper.should.have.prop('as', tag)
         })
@@ -147,11 +147,11 @@ export default (Component, options = {}) => {
       const MyComponent = () => null
 
       try {
-        shallow(<Component as={MyComponent} />)
+        shallow(<Component {...requiredProps} as={MyComponent} />)
           .type()
           .should.equal(MyComponent)
       } catch (err) {
-        const wrapper = shallow(<Component as={MyComponent} />)
+        const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
         wrapper.type().should.not.equal(Component)
         wrapper.should.have.prop('as', MyComponent)
       }
@@ -165,11 +165,11 @@ export default (Component, options = {}) => {
       }
 
       try {
-        shallow(<Component as={MyComponent} />)
+        shallow(<Component {...requiredProps} as={MyComponent} />)
           .type()
           .should.equal(MyComponent)
       } catch (err) {
-        const wrapper = shallow(<Component as={MyComponent} />)
+        const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
         wrapper.type().should.not.equal(Component)
         wrapper.should.have.prop('as', MyComponent)
       }
@@ -178,7 +178,7 @@ export default (Component, options = {}) => {
     it('passes extra props to the component it is renders as', () => {
       const MyComponent = () => null
 
-      shallow(<Component as={MyComponent} data-extra-prop='foo' />)
+      shallow(<Component {...requiredProps} as={MyComponent} data-extra-prop='foo' />)
         .should.have.descendants('[data-extra-prop="foo"]')
     })
   })

From c419b0534b1ebaf84d3033ce79ada603dabe0f31 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Wed, 12 Jul 2017 18:34:30 +0300
Subject: [PATCH 2/8] feat(Breakpoint): add component

---
 .../Types/BreakpointExampleBreakpoint.js      |  14 ++
 .../Types/BreakpointExampleContent.js         |  38 +++++
 .../Types/BreakpointExampleMultiple.js        |  11 ++
 .../Types/BreakpointExampleNested.js          |  27 ++++
 .../Examples/addons/Breakpoint/Types/index.js |  36 +++++
 .../Usage/BreakpointExamplePoints.js          |  22 +++
 .../Examples/addons/Breakpoint/Usage/index.js |  16 ++
 docs/app/Examples/addons/Breakpoint/index.js  |  13 ++
 src/addons/Breakpoint/Breakpoint.d.ts         |  42 +++++
 src/addons/Breakpoint/Breakpoint.js           | 151 ++++++++++++++++++
 src/addons/Breakpoint/index.d.ts              |   1 +
 src/addons/Breakpoint/index.js                |   1 +
 src/index.js                                  |   1 +
 .../addons/Breakpoint/Breakpoint-test.js      |  91 +++++++++++
 test/specs/commonTests/isConformant.js        |  14 +-
 15 files changed, 471 insertions(+), 7 deletions(-)
 create mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/Types/index.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/Usage/index.js
 create mode 100644 docs/app/Examples/addons/Breakpoint/index.js
 create mode 100644 src/addons/Breakpoint/Breakpoint.d.ts
 create mode 100644 src/addons/Breakpoint/Breakpoint.js
 create mode 100644 src/addons/Breakpoint/index.d.ts
 create mode 100644 src/addons/Breakpoint/index.js
 create mode 100644 test/specs/addons/Breakpoint/Breakpoint-test.js

diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js
new file mode 100644
index 0000000000..6f98e8b9e1
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const BreakpointExampleBreakpoint = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile'>Mobile</Breakpoint>
+    <Breakpoint as={Segment} only='tablet'>Tablet</Breakpoint>
+    <Breakpoint as={Segment} only='computer'>Computer</Breakpoint>
+    <Breakpoint as={Segment} only='large screen'>Large Screen</Breakpoint>
+    <Breakpoint as={Segment} only='widescreen'>Widescreen</Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExampleBreakpoint
diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js
new file mode 100644
index 0000000000..0cd80a74b1
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Breakpoint, Button, Menu } from 'semantic-ui-react'
+
+export default class BreakpointExampleContent extends Component {
+  state = { active: 'home' }
+
+  handleItemClick = (e, { name }) => this.setState({ active: name })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <Menu>
+        <Menu.Item active={active === 'home'} content='Home' name='home' onClick={this.handleItemClick} />
+        <Menu.Item active={active === 'messages'} content='Messages' name='messages' onClick={this.handleItemClick} />
+
+        <Menu.Menu position='right'>
+          <Menu.Item>
+            <Breakpoint
+              as={Button}
+              content='Switch to desktop version'
+              icon='desktop'
+              labelPosition='left'
+              only='mobile'
+            />
+            <Breakpoint
+              as={Button}
+              content='Switch to mobile version'
+              icon='mobile'
+              labelPosition='left'
+              only='computer tablet'
+            />
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+    )
+  }
+}
diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js
new file mode 100644
index 0000000000..31019d6924
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const BreakpointExampleMultiple = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile tablet'>Mobile & Tablet</Breakpoint>
+    <Breakpoint as={Segment} only='computer tablet'>Tablet & Computer</Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExampleMultiple
diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js
new file mode 100644
index 0000000000..dc60518a2e
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const BreakpointExampleNested = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile tablet'>
+      <Breakpoint only='mobile'>
+        <p>Mobile</p>
+      </Breakpoint>
+      <Breakpoint only='tablet'>
+        <p>Mobile</p>
+      </Breakpoint>
+    </Breakpoint>
+
+    <Breakpoint as={Segment} only='computer'>
+      <p>Computer</p>
+      <Breakpoint only='large screen'>
+        <p>Large Screen</p>
+      </Breakpoint>
+      <Breakpoint only='widescreen'>
+        <p>Widescreen</p>
+      </Breakpoint>
+    </Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExampleNested
diff --git a/docs/app/Examples/addons/Breakpoint/Types/index.js b/docs/app/Examples/addons/Breakpoint/Types/index.js
new file mode 100644
index 0000000000..dacdb654d7
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Types/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Message } from 'semantic-ui-react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const BreakpointTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Breakpoint'
+      description='A Breakpoint can appear only for a specific device or screen sizes.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleBreakpoint'
+    >
+      <Message info>
+        Instead of <code>Grid</code> visibility breakpoints, <code>Breakpoint</code> doesn't render invisible content.
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Multiple'
+      description='A Breakpoint can accept multiple sizes.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleMultiple'
+    />
+    <ComponentExample
+      title='Content'
+      description='A Breakpoint can contain a different content.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleContent'
+    />
+    <ComponentExample
+      title='Nested'
+      description='A Breakpoint can be nested.'
+      examplePath='addons/Breakpoint/Types/BreakpointExampleNested'
+    />
+  </ExampleSection>
+)
+
+export default BreakpointTypesExamples
diff --git a/docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js b/docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js
new file mode 100644
index 0000000000..35864a6126
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Breakpoint, Segment } from 'semantic-ui-react'
+
+const points = {
+  computer: 990,
+  largeScreen: 1300,
+  mobile: 300,
+  tablet: 800,
+  widescreen: 1900,
+}
+
+const BreakpointExamplePoints = () => (
+  <Segment.Group>
+    <Breakpoint as={Segment} only='mobile' points={points}>Mobile</Breakpoint>
+    <Breakpoint as={Segment} only='tablet' points={points}>Tablet</Breakpoint>
+    <Breakpoint as={Segment} only='computer' points={points}>Computer</Breakpoint>
+    <Breakpoint as={Segment} only='large screen' points={points}>Large Screen</Breakpoint>
+    <Breakpoint as={Segment} only='widescreen' points={points}>Widescreen</Breakpoint>
+  </Segment.Group>
+)
+
+export default BreakpointExamplePoints
diff --git a/docs/app/Examples/addons/Breakpoint/Usage/index.js b/docs/app/Examples/addons/Breakpoint/Usage/index.js
new file mode 100644
index 0000000000..5945c12712
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/Usage/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 BreakpointUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Points'
+      description='You can define your own points.'
+      examplePath='addons/Breakpoint/Usage/BreakpointExamplePoints'
+    />
+  </ExampleSection>
+)
+
+export default BreakpointUsageExamples
diff --git a/docs/app/Examples/addons/Breakpoint/index.js b/docs/app/Examples/addons/Breakpoint/index.js
new file mode 100644
index 0000000000..0274a6635b
--- /dev/null
+++ b/docs/app/Examples/addons/Breakpoint/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Types from './Types'
+import Usage from './Usage'
+
+const BreakpointExamples = () => (
+  <div>
+    <Types />
+    <Usage />
+  </div>
+)
+
+export default BreakpointExamples
diff --git a/src/addons/Breakpoint/Breakpoint.d.ts b/src/addons/Breakpoint/Breakpoint.d.ts
new file mode 100644
index 0000000000..5d0eed3f38
--- /dev/null
+++ b/src/addons/Breakpoint/Breakpoint.d.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { GridOnlyProp } from '../../collections/Grid/GridColumn';
+
+export interface BreakpointProps {
+  [key: string]: any;
+
+  /** An element type to render as (string or function). */
+  as?: any;
+
+  /** Primary content. */
+  children?: React.ReactNode;
+
+  /** A row can appear only for a specific device, or screen sizes. */
+  only: GridOnlyProp;
+
+  /**
+   * Called on update.
+   *
+   * @param {SyntheticEvent} event - The React SyntheticEvent object
+   * @param {object} data - All props and the event value.
+   */
+  onUpdate?: BreakpointOnUpdateData;
+
+  /** Breakpoints definition. */
+  points?: BreakpointPoints;
+}
+
+export interface BreakpointPoints {
+  computer: number;
+  largeScreen: number;
+  mobile: number;
+  tablet: number;
+  widescreen: number;
+}
+
+export interface BreakpointOnUpdateData extends BreakpointProps {
+  number: string;
+}
+
+declare const Confirm: React.ComponentClass<BreakpointProps>;
+
+export default Confirm;
diff --git a/src/addons/Breakpoint/Breakpoint.js b/src/addons/Breakpoint/Breakpoint.js
new file mode 100644
index 0000000000..cf2481da55
--- /dev/null
+++ b/src/addons/Breakpoint/Breakpoint.js
@@ -0,0 +1,151 @@
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import {
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  META,
+  SUI,
+} from '../../lib'
+
+/**
+ * A Breakpoint can control visibility of content.
+ */
+export default class Breakpoint extends Component {
+  static propTypes = {
+    /** An element type to render as (string or function). */
+    as: customPropTypes.as,
+
+    /** Primary content. */
+    children: PropTypes.node,
+
+    /** A row can appear only for a specific device, or screen sizes. */
+    only: customPropTypes.onlyProp(SUI.VISIBILITY).isRequired,
+
+    /**
+     * Called on update.
+     *
+     * @param {SyntheticEvent} event - The React SyntheticEvent object
+     * @param {object} data - All props and the event value.
+     */
+    onUpdate: PropTypes.func,
+
+    /** Breakpoints definition. */
+    points: PropTypes.shape({
+      computer: PropTypes.number.isRequired,
+      largeScreen: PropTypes.number.isRequired,
+      mobile: PropTypes.number.isRequired,
+      tablet: PropTypes.number.isRequired,
+      widescreen: PropTypes.number.isRequired,
+    }),
+  }
+
+  static defaultProps = {
+    points: {
+      computer: 992,
+      largeScreen: 1200,
+      mobile: 320,
+      tablet: 768,
+      widescreen: 1920,
+    },
+  }
+
+  static _meta = {
+    name: 'Breakpoint',
+    type: META.TYPES.ADDON,
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.state = { width: window.innerWidth }
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleUpdate)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleUpdate)
+  }
+
+  // ----------------------------------------
+  // Breakpoint matchers
+  // ----------------------------------------
+
+  computer = () => {
+    const { points: { computer } } = this.props
+    const { width } = this.state
+
+    return width >= computer
+  }
+
+  largeScreen = () => {
+    const { points: { largeScreen, widescreen } } = this.props
+    const { width } = this.state
+
+    return width >= largeScreen && width < widescreen
+  }
+
+  mobile = () => {
+    const { points: { mobile, tablet } } = this.props
+    const { width } = this.state
+
+    return width >= mobile && width < tablet
+  }
+
+  tablet = () => {
+    const { points: { computer, tablet } } = this.props
+    const { width } = this.state
+
+    return width >= tablet && width < computer
+  }
+
+  widescreen = () => {
+    const { points: { widescreen } } = this.props
+    const { width } = this.state
+
+    return width >= widescreen
+  }
+
+  // ----------------------------------------
+  // Helpers
+  // ----------------------------------------
+
+  visible = () => {
+    const { only } = this.props
+    const points = only.replace('large screen', 'largeScreen').split(' ')
+
+    return _.some(points, point => _.invoke(this, point))
+  }
+
+  // ----------------------------------------
+  // Event handlers
+  // ----------------------------------------
+
+  handleUpdate = e => {
+    requestAnimationFrame(() => {
+      const width = window.innerWidth
+
+      this.setState({ width })
+      _.invoke(this.props, 'onUpdate', e, { ...this.props, width })
+    })
+  }
+
+  // ----------------------------------------
+  // Render
+  // ----------------------------------------
+
+  render() {
+    const { children } = this.props
+
+    const ElementType = getElementType(Breakpoint, this.props)
+    const rest = getUnhandledProps(Breakpoint, this.props)
+
+    if (this.visible()) return <ElementType {...rest}>{children}</ElementType>
+    return null
+  }
+}
+
+
diff --git a/src/addons/Breakpoint/index.d.ts b/src/addons/Breakpoint/index.d.ts
new file mode 100644
index 0000000000..ee3195b503
--- /dev/null
+++ b/src/addons/Breakpoint/index.d.ts
@@ -0,0 +1 @@
+export { default, BreakpointPoints, BreakpointProps } from './Breakpoint';
diff --git a/src/addons/Breakpoint/index.js b/src/addons/Breakpoint/index.js
new file mode 100644
index 0000000000..3d0e973b25
--- /dev/null
+++ b/src/addons/Breakpoint/index.js
@@ -0,0 +1 @@
+export default from './Breakpoint'
diff --git a/src/index.js b/src/index.js
index e6875c7bbe..999ca664ca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 // Addons
+export { default as Breakpoint } from './addons/Breakpoint'
 export { default as Confirm } from './addons/Confirm'
 export { default as Portal } from './addons/Portal'
 export { default as Radio } from './addons/Radio'
diff --git a/test/specs/addons/Breakpoint/Breakpoint-test.js b/test/specs/addons/Breakpoint/Breakpoint-test.js
new file mode 100644
index 0000000000..ad9e40c4d7
--- /dev/null
+++ b/test/specs/addons/Breakpoint/Breakpoint-test.js
@@ -0,0 +1,91 @@
+import _ from 'lodash'
+import React from 'react'
+
+import Breakpoint from 'src/addons/Breakpoint/Breakpoint'
+import * as common from 'test/specs/commonTests'
+import { domEvent, sandbox } from 'test/utils'
+
+const { points } = Breakpoint.defaultProps
+const requiredProps = { only: 'mobile' }
+
+beforeEach(() => {
+  sandbox.stub(window, 'innerWidth').value(points.mobile)
+})
+
+describe('Breakpoint', () => {
+  common.isConformant(Breakpoint, { requiredProps })
+  common.rendersChildren(Breakpoint, { requiredProps })
+
+  describe('children', () => {
+    _.each(points, (value, point) => {
+      it(`renders when point "${point}" fits`, () => {
+        sandbox.stub(window, 'innerWidth').value(value)
+
+        shallow(<Breakpoint only={point} />)
+          .should.have.tagName('div')
+      })
+    })
+
+    _.each(points, (value, point) => {
+      it(`return null when point "${point}" doesn't fit`, () => {
+        sandbox.stub(window, 'innerWidth').value(value - 1)
+
+        shallow(<Breakpoint only={point} />)
+          .should.be.blank()
+      })
+    })
+
+    it('renders when fits multiple points', () => {
+      sandbox.stub(window, 'innerWidth').value(points.largeScreen)
+
+      shallow(<Breakpoint only='large screen' />)
+        .should.have.tagName('div')
+      shallow(<Breakpoint only='large screen' />)
+        .should.have.tagName('div')
+
+      shallow(<Breakpoint only='computer large screen' />)
+        .should.have.tagName('div')
+    })
+
+    it('renders when fits one of points', () => {
+      shallow(<Breakpoint only='mobile' />)
+        .should.have.tagName('div')
+      shallow(<Breakpoint only='tablet' />)
+        .should.be.blank()
+
+      shallow(<Breakpoint only='mobile tablet' />)
+        .should.have.tagName('div')
+    })
+  })
+
+  describe('onUpdate', () => {
+    it('listens for resize', done => {
+      const wrapper = mount(<Breakpoint only='mobile' />)
+      wrapper.should.have.tagName('div')
+
+      sandbox.stub(window, 'innerWidth').value(points.tablet)
+      domEvent.fire(window, 'resize')
+
+      setTimeout(() => {
+        wrapper.should.be.blank()
+        done()
+      }, 25)
+    })
+
+    it('is called with (e, data) when window was resized', done => {
+      const onUpdate = sandbox.spy()
+      const width = points.tablet
+
+      mount(<Breakpoint only='mobile' onUpdate={onUpdate} />)
+      sandbox.stub(window, 'innerWidth').value(width)
+      domEvent.fire(window, 'resize')
+
+      setTimeout(() => {
+        onUpdate.should.have.been.calledOnce()
+        onUpdate.should.have.been.calledWithMatch({}, { width, only: 'mobile' })
+
+        done()
+      }, 25)
+    })
+  })
+})
diff --git a/test/specs/commonTests/isConformant.js b/test/specs/commonTests/isConformant.js
index d97e5024e6..6bd17e0355 100644
--- a/test/specs/commonTests/isConformant.js
+++ b/test/specs/commonTests/isConformant.js
@@ -131,12 +131,12 @@ export default (Component, options = {}) => {
       const tags = ['a', 'em', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'p', 'span', 'strong']
       try {
         tags.forEach((tag) => {
-          shallow(<Component as={tag} />)
+          shallow(<Component {...requiredProps} as={tag} />)
             .should.have.tagName(tag)
         })
       } catch (err) {
         tags.forEach((tag) => {
-          const wrapper = shallow(<Component as={tag} />)
+          const wrapper = shallow(<Component {...requiredProps} as={tag} />)
           wrapper.type().should.not.equal(Component)
           wrapper.should.have.prop('as', tag)
         })
@@ -147,11 +147,11 @@ export default (Component, options = {}) => {
       const MyComponent = () => null
 
       try {
-        shallow(<Component as={MyComponent} />)
+        shallow(<Component {...requiredProps} as={MyComponent} />)
           .type()
           .should.equal(MyComponent)
       } catch (err) {
-        const wrapper = shallow(<Component as={MyComponent} />)
+        const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
         wrapper.type().should.not.equal(Component)
         wrapper.should.have.prop('as', MyComponent)
       }
@@ -165,11 +165,11 @@ export default (Component, options = {}) => {
       }
 
       try {
-        shallow(<Component as={MyComponent} />)
+        shallow(<Component {...requiredProps} as={MyComponent} />)
           .type()
           .should.equal(MyComponent)
       } catch (err) {
-        const wrapper = shallow(<Component as={MyComponent} />)
+        const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
         wrapper.type().should.not.equal(Component)
         wrapper.should.have.prop('as', MyComponent)
       }
@@ -178,7 +178,7 @@ export default (Component, options = {}) => {
     it('passes extra props to the component it is renders as', () => {
       const MyComponent = () => null
 
-      shallow(<Component as={MyComponent} data-extra-prop='foo' />)
+      shallow(<Component {...requiredProps} as={MyComponent} data-extra-prop='foo' />)
         .should.have.descendants('[data-extra-prop="foo"]')
     })
   })

From 8e3209c10eeb95de8f161ecd533f00d723968210 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 18 Jul 2017 11:20:04 +0300
Subject: [PATCH 3/8] feat(Breakpoint): add component

---
 index.d.ts                                      |  6 ++++++
 package.json                                    |  2 +-
 src/addons/Breakpoint/Breakpoint.d.ts           |  4 ++--
 src/addons/Breakpoint/Breakpoint.js             |  4 +---
 src/addons/Breakpoint/index.d.ts                |  2 +-
 src/lib/customPropTypes.js                      | 12 ++++++++++--
 test/specs/addons/Breakpoint/Breakpoint-test.js |  8 ++++----
 7 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 348ff8b064..85bb7be7c1 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,4 +1,10 @@
 // Addons
+export {
+  default as Breakpoint,
+  BreakpointPoints,
+  BreakpointProps,
+  BreakpointOnUpdateData
+} from './dist/commonjs/addons/Breakpoint';
 export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
diff --git a/package.json b/package.json
index d7c7c6d741..a14b6164e2 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "satisfied": "^1.1.0",
     "semantic-ui-css": "^2.2.11",
     "simulant": "^0.2.2",
-    "sinon": "^2.1.0",
+    "sinon": "^2.3.8",
     "sinon-chai": "^2.11.0",
     "ta-scripts": "^2.5.2",
     "through2": "^2.0.2",
diff --git a/src/addons/Breakpoint/Breakpoint.d.ts b/src/addons/Breakpoint/Breakpoint.d.ts
index 5d0eed3f38..accfd623f9 100644
--- a/src/addons/Breakpoint/Breakpoint.d.ts
+++ b/src/addons/Breakpoint/Breakpoint.d.ts
@@ -37,6 +37,6 @@ export interface BreakpointOnUpdateData extends BreakpointProps {
   number: string;
 }
 
-declare const Confirm: React.ComponentClass<BreakpointProps>;
+declare const Breakpoint: React.ComponentClass<BreakpointProps>;
 
-export default Confirm;
+export default Breakpoint;
diff --git a/src/addons/Breakpoint/Breakpoint.js b/src/addons/Breakpoint/Breakpoint.js
index cf2481da55..4f31b6b955 100644
--- a/src/addons/Breakpoint/Breakpoint.js
+++ b/src/addons/Breakpoint/Breakpoint.js
@@ -114,7 +114,7 @@ export default class Breakpoint extends Component {
   // ----------------------------------------
 
   visible = () => {
-    const { only } = this.props
+    const { only = '' } = this.props
     const points = only.replace('large screen', 'largeScreen').split(' ')
 
     return _.some(points, point => _.invoke(this, point))
@@ -147,5 +147,3 @@ export default class Breakpoint extends Component {
     return null
   }
 }
-
-
diff --git a/src/addons/Breakpoint/index.d.ts b/src/addons/Breakpoint/index.d.ts
index ee3195b503..0c42ac3578 100644
--- a/src/addons/Breakpoint/index.d.ts
+++ b/src/addons/Breakpoint/index.d.ts
@@ -1 +1 @@
-export { default, BreakpointPoints, BreakpointProps } from './Breakpoint';
+export { default, BreakpointPoints, BreakpointProps, BreakpointOnUpdateData } from './Breakpoint';
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index a4736b1cec..0993526eef 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -241,7 +241,7 @@ export const demand = (requiredProps) => {
  * @param {string[]} possible An array of possible values to prop.
  */
 export const onlyProp = possible => {
-  return (props, propName, componentName) => {
+  const typeChecker = (required, props, propName, componentName) => {
     if (!Array.isArray(possible)) {
       throw new Error([
         'Invalid argument supplied to some, expected an instance of array.',
@@ -252,7 +252,10 @@ export const onlyProp = possible => {
     const propValue = props[propName]
 
     // skip if prop is undefined
-    if (_.isNil(propValue) || propValue === false) return
+    if (_.isNil(propValue) || propValue === false) {
+      if (required) throw new Error(`Required \`${propName}\` prop was not specified in \`${componentName}\`.`)
+      return
+    }
 
     const values = propValue
       .replace('large screen', 'large-screen')
@@ -265,6 +268,11 @@ export const onlyProp = possible => {
       return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`)
     }
   }
+
+  const chainedCheckType = typeChecker.bind(null, false)
+  chainedCheckType.isRequired = typeChecker.bind(null, true)
+
+  return chainedCheckType
 }
 
 /**
diff --git a/test/specs/addons/Breakpoint/Breakpoint-test.js b/test/specs/addons/Breakpoint/Breakpoint-test.js
index ad9e40c4d7..a759de8960 100644
--- a/test/specs/addons/Breakpoint/Breakpoint-test.js
+++ b/test/specs/addons/Breakpoint/Breakpoint-test.js
@@ -8,11 +8,11 @@ import { domEvent, sandbox } from 'test/utils'
 const { points } = Breakpoint.defaultProps
 const requiredProps = { only: 'mobile' }
 
-beforeEach(() => {
-  sandbox.stub(window, 'innerWidth').value(points.mobile)
-})
-
 describe('Breakpoint', () => {
+  beforeEach(() => {
+    sandbox.stub(window, 'innerWidth').value(points.mobile)
+  })
+
   common.isConformant(Breakpoint, { requiredProps })
   common.rendersChildren(Breakpoint, { requiredProps })
 

From 3e9073098235f63a678f5f7d4e40a6835d9ef839 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 14 Aug 2017 11:08:47 +0300
Subject: [PATCH 4/8] style(Breakpoint): prefix bools with "is"

---
 src/addons/Breakpoint/Breakpoint.js |  16 +-
 src/lib/customPropTypes.js          | 370 +++++++++++++---------------
 2 files changed, 186 insertions(+), 200 deletions(-)

diff --git a/src/addons/Breakpoint/Breakpoint.js b/src/addons/Breakpoint/Breakpoint.js
index 4f31b6b955..0fa6edbc0b 100644
--- a/src/addons/Breakpoint/Breakpoint.js
+++ b/src/addons/Breakpoint/Breakpoint.js
@@ -74,35 +74,35 @@ export default class Breakpoint extends Component {
   // Breakpoint matchers
   // ----------------------------------------
 
-  computer = () => {
+  isComputer = () => {
     const { points: { computer } } = this.props
     const { width } = this.state
 
     return width >= computer
   }
 
-  largeScreen = () => {
+  isLargeScreen = () => {
     const { points: { largeScreen, widescreen } } = this.props
     const { width } = this.state
 
     return width >= largeScreen && width < widescreen
   }
 
-  mobile = () => {
+  isMobile = () => {
     const { points: { mobile, tablet } } = this.props
     const { width } = this.state
 
     return width >= mobile && width < tablet
   }
 
-  tablet = () => {
+  isTablet = () => {
     const { points: { computer, tablet } } = this.props
     const { width } = this.state
 
     return width >= tablet && width < computer
   }
 
-  widescreen = () => {
+  isWidescreen = () => {
     const { points: { widescreen } } = this.props
     const { width } = this.state
 
@@ -113,11 +113,11 @@ export default class Breakpoint extends Component {
   // Helpers
   // ----------------------------------------
 
-  visible = () => {
+  isVisible = () => {
     const { only = '' } = this.props
     const points = only.replace('large screen', 'largeScreen').split(' ')
 
-    return _.some(points, point => _.invoke(this, point))
+    return _.some(points, point => _.invoke(this, `is${_.upperFirst(point)}`))
   }
 
   // ----------------------------------------
@@ -143,7 +143,7 @@ export default class Breakpoint extends Component {
     const ElementType = getElementType(Breakpoint, this.props)
     const rest = getUnhandledProps(Breakpoint, this.props)
 
-    if (this.visible()) return <ElementType {...rest}>{children}</ElementType>
+    if (this.isVisible()) return <ElementType {...rest}>{children}</ElementType>
     return null
   }
 }
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index 0993526eef..88b8318c0f 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -18,90 +18,86 @@ export const as = (...args) => PropTypes.oneOfType([
  * Useful for very large lists of options (e.g. Icon name, Flag name, etc.)
  * @param {string[]} suggestions An array of allowed values.
  */
-export const suggest = suggestions => {
-  return (props, propName, componentName) => {
-    if (!Array.isArray(suggestions)) {
-      throw new Error([
-        'Invalid argument supplied to suggest, expected an instance of array.',
-        ` See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(''))
-    }
-    const propValue = props[propName]
-
-    // skip if prop is undefined or is included in the suggestions
-    if (_.isNil(propValue) || propValue === false || _.includes(propValue, suggestions)) return
-
-    // find best suggestions
-    const propValueWords = propValue.split(' ')
-
-    /* eslint-disable max-nested-callbacks */
-    const bestMatches = _.flow(
-      _.map(suggestion => {
-        const suggestionWords = suggestion.split(' ')
-
-        const propValueScore = _.flow(
-          _.map(x => _.map(y => leven(x, y), suggestionWords)),
-          _.map(_.min),
-          _.sum
-        )(propValueWords)
-
-        const suggestionScore = _.flow(
-          _.map(x => _.map(y => leven(x, y), propValueWords)),
-          _.map(_.min),
-          _.sum
-        )(suggestionWords)
-
-        return { suggestion, score: propValueScore + suggestionScore }
-      }),
-      _.sortBy(['score', 'suggestion']),
-      _.take(3)
-    )(suggestions)
-    /* eslint-enable max-nested-callbacks */
-
-    // skip if a match scored 0
-    // since we're matching on words (classNames) this allows any word order to pass validation
-    // e.g. `left chevron` vs `chevron left`
-    if (bestMatches.some(x => x.score === 0)) return
-
-    return new Error([
-      `Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`,
-      `\n\nInstead of \`${propValue}\`, did you mean:`,
-      bestMatches.map(x => `\n  - ${x.suggestion}`).join(''),
-      '\n',
+export const suggest = suggestions => (props, propName, componentName) => {
+  if (!Array.isArray(suggestions)) {
+    throw new Error([
+      'Invalid argument supplied to suggest, expected an instance of array.',
+      ` See \`${propName}\` prop in \`${componentName}\`.`,
     ].join(''))
   }
+  const propValue = props[propName]
+
+  // skip if prop is undefined or is included in the suggestions
+  if (_.isNil(propValue) || propValue === false || _.includes(propValue, suggestions)) return
+
+  // find best suggestions
+  const propValueWords = propValue.split(' ')
+
+  /* eslint-disable max-nested-callbacks */
+  const bestMatches = _.flow(
+    _.map((suggestion) => {
+      const suggestionWords = suggestion.split(' ')
+
+      const propValueScore = _.flow(
+        _.map(x => _.map(y => leven(x, y), suggestionWords)),
+        _.map(_.min),
+        _.sum,
+      )(propValueWords)
+
+      const suggestionScore = _.flow(
+        _.map(x => _.map(y => leven(x, y), propValueWords)),
+        _.map(_.min),
+        _.sum,
+      )(suggestionWords)
+
+      return { suggestion, score: propValueScore + suggestionScore }
+    }),
+    _.sortBy(['score', 'suggestion']),
+    _.take(3),
+  )(suggestions)
+  /* eslint-enable max-nested-callbacks */
+
+  // skip if a match scored 0
+  // since we're matching on words (classNames) this allows any word order to pass validation
+  // e.g. `left chevron` vs `chevron left`
+  if (bestMatches.some(x => x.score === 0)) return
+
+  return new Error([
+    `Invalid prop \`${propName}\` of value \`${propValue}\` supplied to \`${componentName}\`.`,
+    `\n\nInstead of \`${propValue}\`, did you mean:`,
+    bestMatches.map(x => `\n  - ${x.suggestion}`).join(''),
+    '\n',
+  ].join(''))
 }
 
 /**
  * Disallow other props form being defined with this prop.
  * @param {string[]} disallowedProps An array of props that cannot be used with this prop.
  */
-export const disallow = disallowedProps => {
-  return (props, propName, componentName) => {
-    if (!Array.isArray(disallowedProps)) {
-      throw new Error([
-        'Invalid argument supplied to disallow, expected an instance of array.',
-        ` See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(''))
-    }
-
-    // skip if prop is undefined
-    if (_.isNil(props[propName]) || props[propName] === false) return
+export const disallow = disallowedProps => (props, propName, componentName) => {
+  if (!Array.isArray(disallowedProps)) {
+    throw new Error([
+      'Invalid argument supplied to disallow, expected an instance of array.',
+      ` See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(''))
+  }
 
-    // find disallowed props with values
-    const disallowed = disallowedProps.reduce((acc, disallowedProp) => {
-      if (!_.isNil(props[disallowedProp]) && props[disallowedProp] !== false) {
-        return [...acc, disallowedProp]
-      }
-      return acc
-    }, [])
+  // skip if prop is undefined
+  if (_.isNil(props[propName]) || props[propName] === false) return
 
-    if (disallowed.length > 0) {
-      return new Error([
-        `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`,
-        'They cannot be defined together, choose one or the other.',
-      ].join(' '))
+  // find disallowed props with values
+  const disallowed = disallowedProps.reduce((acc, disallowedProp) => {
+    if (!_.isNil(props[disallowedProp]) && props[disallowedProp] !== false) {
+      return [...acc, disallowedProp]
     }
+    return acc
+  }, [])
+
+  if (disallowed.length > 0) {
+    return new Error([
+      `Prop \`${propName}\` in \`${componentName}\` conflicts with props: \`${disallowed.join('`, `')}\`.`,
+      'They cannot be defined together, choose one or the other.',
+    ].join(' '))
   }
 }
 
@@ -109,56 +105,52 @@ export const disallow = disallowedProps => {
  * Ensure a prop adherers to multiple prop type validators.
  * @param {function[]} validators An array of propType functions.
  */
-export const every = (validators) => {
-  return (props, propName, componentName, ...rest) => {
-    if (!Array.isArray(validators)) {
-      throw new Error([
-        'Invalid argument supplied to every, expected an instance of array.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
-    }
-
-    const errors = _.flow(
-      _.map(validator => {
-        if (typeof validator !== 'function') {
-          throw new Error(`every() argument "validators" should contain functions, found: ${typeOf(validator)}.`)
-        }
-        return validator(props, propName, componentName, ...rest)
-      }),
-      _.compact
-    )(validators)
-
-    // we can only return one error at a time
-    return errors[0]
+export const every = validators => (props, propName, componentName, ...rest) => {
+  if (!Array.isArray(validators)) {
+    throw new Error([
+      'Invalid argument supplied to every, expected an instance of array.',
+      `See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(' '))
   }
+
+  const errors = _.flow(
+    _.map((validator) => {
+      if (typeof validator !== 'function') {
+        throw new Error(`every() argument "validators" should contain functions, found: ${typeOf(validator)}.`)
+      }
+      return validator(props, propName, componentName, ...rest)
+    }),
+    _.compact,
+  )(validators)
+
+  // we can only return one error at a time
+  return errors[0]
 }
 
 /**
  * Ensure a prop adherers to at least one of the given prop type validators.
  * @param {function[]} validators An array of propType functions.
  */
-export const some = (validators) => {
-  return (props, propName, componentName, ...rest) => {
-    if (!Array.isArray(validators)) {
-      throw new Error([
-        'Invalid argument supplied to some, expected an instance of array.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
-    }
-
-    const errors = _.compact(_.map(validators, validator => {
-      if (!_.isFunction(validator)) {
-        throw new Error(`some() argument "validators" should contain functions, found: ${typeOf(validator)}.`)
-      }
-      return validator(props, propName, componentName, ...rest)
-    }))
+export const some = validators => (props, propName, componentName, ...rest) => {
+  if (!Array.isArray(validators)) {
+    throw new Error([
+      'Invalid argument supplied to some, expected an instance of array.',
+      `See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(' '))
+  }
 
-    // fail only if all validators failed
-    if (errors.length === validators.length) {
-      const error = new Error('One of these validators must pass:')
-      error.message += '\n' + _.map(errors, (err, i) => (`[${i + 1}]: ${err.message}`)).join('\n')
-      return error
+  const errors = _.compact(_.map(validators, (validator) => {
+    if (!_.isFunction(validator)) {
+      throw new Error(`some() argument "validators" should contain functions, found: ${typeOf(validator)}.`)
     }
+    return validator(props, propName, componentName, ...rest)
+  }))
+
+  // fail only if all validators failed
+  if (errors.length === validators.length) {
+    const error = new Error('One of these validators must pass:')
+    error.message += `\n${_.map(errors, (err, i) => (`[${i + 1}]: ${err.message}`)).join('\n')}`
+    return error
   }
 }
 
@@ -167,47 +159,45 @@ export const some = (validators) => {
  * @param {object} propsShape An object describing the prop shape.
  * @param {function} validator A propType function.
  */
-export const givenProps = (propsShape, validator) => {
-  return (props, propName, componentName, ...rest) => {
-    if (!_.isPlainObject(propsShape)) {
-      throw new Error([
-        'Invalid argument supplied to givenProps, expected an object.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
-    }
+export const givenProps = (propsShape, validator) => (props, propName, componentName, ...rest) => {
+  if (!_.isPlainObject(propsShape)) {
+    throw new Error([
+      'Invalid argument supplied to givenProps, expected an object.',
+      `See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(' '))
+  }
 
-    if (typeof validator !== 'function') {
-      throw new Error([
-        'Invalid argument supplied to givenProps, expected a function.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
-    }
+  if (typeof validator !== 'function') {
+    throw new Error([
+      'Invalid argument supplied to givenProps, expected a function.',
+      `See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(' '))
+  }
 
-    const shouldValidate = _.keys(propsShape).every(key => {
-      const val = propsShape[key]
-      // require propShape validators to pass or prop values to match
-      return typeof val === 'function' ? !val(props, key, componentName, ...rest) : val === props[propName]
-    })
+  const shouldValidate = _.keys(propsShape).every((key) => {
+    const val = propsShape[key]
+    // require propShape validators to pass or prop values to match
+    return typeof val === 'function' ? !val(props, key, componentName, ...rest) : val === props[propName]
+  })
 
-    if (!shouldValidate) return
+  if (!shouldValidate) return
 
-    const error = validator(props, propName, componentName, ...rest)
+  const error = validator(props, propName, componentName, ...rest)
 
-    if (error) {
-      // poor mans shallow pretty print, prevents JSON circular reference errors
-      const prettyProps = `{ ${_.keys(_.pick(_.keys(propsShape), props)).map(key => {
-        const val = props[key]
-        let renderedValue = val
-        if (typeof val === 'string') renderedValue = `"${val}"`
-        else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]`
-        else if (_.isObject(val)) renderedValue = '{...}'
+  if (error) {
+    // poor mans shallow pretty print, prevents JSON circular reference errors
+    const prettyProps = `{ ${_.keys(_.pick(_.keys(propsShape), props)).map((key) => {
+      const val = props[key]
+      let renderedValue = val
+      if (typeof val === 'string') renderedValue = `"${val}"`
+      else if (Array.isArray(val)) renderedValue = `[${val.join(', ')}]`
+      else if (_.isObject(val)) renderedValue = '{...}'
 
-        return `${key}: ${renderedValue}`
-      }).join(', ')} }`
+      return `${key}: ${renderedValue}`
+    }).join(', ')} }`
 
-      error.message = `Given props ${prettyProps}: ${error.message}`
-      return error
-    }
+    error.message = `Given props ${prettyProps}: ${error.message}`
+    return error
   }
 }
 
@@ -215,24 +205,22 @@ export const givenProps = (propsShape, validator) => {
  * Define prop dependencies by requiring other props.
  * @param {string[]} requiredProps An array of required prop names.
  */
-export const demand = (requiredProps) => {
-  return (props, propName, componentName) => {
-    if (!Array.isArray(requiredProps)) {
-      throw new Error([
-        'Invalid `requiredProps` argument supplied to require, expected an instance of array.',
-        ` See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(''))
-    }
+export const demand = requiredProps => (props, propName, componentName) => {
+  if (!Array.isArray(requiredProps)) {
+    throw new Error([
+      'Invalid `requiredProps` argument supplied to require, expected an instance of array.',
+      ` See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(''))
+  }
 
-    // skip if prop is undefined
-    if (props[propName] === undefined) return
+  // skip if prop is undefined
+  if (props[propName] === undefined) return
 
-    const missingRequired = requiredProps.filter(requiredProp => props[requiredProp] === undefined)
-    if (missingRequired.length > 0) {
-      return new Error(
-        `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join('`, `')}\`.`
-      )
-    }
+  const missingRequired = requiredProps.filter(requiredProp => props[requiredProp] === undefined)
+  if (missingRequired.length > 0) {
+    return new Error(
+      `\`${propName}\` prop in \`${componentName}\` requires props: \`${missingRequired.join('`, `')}\`.`,
+    )
   }
 }
 
@@ -308,37 +296,35 @@ export const collectionShorthand = (...args) => every([
  * @param {string} help A help message to display with the deprecation warning.
  * @param {function} [validator] A propType function.
  */
-export const deprecate = (help, validator) => {
-  return (props, propName, componentName, ...args) => {
-    if (typeof help !== 'string') {
+export const deprecate = (help, validator) => (props, propName, componentName, ...args) => {
+  if (typeof help !== 'string') {
+    throw new Error([
+      'Invalid `help` argument supplied to deprecate, expected a string.',
+      `See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(' '))
+  }
+
+  // skip if prop is undefined
+  if (props[propName] === undefined) return
+
+  // deprecation error and help
+  const error = new Error(`The \`${propName}\` prop in \`${componentName}\` is deprecated.`)
+  if (help) error.message += ` ${help}`
+
+  // add optional validation error message
+  if (validator) {
+    if (typeof validator === 'function') {
+      const validationError = validator(props, propName, componentName, ...args)
+      if (validationError) {
+        error.message = `${error.message} ${validationError.message}`
+      }
+    } else {
       throw new Error([
-        'Invalid `help` argument supplied to deprecate, expected a string.',
+        'Invalid argument supplied to deprecate, expected a function.',
         `See \`${propName}\` prop in \`${componentName}\`.`,
       ].join(' '))
     }
-
-    // skip if prop is undefined
-    if (props[propName] === undefined) return
-
-    // deprecation error and help
-    const error = new Error(`The \`${propName}\` prop in \`${componentName}\` is deprecated.`)
-    if (help) error.message += ` ${help}`
-
-    // add optional validation error message
-    if (validator) {
-      if (typeof validator === 'function') {
-        const validationError = validator(props, propName, componentName, ...args)
-        if (validationError) {
-          error.message = `${error.message} ${validationError.message}`
-        }
-      } else {
-        throw new Error([
-          'Invalid argument supplied to deprecate, expected a function.',
-          `See \`${propName}\` prop in \`${componentName}\`.`,
-        ].join(' '))
-      }
-    }
-
-    return error
   }
+
+  return error
 }

From 3247632810c1d9d278f7ac40ee2a5c8acc90e71e Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Sun, 20 Aug 2017 09:51:00 -0700
Subject: [PATCH 5/8] refactor(Breakpoint): rename Responsive

---
 .../Types/BreakpointExampleBreakpoint.js      | 14 ------
 .../Types/BreakpointExampleMultiple.js        | 11 -----
 .../Types/BreakpointExampleNested.js          | 27 -----------
 .../Examples/addons/Breakpoint/Types/index.js | 36 ---------------
 .../Usage/BreakpointExamplePoints.js          | 22 ---------
 .../Types/ResponsiveExampleContent.js}        |  8 ++--
 .../Types/ResponsiveExampleMultiple.js        | 11 +++++
 .../Types/ResponsiveExampleNested.js          | 27 +++++++++++
 .../Types/ResponsiveExampleResponsive.js      | 14 ++++++
 .../Examples/addons/Responsive/Types/index.js | 36 +++++++++++++++
 .../Usage/ResponsiveExamplePoints.js          | 22 +++++++++
 .../{Breakpoint => Responsive}/Usage/index.js |  8 ++--
 .../{Breakpoint => Responsive}/index.js       |  4 +-
 index.d.ts                                    | 10 ++--
 src/addons/Breakpoint/index.d.ts              |  1 -
 src/addons/Breakpoint/index.js                |  1 -
 .../Responsive.d.ts}                          | 16 +++----
 .../Responsive.js}                            | 32 ++++++-------
 src/addons/Responsive/index.d.ts              |  1 +
 src/addons/Responsive/index.js                |  1 +
 src/index.js                                  |  2 +-
 .../addons/Breakpoint/Breakpoint-test.js      | 46 +++++++++----------
 22 files changed, 175 insertions(+), 175 deletions(-)
 delete mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js
 delete mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js
 delete mode 100644 docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js
 delete mode 100644 docs/app/Examples/addons/Breakpoint/Types/index.js
 delete mode 100644 docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js
 rename docs/app/Examples/addons/{Breakpoint/Types/BreakpointExampleContent.js => Responsive/Types/ResponsiveExampleContent.js} (84%)
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/index.js
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js
 rename docs/app/Examples/addons/{Breakpoint => Responsive}/Usage/index.js (59%)
 rename docs/app/Examples/addons/{Breakpoint => Responsive}/index.js (65%)
 delete mode 100644 src/addons/Breakpoint/index.d.ts
 delete mode 100644 src/addons/Breakpoint/index.js
 rename src/addons/{Breakpoint/Breakpoint.d.ts => Responsive/Responsive.d.ts} (66%)
 rename src/addons/{Breakpoint/Breakpoint.js => Responsive/Responsive.js} (77%)
 create mode 100644 src/addons/Responsive/index.d.ts
 create mode 100644 src/addons/Responsive/index.js

diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js
deleted file mode 100644
index 6f98e8b9e1..0000000000
--- a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleBreakpoint.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { Breakpoint, Segment } from 'semantic-ui-react'
-
-const BreakpointExampleBreakpoint = () => (
-  <Segment.Group>
-    <Breakpoint as={Segment} only='mobile'>Mobile</Breakpoint>
-    <Breakpoint as={Segment} only='tablet'>Tablet</Breakpoint>
-    <Breakpoint as={Segment} only='computer'>Computer</Breakpoint>
-    <Breakpoint as={Segment} only='large screen'>Large Screen</Breakpoint>
-    <Breakpoint as={Segment} only='widescreen'>Widescreen</Breakpoint>
-  </Segment.Group>
-)
-
-export default BreakpointExampleBreakpoint
diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js
deleted file mode 100644
index 31019d6924..0000000000
--- a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleMultiple.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Breakpoint, Segment } from 'semantic-ui-react'
-
-const BreakpointExampleMultiple = () => (
-  <Segment.Group>
-    <Breakpoint as={Segment} only='mobile tablet'>Mobile & Tablet</Breakpoint>
-    <Breakpoint as={Segment} only='computer tablet'>Tablet & Computer</Breakpoint>
-  </Segment.Group>
-)
-
-export default BreakpointExampleMultiple
diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js b/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js
deleted file mode 100644
index dc60518a2e..0000000000
--- a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleNested.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { Breakpoint, Segment } from 'semantic-ui-react'
-
-const BreakpointExampleNested = () => (
-  <Segment.Group>
-    <Breakpoint as={Segment} only='mobile tablet'>
-      <Breakpoint only='mobile'>
-        <p>Mobile</p>
-      </Breakpoint>
-      <Breakpoint only='tablet'>
-        <p>Mobile</p>
-      </Breakpoint>
-    </Breakpoint>
-
-    <Breakpoint as={Segment} only='computer'>
-      <p>Computer</p>
-      <Breakpoint only='large screen'>
-        <p>Large Screen</p>
-      </Breakpoint>
-      <Breakpoint only='widescreen'>
-        <p>Widescreen</p>
-      </Breakpoint>
-    </Breakpoint>
-  </Segment.Group>
-)
-
-export default BreakpointExampleNested
diff --git a/docs/app/Examples/addons/Breakpoint/Types/index.js b/docs/app/Examples/addons/Breakpoint/Types/index.js
deleted file mode 100644
index dacdb654d7..0000000000
--- a/docs/app/Examples/addons/Breakpoint/Types/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { Message } from 'semantic-ui-react'
-
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
-
-const BreakpointTypesExamples = () => (
-  <ExampleSection title='Types'>
-    <ComponentExample
-      title='Breakpoint'
-      description='A Breakpoint can appear only for a specific device or screen sizes.'
-      examplePath='addons/Breakpoint/Types/BreakpointExampleBreakpoint'
-    >
-      <Message info>
-        Instead of <code>Grid</code> visibility breakpoints, <code>Breakpoint</code> doesn't render invisible content.
-      </Message>
-    </ComponentExample>
-    <ComponentExample
-      title='Multiple'
-      description='A Breakpoint can accept multiple sizes.'
-      examplePath='addons/Breakpoint/Types/BreakpointExampleMultiple'
-    />
-    <ComponentExample
-      title='Content'
-      description='A Breakpoint can contain a different content.'
-      examplePath='addons/Breakpoint/Types/BreakpointExampleContent'
-    />
-    <ComponentExample
-      title='Nested'
-      description='A Breakpoint can be nested.'
-      examplePath='addons/Breakpoint/Types/BreakpointExampleNested'
-    />
-  </ExampleSection>
-)
-
-export default BreakpointTypesExamples
diff --git a/docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js b/docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js
deleted file mode 100644
index 35864a6126..0000000000
--- a/docs/app/Examples/addons/Breakpoint/Usage/BreakpointExamplePoints.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import { Breakpoint, Segment } from 'semantic-ui-react'
-
-const points = {
-  computer: 990,
-  largeScreen: 1300,
-  mobile: 300,
-  tablet: 800,
-  widescreen: 1900,
-}
-
-const BreakpointExamplePoints = () => (
-  <Segment.Group>
-    <Breakpoint as={Segment} only='mobile' points={points}>Mobile</Breakpoint>
-    <Breakpoint as={Segment} only='tablet' points={points}>Tablet</Breakpoint>
-    <Breakpoint as={Segment} only='computer' points={points}>Computer</Breakpoint>
-    <Breakpoint as={Segment} only='large screen' points={points}>Large Screen</Breakpoint>
-    <Breakpoint as={Segment} only='widescreen' points={points}>Widescreen</Breakpoint>
-  </Segment.Group>
-)
-
-export default BreakpointExamplePoints
diff --git a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
similarity index 84%
rename from docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js
rename to docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
index 0cd80a74b1..992e29e97b 100644
--- a/docs/app/Examples/addons/Breakpoint/Types/BreakpointExampleContent.js
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
-import { Breakpoint, Button, Menu } from 'semantic-ui-react'
+import { Responsive, Button, Menu } from 'semantic-ui-react'
 
-export default class BreakpointExampleContent extends Component {
+export default class ResponsiveExampleContent extends Component {
   state = { active: 'home' }
 
   handleItemClick = (e, { name }) => this.setState({ active: name })
@@ -16,14 +16,14 @@ export default class BreakpointExampleContent extends Component {
 
         <Menu.Menu position='right'>
           <Menu.Item>
-            <Breakpoint
+            <Responsive
               as={Button}
               content='Switch to desktop version'
               icon='desktop'
               labelPosition='left'
               only='mobile'
             />
-            <Breakpoint
+            <Responsive
               as={Button}
               content='Switch to mobile version'
               icon='mobile'
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js
new file mode 100644
index 0000000000..04cd0fe7fe
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMultiple = () => (
+  <Segment.Group>
+    <Responsive as={Segment} only='mobile tablet'>Mobile & Tablet</Responsive>
+    <Responsive as={Segment} only='computer tablet'>Tablet & Computer</Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleMultiple
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js
new file mode 100644
index 0000000000..923ebaabbf
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleNested = () => (
+  <Segment.Group>
+    <Responsive as={Segment} only='mobile tablet'>
+      <Responsive only='mobile'>
+        <p>Mobile</p>
+      </Responsive>
+      <Responsive only='tablet'>
+        <p>Mobile</p>
+      </Responsive>
+    </Responsive>
+
+    <Responsive as={Segment} only='computer'>
+      <p>Computer</p>
+      <Responsive only='large screen'>
+        <p>Large Screen</p>
+      </Responsive>
+      <Responsive only='widescreen'>
+        <p>Widescreen</p>
+      </Responsive>
+    </Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleNested
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
new file mode 100644
index 0000000000..b4265faf95
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleResponsive = () => (
+  <Segment.Group>
+    <Responsive as={Segment} only='mobile'>Mobile</Responsive>
+    <Responsive as={Segment} only='tablet'>Tablet</Responsive>
+    <Responsive as={Segment} only='computer'>Computer</Responsive>
+    <Responsive as={Segment} only='large screen'>Large Screen</Responsive>
+    <Responsive as={Segment} only='widescreen'>Widescreen</Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleResponsive
diff --git a/docs/app/Examples/addons/Responsive/Types/index.js b/docs/app/Examples/addons/Responsive/Types/index.js
new file mode 100644
index 0000000000..01557c0d2e
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Message } from 'semantic-ui-react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ResponsiveTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Responsive'
+      description='Responsive can appear only for a specific device or screen sizes.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleResponsive'
+    >
+      <Message info>
+        Instead of <code>Grid</code> visibility breakpoints, <code>Responsive</code> doesn't render invisible content.
+      </Message>
+    </ComponentExample>
+    <ComponentExample
+      title='Multiple'
+      description='Responsive can accept multiple sizes.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMultiple'
+    />
+    <ComponentExample
+      title='Content'
+      description='Responsive can contain a different content.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleContent'
+    />
+    <ComponentExample
+      title='Nested'
+      description='Responsive can be nested.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleNested'
+    />
+  </ExampleSection>
+)
+
+export default ResponsiveTypesExamples
diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js
new file mode 100644
index 0000000000..06ec17c540
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const breakpoints = {
+  computer: 990,
+  largeScreen: 1300,
+  mobile: 300,
+  tablet: 800,
+  widescreen: 1900,
+}
+
+const ResponsiveExamplePoints = () => (
+  <Segment.Group>
+    <Responsive as={Segment} only='mobile' breakpoints={breakpoints}>Mobile</Responsive>
+    <Responsive as={Segment} only='tablet' breakpoints={breakpoints}>Tablet</Responsive>
+    <Responsive as={Segment} only='computer' breakpoints={breakpoints}>Computer</Responsive>
+    <Responsive as={Segment} only='large screen' breakpoints={breakpoints}>Large Screen</Responsive>
+    <Responsive as={Segment} only='widescreen' breakpoints={breakpoints}>Widescreen</Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExamplePoints
diff --git a/docs/app/Examples/addons/Breakpoint/Usage/index.js b/docs/app/Examples/addons/Responsive/Usage/index.js
similarity index 59%
rename from docs/app/Examples/addons/Breakpoint/Usage/index.js
rename to docs/app/Examples/addons/Responsive/Usage/index.js
index 5945c12712..a886ff2bb6 100644
--- a/docs/app/Examples/addons/Breakpoint/Usage/index.js
+++ b/docs/app/Examples/addons/Responsive/Usage/index.js
@@ -3,14 +3,14 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const BreakpointUsageExamples = () => (
+const ResponsiveUsageExamples = () => (
   <ExampleSection title='Usage'>
     <ComponentExample
       title='Points'
-      description='You can define your own points.'
-      examplePath='addons/Breakpoint/Usage/BreakpointExamplePoints'
+      description='You can define your own breakpoints.'
+      examplePath='addons/Responsive/Usage/ResponsiveExamplePoints'
     />
   </ExampleSection>
 )
 
-export default BreakpointUsageExamples
+export default ResponsiveUsageExamples
diff --git a/docs/app/Examples/addons/Breakpoint/index.js b/docs/app/Examples/addons/Responsive/index.js
similarity index 65%
rename from docs/app/Examples/addons/Breakpoint/index.js
rename to docs/app/Examples/addons/Responsive/index.js
index 0274a6635b..e976ba8196 100644
--- a/docs/app/Examples/addons/Breakpoint/index.js
+++ b/docs/app/Examples/addons/Responsive/index.js
@@ -3,11 +3,11 @@ import React from 'react'
 import Types from './Types'
 import Usage from './Usage'
 
-const BreakpointExamples = () => (
+const ResponsiveExamples = () => (
   <div>
     <Types />
     <Usage />
   </div>
 )
 
-export default BreakpointExamples
+export default ResponsiveExamples
diff --git a/index.d.ts b/index.d.ts
index a3ff8255f6..79f2ac3c40 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,10 +1,10 @@
 // Addons
 export {
-  default as Breakpoint,
-  BreakpointPoints,
-  BreakpointProps,
-  BreakpointOnUpdateData
-} from './dist/commonjs/addons/Breakpoint';
+  default as Responsive,
+  ResponsivePoints,
+  ResponsiveProps,
+  ResponsiveOnUpdateData
+} from './dist/commonjs/addons/Responsive';
 export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
 export { default as Radio, RadioProps } from './dist/commonjs/addons/Radio';
diff --git a/src/addons/Breakpoint/index.d.ts b/src/addons/Breakpoint/index.d.ts
deleted file mode 100644
index 0c42ac3578..0000000000
--- a/src/addons/Breakpoint/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default, BreakpointPoints, BreakpointProps, BreakpointOnUpdateData } from './Breakpoint';
diff --git a/src/addons/Breakpoint/index.js b/src/addons/Breakpoint/index.js
deleted file mode 100644
index 3d0e973b25..0000000000
--- a/src/addons/Breakpoint/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Breakpoint'
diff --git a/src/addons/Breakpoint/Breakpoint.d.ts b/src/addons/Responsive/Responsive.d.ts
similarity index 66%
rename from src/addons/Breakpoint/Breakpoint.d.ts
rename to src/addons/Responsive/Responsive.d.ts
index accfd623f9..d10825f18f 100644
--- a/src/addons/Breakpoint/Breakpoint.d.ts
+++ b/src/addons/Responsive/Responsive.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridOnlyProp } from '../../collections/Grid/GridColumn';
 
-export interface BreakpointProps {
+export interface ResponsiveProps {
   [key: string]: any;
 
   /** An element type to render as (string or function). */
@@ -19,13 +19,13 @@ export interface BreakpointProps {
    * @param {SyntheticEvent} event - The React SyntheticEvent object
    * @param {object} data - All props and the event value.
    */
-  onUpdate?: BreakpointOnUpdateData;
+  onUpdate?: ResponsiveOnUpdateData;
 
-  /** Breakpoints definition. */
-  points?: BreakpointPoints;
+  /** Responsives definition. */
+  breakpoints?: ResponsivePoints;
 }
 
-export interface BreakpointPoints {
+export interface ResponsivePoints {
   computer: number;
   largeScreen: number;
   mobile: number;
@@ -33,10 +33,10 @@ export interface BreakpointPoints {
   widescreen: number;
 }
 
-export interface BreakpointOnUpdateData extends BreakpointProps {
+export interface ResponsiveOnUpdateData extends ResponsiveProps {
   number: string;
 }
 
-declare const Breakpoint: React.ComponentClass<BreakpointProps>;
+declare const Responsive: React.ComponentClass<ResponsiveProps>;
 
-export default Breakpoint;
+export default Responsive;
diff --git a/src/addons/Breakpoint/Breakpoint.js b/src/addons/Responsive/Responsive.js
similarity index 77%
rename from src/addons/Breakpoint/Breakpoint.js
rename to src/addons/Responsive/Responsive.js
index 0fa6edbc0b..92402a62f5 100644
--- a/src/addons/Breakpoint/Breakpoint.js
+++ b/src/addons/Responsive/Responsive.js
@@ -11,9 +11,9 @@ import {
 } from '../../lib'
 
 /**
- * A Breakpoint can control visibility of content.
+ * Responsive can control visibility of content.
  */
-export default class Breakpoint extends Component {
+export default class Responsive extends Component {
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -32,8 +32,8 @@ export default class Breakpoint extends Component {
      */
     onUpdate: PropTypes.func,
 
-    /** Breakpoints definition. */
-    points: PropTypes.shape({
+    /** Responsives definition. */
+    breakpoints: PropTypes.shape({
       computer: PropTypes.number.isRequired,
       largeScreen: PropTypes.number.isRequired,
       mobile: PropTypes.number.isRequired,
@@ -43,7 +43,7 @@ export default class Breakpoint extends Component {
   }
 
   static defaultProps = {
-    points: {
+    breakpoints: {
       computer: 992,
       largeScreen: 1200,
       mobile: 320,
@@ -53,7 +53,7 @@ export default class Breakpoint extends Component {
   }
 
   static _meta = {
-    name: 'Breakpoint',
+    name: 'Responsive',
     type: META.TYPES.ADDON,
   }
 
@@ -71,39 +71,39 @@ export default class Breakpoint extends Component {
   }
 
   // ----------------------------------------
-  // Breakpoint matchers
+  // Responsive matchers
   // ----------------------------------------
 
   isComputer = () => {
-    const { points: { computer } } = this.props
+    const { breakpoints: { computer } } = this.props
     const { width } = this.state
 
     return width >= computer
   }
 
   isLargeScreen = () => {
-    const { points: { largeScreen, widescreen } } = this.props
+    const { breakpoints: { largeScreen, widescreen } } = this.props
     const { width } = this.state
 
     return width >= largeScreen && width < widescreen
   }
 
   isMobile = () => {
-    const { points: { mobile, tablet } } = this.props
+    const { breakpoints: { mobile, tablet } } = this.props
     const { width } = this.state
 
     return width >= mobile && width < tablet
   }
 
   isTablet = () => {
-    const { points: { computer, tablet } } = this.props
+    const { breakpoints: { computer, tablet } } = this.props
     const { width } = this.state
 
     return width >= tablet && width < computer
   }
 
   isWidescreen = () => {
-    const { points: { widescreen } } = this.props
+    const { breakpoints: { widescreen } } = this.props
     const { width } = this.state
 
     return width >= widescreen
@@ -115,9 +115,9 @@ export default class Breakpoint extends Component {
 
   isVisible = () => {
     const { only = '' } = this.props
-    const points = only.replace('large screen', 'largeScreen').split(' ')
+    const breakpoints = only.replace('large screen', 'largeScreen').split(' ')
 
-    return _.some(points, point => _.invoke(this, `is${_.upperFirst(point)}`))
+    return _.some(breakpoints, point => _.invoke(this, `is${_.upperFirst(point)}`))
   }
 
   // ----------------------------------------
@@ -140,8 +140,8 @@ export default class Breakpoint extends Component {
   render() {
     const { children } = this.props
 
-    const ElementType = getElementType(Breakpoint, this.props)
-    const rest = getUnhandledProps(Breakpoint, this.props)
+    const ElementType = getElementType(Responsive, this.props)
+    const rest = getUnhandledProps(Responsive, this.props)
 
     if (this.isVisible()) return <ElementType {...rest}>{children}</ElementType>
     return null
diff --git a/src/addons/Responsive/index.d.ts b/src/addons/Responsive/index.d.ts
new file mode 100644
index 0000000000..1c9fd328ac
--- /dev/null
+++ b/src/addons/Responsive/index.d.ts
@@ -0,0 +1 @@
+export { default, ResponsivePoints, ResponsiveProps, ResponsiveOnUpdateData } from './Responsive';
diff --git a/src/addons/Responsive/index.js b/src/addons/Responsive/index.js
new file mode 100644
index 0000000000..fd5e7015aa
--- /dev/null
+++ b/src/addons/Responsive/index.js
@@ -0,0 +1 @@
+export default from './Responsive'
diff --git a/src/index.js b/src/index.js
index 505152b969..e42c3cd3e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 // Addons
-export { default as Breakpoint } from './addons/Breakpoint'
+export { default as Responsive } from './addons/Responsive'
 export { default as Confirm } from './addons/Confirm'
 export { default as Portal } from './addons/Portal'
 export { default as Radio } from './addons/Radio'
diff --git a/test/specs/addons/Breakpoint/Breakpoint-test.js b/test/specs/addons/Breakpoint/Breakpoint-test.js
index a759de8960..d5e1a26bd9 100644
--- a/test/specs/addons/Breakpoint/Breakpoint-test.js
+++ b/test/specs/addons/Breakpoint/Breakpoint-test.js
@@ -1,69 +1,69 @@
 import _ from 'lodash'
 import React from 'react'
 
-import Breakpoint from 'src/addons/Breakpoint/Breakpoint'
+import Responsive from 'src/addons/Responsive/Responsive'
 import * as common from 'test/specs/commonTests'
 import { domEvent, sandbox } from 'test/utils'
 
-const { points } = Breakpoint.defaultProps
+const { breakpoints } = Responsive.defaultProps
 const requiredProps = { only: 'mobile' }
 
-describe('Breakpoint', () => {
+describe('Responsive', () => {
   beforeEach(() => {
-    sandbox.stub(window, 'innerWidth').value(points.mobile)
+    sandbox.stub(window, 'innerWidth').value(breakpoints.mobile)
   })
 
-  common.isConformant(Breakpoint, { requiredProps })
-  common.rendersChildren(Breakpoint, { requiredProps })
+  common.isConformant(Responsive, { requiredProps })
+  common.rendersChildren(Responsive, { requiredProps })
 
   describe('children', () => {
-    _.each(points, (value, point) => {
+    _.each(breakpoints, (value, point) => {
       it(`renders when point "${point}" fits`, () => {
         sandbox.stub(window, 'innerWidth').value(value)
 
-        shallow(<Breakpoint only={point} />)
+        shallow(<Responsive only={point} />)
           .should.have.tagName('div')
       })
     })
 
-    _.each(points, (value, point) => {
+    _.each(breakpoints, (value, point) => {
       it(`return null when point "${point}" doesn't fit`, () => {
         sandbox.stub(window, 'innerWidth').value(value - 1)
 
-        shallow(<Breakpoint only={point} />)
+        shallow(<Responsive only={point} />)
           .should.be.blank()
       })
     })
 
-    it('renders when fits multiple points', () => {
-      sandbox.stub(window, 'innerWidth').value(points.largeScreen)
+    it('renders when fits multiple breakpoints', () => {
+      sandbox.stub(window, 'innerWidth').value(breakpoints.largeScreen)
 
-      shallow(<Breakpoint only='large screen' />)
+      shallow(<Responsive only='large screen' />)
         .should.have.tagName('div')
-      shallow(<Breakpoint only='large screen' />)
+      shallow(<Responsive only='large screen' />)
         .should.have.tagName('div')
 
-      shallow(<Breakpoint only='computer large screen' />)
+      shallow(<Responsive only='computer large screen' />)
         .should.have.tagName('div')
     })
 
-    it('renders when fits one of points', () => {
-      shallow(<Breakpoint only='mobile' />)
+    it('renders when fits one of breakpoints', () => {
+      shallow(<Responsive only='mobile' />)
         .should.have.tagName('div')
-      shallow(<Breakpoint only='tablet' />)
+      shallow(<Responsive only='tablet' />)
         .should.be.blank()
 
-      shallow(<Breakpoint only='mobile tablet' />)
+      shallow(<Responsive only='mobile tablet' />)
         .should.have.tagName('div')
     })
   })
 
   describe('onUpdate', () => {
     it('listens for resize', done => {
-      const wrapper = mount(<Breakpoint only='mobile' />)
+      const wrapper = mount(<Responsive only='mobile' />)
       wrapper.should.have.tagName('div')
 
-      sandbox.stub(window, 'innerWidth').value(points.tablet)
+      sandbox.stub(window, 'innerWidth').value(breakpoints.tablet)
       domEvent.fire(window, 'resize')
 
       setTimeout(() => {
@@ -74,9 +74,9 @@ describe('Breakpoint', () => {
 
     it('is called with (e, data) when window was resized', done => {
       const onUpdate = sandbox.spy()
-      const width = points.tablet
+      const width = breakpoints.tablet
 
-      mount(<Breakpoint only='mobile' onUpdate={onUpdate} />)
+      mount(<Responsive only='mobile' onUpdate={onUpdate} />)
       sandbox.stub(window, 'innerWidth').value(width)
       domEvent.fire(window, 'resize')
 

From 6d63ded2546fb2817a890a4c67434e99adc2e0ac Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 21 Aug 2017 11:46:34 +0300
Subject: [PATCH 6/8] style(mixed): fix lint issues

---
 src/addons/Breakpoint/Breakpoint.js             | 2 +-
 src/lib/customPropTypes.js                      | 2 +-
 test/specs/addons/Breakpoint/Breakpoint-test.js | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/addons/Breakpoint/Breakpoint.js b/src/addons/Breakpoint/Breakpoint.js
index 0fa6edbc0b..faab7c538d 100644
--- a/src/addons/Breakpoint/Breakpoint.js
+++ b/src/addons/Breakpoint/Breakpoint.js
@@ -124,7 +124,7 @@ export default class Breakpoint extends Component {
   // Event handlers
   // ----------------------------------------
 
-  handleUpdate = e => {
+  handleUpdate = (e) => {
     requestAnimationFrame(() => {
       const width = window.innerWidth
 
diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index 88b8318c0f..2f623f15e7 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -228,7 +228,7 @@ export const demand = requiredProps => (props, propName, componentName) => {
  * Ensure an only prop contains a string with only possible values.
  * @param {string[]} possible An array of possible values to prop.
  */
-export const onlyProp = possible => {
+export const onlyProp = (possible) => {
   const typeChecker = (required, props, propName, componentName) => {
     if (!Array.isArray(possible)) {
       throw new Error([
diff --git a/test/specs/addons/Breakpoint/Breakpoint-test.js b/test/specs/addons/Breakpoint/Breakpoint-test.js
index a759de8960..55747eac6e 100644
--- a/test/specs/addons/Breakpoint/Breakpoint-test.js
+++ b/test/specs/addons/Breakpoint/Breakpoint-test.js
@@ -59,7 +59,7 @@ describe('Breakpoint', () => {
   })
 
   describe('onUpdate', () => {
-    it('listens for resize', done => {
+    it('listens for resize', (done) => {
       const wrapper = mount(<Breakpoint only='mobile' />)
       wrapper.should.have.tagName('div')
 
@@ -72,7 +72,7 @@ describe('Breakpoint', () => {
       }, 25)
     })
 
-    it('is called with (e, data) when window was resized', done => {
+    it('is called with (e, data) when window was resized', (done) => {
       const onUpdate = sandbox.spy()
       const width = points.tablet
 

From 81872354aa13ec8f2e6bd09321a0299c2b3c0710 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Sun, 3 Sep 2017 18:59:18 +0300
Subject: [PATCH 7/8] feat(Responsive): refactor component

---
 .../Types/ResponsiveExampleContent.js         |   4 +-
 .../Types/ResponsiveExampleMaxWidth.js        |  15 +++
 .../Types/ResponsiveExampleMinWidth.js        |  15 +++
 .../Types/ResponsiveExampleMixed.js           |  10 ++
 .../Types/ResponsiveExampleMultiple.js        |  11 --
 .../Types/ResponsiveExampleNested.js          |  27 -----
 .../Types/ResponsiveExampleResponsive.js      |   6 +-
 .../Examples/addons/Responsive/Types/index.js |  25 +++--
 .../Usage/ResponsiveExampleBreakpoints.js     |  14 +++
 .../Usage/ResponsiveExampleOnUpdate.js        |  53 +++++++++
 .../Usage/ResponsiveExamplePoints.js          |  22 ----
 .../Examples/addons/Responsive/Usage/index.js |  11 +-
 index.d.ts                                    |   3 +-
 src/addons/Responsive/Responsive.d.ts         |  34 +++---
 src/addons/Responsive/Responsive.js           | 102 +++++++-----------
 src/addons/Responsive/index.d.ts              |   2 +-
 src/lib/eventStack.js                         |   8 +-
 .../addons/Breakpoint/Breakpoint-test.js      |  91 ----------------
 .../addons/Responsive/Responsive-test.js      |  77 +++++++++++++
 19 files changed, 273 insertions(+), 257 deletions(-)
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js
 create mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js
 delete mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js
 delete mode 100644 docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js
 delete mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js
 delete mode 100644 test/specs/addons/Breakpoint/Breakpoint-test.js
 create mode 100644 test/specs/addons/Responsive/Responsive-test.js

diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
index 992e29e97b..ad951be010 100644
--- a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleContent.js
@@ -17,18 +17,18 @@ export default class ResponsiveExampleContent extends Component {
         <Menu.Menu position='right'>
           <Menu.Item>
             <Responsive
+              {...Responsive.onlyMobile}
               as={Button}
               content='Switch to desktop version'
               icon='desktop'
               labelPosition='left'
-              only='mobile'
             />
             <Responsive
               as={Button}
               content='Switch to mobile version'
               icon='mobile'
               labelPosition='left'
-              only='computer tablet'
+              minWidth={Responsive.onlyTablet.minWidth}
             />
           </Menu.Item>
         </Menu.Menu>
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js
new file mode 100644
index 0000000000..08bd71af08
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMaxWidth.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMaxWidth = () => (
+  <Segment.Group>
+    <Responsive as={Segment} maxWidth={767}>
+      Visible only if display has <code>767px</code> width and lower
+    </Responsive>
+    <Responsive as={Segment} maxWidth={2569}>
+      Visible only if display has <code>2569px</code> width
+    </Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleMaxWidth
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js
new file mode 100644
index 0000000000..5875fa8e57
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMinWidth.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMinWidth = () => (
+  <Segment.Group>
+    <Responsive as={Segment} minWidth={768}>
+      Visible only if display has <code>768px</code> width and higher
+    </Responsive>
+    <Responsive as={Segment} minWidth={992}>
+      Visible only if display has <code>992px</code> width and higher
+    </Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleMinWidth
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js
new file mode 100644
index 0000000000..4584563b49
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMixed.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleMixed = () => (
+  <Responsive as={Segment} minWidth={320} maxWidth={2559}>
+      Visible only if display has width between <code>320px</code> and <code>2559px</code>
+  </Responsive>
+)
+
+export default ResponsiveExampleMixed
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js
deleted file mode 100644
index 04cd0fe7fe..0000000000
--- a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleMultiple.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Responsive, Segment } from 'semantic-ui-react'
-
-const ResponsiveExampleMultiple = () => (
-  <Segment.Group>
-    <Responsive as={Segment} only='mobile tablet'>Mobile & Tablet</Responsive>
-    <Responsive as={Segment} only='computer tablet'>Tablet & Computer</Responsive>
-  </Segment.Group>
-)
-
-export default ResponsiveExampleMultiple
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js
deleted file mode 100644
index 923ebaabbf..0000000000
--- a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleNested.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { Responsive, Segment } from 'semantic-ui-react'
-
-const ResponsiveExampleNested = () => (
-  <Segment.Group>
-    <Responsive as={Segment} only='mobile tablet'>
-      <Responsive only='mobile'>
-        <p>Mobile</p>
-      </Responsive>
-      <Responsive only='tablet'>
-        <p>Mobile</p>
-      </Responsive>
-    </Responsive>
-
-    <Responsive as={Segment} only='computer'>
-      <p>Computer</p>
-      <Responsive only='large screen'>
-        <p>Large Screen</p>
-      </Responsive>
-      <Responsive only='widescreen'>
-        <p>Widescreen</p>
-      </Responsive>
-    </Responsive>
-  </Segment.Group>
-)
-
-export default ResponsiveExampleNested
diff --git a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
index b4265faf95..78c1883cad 100644
--- a/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
+++ b/docs/app/Examples/addons/Responsive/Types/ResponsiveExampleResponsive.js
@@ -3,11 +3,7 @@ import { Responsive, Segment } from 'semantic-ui-react'
 
 const ResponsiveExampleResponsive = () => (
   <Segment.Group>
-    <Responsive as={Segment} only='mobile'>Mobile</Responsive>
-    <Responsive as={Segment} only='tablet'>Tablet</Responsive>
-    <Responsive as={Segment} only='computer'>Computer</Responsive>
-    <Responsive as={Segment} only='large screen'>Large Screen</Responsive>
-    <Responsive as={Segment} only='widescreen'>Widescreen</Responsive>
+    <Responsive as={Segment}>I'm always visible by default</Responsive>
   </Segment.Group>
 )
 
diff --git a/docs/app/Examples/addons/Responsive/Types/index.js b/docs/app/Examples/addons/Responsive/Types/index.js
index 01557c0d2e..94a474bc1a 100644
--- a/docs/app/Examples/addons/Responsive/Types/index.js
+++ b/docs/app/Examples/addons/Responsive/Types/index.js
@@ -8,7 +8,7 @@ const ResponsiveTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Responsive'
-      description='Responsive can appear only for a specific device or screen sizes.'
+      description='Responsive is always visible.'
       examplePath='addons/Responsive/Types/ResponsiveExampleResponsive'
     >
       <Message info>
@@ -16,19 +16,24 @@ const ResponsiveTypesExamples = () => (
       </Message>
     </ComponentExample>
     <ComponentExample
-      title='Multiple'
-      description='Responsive can accept multiple sizes.'
-      examplePath='addons/Responsive/Types/ResponsiveExampleMultiple'
+      title='Minimal Width'
+      description='You can pass minimal width value at which content will be displayed.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMinWidth'
     />
     <ComponentExample
-      title='Content'
-      description='Responsive can contain a different content.'
-      examplePath='addons/Responsive/Types/ResponsiveExampleContent'
+      title='Maximum Width'
+      description='You can pass maximum width value at which content will be displayed.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMaxWidth'
+    />
+    <ComponentExample
+      title='Mixed'
+      description='You can pass minimal and maximum width value at which content will be displayed.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleMixed'
     />
     <ComponentExample
-      title='Nested'
-      description='Responsive can be nested.'
-      examplePath='addons/Responsive/Types/ResponsiveExampleNested'
+      title='Content'
+      description='Responsive can contain different content.'
+      examplePath='addons/Responsive/Types/ResponsiveExampleContent'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js
new file mode 100644
index 0000000000..f2b7d56fd4
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Responsive, Segment } from 'semantic-ui-react'
+
+const ResponsiveExampleBreakpoints = () => (
+  <Segment.Group>
+    <Responsive as={Segment} {...Responsive.onlyMobile}>Mobile</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyTablet}>Tablet</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyComputer}>Computer</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyLargeScreen}>Large Screen</Responsive>
+    <Responsive as={Segment} {...Responsive.onlyWidescreen}>Widescreen</Responsive>
+  </Segment.Group>
+)
+
+export default ResponsiveExampleBreakpoints
diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js
new file mode 100644
index 0000000000..02bf1d303e
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { Button, Grid, Label, Responsive, Segment } from 'semantic-ui-react'
+
+export default class ResponsiveExampleOnUpdate extends Component {
+  state = {
+    log: [],
+    logCount: 0,
+  }
+
+  handleOnUpdate = () => this.setState({
+    log: [
+      `${new Date().toLocaleTimeString()}: onUpdate()`,
+      ...this.state.log,
+    ].slice(0, 20),
+    logCount: this.state.logCount + 1,
+  })
+
+  clearLog = () => this.setState({ log: [], logCount: 0 })
+
+  render() {
+    const { log, logCount } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column>
+          <Responsive as={Segment} onUpdate={this.handleOnUpdate}>
+            Responsive Segment
+          </Responsive>
+        </Grid.Column>
+
+        <Grid.Column>
+          <Segment.Group>
+            <Segment>
+              <Button
+                compact
+                content='Clear'
+                floated='right'
+                onClick={this.clearLog}
+                size='small'
+              />
+              Event Log <Label circular>{logCount}</Label>
+            </Segment>
+            {log.length > 0 && (
+              <Segment secondary>
+                <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+              </Segment>
+            )}
+          </Segment.Group>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}
diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js
deleted file mode 100644
index 06ec17c540..0000000000
--- a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExamplePoints.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import { Responsive, Segment } from 'semantic-ui-react'
-
-const breakpoints = {
-  computer: 990,
-  largeScreen: 1300,
-  mobile: 300,
-  tablet: 800,
-  widescreen: 1900,
-}
-
-const ResponsiveExamplePoints = () => (
-  <Segment.Group>
-    <Responsive as={Segment} only='mobile' breakpoints={breakpoints}>Mobile</Responsive>
-    <Responsive as={Segment} only='tablet' breakpoints={breakpoints}>Tablet</Responsive>
-    <Responsive as={Segment} only='computer' breakpoints={breakpoints}>Computer</Responsive>
-    <Responsive as={Segment} only='large screen' breakpoints={breakpoints}>Large Screen</Responsive>
-    <Responsive as={Segment} only='widescreen' breakpoints={breakpoints}>Widescreen</Responsive>
-  </Segment.Group>
-)
-
-export default ResponsiveExamplePoints
diff --git a/docs/app/Examples/addons/Responsive/Usage/index.js b/docs/app/Examples/addons/Responsive/Usage/index.js
index a886ff2bb6..e4f3ebe169 100644
--- a/docs/app/Examples/addons/Responsive/Usage/index.js
+++ b/docs/app/Examples/addons/Responsive/Usage/index.js
@@ -6,9 +6,14 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 const ResponsiveUsageExamples = () => (
   <ExampleSection title='Usage'>
     <ComponentExample
-      title='Points'
-      description='You can define your own breakpoints.'
-      examplePath='addons/Responsive/Usage/ResponsiveExamplePoints'
+      title='Predefined breakpoints'
+      description='Responsive has predefined breakpoints that mimics SUI default variables.'
+      examplePath='addons/Responsive/Usage/ResponsiveExampleBreakpoints'
+    />
+    <ComponentExample
+      title='OnUpdate'
+      description='Responsive listens for window resize events and calls event handler.'
+      examplePath='addons/Responsive/Usage/ResponsiveExampleOnUpdate'
     />
   </ExampleSection>
 )
diff --git a/index.d.ts b/index.d.ts
index 88d918eb78..5654094f4c 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,9 +1,8 @@
 // Addons
 export {
   default as Responsive,
-  ResponsivePoints,
   ResponsiveProps,
-  ResponsiveOnUpdateData
+  ResponsiveWidthShorthand
 } from './dist/commonjs/addons/Responsive';
 export { default as Confirm, ConfirmProps } from './dist/commonjs/addons/Confirm';
 export { default as Portal, PortalProps } from './dist/commonjs/addons/Portal';
diff --git a/src/addons/Responsive/Responsive.d.ts b/src/addons/Responsive/Responsive.d.ts
index d10825f18f..5a52c3d181 100644
--- a/src/addons/Responsive/Responsive.d.ts
+++ b/src/addons/Responsive/Responsive.d.ts
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridOnlyProp } from '../../collections/Grid/GridColumn';
 
 export interface ResponsiveProps {
   [key: string]: any;
@@ -10,8 +9,11 @@ export interface ResponsiveProps {
   /** Primary content. */
   children?: React.ReactNode;
 
-  /** A row can appear only for a specific device, or screen sizes. */
-  only: GridOnlyProp;
+  /** The maximum width at which content will be displayed. */
+  maxWidth?: number | string;
+
+  /** The minimum width at which content will be displayed. */
+  minWidth?: number | string;
 
   /**
    * Called on update.
@@ -19,24 +21,24 @@ export interface ResponsiveProps {
    * @param {SyntheticEvent} event - The React SyntheticEvent object
    * @param {object} data - All props and the event value.
    */
-  onUpdate?: ResponsiveOnUpdateData;
-
-  /** Responsives definition. */
-  breakpoints?: ResponsivePoints;
+  onUpdate?: (event: React.SyntheticEvent<HTMLElement>, data: ResponsiveOnUpdateData) => void;
 }
 
-export interface ResponsivePoints {
-  computer: number;
-  largeScreen: number;
-  mobile: number;
-  tablet: number;
-  widescreen: number;
+export interface ResponsiveOnUpdateData extends ResponsiveProps {
+  width: string;
 }
 
-export interface ResponsiveOnUpdateData extends ResponsiveProps {
-  number: string;
+export interface ResponsiveWidthShorthand {
+  minWidth: number;
+  maxWidth?: number;
 }
 
-declare const Responsive: React.ComponentClass<ResponsiveProps>;
+declare class Responsive extends React.Component<ResponsiveProps, {}> {
+  static onlyMobile: ResponsiveWidthShorthand;
+  static onlyTablet: ResponsiveWidthShorthand;
+  static onlyComputer: ResponsiveWidthShorthand;
+  static onlyLargeScreen: ResponsiveWidthShorthand;
+  static onlyWidescreen: ResponsiveWidthShorthand;
+}
 
 export default Responsive;
diff --git a/src/addons/Responsive/Responsive.js b/src/addons/Responsive/Responsive.js
index 298b1ffa71..bee953ca4e 100644
--- a/src/addons/Responsive/Responsive.js
+++ b/src/addons/Responsive/Responsive.js
@@ -4,10 +4,10 @@ import React, { Component } from 'react'
 
 import {
   customPropTypes,
+  eventStack,
   getElementType,
   getUnhandledProps,
   META,
-  SUI,
 } from '../../lib'
 
 /**
@@ -21,8 +21,17 @@ export default class Responsive extends Component {
     /** Primary content. */
     children: PropTypes.node,
 
-    /** A row can appear only for a specific device, or screen sizes. */
-    only: customPropTypes.onlyProp(SUI.VISIBILITY).isRequired,
+    /** The maximum width at which content will be displayed. */
+    maxWidth: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+
+    /** The minimum width at which content will be displayed. */
+    minWidth: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
 
     /**
      * Called on update.
@@ -31,25 +40,6 @@ export default class Responsive extends Component {
      * @param {object} data - All props and the event value.
      */
     onUpdate: PropTypes.func,
-
-    /** Responsives definition. */
-    breakpoints: PropTypes.shape({
-      computer: PropTypes.number.isRequired,
-      largeScreen: PropTypes.number.isRequired,
-      mobile: PropTypes.number.isRequired,
-      tablet: PropTypes.number.isRequired,
-      widescreen: PropTypes.number.isRequired,
-    }),
-  }
-
-  static defaultProps = {
-    breakpoints: {
-      computer: 992,
-      largeScreen: 1200,
-      mobile: 320,
-      tablet: 768,
-      widescreen: 1920,
-    },
   }
 
   static _meta = {
@@ -57,80 +47,62 @@ export default class Responsive extends Component {
     type: META.TYPES.ADDON,
   }
 
+  static onlyMobile = { minWidth: 320, maxWidth: 767 }
+  static onlyTablet = { minWidth: 768, maxWidth: 991 }
+  static onlyComputer = { minWidth: 992 }
+  static onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
+  static onlyWidescreen = { minWidth: 1920 }
+
   constructor(...args) {
     super(...args)
     this.state = { width: window.innerWidth }
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.handleUpdate)
+    eventStack.sub('resize', this.handleResize)
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.handleUpdate)
+    eventStack.unsub('resize', this.handleResize)
   }
 
   // ----------------------------------------
-  // Responsive matchers
+  // Helpers
   // ----------------------------------------
 
-  isComputer = () => {
-    const { breakpoints: { computer } } = this.props
+  fitsMaxWidth = () => {
+    const { maxWidth } = this.props
     const { width } = this.state
 
-    return width >= computer
+    return _.isNil(maxWidth) ? true : width <= maxWidth
   }
 
-  isLargeScreen = () => {
-    const { breakpoints: { largeScreen, widescreen } } = this.props
+  fitsMinWidth = () => {
+    const { minWidth } = this.props
     const { width } = this.state
 
-    return width >= largeScreen && width < widescreen
+    return _.isNil(minWidth) ? true : width >= minWidth
   }
 
-  isMobile = () => {
-    const { breakpoints: { mobile, tablet } } = this.props
-    const { width } = this.state
-
-    return width >= mobile && width < tablet
-  }
-
-  isTablet = () => {
-    const { breakpoints: { computer, tablet } } = this.props
-    const { width } = this.state
-
-    return width >= tablet && width < computer
-  }
-
-  isWidescreen = () => {
-    const { breakpoints: { widescreen } } = this.props
-    const { width } = this.state
-
-    return width >= widescreen
-  }
+  isVisible = () => this.fitsMinWidth() && this.fitsMaxWidth()
 
   // ----------------------------------------
-  // Helpers
+  // Event handlers
   // ----------------------------------------
 
-  isVisible = () => {
-    const { only = '' } = this.props
-    const breakpoints = only.replace('large screen', 'largeScreen').split(' ')
+  handleResize = (e) => {
+    if (this.ticking) return
 
-    return _.some(breakpoints, point => _.invoke(this, `is${_.upperFirst(point)}`))
+    this.ticking = true
+    requestAnimationFrame(() => this.handleUpdate(e))
   }
 
-  // ----------------------------------------
-  // Event handlers
-  // ----------------------------------------
-
   handleUpdate = (e) => {
-    requestAnimationFrame(() => {
-      const width = window.innerWidth
+    this.ticking = false
+    const width = window.innerWidth
 
-      this.setState({ width })
-      _.invoke(this.props, 'onUpdate', e, { ...this.props, width })
-    })
+    this.setState({ width })
+    _.invoke(this.props, 'onUpdate', e, { ...this.props, width })
   }
 
   // ----------------------------------------
diff --git a/src/addons/Responsive/index.d.ts b/src/addons/Responsive/index.d.ts
index 1c9fd328ac..1b11f72ff4 100644
--- a/src/addons/Responsive/index.d.ts
+++ b/src/addons/Responsive/index.d.ts
@@ -1 +1 @@
-export { default, ResponsivePoints, ResponsiveProps, ResponsiveOnUpdateData } from './Responsive';
+export { default, ResponsiveProps, ResponsiveOnUpdateData, ResponsiveWidthShorthand } from './Responsive';
diff --git a/src/lib/eventStack.js b/src/lib/eventStack.js
index 2a70839a85..368d75b40e 100644
--- a/src/lib/eventStack.js
+++ b/src/lib/eventStack.js
@@ -1,6 +1,8 @@
 import _ from 'lodash'
 import isBrowser from './isBrowser'
 
+const windowEvents = ['resize']
+
 class EventStack {
   _handlers = {}
   _pools = {}
@@ -31,16 +33,18 @@ class EventStack {
   _listen = (name) => {
     if (_.has(this._handlers, name)) return
     const handler = this._emit(name)
+    const target = _.includes(windowEvents, name) ? window : document
 
-    document.addEventListener(name, handler)
+    target.addEventListener(name, handler)
     this._handlers[name] = handler
   }
 
   _unlisten = (name) => {
     if (_.some(this._pools, name)) return
     const { [name]: handler } = this._handlers
+    const target = _.includes(windowEvents, name) ? window : document
 
-    document.removeEventListener(name, handler)
+    target.removeEventListener(name, handler)
     delete this._handlers[name]
   }
 
diff --git a/test/specs/addons/Breakpoint/Breakpoint-test.js b/test/specs/addons/Breakpoint/Breakpoint-test.js
deleted file mode 100644
index 830471c0d4..0000000000
--- a/test/specs/addons/Breakpoint/Breakpoint-test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import _ from 'lodash'
-import React from 'react'
-
-import Responsive from 'src/addons/Responsive/Responsive'
-import * as common from 'test/specs/commonTests'
-import { domEvent, sandbox } from 'test/utils'
-
-const { breakpoints } = Responsive.defaultProps
-const requiredProps = { only: 'mobile' }
-
-describe('Responsive', () => {
-  beforeEach(() => {
-    sandbox.stub(window, 'innerWidth').value(breakpoints.mobile)
-  })
-
-  common.isConformant(Responsive, { requiredProps })
-  common.rendersChildren(Responsive, { requiredProps })
-
-  describe('children', () => {
-    _.each(breakpoints, (value, point) => {
-      it(`renders when point "${point}" fits`, () => {
-        sandbox.stub(window, 'innerWidth').value(value)
-
-        shallow(<Responsive only={point} />)
-          .should.have.tagName('div')
-      })
-    })
-
-    _.each(breakpoints, (value, point) => {
-      it(`return null when point "${point}" doesn't fit`, () => {
-        sandbox.stub(window, 'innerWidth').value(value - 1)
-
-        shallow(<Responsive only={point} />)
-          .should.be.blank()
-      })
-    })
-
-    it('renders when fits multiple breakpoints', () => {
-      sandbox.stub(window, 'innerWidth').value(breakpoints.largeScreen)
-
-      shallow(<Responsive only='large screen' />)
-        .should.have.tagName('div')
-      shallow(<Responsive only='large screen' />)
-        .should.have.tagName('div')
-
-      shallow(<Responsive only='computer large screen' />)
-        .should.have.tagName('div')
-    })
-
-    it('renders when fits one of breakpoints', () => {
-      shallow(<Responsive only='mobile' />)
-        .should.have.tagName('div')
-      shallow(<Responsive only='tablet' />)
-        .should.be.blank()
-
-      shallow(<Responsive only='mobile tablet' />)
-        .should.have.tagName('div')
-    })
-  })
-
-  describe('onUpdate', () => {
-    it('listens for resize', (done) => {
-      const wrapper = mount(<Responsive only='mobile' />)
-      wrapper.should.have.tagName('div')
-
-      sandbox.stub(window, 'innerWidth').value(breakpoints.tablet)
-      domEvent.fire(window, 'resize')
-
-      setTimeout(() => {
-        wrapper.should.be.blank()
-        done()
-      }, 25)
-    })
-
-    it('is called with (e, data) when window was resized', (done) => {
-      const onUpdate = sandbox.spy()
-      const width = breakpoints.tablet
-
-      mount(<Responsive only='mobile' onUpdate={onUpdate} />)
-      sandbox.stub(window, 'innerWidth').value(width)
-      domEvent.fire(window, 'resize')
-
-      setTimeout(() => {
-        onUpdate.should.have.been.calledOnce()
-        onUpdate.should.have.been.calledWithMatch({}, { width, only: 'mobile' })
-
-        done()
-      }, 25)
-    })
-  })
-})
diff --git a/test/specs/addons/Responsive/Responsive-test.js b/test/specs/addons/Responsive/Responsive-test.js
new file mode 100644
index 0000000000..50849bdcd6
--- /dev/null
+++ b/test/specs/addons/Responsive/Responsive-test.js
@@ -0,0 +1,77 @@
+import React from 'react'
+
+import Responsive from 'src/addons/Responsive/Responsive'
+import * as common from 'test/specs/commonTests'
+import { domEvent, sandbox } from 'test/utils'
+
+describe('Responsive', () => {
+  common.isConformant(Responsive)
+  common.rendersChildren(Responsive)
+
+  describe('children', () => {
+    it('renders by default', () => {
+      shallow(<Responsive />)
+        .should.be.present()
+    })
+  })
+
+  describe('maxWidth', () => {
+    it('renders when fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.maxWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.present()
+    })
+
+    it('do not render when not fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.maxWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.blank()
+    })
+  })
+
+  describe('minWidth', () => {
+    it('renders when fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.minWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.present()
+    })
+
+    it('do not render when not fits', () => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth)
+      shallow(<Responsive {...Responsive.onlyMobile} />)
+        .should.be.blank()
+    })
+  })
+
+  describe('onUpdate', () => {
+    it('listens for resize', (done) => {
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.minWidth)
+      const wrapper = mount(<Responsive {...Responsive.onlyMobile} />)
+      wrapper.should.be.present()
+
+      sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth)
+      domEvent.fire(window, 'resize')
+
+      requestAnimationFrame(() => {
+        wrapper.should.be.blank()
+        done()
+      })
+    })
+
+    it('is called with (e, data) when window was resized', (done) => {
+      const onUpdate = sandbox.spy()
+      const width = Responsive.onlyTablet.minWidth
+      mount(<Responsive {...Responsive.onlyMobile} onUpdate={onUpdate} />)
+
+      sandbox.stub(window, 'innerWidth').value(width)
+      domEvent.fire(window, 'resize')
+
+      requestAnimationFrame(() => {
+        onUpdate.should.have.been.calledOnce()
+        onUpdate.should.have.been.calledWithMatch({}, { ...Responsive.onlyMobile, width })
+
+        done()
+      })
+    })
+  })
+})

From 8474bba9dae6e61a797a63c838111cdf496e64a3 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Sun, 3 Sep 2017 19:00:53 +0300
Subject: [PATCH 8/8] revert(customPropTypes): reverned unnecessary changes

---
 src/lib/customPropTypes.js | 46 +++++++++++++++-----------------------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/lib/customPropTypes.js b/src/lib/customPropTypes.js
index 6837519793..1e12d14864 100644
--- a/src/lib/customPropTypes.js
+++ b/src/lib/customPropTypes.js
@@ -228,39 +228,29 @@ export const demand = requiredProps => (props, propName, componentName) => {
  * Ensure an only prop contains a string with only possible values.
  * @param {string[]} possible An array of possible values to prop.
  */
-export const onlyProp = (possible) => {
-  const typeChecker = (required, props, propName, componentName) => {
-    if (!Array.isArray(possible)) {
-      throw new Error([
-        'Invalid argument supplied to some, expected an instance of array.',
-        `See \`${propName}\` prop in \`${componentName}\`.`,
-      ].join(' '))
-    }
+export const onlyProp = possible => (props, propName, componentName) => {
+  if (!Array.isArray(possible)) {
+    throw new Error([
+      'Invalid argument supplied to some, expected an instance of array.',
+      `See \`${propName}\` prop in \`${componentName}\`.`,
+    ].join(' '))
+  }
 
-    const propValue = props[propName]
+  const propValue = props[propName]
 
-    // skip if prop is undefined
-    if (_.isNil(propValue) || propValue === false) {
-      if (required) throw new Error(`Required \`${propName}\` prop was not specified in \`${componentName}\`.`)
-      return
-    }
+  // skip if prop is undefined
+  if (_.isNil(propValue) || propValue === false) return
 
-    const values = propValue
-      .replace('large screen', 'large-screen')
-      .split(' ')
-      .map(val => _.trim(val).replace('-', ' '))
-    const invalid = _.difference(values, possible)
+  const values = propValue
+    .replace('large screen', 'large-screen')
+    .split(' ')
+    .map(val => _.trim(val).replace('-', ' '))
+  const invalid = _.difference(values, possible)
 
-    // fail only if there are invalid values
-    if (invalid.length > 0) {
-      return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`)
-    }
+  // fail only if there are invalid values
+  if (invalid.length > 0) {
+    return new Error(`\`${propName}\` prop in \`${componentName}\` has invalid values: \`${invalid.join('`, `')}\`.`)
   }
-
-  const chainedCheckType = typeChecker.bind(null, false)
-  chainedCheckType.isRequired = typeChecker.bind(null, true)
-
-  return chainedCheckType
 }
 
 /**