docs(Responsive): deprecate component (#4008)

docs/src/components/ComponentDoc/ComponentDoc.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'
 import { withRouter, withRouteData } from 'react-static'
-import { Grid, Header, Icon } from 'semantic-ui-react'
+import { Grid, Header, Icon, Label, Popup } from 'semantic-ui-react'
 
 import DocsLayout from 'docs/src/components/DocsLayout'
 import { docTypes, examplePathToHash } from 'docs/src/utils'
@@ -47,7 +47,7 @@ class ComponentDoc extends Component {
   }
 
   render() {
-    const { componentsInfo, displayName, seeTags, sidebarSections } = this.props
+    const { componentsInfo, displayName, deprecated, seeTags, sidebarSections } = this.props
     const activePath = _.findKey(this.state.exampleStates)
     const componentInfo = componentsInfo[displayName]
     const contextValue = { ...this.props, onVisibilityChange: this.handleExampleVisibility }
@@ -60,7 +60,16 @@ class ComponentDoc extends Component {
             <Grid.Column>
               <Header
                 as='h1'
-                content={displayName}
+                content={
+                  <>
+                    <span>{displayName}</span>
+                    {deprecated && (
+                      <Popup trigger={<Label color='black'>Deprecated</Label>}>
+                        This component is deprecated and will be removed in the next major release.
+                      </Popup>
+                    )}
+                  </>
+                }
                 subheader={_.join(componentInfo.docblock.description, ' ')}
               />
               <ComponentDocSee seeTags={seeTags} />
@@ -107,6 +116,7 @@ class ComponentDoc extends Component {
 ComponentDoc.propTypes = {
   componentsInfo: PropTypes.objectOf(docTypes.componentInfoShape).isRequired,
   displayName: PropTypes.string.isRequired,
+  deprecated: PropTypes.bool.isRequired,
   history: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
   seeTags: docTypes.seeTags.isRequired,

docs/src/examples/addons/Responsive/index.js

@@ -1,10 +1,26 @@
 import React from 'react'
+import { Icon, Message } from 'semantic-ui-react'
 
 import Types from './Types'
 import Usage from './Usage'
 
 const ResponsiveExamples = () => (
   <div>
+    <Message icon warning>
+      <Icon name='warning sign' />
+
+      <Message.Content>
+        <Message.Header>Deprecation notice</Message.Header>
+        <p>
+          <code>Responsive</code> component is deprecated and will be removed in
+          the next major release. Please follow our{' '}
+          <a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4008'>
+            upgrade guide
+          </a>
+          .
+        </p>
+      </Message.Content>
+    </Message>
     <Types />
     <Usage />
   </div>

docs/src/layouts/HomepageLayout.js

@@ -1,5 +1,7 @@
 /* eslint-disable max-classes-per-file */
+/* eslint-disable react/no-multi-comp */
 
+import { createMedia } from '@artsy/fresnel'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import {
@@ -12,24 +14,22 @@ import {
   Image,
   List,
   Menu,
-  Responsive,
   Segment,
   Sidebar,
   Visibility,
 } from 'semantic-ui-react'
 
-// Heads up!
-// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
-// For more advanced usage please check Responsive docs under the "Usage" section.
-const getWidth = () => {
-  const isSSR = typeof window === 'undefined'
-
-  return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth
-}
+const { MediaContextProvider, Media } = createMedia({
+  breakpoints: {
+    mobile: 0,
+    tablet: 768,
+    computer: 1024,
+  },
+})
 
-/* eslint-disable react/no-multi-comp */
-/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
- * such things.
+/* Heads up!
+ * HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled
+ * components for such things.
  */
 const HomepageHeading = ({ mobile }) => (
   <Container text>
@@ -80,7 +80,7 @@ class DesktopContainer extends Component {
     const { fixed } = this.state
 
     return (
-      <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
+      <Media greaterThan='mobile'>
         <Visibility
           once={false}
           onBottomPassed={this.showFixedMenu}
@@ -121,7 +121,7 @@ class DesktopContainer extends Component {
         </Visibility>
 
         {children}
-      </Responsive>
+      </Media>
     )
   }
 }
@@ -142,57 +142,55 @@ class MobileContainer extends Component {
     const { sidebarOpened } = this.state
 
     return (
-      <Responsive
-        as={Sidebar.Pushable}
-        getWidth={getWidth}
-        maxWidth={Responsive.onlyMobile.maxWidth}
-      >
-        <Sidebar
-          as={Menu}
-          animation='push'
-          inverted
-          onHide={this.handleSidebarHide}
-          vertical
-          visible={sidebarOpened}
-        >
-          <Menu.Item as='a' active>
-            Home
-          </Menu.Item>
-          <Menu.Item as='a'>Work</Menu.Item>
-          <Menu.Item as='a'>Company</Menu.Item>
-          <Menu.Item as='a'>Careers</Menu.Item>
-          <Menu.Item as='a'>Log in</Menu.Item>
-          <Menu.Item as='a'>Sign Up</Menu.Item>
-        </Sidebar>
-
-        <Sidebar.Pusher dimmed={sidebarOpened}>
-          <Segment
+      <Media as={Sidebar.Pushable} at='mobile'>
+        <Sidebar.Pushable>
+          <Sidebar
+            as={Menu}
+            animation='overlay'
             inverted
-            textAlign='center'
-            style={{ minHeight: 350, padding: '1em 0em' }}
+            onHide={this.handleSidebarHide}
             vertical
+            visible={sidebarOpened}
           >
-            <Container>
-              <Menu inverted pointing secondary size='large'>
-                <Menu.Item onClick={this.handleToggle}>
-                  <Icon name='sidebar' />
-                </Menu.Item>
-                <Menu.Item position='right'>
-                  <Button as='a' inverted>
-                    Log in
-                  </Button>
-                  <Button as='a' inverted style={{ marginLeft: '0.5em' }}>
-                    Sign Up
-                  </Button>
-                </Menu.Item>
-              </Menu>
-            </Container>
-            <HomepageHeading mobile />
-          </Segment>
+            <Menu.Item as='a' active>
+              Home
+            </Menu.Item>
+            <Menu.Item as='a'>Work</Menu.Item>
+            <Menu.Item as='a'>Company</Menu.Item>
+            <Menu.Item as='a'>Careers</Menu.Item>
+            <Menu.Item as='a'>Log in</Menu.Item>
+            <Menu.Item as='a'>Sign Up</Menu.Item>
+          </Sidebar>
+
+          <Sidebar.Pusher dimmed={sidebarOpened}>
+            <Segment
+              inverted
+              textAlign='center'
+              style={{ minHeight: 350, padding: '1em 0em' }}
+              vertical
+            >
+              <Container>
+                <Menu inverted pointing secondary size='large'>
+                  <Menu.Item onClick={this.handleToggle}>
+                    <Icon name='sidebar' />
+                  </Menu.Item>
+                  <Menu.Item position='right'>
+                    <Button as='a' inverted>
+                      Log in
+                    </Button>
+                    <Button as='a' inverted style={{ marginLeft: '0.5em' }}>
+                      Sign Up
+                    </Button>
+                  </Menu.Item>
+                </Menu>
+              </Container>
+              <HomepageHeading mobile />
+            </Segment>
 
-          {children}
-        </Sidebar.Pusher>
-      </Responsive>
+            {children}
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>
+      </Media>
     )
   }
 }
@@ -202,10 +200,14 @@ MobileContainer.propTypes = {
 }
 
 const ResponsiveContainer = ({ children }) => (
-  <div>
+  /* Heads up!
+   * For large applications it may not be best option to put all page into these containers at
+   * they will be rendered twice for SSR.
+   */
+  <MediaContextProvider>
     <DesktopContainer>{children}</DesktopContainer>
     <MobileContainer>{children}</MobileContainer>
-  </div>
+  </MediaContextProvider>
 )
 
 ResponsiveContainer.propTypes = {

package.json

@@ -85,6 +85,7 @@
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
+    "@artsy/fresnel": "^1.2.0",
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.10.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",

src/addons/Responsive/Responsive.js

@@ -7,6 +7,8 @@ import isVisible from './lib/isVisible'
 
 /**
  * Responsive can control visibility of content.
+ *
+ * @deprecated This component is deprecated and will be removed in next major release.
  */
 export default class Responsive extends Component {
   state = {
@@ -23,6 +25,17 @@ export default class Responsive extends Component {
   componentDidMount() {
     const { fireOnMount } = this.props
 
+    if (process.env.NODE_ENV !== 'production') {
+      if (!Responsive.__deprecationWarningWasRaised) {
+        Responsive.__deprecationWarningWasRaised = true
+
+        // eslint-disable-next-line no-console
+        console.warn(
+          'Warning: "Responsive" component from Semantic UI React is deprecated and will be removed in the next major release. Please follow our upgrade guide: https://github.com/Semantic-Org/Semantic-UI-React/pull/4008',
+        )
+      }
+    }
+
     eventStack.sub('resize', this.handleResize, { target: 'window' })
     if (fireOnMount) this.handleUpdate()
   }
@@ -110,3 +123,7 @@ Responsive.onlyTablet = { minWidth: 768, maxWidth: 991 }
 Responsive.onlyComputer = { minWidth: 992 }
 Responsive.onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
 Responsive.onlyWidescreen = { minWidth: 1920 }
+
+if (process.env.NODE_ENV !== 'production') {
+  Responsive.__deprecationWarningWasRaised = false
+}

static.routes.js

@@ -49,6 +49,10 @@ export default async () => {
           exampleSources,
           sidebarSections,
           displayName: baseInfo.displayName,
+          deprecated: !!_.find(
+            _.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
+            (tag) => tag.title === 'deprecated',
+          ),
           seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
         }
       },

test/specs/addons/Responsive/Responsive-test.js

@@ -3,9 +3,14 @@ import React from 'react'
 import Responsive from 'src/addons/Responsive/Responsive'
 import { isBrowser } from 'src/lib'
 import * as common from 'test/specs/commonTests'
-import { domEvent, sandbox } from 'test/utils'
+import { consoleUtil, domEvent, sandbox } from 'test/utils'
 
 describe('Responsive', () => {
+  it('a render to strip deprecation warning', () => {
+    consoleUtil.disableOnce()
+    mount(<Responsive />)
+  })
+
   common.isConformant(Responsive)
   common.rendersChildren(Responsive, {
     rendersContent: false,

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@artsy/fresnel@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@artsy/fresnel/-/fresnel-1.2.0.tgz#809e5968ed4c58d3fd0b64c58c022bb5a27c5717"
+  integrity sha512-3wrvp1jwk54bvgdFbmoLl10jXSlsYO9HrNJkZvKkhEV1h5AUhTMp6Qp0LrYoQWRHuugCYXQdc3Rj0TOisL+CnQ==
+
 "@babel/cli@^7.10.5":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.10.5.tgz#57df2987c8cf89d0fc7d4b157ec59d7619f1b77a"