@instructure/ui-progress 8.18.0 → 8.18.1-snapshot.12
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/LICENSE.md +27 -0
- package/es/ProgressBar/index.js +22 -18
- package/es/ProgressBar/theme.js +35 -35
- package/es/ProgressCircle/index.js +30 -24
- package/es/ProgressCircle/theme.js +26 -26
- package/lib/ProgressBar/index.js +22 -18
- package/lib/ProgressBar/theme.js +35 -35
- package/lib/ProgressCircle/index.js +30 -24
- package/lib/ProgressCircle/theme.js +26 -26
- package/package.json +15 -14
- package/src/ProgressBar/README.md +12 -11
- package/src/ProgressCircle/README.md +13 -11
package/LICENSE.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: The MIT License (MIT)
|
|
3
|
+
category: Getting Started
|
|
4
|
+
order: 9
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# The MIT License (MIT)
|
|
8
|
+
|
|
9
|
+
Copyright (c) 2015 Instructure, Inc.
|
|
10
|
+
|
|
11
|
+
**Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
12
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
13
|
+
in the Software without restriction, including without limitation the rights
|
|
14
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
15
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
16
|
+
furnished to do so, subject to the following conditions.**
|
|
17
|
+
|
|
18
|
+
The above copyright notice and this permission notice shall be included in all
|
|
19
|
+
copies or substantial portions of the Software.
|
|
20
|
+
|
|
21
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
22
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
23
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
24
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
25
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
26
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
|
+
SOFTWARE.
|
package/es/ProgressBar/index.js
CHANGED
|
@@ -59,25 +59,29 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
componentDidMount() {
|
|
62
|
-
|
|
62
|
+
var _this$props$makeStyle, _this$props;
|
|
63
|
+
|
|
64
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
componentDidUpdate() {
|
|
66
|
-
|
|
68
|
+
var _this$props$makeStyle2, _this$props2;
|
|
69
|
+
|
|
70
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
67
71
|
}
|
|
68
72
|
|
|
69
73
|
render() {
|
|
70
|
-
const _this$
|
|
71
|
-
renderValue = _this$
|
|
72
|
-
formatScreenReaderValue = _this$
|
|
73
|
-
valueNow = _this$
|
|
74
|
-
valueMax = _this$
|
|
75
|
-
screenReaderLabel = _this$
|
|
76
|
-
size = _this$
|
|
77
|
-
color = _this$
|
|
78
|
-
meterColor = _this$
|
|
79
|
-
styles = _this$
|
|
80
|
-
props = _objectWithoutProperties(_this$
|
|
74
|
+
const _this$props3 = this.props,
|
|
75
|
+
renderValue = _this$props3.renderValue,
|
|
76
|
+
formatScreenReaderValue = _this$props3.formatScreenReaderValue,
|
|
77
|
+
valueNow = _this$props3.valueNow,
|
|
78
|
+
valueMax = _this$props3.valueMax,
|
|
79
|
+
screenReaderLabel = _this$props3.screenReaderLabel,
|
|
80
|
+
size = _this$props3.size,
|
|
81
|
+
color = _this$props3.color,
|
|
82
|
+
meterColor = _this$props3.meterColor,
|
|
83
|
+
styles = _this$props3.styles,
|
|
84
|
+
props = _objectWithoutProperties(_this$props3, _excluded);
|
|
81
85
|
|
|
82
86
|
const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
|
|
83
87
|
valueNow: valueNow,
|
|
@@ -95,15 +99,15 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
95
99
|
|
|
96
100
|
return jsx(View, Object.assign({}, passthroughProps(props), {
|
|
97
101
|
as: this.props.as,
|
|
98
|
-
css: styles
|
|
102
|
+
css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
|
|
99
103
|
margin: this.props.margin,
|
|
100
104
|
elementRef: this.handleRef
|
|
101
105
|
}), jsx("span", {
|
|
102
|
-
css: styles
|
|
106
|
+
css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
|
|
103
107
|
}, jsx("span", {
|
|
104
|
-
css: styles
|
|
108
|
+
css: styles === null || styles === void 0 ? void 0 : styles.trackBorder
|
|
105
109
|
}), jsx("progress", {
|
|
106
|
-
css: styles
|
|
110
|
+
css: styles === null || styles === void 0 ? void 0 : styles.track,
|
|
107
111
|
max: valueMax,
|
|
108
112
|
value: valueNow,
|
|
109
113
|
role: "progressbar",
|
|
@@ -112,7 +116,7 @@ let ProgressBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
|
|
|
112
116
|
"aria-valuemax": valueMax,
|
|
113
117
|
"aria-label": labelAndValueText
|
|
114
118
|
})), value && jsx("span", {
|
|
115
|
-
css: styles
|
|
119
|
+
css: styles === null || styles === void 0 ? void 0 : styles.value,
|
|
116
120
|
"aria-hidden": "true"
|
|
117
121
|
}, value));
|
|
118
122
|
}
|
package/es/ProgressBar/theme.js
CHANGED
|
@@ -38,50 +38,50 @@ const generateComponentTheme = theme => {
|
|
|
38
38
|
meterColorBrand: theme['ic-brand-primary']
|
|
39
39
|
},
|
|
40
40
|
'canvas-high-contrast': {
|
|
41
|
-
meterColorBrandInverse: colors
|
|
42
|
-
meterColorSuccessInverse: colors
|
|
43
|
-
meterColorInfoInverse: colors
|
|
44
|
-
meterColorAlertInverse: colors
|
|
45
|
-
meterColorWarningInverse: colors
|
|
46
|
-
meterColorDangerInverse: colors
|
|
41
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
42
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
43
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
44
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
45
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
46
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
const componentVariables = {
|
|
50
|
-
fontFamily: typography
|
|
51
|
-
fontWeight: typography
|
|
52
|
-
lineHeight: typography
|
|
53
|
-
fontSize: typography
|
|
54
|
-
xSmallHeight: spacing
|
|
55
|
-
xSmallValueFontSize: typography
|
|
50
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
51
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
52
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
|
53
|
+
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
54
|
+
xSmallHeight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
55
|
+
xSmallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
|
|
56
56
|
smallHeight: '1.125rem',
|
|
57
57
|
// product design wants = 18px
|
|
58
|
-
smallValueFontSize: typography
|
|
59
|
-
mediumHeight: spacing
|
|
60
|
-
mediumValueFontSize: typography
|
|
61
|
-
largeHeight: spacing
|
|
62
|
-
largeValueFontSize: typography
|
|
63
|
-
valuePadding: `${spacing
|
|
58
|
+
smallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
|
|
59
|
+
mediumHeight: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
60
|
+
mediumValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
61
|
+
largeHeight: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
62
|
+
largeValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
63
|
+
valuePadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall}`,
|
|
64
64
|
// variables are split out for inverse to allow
|
|
65
65
|
// color value changes for inverse-high-constrast
|
|
66
|
-
meterColorBrand: colors
|
|
67
|
-
meterColorBrandInverse: colors
|
|
68
|
-
meterColorInfo: colors
|
|
69
|
-
meterColorInfoInverse: colors
|
|
70
|
-
meterColorSuccess: colors
|
|
71
|
-
meterColorSuccessInverse: colors
|
|
72
|
-
meterColorDanger: colors
|
|
73
|
-
meterColorDangerInverse: colors
|
|
74
|
-
meterColorAlert: colors
|
|
75
|
-
meterColorAlertInverse: colors
|
|
76
|
-
meterColorWarning: colors
|
|
77
|
-
meterColorWarningInverse: colors
|
|
78
|
-
meterBorderWidthInverse: borders
|
|
66
|
+
meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
67
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
68
|
+
meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
69
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
70
|
+
meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
71
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
72
|
+
meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
73
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
74
|
+
meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
75
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
76
|
+
meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
|
|
77
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
|
|
78
|
+
meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
|
|
79
79
|
meterBorderColorInverse: 'transparent',
|
|
80
|
-
trackColor: colors
|
|
80
|
+
trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
81
81
|
trackColorInverse: 'transparent',
|
|
82
|
-
trackBottomBorderWidth: borders
|
|
83
|
-
trackBottomBorderColor: colors
|
|
84
|
-
trackBottomBorderColorInverse: colors
|
|
82
|
+
trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
|
|
83
|
+
trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
84
|
+
trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest
|
|
85
85
|
};
|
|
86
86
|
return { ...componentVariables,
|
|
87
87
|
...themeSpecificStyle[themeName]
|
|
@@ -71,6 +71,8 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
componentDidMount() {
|
|
74
|
+
var _this$props$makeStyle, _this$props;
|
|
75
|
+
|
|
74
76
|
if (this.state.shouldAnimateOnMount) {
|
|
75
77
|
this._timeouts.push(setTimeout(() => {
|
|
76
78
|
this.setState({
|
|
@@ -79,11 +81,13 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
79
81
|
}, this.props.animationDelay || 500));
|
|
80
82
|
}
|
|
81
83
|
|
|
82
|
-
this.props.makeStyles
|
|
84
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
componentDidUpdate() {
|
|
86
|
-
|
|
88
|
+
var _this$props$makeStyle2, _this$props2;
|
|
89
|
+
|
|
90
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
|
|
87
91
|
}
|
|
88
92
|
|
|
89
93
|
componentWillUnmount() {
|
|
@@ -91,17 +95,19 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
91
95
|
}
|
|
92
96
|
|
|
93
97
|
render() {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
98
|
+
var _styles$radii, _styles$radii2, _styles$radii3;
|
|
99
|
+
|
|
100
|
+
const _this$props3 = this.props,
|
|
101
|
+
color = _this$props3.color,
|
|
102
|
+
renderValue = _this$props3.renderValue,
|
|
103
|
+
formatScreenReaderValue = _this$props3.formatScreenReaderValue,
|
|
104
|
+
meterColor = _this$props3.meterColor,
|
|
105
|
+
valueNow = _this$props3.valueNow,
|
|
106
|
+
valueMax = _this$props3.valueMax,
|
|
107
|
+
screenReaderLabel = _this$props3.screenReaderLabel,
|
|
108
|
+
size = _this$props3.size,
|
|
109
|
+
styles = _this$props3.styles,
|
|
110
|
+
props = _objectWithoutProperties(_this$props3, _excluded);
|
|
105
111
|
|
|
106
112
|
const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
|
|
107
113
|
valueNow: valueNow,
|
|
@@ -116,12 +122,12 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
116
122
|
valueMax
|
|
117
123
|
});
|
|
118
124
|
const style = {
|
|
119
|
-
strokeDashoffset: `${styles
|
|
125
|
+
strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
|
|
120
126
|
};
|
|
121
127
|
return jsx(View, Object.assign({}, passthroughProps(props), {
|
|
122
128
|
as: this.props.as,
|
|
123
129
|
elementRef: this.handleRef,
|
|
124
|
-
css: styles
|
|
130
|
+
css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
|
|
125
131
|
margin: this.props.margin
|
|
126
132
|
}), jsx(ScreenReaderContent, null, jsx("progress", {
|
|
127
133
|
max: valueMax,
|
|
@@ -131,33 +137,33 @@ let ProgressCircle = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
131
137
|
"aria-valuemax": valueMax,
|
|
132
138
|
"aria-label": labelAndValueText
|
|
133
139
|
})), value && jsx("span", {
|
|
134
|
-
css: styles
|
|
140
|
+
css: styles === null || styles === void 0 ? void 0 : styles.center,
|
|
135
141
|
"aria-hidden": "true"
|
|
136
142
|
}, jsx("span", {
|
|
137
|
-
css: styles
|
|
143
|
+
css: styles === null || styles === void 0 ? void 0 : styles.value
|
|
138
144
|
}, value)), jsx("svg", {
|
|
139
|
-
css: styles
|
|
145
|
+
css: styles === null || styles === void 0 ? void 0 : styles.circle,
|
|
140
146
|
role: "presentation",
|
|
141
147
|
focusable: "false"
|
|
142
148
|
}, jsx("circle", {
|
|
143
|
-
css: styles
|
|
149
|
+
css: styles === null || styles === void 0 ? void 0 : styles.track,
|
|
144
150
|
role: "presentation",
|
|
145
151
|
cx: "50%",
|
|
146
152
|
cy: "50%",
|
|
147
|
-
r: styles
|
|
153
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
|
|
148
154
|
}), jsx("circle", {
|
|
149
|
-
css: styles
|
|
155
|
+
css: styles === null || styles === void 0 ? void 0 : styles.border,
|
|
150
156
|
role: "presentation",
|
|
151
157
|
cx: "50%",
|
|
152
158
|
cy: "50%",
|
|
153
|
-
r: styles
|
|
159
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
|
|
154
160
|
}), jsx("circle", {
|
|
155
|
-
css: styles
|
|
161
|
+
css: styles === null || styles === void 0 ? void 0 : styles.meter,
|
|
156
162
|
role: "presentation",
|
|
157
163
|
style: style,
|
|
158
164
|
cx: "50%",
|
|
159
165
|
cy: "50%",
|
|
160
|
-
r: styles
|
|
166
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
|
|
161
167
|
})));
|
|
162
168
|
}
|
|
163
169
|
|
|
@@ -74,18 +74,18 @@ const generateComponentTheme = theme => {
|
|
|
74
74
|
meterColorBrand: theme['ic-brand-primary']
|
|
75
75
|
},
|
|
76
76
|
'canvas-high-contrast': {
|
|
77
|
-
meterColorBrandInverse: colors
|
|
78
|
-
meterColorSuccessInverse: colors
|
|
79
|
-
meterColorInfoInverse: colors
|
|
80
|
-
meterColorAlertInverse: colors
|
|
81
|
-
meterColorWarningInverse: colors
|
|
82
|
-
meterColorDangerInverse: colors
|
|
77
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
78
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
79
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
80
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
81
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
82
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
85
|
const componentVariables = {
|
|
86
|
-
fontFamily: typography
|
|
87
|
-
fontWeight: typography
|
|
88
|
-
lineHeight: typography
|
|
86
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
87
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
88
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
|
89
89
|
xSmallSize: `${size.xSmall}em`,
|
|
90
90
|
xSmallRadius: `${radius.xSmall}em`,
|
|
91
91
|
xSmallCircumference: `${circumference(radius.xSmall)}em`,
|
|
@@ -110,26 +110,26 @@ const generateComponentTheme = theme => {
|
|
|
110
110
|
largeTransform: `${transform(size.large)}em`,
|
|
111
111
|
largeStrokeWidth: `${strokeWidth.large}em`,
|
|
112
112
|
largeBorderOffset: `${borderOffsetRadius.large}em`,
|
|
113
|
-
color: colors
|
|
114
|
-
colorInverse: colors
|
|
115
|
-
trackColor: colors
|
|
113
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
114
|
+
colorInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
115
|
+
trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
116
116
|
trackColorInverse: 'transparent',
|
|
117
|
-
trackBorderColor: colors
|
|
118
|
-
trackBorderColorInverse: colors
|
|
117
|
+
trackBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
118
|
+
trackBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
|
|
119
119
|
// variables are split out for inverse to allow
|
|
120
120
|
// color value changes for inverse-high-contrast
|
|
121
|
-
meterColorBrand: colors
|
|
122
|
-
meterColorBrandInverse: colors
|
|
123
|
-
meterColorInfo: colors
|
|
124
|
-
meterColorInfoInverse: colors
|
|
125
|
-
meterColorSuccess: colors
|
|
126
|
-
meterColorSuccessInverse: colors
|
|
127
|
-
meterColorDanger: colors
|
|
128
|
-
meterColorDangerInverse: colors
|
|
129
|
-
meterColorAlert: colors
|
|
130
|
-
meterColorAlertInverse: colors
|
|
131
|
-
meterColorWarning: colors
|
|
132
|
-
meterColorWarningInverse: colors
|
|
121
|
+
meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
122
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
123
|
+
meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
124
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
125
|
+
meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
126
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
127
|
+
meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
128
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
129
|
+
meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
130
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
131
|
+
meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
|
|
132
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning
|
|
133
133
|
};
|
|
134
134
|
return { ...componentVariables,
|
|
135
135
|
...themeSpecificStyle[themeName]
|
package/lib/ProgressBar/index.js
CHANGED
|
@@ -53,25 +53,29 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
componentDidMount() {
|
|
56
|
-
|
|
56
|
+
var _this$props$makeStyle, _this$props;
|
|
57
|
+
|
|
58
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
57
59
|
}
|
|
58
60
|
|
|
59
61
|
componentDidUpdate() {
|
|
60
|
-
|
|
62
|
+
var _this$props$makeStyle2, _this$props2;
|
|
63
|
+
|
|
64
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
61
65
|
}
|
|
62
66
|
|
|
63
67
|
render() {
|
|
64
|
-
const _this$
|
|
65
|
-
renderValue = _this$
|
|
66
|
-
formatScreenReaderValue = _this$
|
|
67
|
-
valueNow = _this$
|
|
68
|
-
valueMax = _this$
|
|
69
|
-
screenReaderLabel = _this$
|
|
70
|
-
size = _this$
|
|
71
|
-
color = _this$
|
|
72
|
-
meterColor = _this$
|
|
73
|
-
styles = _this$
|
|
74
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
68
|
+
const _this$props3 = this.props,
|
|
69
|
+
renderValue = _this$props3.renderValue,
|
|
70
|
+
formatScreenReaderValue = _this$props3.formatScreenReaderValue,
|
|
71
|
+
valueNow = _this$props3.valueNow,
|
|
72
|
+
valueMax = _this$props3.valueMax,
|
|
73
|
+
screenReaderLabel = _this$props3.screenReaderLabel,
|
|
74
|
+
size = _this$props3.size,
|
|
75
|
+
color = _this$props3.color,
|
|
76
|
+
meterColor = _this$props3.meterColor,
|
|
77
|
+
styles = _this$props3.styles,
|
|
78
|
+
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
75
79
|
const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
|
|
76
80
|
valueNow: valueNow,
|
|
77
81
|
valueMax: valueMax
|
|
@@ -88,15 +92,15 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
88
92
|
|
|
89
93
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
90
94
|
as: this.props.as,
|
|
91
|
-
css: styles
|
|
95
|
+
css: styles === null || styles === void 0 ? void 0 : styles.progressBar,
|
|
92
96
|
margin: this.props.margin,
|
|
93
97
|
elementRef: this.handleRef
|
|
94
98
|
}), (0, _emotion.jsx)("span", {
|
|
95
|
-
css: styles
|
|
99
|
+
css: styles === null || styles === void 0 ? void 0 : styles.trackLayout
|
|
96
100
|
}, (0, _emotion.jsx)("span", {
|
|
97
|
-
css: styles
|
|
101
|
+
css: styles === null || styles === void 0 ? void 0 : styles.trackBorder
|
|
98
102
|
}), (0, _emotion.jsx)("progress", {
|
|
99
|
-
css: styles
|
|
103
|
+
css: styles === null || styles === void 0 ? void 0 : styles.track,
|
|
100
104
|
max: valueMax,
|
|
101
105
|
value: valueNow,
|
|
102
106
|
role: "progressbar",
|
|
@@ -105,7 +109,7 @@ let ProgressBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
|
|
|
105
109
|
"aria-valuemax": valueMax,
|
|
106
110
|
"aria-label": labelAndValueText
|
|
107
111
|
})), value && (0, _emotion.jsx)("span", {
|
|
108
|
-
css: styles
|
|
112
|
+
css: styles === null || styles === void 0 ? void 0 : styles.value,
|
|
109
113
|
"aria-hidden": "true"
|
|
110
114
|
}, value));
|
|
111
115
|
}
|
package/lib/ProgressBar/theme.js
CHANGED
|
@@ -45,50 +45,50 @@ const generateComponentTheme = theme => {
|
|
|
45
45
|
meterColorBrand: theme['ic-brand-primary']
|
|
46
46
|
},
|
|
47
47
|
'canvas-high-contrast': {
|
|
48
|
-
meterColorBrandInverse: colors
|
|
49
|
-
meterColorSuccessInverse: colors
|
|
50
|
-
meterColorInfoInverse: colors
|
|
51
|
-
meterColorAlertInverse: colors
|
|
52
|
-
meterColorWarningInverse: colors
|
|
53
|
-
meterColorDangerInverse: colors
|
|
48
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
49
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
50
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
51
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
52
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
53
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
56
|
const componentVariables = {
|
|
57
|
-
fontFamily: typography
|
|
58
|
-
fontWeight: typography
|
|
59
|
-
lineHeight: typography
|
|
60
|
-
fontSize: typography
|
|
61
|
-
xSmallHeight: spacing
|
|
62
|
-
xSmallValueFontSize: typography
|
|
57
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
58
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
59
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
|
60
|
+
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
61
|
+
xSmallHeight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
|
|
62
|
+
xSmallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
|
|
63
63
|
smallHeight: '1.125rem',
|
|
64
64
|
// product design wants = 18px
|
|
65
|
-
smallValueFontSize: typography
|
|
66
|
-
mediumHeight: spacing
|
|
67
|
-
mediumValueFontSize: typography
|
|
68
|
-
largeHeight: spacing
|
|
69
|
-
largeValueFontSize: typography
|
|
70
|
-
valuePadding: `${spacing
|
|
65
|
+
smallValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
|
|
66
|
+
mediumHeight: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
67
|
+
mediumValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
68
|
+
largeHeight: spacing === null || spacing === void 0 ? void 0 : spacing.large,
|
|
69
|
+
largeValueFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
70
|
+
valuePadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall}`,
|
|
71
71
|
// variables are split out for inverse to allow
|
|
72
72
|
// color value changes for inverse-high-constrast
|
|
73
|
-
meterColorBrand: colors
|
|
74
|
-
meterColorBrandInverse: colors
|
|
75
|
-
meterColorInfo: colors
|
|
76
|
-
meterColorInfoInverse: colors
|
|
77
|
-
meterColorSuccess: colors
|
|
78
|
-
meterColorSuccessInverse: colors
|
|
79
|
-
meterColorDanger: colors
|
|
80
|
-
meterColorDangerInverse: colors
|
|
81
|
-
meterColorAlert: colors
|
|
82
|
-
meterColorAlertInverse: colors
|
|
83
|
-
meterColorWarning: colors
|
|
84
|
-
meterColorWarningInverse: colors
|
|
85
|
-
meterBorderWidthInverse: borders
|
|
73
|
+
meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
74
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
75
|
+
meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
76
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
77
|
+
meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
78
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
79
|
+
meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
80
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
81
|
+
meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
82
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
83
|
+
meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
|
|
84
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
|
|
85
|
+
meterBorderWidthInverse: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
|
|
86
86
|
meterBorderColorInverse: 'transparent',
|
|
87
|
-
trackColor: colors
|
|
87
|
+
trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
88
88
|
trackColorInverse: 'transparent',
|
|
89
|
-
trackBottomBorderWidth: borders
|
|
90
|
-
trackBottomBorderColor: colors
|
|
91
|
-
trackBottomBorderColorInverse: colors
|
|
89
|
+
trackBottomBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
|
|
90
|
+
trackBottomBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
91
|
+
trackBottomBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest
|
|
92
92
|
};
|
|
93
93
|
return { ...componentVariables,
|
|
94
94
|
...themeSpecificStyle[themeName]
|
|
@@ -66,6 +66,8 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
componentDidMount() {
|
|
69
|
+
var _this$props$makeStyle, _this$props;
|
|
70
|
+
|
|
69
71
|
if (this.state.shouldAnimateOnMount) {
|
|
70
72
|
this._timeouts.push(setTimeout(() => {
|
|
71
73
|
this.setState({
|
|
@@ -74,11 +76,13 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
74
76
|
}, this.props.animationDelay || 500));
|
|
75
77
|
}
|
|
76
78
|
|
|
77
|
-
this.props.makeStyles
|
|
79
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
componentDidUpdate() {
|
|
81
|
-
|
|
83
|
+
var _this$props$makeStyle2, _this$props2;
|
|
84
|
+
|
|
85
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
|
|
82
86
|
}
|
|
83
87
|
|
|
84
88
|
componentWillUnmount() {
|
|
@@ -86,17 +90,19 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
86
90
|
}
|
|
87
91
|
|
|
88
92
|
render() {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
93
|
+
var _styles$radii, _styles$radii2, _styles$radii3;
|
|
94
|
+
|
|
95
|
+
const _this$props3 = this.props,
|
|
96
|
+
color = _this$props3.color,
|
|
97
|
+
renderValue = _this$props3.renderValue,
|
|
98
|
+
formatScreenReaderValue = _this$props3.formatScreenReaderValue,
|
|
99
|
+
meterColor = _this$props3.meterColor,
|
|
100
|
+
valueNow = _this$props3.valueNow,
|
|
101
|
+
valueMax = _this$props3.valueMax,
|
|
102
|
+
screenReaderLabel = _this$props3.screenReaderLabel,
|
|
103
|
+
size = _this$props3.size,
|
|
104
|
+
styles = _this$props3.styles,
|
|
105
|
+
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
100
106
|
const valueText = typeof formatScreenReaderValue === 'function' ? formatScreenReaderValue({
|
|
101
107
|
valueNow: valueNow,
|
|
102
108
|
valueMax: valueMax
|
|
@@ -110,12 +116,12 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
110
116
|
valueMax
|
|
111
117
|
});
|
|
112
118
|
const style = {
|
|
113
|
-
strokeDashoffset: `${styles
|
|
119
|
+
strokeDashoffset: `${styles === null || styles === void 0 ? void 0 : styles.dashOffset}em`
|
|
114
120
|
};
|
|
115
121
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
116
122
|
as: this.props.as,
|
|
117
123
|
elementRef: this.handleRef,
|
|
118
|
-
css: styles
|
|
124
|
+
css: styles === null || styles === void 0 ? void 0 : styles.progressCircle,
|
|
119
125
|
margin: this.props.margin
|
|
120
126
|
}), (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, (0, _emotion.jsx)("progress", {
|
|
121
127
|
max: valueMax,
|
|
@@ -125,33 +131,33 @@ let ProgressCircle = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
125
131
|
"aria-valuemax": valueMax,
|
|
126
132
|
"aria-label": labelAndValueText
|
|
127
133
|
})), value && (0, _emotion.jsx)("span", {
|
|
128
|
-
css: styles
|
|
134
|
+
css: styles === null || styles === void 0 ? void 0 : styles.center,
|
|
129
135
|
"aria-hidden": "true"
|
|
130
136
|
}, (0, _emotion.jsx)("span", {
|
|
131
|
-
css: styles
|
|
137
|
+
css: styles === null || styles === void 0 ? void 0 : styles.value
|
|
132
138
|
}, value)), (0, _emotion.jsx)("svg", {
|
|
133
|
-
css: styles
|
|
139
|
+
css: styles === null || styles === void 0 ? void 0 : styles.circle,
|
|
134
140
|
role: "presentation",
|
|
135
141
|
focusable: "false"
|
|
136
142
|
}, (0, _emotion.jsx)("circle", {
|
|
137
|
-
css: styles
|
|
143
|
+
css: styles === null || styles === void 0 ? void 0 : styles.track,
|
|
138
144
|
role: "presentation",
|
|
139
145
|
cx: "50%",
|
|
140
146
|
cy: "50%",
|
|
141
|
-
r: styles
|
|
147
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii = styles.radii) === null || _styles$radii === void 0 ? void 0 : _styles$radii.radius
|
|
142
148
|
}), (0, _emotion.jsx)("circle", {
|
|
143
|
-
css: styles
|
|
149
|
+
css: styles === null || styles === void 0 ? void 0 : styles.border,
|
|
144
150
|
role: "presentation",
|
|
145
151
|
cx: "50%",
|
|
146
152
|
cy: "50%",
|
|
147
|
-
r: styles
|
|
153
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii2 = styles.radii) === null || _styles$radii2 === void 0 ? void 0 : _styles$radii2.borderOffsetRadius
|
|
148
154
|
}), (0, _emotion.jsx)("circle", {
|
|
149
|
-
css: styles
|
|
155
|
+
css: styles === null || styles === void 0 ? void 0 : styles.meter,
|
|
150
156
|
role: "presentation",
|
|
151
157
|
style: style,
|
|
152
158
|
cx: "50%",
|
|
153
159
|
cy: "50%",
|
|
154
|
-
r: styles
|
|
160
|
+
r: styles === null || styles === void 0 ? void 0 : (_styles$radii3 = styles.radii) === null || _styles$radii3 === void 0 ? void 0 : _styles$radii3.radius
|
|
155
161
|
})));
|
|
156
162
|
}
|
|
157
163
|
|
|
@@ -81,18 +81,18 @@ const generateComponentTheme = theme => {
|
|
|
81
81
|
meterColorBrand: theme['ic-brand-primary']
|
|
82
82
|
},
|
|
83
83
|
'canvas-high-contrast': {
|
|
84
|
-
meterColorBrandInverse: colors
|
|
85
|
-
meterColorSuccessInverse: colors
|
|
86
|
-
meterColorInfoInverse: colors
|
|
87
|
-
meterColorAlertInverse: colors
|
|
88
|
-
meterColorWarningInverse: colors
|
|
89
|
-
meterColorDangerInverse: colors
|
|
84
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
85
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
86
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
87
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
88
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
89
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
|
|
90
90
|
}
|
|
91
91
|
};
|
|
92
92
|
const componentVariables = {
|
|
93
|
-
fontFamily: typography
|
|
94
|
-
fontWeight: typography
|
|
95
|
-
lineHeight: typography
|
|
93
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
94
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
95
|
+
lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
|
|
96
96
|
xSmallSize: `${size.xSmall}em`,
|
|
97
97
|
xSmallRadius: `${radius.xSmall}em`,
|
|
98
98
|
xSmallCircumference: `${circumference(radius.xSmall)}em`,
|
|
@@ -117,26 +117,26 @@ const generateComponentTheme = theme => {
|
|
|
117
117
|
largeTransform: `${transform(size.large)}em`,
|
|
118
118
|
largeStrokeWidth: `${strokeWidth.large}em`,
|
|
119
119
|
largeBorderOffset: `${borderOffsetRadius.large}em`,
|
|
120
|
-
color: colors
|
|
121
|
-
colorInverse: colors
|
|
122
|
-
trackColor: colors
|
|
120
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
121
|
+
colorInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
122
|
+
trackColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
123
123
|
trackColorInverse: 'transparent',
|
|
124
|
-
trackBorderColor: colors
|
|
125
|
-
trackBorderColorInverse: colors
|
|
124
|
+
trackBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
|
|
125
|
+
trackBorderColorInverse: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
|
|
126
126
|
// variables are split out for inverse to allow
|
|
127
127
|
// color value changes for inverse-high-contrast
|
|
128
|
-
meterColorBrand: colors
|
|
129
|
-
meterColorBrandInverse: colors
|
|
130
|
-
meterColorInfo: colors
|
|
131
|
-
meterColorInfoInverse: colors
|
|
132
|
-
meterColorSuccess: colors
|
|
133
|
-
meterColorSuccessInverse: colors
|
|
134
|
-
meterColorDanger: colors
|
|
135
|
-
meterColorDangerInverse: colors
|
|
136
|
-
meterColorAlert: colors
|
|
137
|
-
meterColorAlertInverse: colors
|
|
138
|
-
meterColorWarning: colors
|
|
139
|
-
meterColorWarningInverse: colors
|
|
128
|
+
meterColorBrand: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
129
|
+
meterColorBrandInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
130
|
+
meterColorInfo: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
131
|
+
meterColorInfoInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundInfo,
|
|
132
|
+
meterColorSuccess: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
133
|
+
meterColorSuccessInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
134
|
+
meterColorDanger: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
135
|
+
meterColorDangerInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
|
|
136
|
+
meterColorAlert: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
137
|
+
meterColorAlertInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundAlert,
|
|
138
|
+
meterColorWarning: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning,
|
|
139
|
+
meterColorWarningInverse: colors === null || colors === void 0 ? void 0 : colors.backgroundWarning
|
|
140
140
|
};
|
|
141
141
|
return { ...componentVariables,
|
|
142
142
|
...themeSpecificStyle[themeName]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-progress",
|
|
3
|
-
"version": "8.18.
|
|
3
|
+
"version": "8.18.1-snapshot.12+ca14b3dc8",
|
|
4
4
|
"description": "Styled HTML <progress /> elements for showing completion of a task",
|
|
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.18.
|
|
28
|
-
"@instructure/emotion": "8.18.
|
|
29
|
-
"@instructure/shared-types": "8.18.
|
|
30
|
-
"@instructure/ui-a11y-content": "8.18.
|
|
31
|
-
"@instructure/ui-color-utils": "8.18.
|
|
32
|
-
"@instructure/ui-react-utils": "8.18.
|
|
33
|
-
"@instructure/ui-testable": "8.18.
|
|
34
|
-
"@instructure/ui-view": "8.18.
|
|
27
|
+
"@instructure/console": "8.18.1-snapshot.12+ca14b3dc8",
|
|
28
|
+
"@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
|
|
29
|
+
"@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
|
|
30
|
+
"@instructure/ui-a11y-content": "8.18.1-snapshot.12+ca14b3dc8",
|
|
31
|
+
"@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
|
|
32
|
+
"@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
|
|
33
|
+
"@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
|
|
34
|
+
"@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
|
|
35
35
|
"prop-types": "^15"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@instructure/ui-babel-preset": "8.18.
|
|
39
|
-
"@instructure/ui-test-locator": "8.18.
|
|
40
|
-
"@instructure/ui-test-utils": "8.18.
|
|
41
|
-
"@instructure/ui-themes": "8.18.
|
|
38
|
+
"@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
|
|
39
|
+
"@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
|
|
40
|
+
"@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
|
|
41
|
+
"@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=16.8 <=17"
|
|
@@ -46,5 +46,6 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"sideEffects": false
|
|
49
|
+
"sideEffects": false,
|
|
50
|
+
"gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
|
|
50
51
|
}
|
|
@@ -49,17 +49,19 @@ component. Set it to `primary-inverse` when the component is used on dark backgr
|
|
|
49
49
|
```js
|
|
50
50
|
---
|
|
51
51
|
example: true
|
|
52
|
-
background: 'checkerboard-inverse'
|
|
53
52
|
---
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
<View background="primary-inverse" as="div">
|
|
54
|
+
<ProgressBar
|
|
55
|
+
screenReaderLabel="Loading completion"
|
|
56
|
+
color="primary-inverse"
|
|
57
|
+
valueNow={30}
|
|
58
|
+
valueMax={60}
|
|
59
|
+
/>
|
|
60
|
+
</View>
|
|
60
61
|
```
|
|
61
62
|
|
|
62
63
|
### `meterColor`
|
|
64
|
+
|
|
63
65
|
The color of the progress meter is set separately through the `meterColor` property.
|
|
64
66
|
|
|
65
67
|
```js
|
|
@@ -101,7 +103,7 @@ example: true
|
|
|
101
103
|
valueNow={40}
|
|
102
104
|
valueMax={60}
|
|
103
105
|
margin="0 0 small"
|
|
104
|
-
/>
|
|
106
|
+
/>
|
|
105
107
|
</div>
|
|
106
108
|
```
|
|
107
109
|
|
|
@@ -130,8 +132,7 @@ example: true
|
|
|
130
132
|
```
|
|
131
133
|
|
|
132
134
|
> `<ProgressBar />` defaults to setting the meter color to `success` when
|
|
133
|
-
complete.
|
|
134
|
-
|
|
135
|
+
> complete.
|
|
135
136
|
|
|
136
137
|
### `renderValue` / `formatScreenReaderValue`
|
|
137
138
|
|
|
@@ -139,7 +140,7 @@ Via the `renderValue` prop, developers can use `valueMax` and `valueNow` props t
|
|
|
139
140
|
value that `<ProgressBar />` displays.
|
|
140
141
|
|
|
141
142
|
> `renderValue` will not be spoken by screen readers. Any essential information
|
|
142
|
-
in `renderValue` must also be conveyed via `formatScreenReaderValue` for screen reader users.
|
|
143
|
+
> in `renderValue` must also be conveyed via `formatScreenReaderValue` for screen reader users.
|
|
143
144
|
|
|
144
145
|
```js
|
|
145
146
|
---
|
|
@@ -88,17 +88,20 @@ component. Set it to `primary-inverse` when the component is used on dark backgr
|
|
|
88
88
|
```js
|
|
89
89
|
---
|
|
90
90
|
example: true
|
|
91
|
-
|
|
91
|
+
|
|
92
92
|
---
|
|
93
|
-
<
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
93
|
+
<View background="primary-inverse" as="div">
|
|
94
|
+
<ProgressCircle
|
|
95
|
+
screenReaderLabel="Loading completion"
|
|
96
|
+
color="primary-inverse"
|
|
97
|
+
valueNow={50}
|
|
98
|
+
valueMax={60}
|
|
99
|
+
/>
|
|
100
|
+
</View>
|
|
99
101
|
```
|
|
100
102
|
|
|
101
103
|
### `meterColor`
|
|
104
|
+
|
|
102
105
|
The color of the progress meter is set separately through the `meterColor` property.
|
|
103
106
|
|
|
104
107
|
```js
|
|
@@ -140,7 +143,7 @@ example: true
|
|
|
140
143
|
valueNow={40}
|
|
141
144
|
valueMax={60}
|
|
142
145
|
margin="0 0 small"
|
|
143
|
-
/>
|
|
146
|
+
/>
|
|
144
147
|
</div>
|
|
145
148
|
```
|
|
146
149
|
|
|
@@ -169,8 +172,7 @@ example: true
|
|
|
169
172
|
```
|
|
170
173
|
|
|
171
174
|
> `<ProgressCircle />` defaults to setting the meter color to `success` when
|
|
172
|
-
complete.
|
|
173
|
-
|
|
175
|
+
> complete.
|
|
174
176
|
|
|
175
177
|
### `renderValue` / `formatScreenReaderValue`
|
|
176
178
|
|
|
@@ -178,7 +180,7 @@ Via the `renderValue` prop, developers can use `valueMax` and `valueNow` props t
|
|
|
178
180
|
value that `<ProgressCircle />` displays.
|
|
179
181
|
|
|
180
182
|
> `renderValue` will not be spoken by screen readers. Any essential information
|
|
181
|
-
in `renderValue` must also be conveyed via `formatScreenReaderValue` for screen reader users.
|
|
183
|
+
> in `renderValue` must also be conveyed via `formatScreenReaderValue` for screen reader users.
|
|
182
184
|
|
|
183
185
|
```js
|
|
184
186
|
---
|