Skip to content

Commit c11cc6b

Browse files
pamhiettpamhiett
committed
feat(ui-flex,ui-layout): make ui-flex backwards compatible
refs: INSTUI-2345 TEST PLAN: - ensure the new Flex within ui-flex accepts the deprecated props that were available in the ui-layout/Flex and Flex.Item: Flex should accept the following and still display correctly - inline (boolean) - wrapItems (boolean) - visualDebug should work same as new withVisualDebug Flex.Item should accept the following and still display correctly - grow (boolean) should work same as new shouldGrow - shrink (boolean) should work same as new shouldShrink - visualDeub should work same as new withVisualDebug - ensure the _dangerouslyIgnoreExperimental has bben removed from Flex being used within Components or the Docs Change-Id: I3f8b6b02da7c195d8f0fe6425bc684d12f016068 Reviewed-on: https://gerrit.instructure.com/c/instructure-ui/+/215469 Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com> Reviewed-by: Steve Jensen <sejensen@instructure.com> Product-Review: Steve Jensen <sejensen@instructure.com> QA-Review: Daniel Sasaki <dsasaki@instructure.com> Visual-Regression-Test: Pam Hiett <phiett@instructure.com>
1 parent 0534ca2 commit c11cc6b

File tree

11 files changed

+68
-23
lines changed

11 files changed

+68
-23
lines changed

