@instructure/ui-progress 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/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 +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-progress
|
|
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
|
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.
|
|
3
|
+
"version": "8.18.1-snapshot.1+669aa5892",
|
|
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.
|
|
28
|
-
"@instructure/emotion": "8.
|
|
29
|
-
"@instructure/shared-types": "8.
|
|
30
|
-
"@instructure/ui-a11y-content": "8.
|
|
31
|
-
"@instructure/ui-color-utils": "8.
|
|
32
|
-
"@instructure/ui-react-utils": "8.
|
|
33
|
-
"@instructure/ui-testable": "8.
|
|
34
|
-
"@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-a11y-content": "8.18.1-snapshot.1+669aa5892",
|
|
31
|
+
"@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
|
|
32
|
+
"@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
|
|
33
|
+
"@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
|
|
34
|
+
"@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
|
|
35
35
|
"prop-types": "^15"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@instructure/ui-babel-preset": "8.
|
|
39
|
-
"@instructure/ui-test-locator": "8.
|
|
40
|
-
"@instructure/ui-test-utils": "8.
|
|
41
|
-
"@instructure/ui-themes": "8.
|
|
38
|
+
"@instructure/ui-babel-preset": "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
|
}
|