@instructure/ui-flex 11.7.3-snapshot-25 → 11.7.3-snapshot-26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -2
- package/es/Flex/v1/Item/index.js +39 -37
- package/es/Flex/v1/Item/styles.js +8 -6
- package/es/Flex/v1/index.js +43 -40
- package/es/Flex/v1/styles.js +7 -5
- package/es/Flex/v1/theme.js +5 -3
- package/es/Flex/v2/Item/index.js +39 -37
- package/es/Flex/v2/Item/styles.js +8 -6
- package/es/Flex/v2/index.js +43 -40
- package/es/Flex/v2/styles.js +7 -5
- package/lib/Flex/v1/Item/index.js +39 -37
- package/lib/Flex/v1/Item/styles.js +8 -6
- package/lib/Flex/v1/index.js +43 -40
- package/lib/Flex/v1/styles.js +7 -5
- package/lib/Flex/v1/theme.js +5 -3
- package/lib/Flex/v2/Item/index.js +39 -37
- package/lib/Flex/v2/Item/styles.js +8 -6
- package/lib/Flex/v2/index.js +43 -40
- package/lib/Flex/v2/styles.js +7 -5
- package/package.json +10 -10
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [11.7.3-snapshot-
|
|
6
|
+
## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
|
|
9
12
|
|
|
10
13
|
|
|
11
14
|
|
package/es/Flex/v1/Item/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec, _class
|
|
1
|
+
var _dec, _class;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -36,49 +36,55 @@ parent: Flex
|
|
|
36
36
|
id: Flex.Item
|
|
37
37
|
---
|
|
38
38
|
**/
|
|
39
|
-
let Item = (_dec = withStyle(generateStyle, null), _dec(_class =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
this.ref = null;
|
|
43
|
-
this.handleRef = el => {
|
|
44
|
-
const elementRef = this.props.elementRef;
|
|
45
|
-
this.ref = el;
|
|
46
|
-
if (typeof elementRef === 'function') {
|
|
47
|
-
elementRef(el);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
}
|
|
39
|
+
let Item = (_dec = withStyle(generateStyle, null), _dec(_class = class Item extends Component {
|
|
40
|
+
static displayName = "Item";
|
|
41
|
+
static componentId = 'Flex.Item';
|
|
51
42
|
componentDidMount() {
|
|
52
|
-
|
|
53
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
43
|
+
this.props.makeStyles?.();
|
|
54
44
|
}
|
|
55
45
|
componentDidUpdate() {
|
|
56
|
-
|
|
57
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
46
|
+
this.props.makeStyles?.();
|
|
58
47
|
}
|
|
48
|
+
static allowedProps = allowedProps;
|
|
49
|
+
static defaultProps = {
|
|
50
|
+
as: 'span',
|
|
51
|
+
shouldGrow: false,
|
|
52
|
+
shouldShrink: false
|
|
53
|
+
};
|
|
54
|
+
ref = null;
|
|
55
|
+
handleRef = el => {
|
|
56
|
+
const {
|
|
57
|
+
elementRef
|
|
58
|
+
} = this.props;
|
|
59
|
+
this.ref = el;
|
|
60
|
+
if (typeof elementRef === 'function') {
|
|
61
|
+
elementRef(el);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
59
64
|
render() {
|
|
60
65
|
const props = omitProps(this.props, Item.allowedProps);
|
|
61
|
-
const
|
|
62
|
-
as
|
|
63
|
-
children
|
|
64
|
-
withVisualDebug
|
|
65
|
-
textAlign
|
|
66
|
-
size
|
|
67
|
-
direction
|
|
68
|
-
margin
|
|
69
|
-
padding
|
|
70
|
-
overflowX
|
|
71
|
-
overflowY
|
|
72
|
-
styles
|
|
66
|
+
const {
|
|
67
|
+
as,
|
|
68
|
+
children,
|
|
69
|
+
withVisualDebug,
|
|
70
|
+
textAlign,
|
|
71
|
+
size,
|
|
72
|
+
direction,
|
|
73
|
+
margin,
|
|
74
|
+
padding,
|
|
75
|
+
overflowX,
|
|
76
|
+
overflowY,
|
|
77
|
+
styles
|
|
78
|
+
} = this.props;
|
|
73
79
|
const dirColumn = direction === 'column';
|
|
74
80
|
const dirRow = direction === 'row';
|
|
75
81
|
return _jsx(View, {
|
|
76
82
|
...props,
|
|
77
|
-
css: styles
|
|
83
|
+
css: styles?.flexItem,
|
|
78
84
|
elementRef: this.handleRef,
|
|
79
85
|
as: as,
|
|
80
|
-
minHeight: dirColumn ? size :
|
|
81
|
-
minWidth: dirRow ? size :
|
|
86
|
+
minHeight: dirColumn ? size : undefined,
|
|
87
|
+
minWidth: dirRow ? size : undefined,
|
|
82
88
|
textAlign: textAlign,
|
|
83
89
|
margin: margin,
|
|
84
90
|
padding: padding,
|
|
@@ -88,10 +94,6 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
|
|
|
88
94
|
children: children
|
|
89
95
|
});
|
|
90
96
|
}
|
|
91
|
-
}
|
|
92
|
-
as: 'span',
|
|
93
|
-
shouldGrow: false,
|
|
94
|
-
shouldShrink: false
|
|
95
|
-
}, _Item)) || _class);
|
|
97
|
+
}) || _class);
|
|
96
98
|
export default Item;
|
|
97
99
|
export { Item };
|
|
@@ -33,11 +33,13 @@
|
|
|
33
33
|
* @return {Object} The final style object, which will be used in the component
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (_componentTheme, props) => {
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
const {
|
|
37
|
+
shouldGrow,
|
|
38
|
+
shouldShrink,
|
|
39
|
+
align,
|
|
40
|
+
size,
|
|
41
|
+
order
|
|
42
|
+
} = props;
|
|
41
43
|
const alignSelfValues = {
|
|
42
44
|
start: 'flex-start',
|
|
43
45
|
end: 'flex-end',
|
|
@@ -50,7 +52,7 @@ const generateStyle = (_componentTheme, props) => {
|
|
|
50
52
|
boxSizing: 'border-box',
|
|
51
53
|
minWidth: '0.0625rem',
|
|
52
54
|
flexBasis: size,
|
|
53
|
-
...(order !==
|
|
55
|
+
...(order !== undefined ? {
|
|
54
56
|
order
|
|
55
57
|
} : {}),
|
|
56
58
|
// initial value is 1, but we want 0 as our default,
|
package/es/Flex/v1/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec, _class
|
|
1
|
+
var _dec, _class;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -38,26 +38,36 @@ category: components
|
|
|
38
38
|
---
|
|
39
39
|
@module Flex
|
|
40
40
|
**/
|
|
41
|
-
let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class =
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
this.ref = null;
|
|
45
|
-
this.handleRef = el => {
|
|
46
|
-
const elementRef = this.props.elementRef;
|
|
47
|
-
this.ref = el;
|
|
48
|
-
if (typeof elementRef === 'function') {
|
|
49
|
-
elementRef(el);
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
}
|
|
41
|
+
let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Flex extends Component {
|
|
42
|
+
static displayName = "Flex";
|
|
43
|
+
static componentId = 'Flex';
|
|
53
44
|
componentDidMount() {
|
|
54
|
-
|
|
55
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
45
|
+
this.props.makeStyles?.();
|
|
56
46
|
}
|
|
57
47
|
componentDidUpdate() {
|
|
58
|
-
|
|
59
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
48
|
+
this.props.makeStyles?.();
|
|
60
49
|
}
|
|
50
|
+
static Item = Item;
|
|
51
|
+
static allowedProps = allowedProps;
|
|
52
|
+
static defaultProps = {
|
|
53
|
+
as: 'span',
|
|
54
|
+
direction: 'row',
|
|
55
|
+
justifyItems: 'start',
|
|
56
|
+
display: 'flex',
|
|
57
|
+
withVisualDebug: false,
|
|
58
|
+
wrap: 'no-wrap',
|
|
59
|
+
gap: 'none'
|
|
60
|
+
};
|
|
61
|
+
ref = null;
|
|
62
|
+
handleRef = el => {
|
|
63
|
+
const {
|
|
64
|
+
elementRef
|
|
65
|
+
} = this.props;
|
|
66
|
+
this.ref = el;
|
|
67
|
+
if (typeof elementRef === 'function') {
|
|
68
|
+
elementRef(el);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
61
71
|
renderChildren(children) {
|
|
62
72
|
// TODO this might fail if children are () => ReactNode
|
|
63
73
|
return Children.map(children, child => {
|
|
@@ -73,25 +83,26 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
|
73
83
|
});
|
|
74
84
|
}
|
|
75
85
|
render() {
|
|
76
|
-
const
|
|
77
|
-
as
|
|
78
|
-
withVisualDebug
|
|
79
|
-
height
|
|
80
|
-
display
|
|
81
|
-
margin
|
|
82
|
-
padding
|
|
83
|
-
textAlign
|
|
84
|
-
width
|
|
85
|
-
styles
|
|
86
|
-
gap
|
|
87
|
-
wrap
|
|
86
|
+
const {
|
|
87
|
+
as,
|
|
88
|
+
withVisualDebug,
|
|
89
|
+
height,
|
|
90
|
+
display,
|
|
91
|
+
margin,
|
|
92
|
+
padding,
|
|
93
|
+
textAlign,
|
|
94
|
+
width,
|
|
95
|
+
styles,
|
|
96
|
+
gap,
|
|
97
|
+
wrap
|
|
98
|
+
} = this.props;
|
|
88
99
|
const children = callRenderProp(this.props.children);
|
|
89
|
-
const gapValuesArray = gap
|
|
100
|
+
const gapValuesArray = gap?.split(' ');
|
|
90
101
|
if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
|
|
91
102
|
if (children && Children.count(children) > 0) {
|
|
92
103
|
return _jsx(View, {
|
|
93
104
|
...passthroughProps(this.props),
|
|
94
|
-
css: styles
|
|
105
|
+
css: styles?.flex,
|
|
95
106
|
elementRef: this.handleRef,
|
|
96
107
|
as: as,
|
|
97
108
|
display: display,
|
|
@@ -107,14 +118,6 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
|
|
|
107
118
|
return null;
|
|
108
119
|
}
|
|
109
120
|
}
|
|
110
|
-
}
|
|
111
|
-
as: 'span',
|
|
112
|
-
direction: 'row',
|
|
113
|
-
justifyItems: 'start',
|
|
114
|
-
display: 'flex',
|
|
115
|
-
withVisualDebug: false,
|
|
116
|
-
wrap: 'no-wrap',
|
|
117
|
-
gap: 'none'
|
|
118
|
-
}, _Flex)) || _class);
|
|
121
|
+
}) || _class);
|
|
119
122
|
export default Flex;
|
|
120
123
|
export { Flex, Item as FlexItem };
|
package/es/Flex/v1/styles.js
CHANGED
|
@@ -39,10 +39,12 @@ import { getShorthandPropValue } from '@instructure/emotion';
|
|
|
39
39
|
*/
|
|
40
40
|
|
|
41
41
|
const generateStyle = (componentTheme, props) => {
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
const {
|
|
43
|
+
justifyItems,
|
|
44
|
+
wrap,
|
|
45
|
+
direction,
|
|
46
|
+
gap
|
|
47
|
+
} = props;
|
|
46
48
|
|
|
47
49
|
// align-items css prop
|
|
48
50
|
// When flex direction is row, 'center' is the most useful default because it
|
|
@@ -68,7 +70,7 @@ const generateStyle = (componentTheme, props) => {
|
|
|
68
70
|
const wrapValues = {
|
|
69
71
|
wrap: 'wrap',
|
|
70
72
|
'wrap-reverse': 'wrap-reverse',
|
|
71
|
-
'no-wrap':
|
|
73
|
+
'no-wrap': undefined
|
|
72
74
|
};
|
|
73
75
|
|
|
74
76
|
// flex-direction css props
|
package/es/Flex/v1/theme.js
CHANGED
|
@@ -29,10 +29,12 @@ import { makeThemeVars } from '@instructure/emotion';
|
|
|
29
29
|
* @return {Object} The final theme object with the overrides and component variables
|
|
30
30
|
*/
|
|
31
31
|
const generateComponentTheme = theme => {
|
|
32
|
-
const
|
|
33
|
-
|
|
32
|
+
const {
|
|
33
|
+
typography,
|
|
34
|
+
spacing
|
|
35
|
+
} = theme;
|
|
34
36
|
const componentVariables = {
|
|
35
|
-
fontFamily: typography
|
|
37
|
+
fontFamily: typography?.fontFamily,
|
|
36
38
|
...makeThemeVars('gap', spacing)
|
|
37
39
|
};
|
|
38
40
|
return {
|
package/es/Flex/v2/Item/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec, _class
|
|
1
|
+
var _dec, _class;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -36,49 +36,55 @@ parent: Flex
|
|
|
36
36
|
id: Flex.Item
|
|
37
37
|
---
|
|
38
38
|
**/
|
|
39
|
-
let Item = (_dec = withStyle(generateStyle, null), _dec(_class =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
this.ref = null;
|
|
43
|
-
this.handleRef = el => {
|
|
44
|
-
const elementRef = this.props.elementRef;
|
|
45
|
-
this.ref = el;
|
|
46
|
-
if (typeof elementRef === 'function') {
|
|
47
|
-
elementRef(el);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
}
|
|
39
|
+
let Item = (_dec = withStyle(generateStyle, null), _dec(_class = class Item extends Component {
|
|
40
|
+
static displayName = "Item";
|
|
41
|
+
static componentId = 'Flex.Item';
|
|
51
42
|
componentDidMount() {
|
|
52
|
-
|
|
53
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
43
|
+
this.props.makeStyles?.();
|
|
54
44
|
}
|
|
55
45
|
componentDidUpdate() {
|
|
56
|
-
|
|
57
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
46
|
+
this.props.makeStyles?.();
|
|
58
47
|
}
|
|
48
|
+
static allowedProps = allowedProps;
|
|
49
|
+
static defaultProps = {
|
|
50
|
+
as: 'span',
|
|
51
|
+
shouldGrow: false,
|
|
52
|
+
shouldShrink: false
|
|
53
|
+
};
|
|
54
|
+
ref = null;
|
|
55
|
+
handleRef = el => {
|
|
56
|
+
const {
|
|
57
|
+
elementRef
|
|
58
|
+
} = this.props;
|
|
59
|
+
this.ref = el;
|
|
60
|
+
if (typeof elementRef === 'function') {
|
|
61
|
+
elementRef(el);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
59
64
|
render() {
|
|
60
65
|
const props = omitProps(this.props, Item.allowedProps);
|
|
61
|
-
const
|
|
62
|
-
as
|
|
63
|
-
children
|
|
64
|
-
withVisualDebug
|
|
65
|
-
textAlign
|
|
66
|
-
size
|
|
67
|
-
direction
|
|
68
|
-
margin
|
|
69
|
-
padding
|
|
70
|
-
overflowX
|
|
71
|
-
overflowY
|
|
72
|
-
styles
|
|
66
|
+
const {
|
|
67
|
+
as,
|
|
68
|
+
children,
|
|
69
|
+
withVisualDebug,
|
|
70
|
+
textAlign,
|
|
71
|
+
size,
|
|
72
|
+
direction,
|
|
73
|
+
margin,
|
|
74
|
+
padding,
|
|
75
|
+
overflowX,
|
|
76
|
+
overflowY,
|
|
77
|
+
styles
|
|
78
|
+
} = this.props;
|
|
73
79
|
const dirColumn = direction === 'column';
|
|
74
80
|
const dirRow = direction === 'row';
|
|
75
81
|
return _jsx(View, {
|
|
76
82
|
...props,
|
|
77
|
-
css: styles
|
|
83
|
+
css: styles?.flexItem,
|
|
78
84
|
elementRef: this.handleRef,
|
|
79
85
|
as: as,
|
|
80
|
-
minHeight: dirColumn ? size :
|
|
81
|
-
minWidth: dirRow ? size :
|
|
86
|
+
minHeight: dirColumn ? size : undefined,
|
|
87
|
+
minWidth: dirRow ? size : undefined,
|
|
82
88
|
textAlign: textAlign,
|
|
83
89
|
margin: margin,
|
|
84
90
|
padding: padding,
|
|
@@ -88,10 +94,6 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
|
|
|
88
94
|
children: children
|
|
89
95
|
});
|
|
90
96
|
}
|
|
91
|
-
}
|
|
92
|
-
as: 'span',
|
|
93
|
-
shouldGrow: false,
|
|
94
|
-
shouldShrink: false
|
|
95
|
-
}, _Item)) || _class);
|
|
97
|
+
}) || _class);
|
|
96
98
|
export default Item;
|
|
97
99
|
export { Item };
|
|
@@ -33,11 +33,13 @@
|
|
|
33
33
|
* @return {Object} The final style object, which will be used in the component
|
|
34
34
|
*/
|
|
35
35
|
const generateStyle = (_componentTheme, props) => {
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
const {
|
|
37
|
+
shouldGrow,
|
|
38
|
+
shouldShrink,
|
|
39
|
+
align,
|
|
40
|
+
size,
|
|
41
|
+
order
|
|
42
|
+
} = props;
|
|
41
43
|
const alignSelfValues = {
|
|
42
44
|
start: 'flex-start',
|
|
43
45
|
end: 'flex-end',
|
|
@@ -50,7 +52,7 @@ const generateStyle = (_componentTheme, props) => {
|
|
|
50
52
|
boxSizing: 'border-box',
|
|
51
53
|
minWidth: '0.0625rem',
|
|
52
54
|
flexBasis: size,
|
|
53
|
-
...(order !==
|
|
55
|
+
...(order !== undefined ? {
|
|
54
56
|
order
|
|
55
57
|
} : {}),
|
|
56
58
|
// initial value is 1, but we want 0 as our default,
|
package/es/Flex/v2/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec, _class
|
|
1
|
+
var _dec, _class;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -37,26 +37,36 @@ category: components
|
|
|
37
37
|
---
|
|
38
38
|
@module Flex
|
|
39
39
|
**/
|
|
40
|
-
let Flex = (_dec = withStyle(generateStyle), _dec(_class =
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
this.ref = null;
|
|
44
|
-
this.handleRef = el => {
|
|
45
|
-
const elementRef = this.props.elementRef;
|
|
46
|
-
this.ref = el;
|
|
47
|
-
if (typeof elementRef === 'function') {
|
|
48
|
-
elementRef(el);
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
}
|
|
40
|
+
let Flex = (_dec = withStyle(generateStyle), _dec(_class = class Flex extends Component {
|
|
41
|
+
static displayName = "Flex";
|
|
42
|
+
static componentId = 'Flex';
|
|
52
43
|
componentDidMount() {
|
|
53
|
-
|
|
54
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
44
|
+
this.props.makeStyles?.();
|
|
55
45
|
}
|
|
56
46
|
componentDidUpdate() {
|
|
57
|
-
|
|
58
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
47
|
+
this.props.makeStyles?.();
|
|
59
48
|
}
|
|
49
|
+
static Item = Item;
|
|
50
|
+
static allowedProps = allowedProps;
|
|
51
|
+
static defaultProps = {
|
|
52
|
+
as: 'span',
|
|
53
|
+
direction: 'row',
|
|
54
|
+
justifyItems: 'start',
|
|
55
|
+
display: 'flex',
|
|
56
|
+
withVisualDebug: false,
|
|
57
|
+
wrap: 'no-wrap',
|
|
58
|
+
gap: 'none'
|
|
59
|
+
};
|
|
60
|
+
ref = null;
|
|
61
|
+
handleRef = el => {
|
|
62
|
+
const {
|
|
63
|
+
elementRef
|
|
64
|
+
} = this.props;
|
|
65
|
+
this.ref = el;
|
|
66
|
+
if (typeof elementRef === 'function') {
|
|
67
|
+
elementRef(el);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
60
70
|
renderChildren(children) {
|
|
61
71
|
// TODO this might fail if children are () => ReactNode
|
|
62
72
|
return Children.map(children, child => {
|
|
@@ -72,25 +82,26 @@ let Flex = (_dec = withStyle(generateStyle), _dec(_class = (_Flex = class Flex e
|
|
|
72
82
|
});
|
|
73
83
|
}
|
|
74
84
|
render() {
|
|
75
|
-
const
|
|
76
|
-
as
|
|
77
|
-
withVisualDebug
|
|
78
|
-
height
|
|
79
|
-
display
|
|
80
|
-
margin
|
|
81
|
-
padding
|
|
82
|
-
textAlign
|
|
83
|
-
width
|
|
84
|
-
styles
|
|
85
|
-
gap
|
|
86
|
-
wrap
|
|
85
|
+
const {
|
|
86
|
+
as,
|
|
87
|
+
withVisualDebug,
|
|
88
|
+
height,
|
|
89
|
+
display,
|
|
90
|
+
margin,
|
|
91
|
+
padding,
|
|
92
|
+
textAlign,
|
|
93
|
+
width,
|
|
94
|
+
styles,
|
|
95
|
+
gap,
|
|
96
|
+
wrap
|
|
97
|
+
} = this.props;
|
|
87
98
|
const children = callRenderProp(this.props.children);
|
|
88
|
-
const gapValuesArray = gap
|
|
99
|
+
const gapValuesArray = gap?.split(' ');
|
|
89
100
|
if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
|
|
90
101
|
if (children && Children.count(children) > 0) {
|
|
91
102
|
return _jsx(View, {
|
|
92
103
|
...passthroughProps(this.props),
|
|
93
|
-
css: styles
|
|
104
|
+
css: styles?.flex,
|
|
94
105
|
elementRef: this.handleRef,
|
|
95
106
|
as: as,
|
|
96
107
|
display: display,
|
|
@@ -106,14 +117,6 @@ let Flex = (_dec = withStyle(generateStyle), _dec(_class = (_Flex = class Flex e
|
|
|
106
117
|
return null;
|
|
107
118
|
}
|
|
108
119
|
}
|
|
109
|
-
}
|
|
110
|
-
as: 'span',
|
|
111
|
-
direction: 'row',
|
|
112
|
-
justifyItems: 'start',
|
|
113
|
-
display: 'flex',
|
|
114
|
-
withVisualDebug: false,
|
|
115
|
-
wrap: 'no-wrap',
|
|
116
|
-
gap: 'none'
|
|
117
|
-
}, _Flex)) || _class);
|
|
120
|
+
}) || _class);
|
|
118
121
|
export default Flex;
|
|
119
122
|
export { Flex, Item as FlexItem };
|
package/es/Flex/v2/styles.js
CHANGED
|
@@ -39,10 +39,12 @@ import { getShorthandPropValue, makeThemeVars } from '@instructure/emotion';
|
|
|
39
39
|
*/
|
|
40
40
|
|
|
41
41
|
const generateStyle = (componentTheme, props, sharedTokens) => {
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
const {
|
|
43
|
+
justifyItems,
|
|
44
|
+
wrap,
|
|
45
|
+
direction,
|
|
46
|
+
gap
|
|
47
|
+
} = props;
|
|
46
48
|
|
|
47
49
|
// align-items css prop
|
|
48
50
|
// When flex direction is row, 'center' is the most useful default because it
|
|
@@ -68,7 +70,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
|
|
|
68
70
|
const wrapValues = {
|
|
69
71
|
wrap: 'wrap',
|
|
70
72
|
'wrap-reverse': 'wrap-reverse',
|
|
71
|
-
'no-wrap':
|
|
73
|
+
'no-wrap': undefined
|
|
72
74
|
};
|
|
73
75
|
|
|
74
76
|
// flex-direction css props
|