@instructure/ui-checkbox 8.17.1-snapshot.21 → 8.17.1-snapshot.30
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/es/Checkbox/CheckboxFacade/index.js +8 -12
- package/es/Checkbox/CheckboxFacade/theme.js +21 -21
- package/es/Checkbox/ToggleFacade/index.js +18 -22
- package/es/Checkbox/ToggleFacade/theme.js +25 -25
- package/es/Checkbox/index.js +26 -30
- package/lib/Checkbox/CheckboxFacade/index.js +8 -12
- package/lib/Checkbox/CheckboxFacade/theme.js +21 -21
- package/lib/Checkbox/ToggleFacade/index.js +18 -22
- package/lib/Checkbox/ToggleFacade/theme.js +25 -25
- package/lib/Checkbox/index.js +26 -30
- package/package.json +20 -20
- package/tsconfig.build.tsbuildinfo +1 -1
|
@@ -50,15 +50,11 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
componentDidMount() {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
53
|
+
this.props.makeStyles?.();
|
|
56
54
|
}
|
|
57
55
|
|
|
58
56
|
componentDidUpdate() {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
57
|
+
this.props.makeStyles?.();
|
|
62
58
|
}
|
|
63
59
|
|
|
64
60
|
renderIcon() {
|
|
@@ -82,17 +78,17 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
|
|
|
82
78
|
}
|
|
83
79
|
|
|
84
80
|
render() {
|
|
85
|
-
const _this$
|
|
86
|
-
children = _this$
|
|
87
|
-
styles = _this$
|
|
81
|
+
const _this$props = this.props,
|
|
82
|
+
children = _this$props.children,
|
|
83
|
+
styles = _this$props.styles;
|
|
88
84
|
return jsx("span", {
|
|
89
|
-
css: styles
|
|
85
|
+
css: styles?.checkboxFacade,
|
|
90
86
|
ref: this.handleRef
|
|
91
87
|
}, jsx("span", {
|
|
92
|
-
css: styles
|
|
88
|
+
css: styles?.facade,
|
|
93
89
|
"aria-hidden": "true"
|
|
94
90
|
}, this.renderIcon()), jsx("span", {
|
|
95
|
-
css: styles
|
|
91
|
+
css: styles?.label
|
|
96
92
|
}, children));
|
|
97
93
|
}
|
|
98
94
|
|
|
@@ -44,30 +44,30 @@ const generateComponentTheme = theme => {
|
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
const componentVariables = {
|
|
47
|
-
color: colors
|
|
48
|
-
borderWidth: borders
|
|
49
|
-
borderColor: colors
|
|
50
|
-
borderRadius: borders
|
|
51
|
-
background: colors
|
|
52
|
-
marginRight: spacing
|
|
53
|
-
padding: spacing
|
|
54
|
-
checkedBackground: colors
|
|
55
|
-
checkedBorderColor: colors
|
|
56
|
-
hoverBorderColor: colors
|
|
57
|
-
focusBorderColor: colors
|
|
58
|
-
focusBorderWidth: borders
|
|
59
|
-
focusBorderStyle: borders
|
|
60
|
-
labelColor: colors
|
|
61
|
-
checkedLabelColor: colors
|
|
62
|
-
labelFontFamily: typography
|
|
63
|
-
labelFontWeight: typography
|
|
64
|
-
labelLineHeight: typography
|
|
47
|
+
color: colors?.textLightest,
|
|
48
|
+
borderWidth: borders?.widthSmall,
|
|
49
|
+
borderColor: colors?.borderMedium,
|
|
50
|
+
borderRadius: borders?.radiusMedium,
|
|
51
|
+
background: colors?.backgroundLightest,
|
|
52
|
+
marginRight: spacing?.xSmall,
|
|
53
|
+
padding: spacing?.xxxSmall,
|
|
54
|
+
checkedBackground: colors?.backgroundDarkest,
|
|
55
|
+
checkedBorderColor: colors?.borderDarkest,
|
|
56
|
+
hoverBorderColor: colors?.borderDarkest,
|
|
57
|
+
focusBorderColor: colors?.borderBrand,
|
|
58
|
+
focusBorderWidth: borders?.widthMedium,
|
|
59
|
+
focusBorderStyle: borders?.style,
|
|
60
|
+
labelColor: colors?.textDarkest,
|
|
61
|
+
checkedLabelColor: colors?.textDarkest,
|
|
62
|
+
labelFontFamily: typography?.fontFamily,
|
|
63
|
+
labelFontWeight: typography?.fontWeightNormal,
|
|
64
|
+
labelLineHeight: typography?.lineHeightCondensed,
|
|
65
65
|
facadeSizeSmall: '1rem',
|
|
66
66
|
facadeSizeMedium: '1.25rem',
|
|
67
67
|
facadeSizeLarge: '1.75rem',
|
|
68
|
-
labelFontSizeSmall: typography
|
|
69
|
-
labelFontSizeMedium: typography
|
|
70
|
-
labelFontSizeLarge: typography
|
|
68
|
+
labelFontSizeSmall: typography?.fontSizeSmall,
|
|
69
|
+
labelFontSizeMedium: typography?.fontSizeMedium,
|
|
70
|
+
labelFontSizeLarge: typography?.fontSizeLarge,
|
|
71
71
|
iconSizeSmall: '0.625rem',
|
|
72
72
|
iconSizeMedium: '0.75rem',
|
|
73
73
|
iconSizeLarge: '1rem'
|
|
@@ -49,56 +49,52 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
componentDidMount() {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
52
|
+
this.props.makeStyles?.();
|
|
55
53
|
}
|
|
56
54
|
|
|
57
55
|
componentDidUpdate() {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
56
|
+
this.props.makeStyles?.();
|
|
61
57
|
}
|
|
62
58
|
|
|
63
59
|
renderIcon() {
|
|
64
|
-
const _this$
|
|
65
|
-
styles = _this$
|
|
66
|
-
checked = _this$
|
|
60
|
+
const _this$props = this.props,
|
|
61
|
+
styles = _this$props.styles,
|
|
62
|
+
checked = _this$props.checked;
|
|
67
63
|
|
|
68
64
|
if (checked) {
|
|
69
65
|
return jsx(IconCheckSolid, {
|
|
70
|
-
css: styles
|
|
66
|
+
css: styles?.iconSVG
|
|
71
67
|
});
|
|
72
68
|
} else {
|
|
73
69
|
return jsx(IconXSolid, {
|
|
74
|
-
css: styles
|
|
70
|
+
css: styles?.iconSVG
|
|
75
71
|
});
|
|
76
72
|
}
|
|
77
73
|
}
|
|
78
74
|
|
|
79
75
|
renderLabel() {
|
|
80
|
-
const _this$
|
|
81
|
-
children = _this$
|
|
82
|
-
styles = _this$
|
|
76
|
+
const _this$props2 = this.props,
|
|
77
|
+
children = _this$props2.children,
|
|
78
|
+
styles = _this$props2.styles;
|
|
83
79
|
return jsx("span", {
|
|
84
|
-
css: styles
|
|
80
|
+
css: styles?.label
|
|
85
81
|
}, children);
|
|
86
82
|
}
|
|
87
83
|
|
|
88
84
|
render() {
|
|
89
|
-
const _this$
|
|
90
|
-
labelPlacement = _this$
|
|
91
|
-
styles = _this$
|
|
85
|
+
const _this$props3 = this.props,
|
|
86
|
+
labelPlacement = _this$props3.labelPlacement,
|
|
87
|
+
styles = _this$props3.styles;
|
|
92
88
|
return jsx("span", {
|
|
93
|
-
css: styles
|
|
89
|
+
css: styles?.toggleFacade,
|
|
94
90
|
ref: this.handleRef
|
|
95
91
|
}, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), jsx("span", {
|
|
96
|
-
css: styles
|
|
92
|
+
css: styles?.facade,
|
|
97
93
|
"aria-hidden": "true"
|
|
98
94
|
}, jsx("span", {
|
|
99
|
-
css: styles
|
|
95
|
+
css: styles?.icon
|
|
100
96
|
}, jsx("span", {
|
|
101
|
-
css: styles
|
|
97
|
+
css: styles?.iconToggle
|
|
102
98
|
}, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
|
|
103
99
|
}
|
|
104
100
|
|
|
@@ -41,35 +41,35 @@ const generateComponentTheme = theme => {
|
|
|
41
41
|
labelColor: theme['ic-brand-font-color-dark']
|
|
42
42
|
},
|
|
43
43
|
'canvas-high-contrast': {
|
|
44
|
-
background: colors
|
|
45
|
-
borderColor: colors
|
|
44
|
+
background: colors?.backgroundDarkest,
|
|
45
|
+
borderColor: colors?.borderDarkest
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
const componentVariables = {
|
|
49
|
-
color: colors
|
|
50
|
-
background: colors
|
|
51
|
-
borderColor: colors
|
|
52
|
-
borderWidth: borders
|
|
49
|
+
color: colors?.textLightest,
|
|
50
|
+
background: colors?.backgroundLight,
|
|
51
|
+
borderColor: colors?.borderMedium,
|
|
52
|
+
borderWidth: borders?.widthSmall,
|
|
53
53
|
borderRadius: '4rem',
|
|
54
|
-
marginEnd: spacing
|
|
55
|
-
marginStart: spacing
|
|
56
|
-
marginVertical: spacing
|
|
57
|
-
checkedBackground: colors
|
|
58
|
-
uncheckedIconColor: colors
|
|
59
|
-
checkedIconColor: colors
|
|
60
|
-
focusOutlineColor: colors
|
|
61
|
-
focusBorderWidth: borders
|
|
62
|
-
focusBorderStyle: borders
|
|
63
|
-
toggleBackground: colors
|
|
64
|
-
toggleShadow: shadows
|
|
65
|
-
toggleSize: forms
|
|
66
|
-
labelColor: colors
|
|
67
|
-
labelFontFamily: typography
|
|
68
|
-
labelFontWeight: typography
|
|
69
|
-
labelLineHeight: typography
|
|
70
|
-
labelFontSizeSmall: typography
|
|
71
|
-
labelFontSizeMedium: typography
|
|
72
|
-
labelFontSizeLarge: typography
|
|
54
|
+
marginEnd: spacing?.small,
|
|
55
|
+
marginStart: spacing?.small,
|
|
56
|
+
marginVertical: spacing?.xSmall,
|
|
57
|
+
checkedBackground: colors?.backgroundSuccess,
|
|
58
|
+
uncheckedIconColor: colors?.textDarkest,
|
|
59
|
+
checkedIconColor: colors?.textSuccess,
|
|
60
|
+
focusOutlineColor: colors?.borderBrand,
|
|
61
|
+
focusBorderWidth: borders?.widthMedium,
|
|
62
|
+
focusBorderStyle: borders?.style,
|
|
63
|
+
toggleBackground: colors?.backgroundLightest,
|
|
64
|
+
toggleShadow: shadows?.depth1,
|
|
65
|
+
toggleSize: forms?.inputHeightSmall,
|
|
66
|
+
labelColor: colors?.textDarkest,
|
|
67
|
+
labelFontFamily: typography?.fontFamily,
|
|
68
|
+
labelFontWeight: typography?.fontWeightNormal,
|
|
69
|
+
labelLineHeight: typography?.lineHeightCondensed,
|
|
70
|
+
labelFontSizeSmall: typography?.fontSizeSmall,
|
|
71
|
+
labelFontSizeMedium: typography?.fontSizeMedium,
|
|
72
|
+
labelFontSizeLarge: typography?.fontSizeLarge
|
|
73
73
|
};
|
|
74
74
|
return { ...componentVariables,
|
|
75
75
|
...themeSpecificStyle[themeName]
|
package/es/Checkbox/index.js
CHANGED
|
@@ -127,23 +127,19 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
componentDidMount() {
|
|
130
|
-
var _this$props$makeStyle, _this$props2;
|
|
131
|
-
|
|
132
130
|
if (this._input) {
|
|
133
131
|
this._input.indeterminate = this.props.indeterminate;
|
|
134
132
|
}
|
|
135
133
|
|
|
136
|
-
|
|
134
|
+
this.props.makeStyles?.();
|
|
137
135
|
}
|
|
138
136
|
|
|
139
137
|
componentDidUpdate(prevProps) {
|
|
140
|
-
var _this$props$makeStyle2, _this$props3;
|
|
141
|
-
|
|
142
138
|
if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
|
|
143
139
|
this._input.indeterminate = this.props.indeterminate || false;
|
|
144
140
|
}
|
|
145
141
|
|
|
146
|
-
|
|
142
|
+
this.props.makeStyles?.();
|
|
147
143
|
}
|
|
148
144
|
|
|
149
145
|
get id() {
|
|
@@ -163,15 +159,15 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
|
|
|
163
159
|
}
|
|
164
160
|
|
|
165
161
|
renderFacade() {
|
|
166
|
-
const _this$
|
|
167
|
-
size = _this$
|
|
168
|
-
disabled = _this$
|
|
169
|
-
variant = _this$
|
|
170
|
-
label = _this$
|
|
171
|
-
readOnly = _this$
|
|
172
|
-
indeterminate = _this$
|
|
173
|
-
labelPlacement = _this$
|
|
174
|
-
themeOverride = _this$
|
|
162
|
+
const _this$props2 = this.props,
|
|
163
|
+
size = _this$props2.size,
|
|
164
|
+
disabled = _this$props2.disabled,
|
|
165
|
+
variant = _this$props2.variant,
|
|
166
|
+
label = _this$props2.label,
|
|
167
|
+
readOnly = _this$props2.readOnly,
|
|
168
|
+
indeterminate = _this$props2.indeterminate,
|
|
169
|
+
labelPlacement = _this$props2.labelPlacement,
|
|
170
|
+
themeOverride = _this$props2.themeOverride;
|
|
175
171
|
const _this$state = this.state,
|
|
176
172
|
hovered = _this$state.hovered,
|
|
177
173
|
focused = _this$state.focused;
|
|
@@ -210,24 +206,24 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
|
|
|
210
206
|
}
|
|
211
207
|
|
|
212
208
|
render() {
|
|
213
|
-
const _this$
|
|
214
|
-
disabled = _this$
|
|
215
|
-
readOnly = _this$
|
|
216
|
-
value = _this$
|
|
217
|
-
onKeyDown = _this$
|
|
218
|
-
onFocus = _this$
|
|
219
|
-
onBlur = _this$
|
|
220
|
-
onMouseOver = _this$
|
|
221
|
-
onMouseOut = _this$
|
|
222
|
-
indeterminate = _this$
|
|
223
|
-
variant = _this$
|
|
224
|
-
styles = _this$
|
|
209
|
+
const _this$props3 = this.props,
|
|
210
|
+
disabled = _this$props3.disabled,
|
|
211
|
+
readOnly = _this$props3.readOnly,
|
|
212
|
+
value = _this$props3.value,
|
|
213
|
+
onKeyDown = _this$props3.onKeyDown,
|
|
214
|
+
onFocus = _this$props3.onFocus,
|
|
215
|
+
onBlur = _this$props3.onBlur,
|
|
216
|
+
onMouseOver = _this$props3.onMouseOver,
|
|
217
|
+
onMouseOut = _this$props3.onMouseOut,
|
|
218
|
+
indeterminate = _this$props3.indeterminate,
|
|
219
|
+
variant = _this$props3.variant,
|
|
220
|
+
styles = _this$props3.styles;
|
|
225
221
|
const props = omitProps(this.props, Checkbox.allowedProps);
|
|
226
222
|
error(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
|
|
227
223
|
/* eslint-disable jsx-a11y/mouse-events-have-key-events */
|
|
228
224
|
|
|
229
225
|
return jsx("div", {
|
|
230
|
-
css: styles
|
|
226
|
+
css: styles?.checkbox,
|
|
231
227
|
onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver),
|
|
232
228
|
onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut),
|
|
233
229
|
ref: this.handleRef
|
|
@@ -240,7 +236,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
|
|
|
240
236
|
},
|
|
241
237
|
disabled: disabled || readOnly,
|
|
242
238
|
"aria-checked": indeterminate ? 'mixed' : void 0,
|
|
243
|
-
css: styles
|
|
239
|
+
css: styles?.input,
|
|
244
240
|
onChange: this.handleChange,
|
|
245
241
|
onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
|
|
246
242
|
onFocus: createChainedFunction(onFocus, this.handleFocus),
|
|
@@ -248,7 +244,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
|
|
|
248
244
|
checked: this.checked
|
|
249
245
|
})), jsx("label", {
|
|
250
246
|
htmlFor: this.id,
|
|
251
|
-
css: styles
|
|
247
|
+
css: styles?.control
|
|
252
248
|
}, this.renderFacade(), this.renderMessages()));
|
|
253
249
|
/* eslint-enable jsx-a11y/mouse-events-have-key-events */
|
|
254
250
|
}
|
|
@@ -40,15 +40,11 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
componentDidMount() {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
43
|
+
this.props.makeStyles?.();
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
componentDidUpdate() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
47
|
+
this.props.makeStyles?.();
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
renderIcon() {
|
|
@@ -72,17 +68,17 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
|
|
|
72
68
|
}
|
|
73
69
|
|
|
74
70
|
render() {
|
|
75
|
-
const _this$
|
|
76
|
-
children = _this$
|
|
77
|
-
styles = _this$
|
|
71
|
+
const _this$props = this.props,
|
|
72
|
+
children = _this$props.children,
|
|
73
|
+
styles = _this$props.styles;
|
|
78
74
|
return (0, _emotion.jsx)("span", {
|
|
79
|
-
css: styles
|
|
75
|
+
css: styles?.checkboxFacade,
|
|
80
76
|
ref: this.handleRef
|
|
81
77
|
}, (0, _emotion.jsx)("span", {
|
|
82
|
-
css: styles
|
|
78
|
+
css: styles?.facade,
|
|
83
79
|
"aria-hidden": "true"
|
|
84
80
|
}, this.renderIcon()), (0, _emotion.jsx)("span", {
|
|
85
|
-
css: styles
|
|
81
|
+
css: styles?.label
|
|
86
82
|
}, children));
|
|
87
83
|
}
|
|
88
84
|
|
|
@@ -51,30 +51,30 @@ const generateComponentTheme = theme => {
|
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
const componentVariables = {
|
|
54
|
-
color: colors
|
|
55
|
-
borderWidth: borders
|
|
56
|
-
borderColor: colors
|
|
57
|
-
borderRadius: borders
|
|
58
|
-
background: colors
|
|
59
|
-
marginRight: spacing
|
|
60
|
-
padding: spacing
|
|
61
|
-
checkedBackground: colors
|
|
62
|
-
checkedBorderColor: colors
|
|
63
|
-
hoverBorderColor: colors
|
|
64
|
-
focusBorderColor: colors
|
|
65
|
-
focusBorderWidth: borders
|
|
66
|
-
focusBorderStyle: borders
|
|
67
|
-
labelColor: colors
|
|
68
|
-
checkedLabelColor: colors
|
|
69
|
-
labelFontFamily: typography
|
|
70
|
-
labelFontWeight: typography
|
|
71
|
-
labelLineHeight: typography
|
|
54
|
+
color: colors?.textLightest,
|
|
55
|
+
borderWidth: borders?.widthSmall,
|
|
56
|
+
borderColor: colors?.borderMedium,
|
|
57
|
+
borderRadius: borders?.radiusMedium,
|
|
58
|
+
background: colors?.backgroundLightest,
|
|
59
|
+
marginRight: spacing?.xSmall,
|
|
60
|
+
padding: spacing?.xxxSmall,
|
|
61
|
+
checkedBackground: colors?.backgroundDarkest,
|
|
62
|
+
checkedBorderColor: colors?.borderDarkest,
|
|
63
|
+
hoverBorderColor: colors?.borderDarkest,
|
|
64
|
+
focusBorderColor: colors?.borderBrand,
|
|
65
|
+
focusBorderWidth: borders?.widthMedium,
|
|
66
|
+
focusBorderStyle: borders?.style,
|
|
67
|
+
labelColor: colors?.textDarkest,
|
|
68
|
+
checkedLabelColor: colors?.textDarkest,
|
|
69
|
+
labelFontFamily: typography?.fontFamily,
|
|
70
|
+
labelFontWeight: typography?.fontWeightNormal,
|
|
71
|
+
labelLineHeight: typography?.lineHeightCondensed,
|
|
72
72
|
facadeSizeSmall: '1rem',
|
|
73
73
|
facadeSizeMedium: '1.25rem',
|
|
74
74
|
facadeSizeLarge: '1.75rem',
|
|
75
|
-
labelFontSizeSmall: typography
|
|
76
|
-
labelFontSizeMedium: typography
|
|
77
|
-
labelFontSizeLarge: typography
|
|
75
|
+
labelFontSizeSmall: typography?.fontSizeSmall,
|
|
76
|
+
labelFontSizeMedium: typography?.fontSizeMedium,
|
|
77
|
+
labelFontSizeLarge: typography?.fontSizeLarge,
|
|
78
78
|
iconSizeSmall: '0.625rem',
|
|
79
79
|
iconSizeMedium: '0.75rem',
|
|
80
80
|
iconSizeLarge: '1rem'
|
|
@@ -40,56 +40,52 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
componentDidMount() {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
43
|
+
this.props.makeStyles?.();
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
componentDidUpdate() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
47
|
+
this.props.makeStyles?.();
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
renderIcon() {
|
|
55
|
-
const _this$
|
|
56
|
-
styles = _this$
|
|
57
|
-
checked = _this$
|
|
51
|
+
const _this$props = this.props,
|
|
52
|
+
styles = _this$props.styles,
|
|
53
|
+
checked = _this$props.checked;
|
|
58
54
|
|
|
59
55
|
if (checked) {
|
|
60
56
|
return (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
|
|
61
|
-
css: styles
|
|
57
|
+
css: styles?.iconSVG
|
|
62
58
|
});
|
|
63
59
|
} else {
|
|
64
60
|
return (0, _emotion.jsx)(_IconXSolid.IconXSolid, {
|
|
65
|
-
css: styles
|
|
61
|
+
css: styles?.iconSVG
|
|
66
62
|
});
|
|
67
63
|
}
|
|
68
64
|
}
|
|
69
65
|
|
|
70
66
|
renderLabel() {
|
|
71
|
-
const _this$
|
|
72
|
-
children = _this$
|
|
73
|
-
styles = _this$
|
|
67
|
+
const _this$props2 = this.props,
|
|
68
|
+
children = _this$props2.children,
|
|
69
|
+
styles = _this$props2.styles;
|
|
74
70
|
return (0, _emotion.jsx)("span", {
|
|
75
|
-
css: styles
|
|
71
|
+
css: styles?.label
|
|
76
72
|
}, children);
|
|
77
73
|
}
|
|
78
74
|
|
|
79
75
|
render() {
|
|
80
|
-
const _this$
|
|
81
|
-
labelPlacement = _this$
|
|
82
|
-
styles = _this$
|
|
76
|
+
const _this$props3 = this.props,
|
|
77
|
+
labelPlacement = _this$props3.labelPlacement,
|
|
78
|
+
styles = _this$props3.styles;
|
|
83
79
|
return (0, _emotion.jsx)("span", {
|
|
84
|
-
css: styles
|
|
80
|
+
css: styles?.toggleFacade,
|
|
85
81
|
ref: this.handleRef
|
|
86
82
|
}, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), (0, _emotion.jsx)("span", {
|
|
87
|
-
css: styles
|
|
83
|
+
css: styles?.facade,
|
|
88
84
|
"aria-hidden": "true"
|
|
89
85
|
}, (0, _emotion.jsx)("span", {
|
|
90
|
-
css: styles
|
|
86
|
+
css: styles?.icon
|
|
91
87
|
}, (0, _emotion.jsx)("span", {
|
|
92
|
-
css: styles
|
|
88
|
+
css: styles?.iconToggle
|
|
93
89
|
}, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
|
|
94
90
|
}
|
|
95
91
|
|
|
@@ -48,35 +48,35 @@ const generateComponentTheme = theme => {
|
|
|
48
48
|
labelColor: theme['ic-brand-font-color-dark']
|
|
49
49
|
},
|
|
50
50
|
'canvas-high-contrast': {
|
|
51
|
-
background: colors
|
|
52
|
-
borderColor: colors
|
|
51
|
+
background: colors?.backgroundDarkest,
|
|
52
|
+
borderColor: colors?.borderDarkest
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
55
|
const componentVariables = {
|
|
56
|
-
color: colors
|
|
57
|
-
background: colors
|
|
58
|
-
borderColor: colors
|
|
59
|
-
borderWidth: borders
|
|
56
|
+
color: colors?.textLightest,
|
|
57
|
+
background: colors?.backgroundLight,
|
|
58
|
+
borderColor: colors?.borderMedium,
|
|
59
|
+
borderWidth: borders?.widthSmall,
|
|
60
60
|
borderRadius: '4rem',
|
|
61
|
-
marginEnd: spacing
|
|
62
|
-
marginStart: spacing
|
|
63
|
-
marginVertical: spacing
|
|
64
|
-
checkedBackground: colors
|
|
65
|
-
uncheckedIconColor: colors
|
|
66
|
-
checkedIconColor: colors
|
|
67
|
-
focusOutlineColor: colors
|
|
68
|
-
focusBorderWidth: borders
|
|
69
|
-
focusBorderStyle: borders
|
|
70
|
-
toggleBackground: colors
|
|
71
|
-
toggleShadow: shadows
|
|
72
|
-
toggleSize: forms
|
|
73
|
-
labelColor: colors
|
|
74
|
-
labelFontFamily: typography
|
|
75
|
-
labelFontWeight: typography
|
|
76
|
-
labelLineHeight: typography
|
|
77
|
-
labelFontSizeSmall: typography
|
|
78
|
-
labelFontSizeMedium: typography
|
|
79
|
-
labelFontSizeLarge: typography
|
|
61
|
+
marginEnd: spacing?.small,
|
|
62
|
+
marginStart: spacing?.small,
|
|
63
|
+
marginVertical: spacing?.xSmall,
|
|
64
|
+
checkedBackground: colors?.backgroundSuccess,
|
|
65
|
+
uncheckedIconColor: colors?.textDarkest,
|
|
66
|
+
checkedIconColor: colors?.textSuccess,
|
|
67
|
+
focusOutlineColor: colors?.borderBrand,
|
|
68
|
+
focusBorderWidth: borders?.widthMedium,
|
|
69
|
+
focusBorderStyle: borders?.style,
|
|
70
|
+
toggleBackground: colors?.backgroundLightest,
|
|
71
|
+
toggleShadow: shadows?.depth1,
|
|
72
|
+
toggleSize: forms?.inputHeightSmall,
|
|
73
|
+
labelColor: colors?.textDarkest,
|
|
74
|
+
labelFontFamily: typography?.fontFamily,
|
|
75
|
+
labelFontWeight: typography?.fontWeightNormal,
|
|
76
|
+
labelLineHeight: typography?.lineHeightCondensed,
|
|
77
|
+
labelFontSizeSmall: typography?.fontSizeSmall,
|
|
78
|
+
labelFontSizeMedium: typography?.fontSizeMedium,
|
|
79
|
+
labelFontSizeLarge: typography?.fontSizeLarge
|
|
80
80
|
};
|
|
81
81
|
return { ...componentVariables,
|
|
82
82
|
...themeSpecificStyle[themeName]
|