‎packages/ui-buttons/src/Button/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ class Button extends Component {
279279
__dangerouslyIgnoreExperimentalWarnings
280280
>
281281
{hasTextAndIcon ? (
282-
<Flex height="100%" width="100%" __dangerouslyIgnoreExperimentalWarnings>
282+
<Flex height="100%" width="100%">
283283
<Flex.Item padding="0 x-small 0 0">{this.renderIcon()}</Flex.Item>
284284
<Flex.Item shouldGrow shouldShrink>
285285
<span className={styles.content}>{children}</span>

‎packages/ui-docs-client/src/Guidelines/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ class Guidelines extends Component {
4848
justifyItems="end"
4949
alignItems="stretch"
5050
margin="small none"
51-
__dangerouslyIgnoreExperimentalWarnings
5251
>
5352
{React.Children.map(this.props.children, child => (
5453
<Flex.Item shouldGrow shouldShrink size="14rem" margin="xx-small">

‎packages/ui-docs-client/src/Playground/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,6 @@ class Playground extends Component {
207207
<Flex
208208
alignItems="center"
209209
padding="xx-small 0 0"
210-
__dangerouslyIgnoreExperimentalWarnings
211210
>
212211
<Flex.Item shouldShrink shouldGrow>
213212

‎packages/ui-editable/src/InPlaceEdit/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,6 @@ class InPlaceEdit extends Component {
184184
display={this.props.inline ? 'inline-flex' : 'flex'}
185185
direction={flexDir}
186186
justifyItems={justifyItems}
187-
__dangerouslyIgnoreExperimentalWarnings
188187
{...getContainerProps()}
189188
>
190189
<Flex.Item shouldGrow shouldShrink>

‎packages/ui-flex/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
category: packages
3-
experimental: true
43
---
54

65
## ui-flex

‎packages/ui-flex/src/Flex/Item/index.js

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import PropTypes from 'prop-types'
2727
import classnames from 'classnames'
2828

2929
import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
30-
import { omitProps } from '@instructure/ui-react-utils'
30+
import { omitProps, deprecated } from '@instructure/ui-react-utils'
3131
import { View } from '@instructure/ui-view'
3232

3333
import styles from './styles.css'
@@ -38,6 +38,11 @@ parent: Flex
3838
id: Flex.Item
3939
---
4040
**/
41+
@deprecated('8.0.0', {
42+
grow: 'shouldGrow',
43+
shrink: 'shouldShrink',
44+
visualDeug: 'withVisualDebug'
45+
})
4146
@themeable(null, styles)
4247
class Item extends Component {
4348
/* eslint-disable react/require-default-props */
@@ -101,7 +106,21 @@ class Item extends Component {
101106
/**
102107
* Places dashed lines around the component's borders to help debug your layout
103108
*/
104-
withVisualDebug: PropTypes.bool
109+
withVisualDebug: PropTypes.bool,
110+
/* eslint-disable react/require-default-props */
111+
/**
112+
* __Deprecated - use 'shouldGrow'__
113+
*/
114+
grow: PropTypes.bool,
115+
/**
116+
* __Deprecated - use 'shouldShrink'__
117+
*/
118+
shrink: PropTypes.bool,
119+
/**
120+
* __Deprecated - use 'withVisualDebug'__
121+
*/
122+
visualDebug: PropTypes.bool,
123+
/* eslint-enable react/require-default-props */
105124
}
106125
/* eslint-enable react/require-default-props */
107126

@@ -129,7 +148,10 @@ class Item extends Component {
129148
shouldShrink,
130149
size,
131150
textAlign,
132-
withVisualDebug
151+
withVisualDebug,
152+
shrink,
153+
grow,
154+
visualDebug
133155
} = this.props
134156

135157
const dirColumn = direction === 'column'
@@ -140,8 +162,8 @@ class Item extends Component {
140162

141163
const classes = {
142164
[styles.root]: true,
143-
[styles.shouldGrow]: shouldGrow,
144-
[styles.shouldShrink]: shouldShrink,
165+
[styles.shouldGrow]: grow || shouldGrow,
166+
[styles.shouldShrink]: shrink || shouldShrink,
145167
[styles[`align--${align}`]]: align
146168
}
147169

@@ -159,7 +181,7 @@ class Item extends Component {
159181
padding={padding}
160182
overflowX={overflowX}
161183
overflowY={overflowY || (dirColumn ? 'auto' : 'visible')}
162-
withVisualDebug={withVisualDebug}
184+
withVisualDebug={withVisualDebug || visualDebug}
163185
__dangerouslyIgnoreExperimentalWarnings
164186
>
165187
{children}

‎packages/ui-flex/src/Flex/index.js

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import classnames from 'classnames'
2828

2929
import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
3030
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
31-
import { safeCloneElement, passthroughProps, experimental } from '@instructure/ui-react-utils'
31+
import { safeCloneElement, passthroughProps, deprecated } from '@instructure/ui-react-utils'
3232
import { View } from '@instructure/ui-view'
3333

3434
import { Item } from './Item'
@@ -39,11 +39,14 @@ import theme from './theme'
3939
/**
4040
---
4141
category: components
42-
experimental: true
4342
---
4443
@module Flex
4544
**/
46-
@experimental()
45+
@deprecated('8.0.0', {
46+
inline: 'display',
47+
wrapItems: 'wrap',
48+
visualDeug: 'withVisualDebug'
49+
})
4750
@themeable(theme, styles)
4851
class Flex extends Component {
4952
static Item = Item
@@ -109,7 +112,21 @@ class Flex extends Component {
109112
* Activate a dotted outline around the component to make building your
110113
* layout easier
111114
*/
112-
withVisualDebug: PropTypes.bool
115+
withVisualDebug: PropTypes.bool,
116+
/* eslint-disable react/require-default-props */
117+
/**
118+
* __Deprecated - use 'display'__
119+
*/
120+
inline: PropTypes.bool,
121+
/**
122+
* __Deprecated - use 'wrap'__
123+
*/
124+
wrapItems: PropTypes.bool,
125+
/**
126+
* __Deprecated - use 'withVisualDebug'__
127+
*/
128+
visualDebug: PropTypes.bool,
129+
/* eslint-enable react/require-default-props */
113130
}
114131

115132
static defaultProps = {
@@ -133,7 +150,7 @@ class Flex extends Component {
133150
return Children.map(this.props.children, (child) => {
134151
if (child) {
135152
return safeCloneElement(child, {
136-
withVisualDebug: this.props.withVisualDebug,
153+
withVisualDebug: this.props.withVisualDebug || this.props.visualDebug,
137154
...child.props, /* child visualDebug prop should override parent */
138155
direction: this.props.direction.replace(/-reverse/, '')
139156
})
@@ -157,18 +174,24 @@ class Flex extends Component {
157174
textAlign,
158175
withVisualDebug,
159176
width,
160-
wrap
177+
wrap,
178+
visualDebug,
179+
wrapItems,
180+
inline
161181
} = this.props
162182

163183
// When flex direction is row, 'center' is the most useful default because it
164184
// vertically aligns Items. For column direction, though, we want 'stretch'.
165185
const alignItems = this.props.alignItems || (direction === 'column' || direction === 'column-reverse' ? 'stretch' : 'center')
166186

187+
const backwardsDisplay = inline ? 'inline-flex' : null
188+
167189
const classes = {
168190
[styles.root]: true,
169191
[styles[`justifyItems--${justifyItems}`]]: true,
170192
[styles[`alignItems--${alignItems}`]]: true,
171-
[styles[`wrap--${wrap}`]]: wrap !== 'no-wrap'
193+
[styles[`wrap--${wrap}`]]: wrap !== 'no-wrap',
194+
[styles.wrapItems]: wrapItems
172195
}
173196

174197
if (children && React.Children.count(children) > 0) {
@@ -178,13 +201,13 @@ class Flex extends Component {
178201
className={classnames(classes, styles[direction])}
179202
elementRef={elementRef}
180203
as={as}
181-
display={display}
204+
display={backwardsDisplay || display}
182205
width={width}
183206
height={height}
184207
margin={margin}
185208
padding={padding}
186209
textAlign={textAlign}
187-
withVisualDebug={withVisualDebug}
210+
withVisualDebug={withVisualDebug || visualDebug}
188211
__dangerouslyIgnoreExperimentalWarnings
189212
>
190213
{this.renderChildren()}

‎packages/ui-flex/src/Flex/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@
5151
flex-wrap: wrap-reverse;
5252
}
5353

54+
.wrapItems {
55+
flex-wrap: wrap;
56+
}
57+
5458
.justifyItems--start {
5559
justify-content: flex-start;
5660
}

‎packages/ui-layout/src/Flex/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import classnames from 'classnames'
2828

2929
import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
3030
import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
31-
import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
31+
import { omitProps, safeCloneElement, deprecated } from '@instructure/ui-react-utils'
3232
import { View } from '@instructure/ui-view'
3333

3434
import { FlexItem } from './FlexItem'
@@ -42,6 +42,7 @@ category: components/deprecated
4242
id: DeprecatedFlex
4343
---
4444
**/
45+
@deprecated('7.0.0', null, 'Use Flex in ui-flex instead.')
4546
@themeable(theme, styles)
4647
class Flex extends Component {
4748
static propTypes = {

‎packages/ui-text-input/src/TextInput/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ class TextInput extends Component {
341341
<span className={classnames(facadeClasses)}>
342342
{
343343
renderBeforeOrAfter ?
344-
<Flex wrap="wrap" __dangerouslyIgnoreExperimentalWarnings>
344+
<Flex wrap="wrap">
345345
{renderBeforeInput &&
346346
<Flex.Item padding="0 0 0 small">
347347
{callRenderProp(renderBeforeInput)}

0 commit comments

Comments
 (0)