Skip to content

Commit 5532548

Browse files
layershifterlayershifter
authored
docs(Responsive): deprecate component (#4008)
1 parent bb48410 commit 5532548

File tree

8 files changed

+127
-67
lines changed

8 files changed

+127
-67
lines changed

‎docs/src/components/ComponentDoc/ComponentDoc.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import _ from 'lodash'
22
import PropTypes from 'prop-types'
33
import React, { Component, createRef } from 'react'
44
import { withRouter, withRouteData } from 'react-static'
5-
import { Grid, Header, Icon } from 'semantic-ui-react'
5+
import { Grid, Header, Icon, Label, Popup } from 'semantic-ui-react'
66

77
import DocsLayout from 'docs/src/components/DocsLayout'
88
import { docTypes, examplePathToHash } from 'docs/src/utils'
@@ -47,7 +47,7 @@ class ComponentDoc extends Component {
4747
}
4848

4949
render() {
50-
const { componentsInfo, displayName, seeTags, sidebarSections } = this.props
50+
const { componentsInfo, displayName, deprecated, seeTags, sidebarSections } = this.props
5151
const activePath = _.findKey(this.state.exampleStates)
5252
const componentInfo = componentsInfo[displayName]
5353
const contextValue = { ...this.props, onVisibilityChange: this.handleExampleVisibility }
@@ -60,7 +60,16 @@ class ComponentDoc extends Component {
6060
<Grid.Column>
6161
<Header
6262
as='h1'
63-
content={displayName}
63+
content={
64+
<>
65+
<span>{displayName}</span>
66+
{deprecated && (
67+
<Popup trigger={<Label color='black'>Deprecated</Label>}>
68+
This component is deprecated and will be removed in the next major release.
69+
</Popup>
70+
)}
71+
</>
72+
}
6473
subheader={_.join(componentInfo.docblock.description, ' ')}
6574
/>
6675
<ComponentDocSee seeTags={seeTags} />
@@ -107,6 +116,7 @@ class ComponentDoc extends Component {
107116
ComponentDoc.propTypes = {
108117
componentsInfo: PropTypes.objectOf(docTypes.componentInfoShape).isRequired,
109118
displayName: PropTypes.string.isRequired,
119+
deprecated: PropTypes.bool.isRequired,
110120
history: PropTypes.object.isRequired,
111121
location: PropTypes.object.isRequired,
112122
seeTags: docTypes.seeTags.isRequired,

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11
import React from 'react'
2+
import { Icon, Message } from 'semantic-ui-react'
23

34
import Types from './Types'
45
import Usage from './Usage'
56

67
const ResponsiveExamples = () => (
78
<div>
9+
<Message icon warning>
10+
<Icon name='warning sign' />
11+
12+
<Message.Content>
13+
<Message.Header>Deprecation notice</Message.Header>
14+
<p>
15+
<code>Responsive</code> component is deprecated and will be removed in
16+
the next major release. Please follow our{' '}
17+
<a href='https://github.com/Semantic-Org/Semantic-UI-React/pull/4008'>
18+
upgrade guide
19+
</a>
20+
.
21+
</p>
22+
</Message.Content>
23+
</Message>
824
<Types />
925
<Usage />
1026
</div>

‎docs/src/layouts/HomepageLayout.js‎

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* eslint-disable max-classes-per-file */
2+
/* eslint-disable react/no-multi-comp */
23

4+
import { createMedia } from '@artsy/fresnel'
35
import PropTypes from 'prop-types'
46
import React, { Component } from 'react'
57
import {
@@ -12,24 +14,22 @@ import {
1214
Image,
1315
List,
1416
Menu,
15-
Responsive,
1617
Segment,
1718
Sidebar,
1819
Visibility,
1920
} from 'semantic-ui-react'
2021

21-
// Heads up!
22-
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
23-
// For more advanced usage please check Responsive docs under the "Usage" section.
24-
const getWidth = () => {
25-
const isSSR = typeof window === 'undefined'
26-
27-
return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth
28-
}
22+
const { MediaContextProvider, Media } = createMedia({
23+
breakpoints: {
24+
mobile: 0,
25+
tablet: 768,
26+
computer: 1024,
27+
},
28+
})
2929

30-
/* eslint-disable react/no-multi-comp */
31-
/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
32-
* such things.
30+
/* Heads up!
31+
* HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled
32+
* components for such things.
3333
*/
3434
const HomepageHeading = ({ mobile }) => (
3535
<Container text>
@@ -80,7 +80,7 @@ class DesktopContainer extends Component {
8080
const { fixed } = this.state
8181

8282
return (
83-
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
83+
<Media greaterThan='mobile'>
8484
<Visibility
8585
once={false}
8686
onBottomPassed={this.showFixedMenu}
@@ -121,7 +121,7 @@ class DesktopContainer extends Component {
121121
</Visibility>
122122

123123
{children}
124-
</Responsive>
124+
</Media>
125125
)
126126
}
127127
}
@@ -142,57 +142,55 @@ class MobileContainer extends Component {
142142
const { sidebarOpened } = this.state
143143

144144
return (
145-
<Responsive
146-
as={Sidebar.Pushable}
147-
getWidth={getWidth}
148-
maxWidth={Responsive.onlyMobile.maxWidth}
149-
>
150-
<Sidebar
151-
as={Menu}
152-
animation='push'
153-
inverted
154-
onHide={this.handleSidebarHide}
155-
vertical
156-
visible={sidebarOpened}
157-
>
158-
<Menu.Item as='a' active>
159-
Home
160-
</Menu.Item>
161-
<Menu.Item as='a'>Work</Menu.Item>
162-
<Menu.Item as='a'>Company</Menu.Item>
163-
<Menu.Item as='a'>Careers</Menu.Item>
164-
<Menu.Item as='a'>Log in</Menu.Item>
165-
<Menu.Item as='a'>Sign Up</Menu.Item>
166-
</Sidebar>
167-
168-
<Sidebar.Pusher dimmed={sidebarOpened}>
169-
<Segment
145+
<Media as={Sidebar.Pushable} at='mobile'>
146+
<Sidebar.Pushable>
147+
<Sidebar
148+
as={Menu}
149+
animation='overlay'
170150
inverted
171-
textAlign='center'
172-
style={{ minHeight: 350, padding: '1em 0em' }}
151+
onHide={this.handleSidebarHide}
173152
vertical
153+
visible={sidebarOpened}
174154
>
175-
<Container>
176-
<Menu inverted pointing secondary size='large'>
177-
<Menu.Item onClick={this.handleToggle}>
178-
<Icon name='sidebar' />
179-
</Menu.Item>
180-
<Menu.Item position='right'>
181-
<Button as='a' inverted>
182-
Log in
183-
</Button>
184-
<Button as='a' inverted style={{ marginLeft: '0.5em' }}>
185-
Sign Up
186-
</Button>
187-
</Menu.Item>
188-
</Menu>
189-
</Container>
190-
<HomepageHeading mobile />
191-
</Segment>
155+
<Menu.Item as='a' active>
156+
Home
157+
</Menu.Item>
158+
<Menu.Item as='a'>Work</Menu.Item>
159+
<Menu.Item as='a'>Company</Menu.Item>
160+
<Menu.Item as='a'>Careers</Menu.Item>
161+
<Menu.Item as='a'>Log in</Menu.Item>
162+
<Menu.Item as='a'>Sign Up</Menu.Item>
163+
</Sidebar>
164+
165+
<Sidebar.Pusher dimmed={sidebarOpened}>
166+
<Segment
167+
inverted
168+
textAlign='center'
169+
style={{ minHeight: 350, padding: '1em 0em' }}
170+
vertical
171+
>
172+
<Container>
173+
<Menu inverted pointing secondary size='large'>
174+
<Menu.Item onClick={this.handleToggle}>
175+
<Icon name='sidebar' />
176+
</Menu.Item>
177+
<Menu.Item position='right'>
178+
<Button as='a' inverted>
179+
Log in
180+
</Button>
181+
<Button as='a' inverted style={{ marginLeft: '0.5em' }}>
182+
Sign Up
183+
</Button>
184+
</Menu.Item>
185+
</Menu>
186+
</Container>
187+
<HomepageHeading mobile />
188+
</Segment>
192189

193-
{children}
194-
</Sidebar.Pusher>
195-
</Responsive>
190+
{children}
191+
</Sidebar.Pusher>
192+
</Sidebar.Pushable>
193+
</Media>
196194
)
197195
}
198196
}
@@ -202,10 +200,14 @@ MobileContainer.propTypes = {
202200
}
203201

204202
const ResponsiveContainer = ({ children }) => (
205-
<div>
203+
/* Heads up!
204+
* For large applications it may not be best option to put all page into these containers at
205+
* they will be rendered twice for SSR.
206+
*/
207+
<MediaContextProvider>
206208
<DesktopContainer>{children}</DesktopContainer>
207209
<MobileContainer>{children}</MobileContainer>
208-
</div>
210+
</MediaContextProvider>
209211
)
210212

211213
ResponsiveContainer.propTypes = {

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
"shallowequal": "^1.1.0"
8686
},
8787
"devDependencies": {
88+
"@artsy/fresnel": "^1.2.0",
8889
"@babel/cli": "^7.10.5",
8990
"@babel/core": "^7.10.5",
9091
"@babel/plugin-proposal-class-properties": "^7.10.4",

‎src/addons/Responsive/Responsive.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import isVisible from './lib/isVisible'
77

88
/**
99
* Responsive can control visibility of content.
10+
*
11+
* @deprecated This component is deprecated and will be removed in next major release.
1012
*/
1113
export default class Responsive extends Component {
1214
state = {
@@ -23,6 +25,17 @@ export default class Responsive extends Component {
2325
componentDidMount() {
2426
const { fireOnMount } = this.props
2527

28+
if (process.env.NODE_ENV !== 'production') {
29+
if (!Responsive.__deprecationWarningWasRaised) {
30+
Responsive.__deprecationWarningWasRaised = true
31+
32+
// eslint-disable-next-line no-console
33+
console.warn(
34+
'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',
35+
)
36+
}
37+
}
38+
2639
eventStack.sub('resize', this.handleResize, { target: 'window' })
2740
if (fireOnMount) this.handleUpdate()
2841
}
@@ -110,3 +123,7 @@ Responsive.onlyTablet = { minWidth: 768, maxWidth: 991 }
110123
Responsive.onlyComputer = { minWidth: 992 }
111124
Responsive.onlyLargeScreen = { minWidth: 1200, maxWidth: 1919 }
112125
Responsive.onlyWidescreen = { minWidth: 1920 }
126+
127+
if (process.env.NODE_ENV !== 'production') {
128+
Responsive.__deprecationWarningWasRaised = false
129+
}

‎static.routes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ export default async () => {
4949
exampleSources,
5050
sidebarSections,
5151
displayName: baseInfo.displayName,
52+
deprecated: !!_.find(
53+
_.get(componentsInfo[baseInfo.displayName], 'docblock.tags'),
54+
(tag) => tag.title === 'deprecated',
55+
),
5256
seeTags: getInfoForSeeTags(componentsInfo[baseInfo.displayName]),
5357
}
5458
},

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,14 @@ import React from 'react'
33
import Responsive from 'src/addons/Responsive/Responsive'
44
import { isBrowser } from 'src/lib'
55
import * as common from 'test/specs/commonTests'
6-
import { domEvent, sandbox } from 'test/utils'
6+
import { consoleUtil, domEvent, sandbox } from 'test/utils'
77

88
describe('Responsive', () => {
9+
it('a render to strip deprecation warning', () => {
10+
consoleUtil.disableOnce()
11+
mount(<Responsive />)
12+
})
13+
914
common.isConformant(Responsive)
1015
common.rendersChildren(Responsive, {
1116
rendersContent: false,

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
# yarn lockfile v1
33

44

5+
"@artsy/fresnel@^1.2.0":
6+
version "1.2.0"
7+
resolved "https://registry.yarnpkg.com/@artsy/fresnel/-/fresnel-1.2.0.tgz#809e5968ed4c58d3fd0b64c58c022bb5a27c5717"
8+
integrity sha512-3wrvp1jwk54bvgdFbmoLl10jXSlsYO9HrNJkZvKkhEV1h5AUhTMp6Qp0LrYoQWRHuugCYXQdc3Rj0TOisL+CnQ==
9+
510
"@babel/cli@^7.10.5":
611
version "7.10.5"
712
resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.10.5.tgz#57df2987c8cf89d0fc7d4b157ec59d7619f1b77a"

0 commit comments

Comments
 (0)