@instructure/ui-list 8.17.1-snapshot.82 → 8.18.1-snapshot.1
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 +4 -0
- package/es/InlineList/InlineListItem/index.js +18 -14
- package/es/InlineList/InlineListItem/theme.js +20 -20
- package/es/List/ListItem/index.js +17 -13
- package/es/List/ListItem/theme.js +17 -17
- package/es/List/index.js +14 -10
- package/es/List/theme.js +3 -3
- package/lib/InlineList/InlineListItem/index.js +18 -14
- package/lib/InlineList/InlineListItem/theme.js +20 -20
- package/lib/List/ListItem/index.js +17 -13
- package/lib/List/ListItem/theme.js +17 -17
- package/lib/List/index.js +14 -10
- package/lib/List/theme.js +3 -3
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
# [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-list
|
|
9
|
+
|
|
6
10
|
# [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
|
@@ -60,27 +60,31 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
componentDidMount() {
|
|
63
|
-
|
|
63
|
+
var _this$props$makeStyle, _this$props;
|
|
64
|
+
|
|
65
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
componentDidUpdate() {
|
|
67
|
-
|
|
69
|
+
var _this$props$makeStyle2, _this$props2;
|
|
70
|
+
|
|
71
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
render() {
|
|
71
|
-
const _this$
|
|
72
|
-
delimiter = _this$
|
|
73
|
-
size = _this$
|
|
74
|
-
margin = _this$
|
|
75
|
-
padding = _this$
|
|
76
|
-
elementRef = _this$
|
|
77
|
-
children = _this$
|
|
78
|
-
spacing = _this$
|
|
79
|
-
styles = _this$
|
|
80
|
-
rest = _objectWithoutProperties(_this$
|
|
75
|
+
const _this$props3 = this.props,
|
|
76
|
+
delimiter = _this$props3.delimiter,
|
|
77
|
+
size = _this$props3.size,
|
|
78
|
+
margin = _this$props3.margin,
|
|
79
|
+
padding = _this$props3.padding,
|
|
80
|
+
elementRef = _this$props3.elementRef,
|
|
81
|
+
children = _this$props3.children,
|
|
82
|
+
spacing = _this$props3.spacing,
|
|
83
|
+
styles = _this$props3.styles,
|
|
84
|
+
rest = _objectWithoutProperties(_this$props3, _excluded);
|
|
81
85
|
|
|
82
86
|
return jsx(View, Object.assign({}, passthroughProps(rest), {
|
|
83
|
-
css: styles
|
|
87
|
+
css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
|
|
84
88
|
as: "li",
|
|
85
89
|
margin: margin,
|
|
86
90
|
padding: padding,
|
|
@@ -88,7 +92,7 @@ let InlineListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
88
92
|
maxWidth: "100%",
|
|
89
93
|
elementRef: this.handleRef
|
|
90
94
|
}), children, jsx("span", {
|
|
91
|
-
css: styles
|
|
95
|
+
css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
|
|
92
96
|
"aria-hidden": "true"
|
|
93
97
|
}));
|
|
94
98
|
}
|
|
@@ -38,26 +38,26 @@ const generateComponentTheme = theme => {
|
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
const componentVariables = {
|
|
41
|
-
fontFamily: typography
|
|
42
|
-
fontWeight: typography
|
|
43
|
-
fontSizeSmall: typography
|
|
44
|
-
fontSizeMedium: typography
|
|
45
|
-
fontSizeLarge: typography
|
|
46
|
-
color: colors
|
|
47
|
-
lineHeight: typography
|
|
48
|
-
noneSpacing: spacing
|
|
49
|
-
pipeSpacing: spacing
|
|
50
|
-
slashSpacing: spacing
|
|
51
|
-
arrowSpacing: spacing
|
|
52
|
-
marginBottomDefault: spacing
|
|
53
|
-
spacingXXXSmall: spacing
|
|
54
|
-
spacingXXSmall: spacing
|
|
55
|
-
spacingXSmall: spacing
|
|
56
|
-
spacingSmall: spacing
|
|
57
|
-
spacingMedium: spacing
|
|
58
|
-
spacingLarge: spacing
|
|
59
|
-
spacingXLarge: spacing
|
|
60
|
-
spacingXXLarge: spacing
|
|
41
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
42
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
43
|
+
fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
44
|
+
fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
45
|
+
fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
|
|
46
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
47
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
|
48
|
+
noneSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
49
|
+
pipeSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
50
|
+
slashSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
51
|
+
arrowSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
52
|
+
marginBottomDefault: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
|
|
53
|
+
spacingXXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
|
|
54
|
+
spacingXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
|
|
55
|
+
spacingXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
56
|
+
spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
57
|
+
spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
58
|
+
spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
59
|
+
spacingXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xLarge,
|
|
60
|
+
spacingXXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge
|
|
61
61
|
};
|
|
62
62
|
return { ...componentVariables,
|
|
63
63
|
...themeSpecificStyle[themeName]
|
|
@@ -60,27 +60,31 @@ let ListItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
componentDidMount() {
|
|
63
|
-
|
|
63
|
+
var _this$props$makeStyle, _this$props;
|
|
64
|
+
|
|
65
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
componentDidUpdate() {
|
|
67
|
-
|
|
69
|
+
var _this$props$makeStyle2, _this$props2;
|
|
70
|
+
|
|
71
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
render() {
|
|
71
|
-
const _this$
|
|
72
|
-
delimiter = _this$
|
|
73
|
-
spacing = _this$
|
|
74
|
-
size = _this$
|
|
75
|
-
margin = _this$
|
|
76
|
-
padding = _this$
|
|
77
|
-
elementRef = _this$
|
|
78
|
-
children = _this$
|
|
79
|
-
styles = _this$
|
|
80
|
-
rest = _objectWithoutProperties(_this$
|
|
75
|
+
const _this$props3 = this.props,
|
|
76
|
+
delimiter = _this$props3.delimiter,
|
|
77
|
+
spacing = _this$props3.spacing,
|
|
78
|
+
size = _this$props3.size,
|
|
79
|
+
margin = _this$props3.margin,
|
|
80
|
+
padding = _this$props3.padding,
|
|
81
|
+
elementRef = _this$props3.elementRef,
|
|
82
|
+
children = _this$props3.children,
|
|
83
|
+
styles = _this$props3.styles,
|
|
84
|
+
rest = _objectWithoutProperties(_this$props3, _excluded);
|
|
81
85
|
|
|
82
86
|
return jsx(View, Object.assign({}, passthroughProps(rest), {
|
|
83
|
-
css: styles
|
|
87
|
+
css: styles === null || styles === void 0 ? void 0 : styles.listItem,
|
|
84
88
|
as: "li",
|
|
85
89
|
margin: margin,
|
|
86
90
|
padding: padding,
|
|
@@ -39,23 +39,23 @@ const generateComponentTheme = theme => {
|
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
41
|
const componentVariables = {
|
|
42
|
-
fontFamily: typography
|
|
43
|
-
fontWeight: typography
|
|
44
|
-
lineHeight: typography
|
|
45
|
-
fontSizeSmall: typography
|
|
46
|
-
fontSizeMedium: typography
|
|
47
|
-
fontSizeLarge: typography
|
|
48
|
-
color: colors
|
|
49
|
-
spacingXXXSmall: spacing
|
|
50
|
-
spacingXXSmall: spacing
|
|
51
|
-
spacingXSmall: spacing
|
|
52
|
-
spacingSmall: spacing
|
|
53
|
-
spacingMedium: spacing
|
|
54
|
-
spacingLarge: spacing
|
|
55
|
-
spacingXLarge: spacing
|
|
56
|
-
spacingXXLarge: spacing
|
|
57
|
-
delimiterDashedBorder: `${borders
|
|
58
|
-
delimiterSolidBorder: `${borders
|
|
42
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
43
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
44
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
|
|
45
|
+
fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
46
|
+
fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
47
|
+
fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
|
|
48
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
49
|
+
spacingXXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
|
|
50
|
+
spacingXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
|
|
51
|
+
spacingXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
52
|
+
spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
53
|
+
spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
54
|
+
spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
55
|
+
spacingXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xLarge,
|
|
56
|
+
spacingXXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge,
|
|
57
|
+
delimiterDashedBorder: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} dashed ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
|
|
58
|
+
delimiterSolidBorder: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} solid ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`
|
|
59
59
|
};
|
|
60
60
|
return { ...componentVariables,
|
|
61
61
|
...themeSpecificStyle[themeName]
|
package/es/List/index.js
CHANGED
|
@@ -60,11 +60,15 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
componentDidMount() {
|
|
63
|
-
|
|
63
|
+
var _this$props$makeStyle, _this$props;
|
|
64
|
+
|
|
65
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
componentDidUpdate() {
|
|
67
|
-
|
|
69
|
+
var _this$props$makeStyle2, _this$props2;
|
|
70
|
+
|
|
71
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
renderChildren() {
|
|
@@ -81,16 +85,16 @@ let List = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
81
85
|
}
|
|
82
86
|
|
|
83
87
|
render() {
|
|
84
|
-
const _this$
|
|
85
|
-
as = _this$
|
|
86
|
-
margin = _this$
|
|
87
|
-
isUnstyled = _this$
|
|
88
|
-
elementRef = _this$
|
|
89
|
-
styles = _this$
|
|
90
|
-
rest = _objectWithoutProperties(_this$
|
|
88
|
+
const _this$props3 = this.props,
|
|
89
|
+
as = _this$props3.as,
|
|
90
|
+
margin = _this$props3.margin,
|
|
91
|
+
isUnstyled = _this$props3.isUnstyled,
|
|
92
|
+
elementRef = _this$props3.elementRef,
|
|
93
|
+
styles = _this$props3.styles,
|
|
94
|
+
rest = _objectWithoutProperties(_this$props3, _excluded);
|
|
91
95
|
|
|
92
96
|
return jsx(View, Object.assign({}, passthroughProps(rest), {
|
|
93
|
-
css: styles
|
|
97
|
+
css: styles === null || styles === void 0 ? void 0 : styles.list,
|
|
94
98
|
as: as,
|
|
95
99
|
margin: margin,
|
|
96
100
|
elementRef: this.handleRef,
|
package/es/List/theme.js
CHANGED
|
@@ -31,9 +31,9 @@ const generateComponentTheme = theme => {
|
|
|
31
31
|
const spacing = theme.spacing,
|
|
32
32
|
typography = theme.typography;
|
|
33
33
|
const componentVariables = {
|
|
34
|
-
listPadding: spacing
|
|
35
|
-
orderedNumberFontWeight: typography
|
|
36
|
-
orderedNumberMargin: spacing
|
|
34
|
+
listPadding: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
35
|
+
orderedNumberFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
|
|
36
|
+
orderedNumberMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
|
|
37
37
|
};
|
|
38
38
|
return { ...componentVariables
|
|
39
39
|
};
|
|
@@ -52,26 +52,30 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
componentDidMount() {
|
|
55
|
-
|
|
55
|
+
var _this$props$makeStyle, _this$props;
|
|
56
|
+
|
|
57
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
componentDidUpdate() {
|
|
59
|
-
|
|
61
|
+
var _this$props$makeStyle2, _this$props2;
|
|
62
|
+
|
|
63
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
60
64
|
}
|
|
61
65
|
|
|
62
66
|
render() {
|
|
63
|
-
const _this$
|
|
64
|
-
delimiter = _this$
|
|
65
|
-
size = _this$
|
|
66
|
-
margin = _this$
|
|
67
|
-
padding = _this$
|
|
68
|
-
elementRef = _this$
|
|
69
|
-
children = _this$
|
|
70
|
-
spacing = _this$
|
|
71
|
-
styles = _this$
|
|
72
|
-
rest = (0, _objectWithoutProperties2.default)(_this$
|
|
67
|
+
const _this$props3 = this.props,
|
|
68
|
+
delimiter = _this$props3.delimiter,
|
|
69
|
+
size = _this$props3.size,
|
|
70
|
+
margin = _this$props3.margin,
|
|
71
|
+
padding = _this$props3.padding,
|
|
72
|
+
elementRef = _this$props3.elementRef,
|
|
73
|
+
children = _this$props3.children,
|
|
74
|
+
spacing = _this$props3.spacing,
|
|
75
|
+
styles = _this$props3.styles,
|
|
76
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
73
77
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
|
|
74
|
-
css: styles
|
|
78
|
+
css: styles === null || styles === void 0 ? void 0 : styles.inlineListItem,
|
|
75
79
|
as: "li",
|
|
76
80
|
margin: margin,
|
|
77
81
|
padding: padding,
|
|
@@ -79,7 +83,7 @@ let InlineListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
79
83
|
maxWidth: "100%",
|
|
80
84
|
elementRef: this.handleRef
|
|
81
85
|
}), children, (0, _emotion.jsx)("span", {
|
|
82
|
-
css: styles
|
|
86
|
+
css: styles === null || styles === void 0 ? void 0 : styles.delimiter,
|
|
83
87
|
"aria-hidden": "true"
|
|
84
88
|
}));
|
|
85
89
|
}
|
|
@@ -45,26 +45,26 @@ const generateComponentTheme = theme => {
|
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
const componentVariables = {
|
|
48
|
-
fontFamily: typography
|
|
49
|
-
fontWeight: typography
|
|
50
|
-
fontSizeSmall: typography
|
|
51
|
-
fontSizeMedium: typography
|
|
52
|
-
fontSizeLarge: typography
|
|
53
|
-
color: colors
|
|
54
|
-
lineHeight: typography
|
|
55
|
-
noneSpacing: spacing
|
|
56
|
-
pipeSpacing: spacing
|
|
57
|
-
slashSpacing: spacing
|
|
58
|
-
arrowSpacing: spacing
|
|
59
|
-
marginBottomDefault: spacing
|
|
60
|
-
spacingXXXSmall: spacing
|
|
61
|
-
spacingXXSmall: spacing
|
|
62
|
-
spacingXSmall: spacing
|
|
63
|
-
spacingSmall: spacing
|
|
64
|
-
spacingMedium: spacing
|
|
65
|
-
spacingLarge: spacing
|
|
66
|
-
spacingXLarge: spacing
|
|
67
|
-
spacingXXLarge: spacing
|
|
48
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
49
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
50
|
+
fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
51
|
+
fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
52
|
+
fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
|
|
53
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
54
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
|
55
|
+
noneSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
56
|
+
pipeSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
57
|
+
slashSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
58
|
+
arrowSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
59
|
+
marginBottomDefault: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
|
|
60
|
+
spacingXXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
|
|
61
|
+
spacingXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
|
|
62
|
+
spacingXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
63
|
+
spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
64
|
+
spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
65
|
+
spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
66
|
+
spacingXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xLarge,
|
|
67
|
+
spacingXXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge
|
|
68
68
|
};
|
|
69
69
|
return { ...componentVariables,
|
|
70
70
|
...themeSpecificStyle[themeName]
|
|
@@ -52,26 +52,30 @@ let ListItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
componentDidMount() {
|
|
55
|
-
|
|
55
|
+
var _this$props$makeStyle, _this$props;
|
|
56
|
+
|
|
57
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
componentDidUpdate() {
|
|
59
|
-
|
|
61
|
+
var _this$props$makeStyle2, _this$props2;
|
|
62
|
+
|
|
63
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
60
64
|
}
|
|
61
65
|
|
|
62
66
|
render() {
|
|
63
|
-
const _this$
|
|
64
|
-
delimiter = _this$
|
|
65
|
-
spacing = _this$
|
|
66
|
-
size = _this$
|
|
67
|
-
margin = _this$
|
|
68
|
-
padding = _this$
|
|
69
|
-
elementRef = _this$
|
|
70
|
-
children = _this$
|
|
71
|
-
styles = _this$
|
|
72
|
-
rest = (0, _objectWithoutProperties2.default)(_this$
|
|
67
|
+
const _this$props3 = this.props,
|
|
68
|
+
delimiter = _this$props3.delimiter,
|
|
69
|
+
spacing = _this$props3.spacing,
|
|
70
|
+
size = _this$props3.size,
|
|
71
|
+
margin = _this$props3.margin,
|
|
72
|
+
padding = _this$props3.padding,
|
|
73
|
+
elementRef = _this$props3.elementRef,
|
|
74
|
+
children = _this$props3.children,
|
|
75
|
+
styles = _this$props3.styles,
|
|
76
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
73
77
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
|
|
74
|
-
css: styles
|
|
78
|
+
css: styles === null || styles === void 0 ? void 0 : styles.listItem,
|
|
75
79
|
as: "li",
|
|
76
80
|
margin: margin,
|
|
77
81
|
padding: padding,
|
|
@@ -46,23 +46,23 @@ const generateComponentTheme = theme => {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
const componentVariables = {
|
|
49
|
-
fontFamily: typography
|
|
50
|
-
fontWeight: typography
|
|
51
|
-
lineHeight: typography
|
|
52
|
-
fontSizeSmall: typography
|
|
53
|
-
fontSizeMedium: typography
|
|
54
|
-
fontSizeLarge: typography
|
|
55
|
-
color: colors
|
|
56
|
-
spacingXXXSmall: spacing
|
|
57
|
-
spacingXXSmall: spacing
|
|
58
|
-
spacingXSmall: spacing
|
|
59
|
-
spacingSmall: spacing
|
|
60
|
-
spacingMedium: spacing
|
|
61
|
-
spacingLarge: spacing
|
|
62
|
-
spacingXLarge: spacing
|
|
63
|
-
spacingXXLarge: spacing
|
|
64
|
-
delimiterDashedBorder: `${borders
|
|
65
|
-
delimiterSolidBorder: `${borders
|
|
49
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
50
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
51
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
|
|
52
|
+
fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
53
|
+
fontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
54
|
+
fontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
|
|
55
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
56
|
+
spacingXXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
|
|
57
|
+
spacingXXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
|
|
58
|
+
spacingXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
59
|
+
spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
60
|
+
spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
61
|
+
spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
62
|
+
spacingXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xLarge,
|
|
63
|
+
spacingXXLarge: spacing === null || spacing === void 0 ? void 0 : spacing.xxLarge,
|
|
64
|
+
delimiterDashedBorder: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} dashed ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`,
|
|
65
|
+
delimiterSolidBorder: `${borders === null || borders === void 0 ? void 0 : borders.widthSmall} solid ${colors === null || colors === void 0 ? void 0 : colors.borderMedium}`
|
|
66
66
|
};
|
|
67
67
|
return { ...componentVariables,
|
|
68
68
|
...themeSpecificStyle[themeName]
|
package/lib/List/index.js
CHANGED
|
@@ -62,11 +62,15 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
componentDidMount() {
|
|
65
|
-
|
|
65
|
+
var _this$props$makeStyle, _this$props;
|
|
66
|
+
|
|
67
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
componentDidUpdate() {
|
|
69
|
-
|
|
71
|
+
var _this$props$makeStyle2, _this$props2;
|
|
72
|
+
|
|
73
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
70
74
|
}
|
|
71
75
|
|
|
72
76
|
renderChildren() {
|
|
@@ -83,15 +87,15 @@ let List = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
|
83
87
|
}
|
|
84
88
|
|
|
85
89
|
render() {
|
|
86
|
-
const _this$
|
|
87
|
-
as = _this$
|
|
88
|
-
margin = _this$
|
|
89
|
-
isUnstyled = _this$
|
|
90
|
-
elementRef = _this$
|
|
91
|
-
styles = _this$
|
|
92
|
-
rest = (0, _objectWithoutProperties2.default)(_this$
|
|
90
|
+
const _this$props3 = this.props,
|
|
91
|
+
as = _this$props3.as,
|
|
92
|
+
margin = _this$props3.margin,
|
|
93
|
+
isUnstyled = _this$props3.isUnstyled,
|
|
94
|
+
elementRef = _this$props3.elementRef,
|
|
95
|
+
styles = _this$props3.styles,
|
|
96
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
93
97
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
|
|
94
|
-
css: styles
|
|
98
|
+
css: styles === null || styles === void 0 ? void 0 : styles.list,
|
|
95
99
|
as: as,
|
|
96
100
|
margin: margin,
|
|
97
101
|
elementRef: this.handleRef,
|
package/lib/List/theme.js
CHANGED
|
@@ -38,9 +38,9 @@ const generateComponentTheme = theme => {
|
|
|
38
38
|
const spacing = theme.spacing,
|
|
39
39
|
typography = theme.typography;
|
|
40
40
|
const componentVariables = {
|
|
41
|
-
listPadding: spacing
|
|
42
|
-
orderedNumberFontWeight: typography
|
|
43
|
-
orderedNumberMargin: spacing
|
|
41
|
+
listPadding: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
42
|
+
orderedNumberFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
|
|
43
|
+
orderedNumberMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
|
|
44
44
|
};
|
|
45
45
|
return { ...componentVariables
|
|
46
46
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-list",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.18.1-snapshot.1+669aa5892",
|
|
4
4
|
"description": "Components for displaying vertical or horizontal lists.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.13.10",
|
|
27
|
-
"@instructure/console": "8.
|
|
28
|
-
"@instructure/emotion": "8.
|
|
29
|
-
"@instructure/shared-types": "8.
|
|
30
|
-
"@instructure/ui-prop-types": "8.
|
|
31
|
-
"@instructure/ui-react-utils": "8.
|
|
32
|
-
"@instructure/ui-testable": "8.
|
|
33
|
-
"@instructure/ui-view": "8.
|
|
27
|
+
"@instructure/console": "8.18.1-snapshot.1+669aa5892",
|
|
28
|
+
"@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
|
|
29
|
+
"@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
|
|
30
|
+
"@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
|
|
31
|
+
"@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
|
|
32
|
+
"@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
|
|
33
|
+
"@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
|
|
34
34
|
"prop-types": "^15"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@instructure/ui-babel-preset": "8.
|
|
38
|
-
"@instructure/ui-color-utils": "8.
|
|
39
|
-
"@instructure/ui-test-locator": "8.
|
|
40
|
-
"@instructure/ui-test-utils": "8.
|
|
41
|
-
"@instructure/ui-themes": "8.
|
|
37
|
+
"@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
|
|
38
|
+
"@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
|
|
39
|
+
"@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
|
|
40
|
+
"@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
|
|
41
|
+
"@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=16.8 <=17"
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"sideEffects": false,
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
|
|
51
51
|
}
|