@instructure/ui-buttons 8.17.1-snapshot.21 → 8.17.1-snapshot.71

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.
Files changed (10) hide show
  1. package/es/BaseButton/index.js +43 -47
  2. package/es/BaseButton/theme.js +43 -43
  3. package/es/CloseButton/index.js +18 -22
  4. package/es/CloseButton/theme.js +4 -4
  5. package/lib/BaseButton/index.js +43 -47
  6. package/lib/BaseButton/theme.js +43 -43
  7. package/lib/CloseButton/index.js +18 -22
  8. package/lib/CloseButton/theme.js +4 -4
  9. package/package.json +21 -21
  10. package/tsconfig.build.tsbuildinfo +1 -1
package/es/BaseButton/index.js CHANGED
@@ -108,15 +108,11 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
108
108
  }
109
109
 
110
110
  componentDidMount() {
111
- var _this$props$makeStyle, _this$props2;
112
-
113
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
111
+ this.props.makeStyles?.(this.makeStylesVariables);
114
112
  }
115
113
 
116
114
  componentDidUpdate() {
117
- var _this$props$makeStyle2, _this$props3;
118
-
119
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
115
+ this.props.makeStyles?.(this.makeStylesVariables);
120
116
  }
121
117
 
122
118
  get _rootElement() {
@@ -131,9 +127,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
131
127
  }
132
128
 
133
129
  get hasOnlyIconVisible() {
134
- const _this$props4 = this.props,
135
- children = _this$props4.children,
136
- renderIcon = _this$props4.renderIcon;
130
+ const _this$props2 = this.props,
131
+ children = _this$props2.children,
132
+ renderIcon = _this$props2.renderIcon;
137
133
  return !!(renderIcon && !hasVisibleChildren(children));
138
134
  }
139
135
 
@@ -172,10 +168,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
172
168
  }
173
169
 
174
170
  get focusColor() {
175
- const _this$props5 = this.props,
176
- color = _this$props5.color,
177
- focusColor = _this$props5.focusColor,
178
- withBackground = _this$props5.withBackground; // Give user specified focusColor preference
171
+ const _this$props3 = this.props,
172
+ color = _this$props3.color,
173
+ focusColor = _this$props3.focusColor,
174
+ withBackground = _this$props3.withBackground; // Give user specified focusColor preference
179
175
 
180
176
  if (focusColor) {
181
177
  return focusColor;
@@ -201,12 +197,12 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
201
197
  }
202
198
 
203
199
  renderChildren() {
204
- const _this$props6 = this.props,
205
- renderIcon = _this$props6.renderIcon,
206
- children = _this$props6.children,
207
- styles = _this$props6.styles;
200
+ const _this$props4 = this.props,
201
+ renderIcon = _this$props4.renderIcon,
202
+ children = _this$props4.children,
203
+ styles = _this$props4.styles;
208
204
  const wrappedChildren = jsx("span", {
209
- css: styles === null || styles === void 0 ? void 0 : styles.children
205
+ css: styles?.children
210
206
  }, children);
211
207
 
212
208
  if (!renderIcon) {
@@ -215,45 +211,45 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
215
211
 
216
212
  const hasOnlyIconVisible = this.hasOnlyIconVisible;
217
213
  const wrappedIcon = jsx("span", {
218
- css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
214
+ css: styles?.iconSVG
219
215
  }, callRenderProp(renderIcon));
220
216
  const flexChildren = hasOnlyIconVisible ? jsx("span", {
221
- css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
217
+ css: styles?.iconOnly
222
218
  }, wrappedIcon, children) : [jsx("span", {
223
219
  key: "icon",
224
- css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
220
+ css: styles?.iconWrapper
225
221
  }, wrappedIcon), jsx("span", {
226
222
  key: "children",
227
- css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
223
+ css: styles?.childrenWrapper
228
224
  }, wrappedChildren)];
229
225
  return jsx("span", {
230
- css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
226
+ css: styles?.childrenLayout
231
227
  }, flexChildren);
232
228
  }
233
229
 
234
230
  render() {
235
- const _this$props7 = this.props,
236
- type = _this$props7.type,
237
- size = _this$props7.size,
238
- elementRef = _this$props7.elementRef,
239
- as = _this$props7.as,
240
- href = _this$props7.href,
241
- color = _this$props7.color,
242
- focusColor = _this$props7.focusColor,
243
- textAlign = _this$props7.textAlign,
244
- shape = _this$props7.shape,
245
- display = _this$props7.display,
246
- withBackground = _this$props7.withBackground,
247
- withBorder = _this$props7.withBorder,
248
- isCondensed = _this$props7.isCondensed,
249
- margin = _this$props7.margin,
250
- cursor = _this$props7.cursor,
251
- onClick = _this$props7.onClick,
252
- renderIcon = _this$props7.renderIcon,
253
- tabIndex = _this$props7.tabIndex,
254
- styles = _this$props7.styles,
255
- makeStyles = _this$props7.makeStyles,
256
- props = _objectWithoutProperties(_this$props7, _excluded);
231
+ const _this$props5 = this.props,
232
+ type = _this$props5.type,
233
+ size = _this$props5.size,
234
+ elementRef = _this$props5.elementRef,
235
+ as = _this$props5.as,
236
+ href = _this$props5.href,
237
+ color = _this$props5.color,
238
+ focusColor = _this$props5.focusColor,
239
+ textAlign = _this$props5.textAlign,
240
+ shape = _this$props5.shape,
241
+ display = _this$props5.display,
242
+ withBackground = _this$props5.withBackground,
243
+ withBorder = _this$props5.withBorder,
244
+ isCondensed = _this$props5.isCondensed,
245
+ margin = _this$props5.margin,
246
+ cursor = _this$props5.cursor,
247
+ onClick = _this$props5.onClick,
248
+ renderIcon = _this$props5.renderIcon,
249
+ tabIndex = _this$props5.tabIndex,
250
+ styles = _this$props5.styles,
251
+ makeStyles = _this$props5.makeStyles,
252
+ props = _objectWithoutProperties(_this$props5, _excluded);
257
253
 
258
254
  const isDisabled = this.isDisabled,
259
255
  isEnabled = this.isEnabled,
@@ -279,9 +275,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
279
275
  role: onClick && as !== 'button' ? 'button' : void 0,
280
276
  tabIndex: onClick && as ? tabIndexNumber || 0 : tabIndexNumber,
281
277
  disabled: isDisabled || isReadOnly,
282
- css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null
278
+ css: isEnabled ? styles?.baseButton : null
283
279
  }), jsx("span", {
284
- css: styles === null || styles === void 0 ? void 0 : styles.content
280
+ css: styles?.content
285
281
  }, this.renderChildren()));
286
282
  }
287
283
 
package/es/BaseButton/theme.js CHANGED
@@ -72,8 +72,8 @@ const generateComponentTheme = theme => {
72
72
  primaryGhostHoverBackground: alpha(theme['ic-brand-button--primary-bgd'], 10)
73
73
  },
74
74
  'canvas-high-contrast': {
75
- secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
76
- primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium
75
+ secondaryBorderColor: colors?.borderMedium,
76
+ primaryInverseBorderColor: colors?.borderMedium
77
77
  },
78
78
  instructure: {
79
79
  borderRadius: '999em',
@@ -89,29 +89,29 @@ const generateComponentTheme = theme => {
89
89
  const componentVariables = {
90
90
  transform: 'none',
91
91
  hoverTransform: 'none',
92
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
93
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
92
+ fontFamily: typography?.fontFamily,
93
+ fontWeight: typography?.fontWeightNormal,
94
94
  textTransform: 'none',
95
95
  letterSpacing: 'normal',
96
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
97
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
98
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
99
- smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
100
- smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
101
- smallPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
96
+ borderRadius: borders?.radiusMedium,
97
+ borderStyle: borders?.style,
98
+ borderWidth: borders?.widthSmall,
99
+ smallHeight: forms?.inputHeightSmall,
100
+ smallFontSize: typography?.fontSizeSmall,
101
+ smallPaddingHorizontal: spacing?.xSmall,
102
102
  smallPaddingTop: '0.375rem',
103
103
  smallPaddingBottom: '0.3125rem',
104
- mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
105
- mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
106
- mediumPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.small,
104
+ mediumHeight: forms?.inputHeightMedium,
105
+ mediumFontSize: typography?.fontSizeMedium,
106
+ mediumPaddingHorizontal: spacing?.small,
107
107
  mediumPaddingTop: '0.5625rem',
108
108
  mediumPaddingBottom: '0.5625rem',
109
- largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
110
- largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
111
- largePaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
109
+ largeHeight: forms?.inputHeightLarge,
110
+ largeFontSize: typography?.fontSizeLarge,
111
+ largePaddingHorizontal: spacing?.medium,
112
112
  largePaddingTop: '0.6875rem',
113
113
  largePaddingBottom: '0.6875rem',
114
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit,
114
+ lineHeight: typography?.lineHeightFit,
115
115
  iconSizeSmall: '1rem',
116
116
  iconSizeMedium: '1.25rem',
117
117
  iconSizeLarge: '1.625rem',
@@ -119,47 +119,47 @@ const generateComponentTheme = theme => {
119
119
  iconTextGapCondensed: spacing.xxSmall,
120
120
  ...generateButtonThemeVars({
121
121
  style: 'primary',
122
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
123
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
124
- textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
125
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand
122
+ backgroundColor: colors?.backgroundBrand,
123
+ borderColor: colors?.borderBrand,
124
+ textColor: colors?.textLightest,
125
+ ghostTextColor: colors?.textBrand
126
126
  }),
127
127
  ...generateButtonThemeVars({
128
128
  style: 'secondary',
129
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
130
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLight,
131
- ghostBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
132
- textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
133
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest
129
+ backgroundColor: colors?.backgroundLight,
130
+ borderColor: colors?.borderLight,
131
+ ghostBorderColor: colors?.borderDarkest,
132
+ textColor: colors?.textDarkest,
133
+ ghostTextColor: colors?.textDarkest
134
134
  }),
135
135
  ...generateButtonThemeVars({
136
136
  style: 'success',
137
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
138
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
139
- textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
140
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
137
+ backgroundColor: colors?.backgroundSuccess,
138
+ borderColor: colors?.borderSuccess,
139
+ textColor: colors?.textLightest,
140
+ ghostTextColor: colors?.textSuccess
141
141
  }),
142
142
  ...generateButtonThemeVars({
143
143
  style: 'danger',
144
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
145
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
146
- textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
147
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
144
+ backgroundColor: colors?.backgroundDanger,
145
+ borderColor: colors?.borderDanger,
146
+ textColor: colors?.textLightest,
147
+ ghostTextColor: colors?.textDanger
148
148
  }),
149
149
  ...generateButtonThemeVars({
150
150
  style: 'primaryInverse',
151
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
152
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
153
- textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
154
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
151
+ backgroundColor: colors?.backgroundLightest,
152
+ borderColor: colors?.borderLightest,
153
+ textColor: colors?.textDarkest,
154
+ ghostTextColor: colors?.textLightest
155
155
  }),
156
156
  // Overrides for primary-inverse to match what was previously the `light` button variant
157
- primaryInverseBorderColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
158
- primaryInverseHoverBackground: darken(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
159
- primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
160
- primaryInverseActiveBoxShadow: `${activeShadow} ${darken(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
157
+ primaryInverseBorderColor: darken(colors?.borderLight, 10),
158
+ primaryInverseHoverBackground: darken(colors?.backgroundLightest, 5),
159
+ primaryInverseActiveBackground: colors?.backgroundLightest,
160
+ primaryInverseActiveBoxShadow: `${activeShadow} ${darken(colors?.borderLightest, 25)}`,
161
161
  // Overrides for ghost hover states to ensure correct color contrast for a11y
162
- successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
162
+ successGhostHoverBackground: alpha(colors?.textSuccess, 1)
163
163
  };
164
164
  return { ...componentVariables,
165
165
  ...themeSpecificStyle[themeName]
package/es/CloseButton/index.js CHANGED
@@ -61,15 +61,11 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
61
61
  }
62
62
 
63
63
  componentDidMount() {
64
- var _this$props$makeStyle, _this$props;
65
-
66
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
64
+ this.props.makeStyles?.();
67
65
  }
68
66
 
69
67
  componentDidUpdate() {
70
- var _this$props$makeStyle2, _this$props2;
71
-
72
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
68
+ this.props.makeStyles?.();
73
69
  }
74
70
 
75
71
  get interaction() {
@@ -84,24 +80,24 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
84
80
  }
85
81
 
86
82
  render() {
87
- const _this$props3 = this.props,
88
- screenReaderLabel = _this$props3.screenReaderLabel,
89
- elementRef = _this$props3.elementRef,
90
- size = _this$props3.size,
91
- onClick = _this$props3.onClick,
92
- margin = _this$props3.margin,
93
- placement = _this$props3.placement,
94
- offset = _this$props3.offset,
95
- type = _this$props3.type,
96
- as = _this$props3.as,
97
- href = _this$props3.href,
98
- cursor = _this$props3.cursor,
99
- tabIndex = _this$props3.tabIndex,
100
- styles = _this$props3.styles,
101
- props = _objectWithoutProperties(_this$props3, _excluded);
83
+ const _this$props = this.props,
84
+ screenReaderLabel = _this$props.screenReaderLabel,
85
+ elementRef = _this$props.elementRef,
86
+ size = _this$props.size,
87
+ onClick = _this$props.onClick,
88
+ margin = _this$props.margin,
89
+ placement = _this$props.placement,
90
+ offset = _this$props.offset,
91
+ type = _this$props.type,
92
+ as = _this$props.as,
93
+ href = _this$props.href,
94
+ cursor = _this$props.cursor,
95
+ tabIndex = _this$props.tabIndex,
96
+ styles = _this$props.styles,
97
+ props = _objectWithoutProperties(_this$props, _excluded);
102
98
 
103
99
  return jsx("span", Object.assign({}, passthroughProps(props), {
104
- css: styles === null || styles === void 0 ? void 0 : styles.closeButton
100
+ css: styles?.closeButton
105
101
  }), jsx(BaseButton, {
106
102
  renderIcon: IconXSolid,
107
103
  elementRef: this.handleRef,
package/es/CloseButton/theme.js CHANGED
@@ -31,10 +31,10 @@ const generateComponentTheme = theme => {
31
31
  const spacing = theme.spacing,
32
32
  stacking = theme.stacking;
33
33
  const componentVariables = {
34
- offsetMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
35
- offsetSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
36
- offsetXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
37
- zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
34
+ offsetMedium: spacing?.medium,
35
+ offsetSmall: spacing?.small,
36
+ offsetXSmall: spacing?.xSmall,
37
+ zIndex: stacking?.above
38
38
  };
39
39
  return { ...componentVariables
40
40
  };
package/lib/BaseButton/index.js CHANGED
@@ -112,15 +112,11 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
112
112
  }
113
113
 
114
114
  componentDidMount() {
115
- var _this$props$makeStyle, _this$props2;
116
-
117
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
115
+ this.props.makeStyles?.(this.makeStylesVariables);
118
116
  }
119
117
 
120
118
  componentDidUpdate() {
121
- var _this$props$makeStyle2, _this$props3;
122
-
123
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
119
+ this.props.makeStyles?.(this.makeStylesVariables);
124
120
  }
125
121
 
126
122
  get _rootElement() {
@@ -135,9 +131,9 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
135
131
  }
136
132
 
137
133
  get hasOnlyIconVisible() {
138
- const _this$props4 = this.props,
139
- children = _this$props4.children,
140
- renderIcon = _this$props4.renderIcon;
134
+ const _this$props2 = this.props,
135
+ children = _this$props2.children,
136
+ renderIcon = _this$props2.renderIcon;
141
137
  return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
142
138
  }
143
139
 
@@ -176,10 +172,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
176
172
  }
177
173
 
178
174
  get focusColor() {
179
- const _this$props5 = this.props,
180
- color = _this$props5.color,
181
- focusColor = _this$props5.focusColor,
182
- withBackground = _this$props5.withBackground; // Give user specified focusColor preference
175
+ const _this$props3 = this.props,
176
+ color = _this$props3.color,
177
+ focusColor = _this$props3.focusColor,
178
+ withBackground = _this$props3.withBackground; // Give user specified focusColor preference
183
179
 
184
180
  if (focusColor) {
185
181
  return focusColor;
@@ -205,12 +201,12 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
205
201
  }
206
202
 
207
203
  renderChildren() {
208
- const _this$props6 = this.props,
209
- renderIcon = _this$props6.renderIcon,
210
- children = _this$props6.children,
211
- styles = _this$props6.styles;
204
+ const _this$props4 = this.props,
205
+ renderIcon = _this$props4.renderIcon,
206
+ children = _this$props4.children,
207
+ styles = _this$props4.styles;
212
208
  const wrappedChildren = (0, _emotion.jsx)("span", {
213
- css: styles === null || styles === void 0 ? void 0 : styles.children
209
+ css: styles?.children
214
210
  }, children);
215
211
 
216
212
  if (!renderIcon) {
@@ -219,45 +215,45 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
219
215
 
220
216
  const hasOnlyIconVisible = this.hasOnlyIconVisible;
221
217
  const wrappedIcon = (0, _emotion.jsx)("span", {
222
- css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
218
+ css: styles?.iconSVG
223
219
  }, (0, _callRenderProp.callRenderProp)(renderIcon));
224
220
  const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
225
- css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
221
+ css: styles?.iconOnly
226
222
  }, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
227
223
  key: "icon",
228
- css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
224
+ css: styles?.iconWrapper
229
225
  }, wrappedIcon), (0, _emotion.jsx)("span", {
230
226
  key: "children",
231
- css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
227
+ css: styles?.childrenWrapper
232
228
  }, wrappedChildren)];
233
229
  return (0, _emotion.jsx)("span", {
234
- css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
230
+ css: styles?.childrenLayout
235
231
  }, flexChildren);
236
232
  }
237
233
 
238
234
  render() {
239
- const _this$props7 = this.props,
240
- type = _this$props7.type,
241
- size = _this$props7.size,
242
- elementRef = _this$props7.elementRef,
243
- as = _this$props7.as,
244
- href = _this$props7.href,
245
- color = _this$props7.color,
246
- focusColor = _this$props7.focusColor,
247
- textAlign = _this$props7.textAlign,
248
- shape = _this$props7.shape,
249
- display = _this$props7.display,
250
- withBackground = _this$props7.withBackground,
251
- withBorder = _this$props7.withBorder,
252
- isCondensed = _this$props7.isCondensed,
253
- margin = _this$props7.margin,
254
- cursor = _this$props7.cursor,
255
- onClick = _this$props7.onClick,
256
- renderIcon = _this$props7.renderIcon,
257
- tabIndex = _this$props7.tabIndex,
258
- styles = _this$props7.styles,
259
- makeStyles = _this$props7.makeStyles,
260
- props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
235
+ const _this$props5 = this.props,
236
+ type = _this$props5.type,
237
+ size = _this$props5.size,
238
+ elementRef = _this$props5.elementRef,
239
+ as = _this$props5.as,
240
+ href = _this$props5.href,
241
+ color = _this$props5.color,
242
+ focusColor = _this$props5.focusColor,
243
+ textAlign = _this$props5.textAlign,
244
+ shape = _this$props5.shape,
245
+ display = _this$props5.display,
246
+ withBackground = _this$props5.withBackground,
247
+ withBorder = _this$props5.withBorder,
248
+ isCondensed = _this$props5.isCondensed,
249
+ margin = _this$props5.margin,
250
+ cursor = _this$props5.cursor,
251
+ onClick = _this$props5.onClick,
252
+ renderIcon = _this$props5.renderIcon,
253
+ tabIndex = _this$props5.tabIndex,
254
+ styles = _this$props5.styles,
255
+ makeStyles = _this$props5.makeStyles,
256
+ props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
261
257
  const isDisabled = this.isDisabled,
262
258
  isEnabled = this.isEnabled,
263
259
  isReadOnly = this.isReadOnly;
@@ -282,9 +278,9 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
282
278
  role: onClick && as !== 'button' ? 'button' : void 0,
283
279
  tabIndex: onClick && as ? tabIndexNumber || 0 : tabIndexNumber,
284
280
  disabled: isDisabled || isReadOnly,
285
- css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null
281
+ css: isEnabled ? styles?.baseButton : null
286
282
  }), (0, _emotion.jsx)("span", {
287
- css: styles === null || styles === void 0 ? void 0 : styles.content
283
+ css: styles?.content
288
284
  }, this.renderChildren()));
289
285
  }
290
286
 
package/lib/BaseButton/theme.js CHANGED
@@ -82,8 +82,8 @@ const generateComponentTheme = theme => {
82
82
  primaryGhostHoverBackground: (0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 10)
83
83
  },
84
84
  'canvas-high-contrast': {
85
- secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
86
- primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium
85
+ secondaryBorderColor: colors?.borderMedium,
86
+ primaryInverseBorderColor: colors?.borderMedium
87
87
  },
88
88
  instructure: {
89
89
  borderRadius: '999em',
@@ -99,29 +99,29 @@ const generateComponentTheme = theme => {
99
99
  const componentVariables = {
100
100
  transform: 'none',
101
101
  hoverTransform: 'none',
102
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
103
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
102
+ fontFamily: typography?.fontFamily,
103
+ fontWeight: typography?.fontWeightNormal,
104
104
  textTransform: 'none',
105
105
  letterSpacing: 'normal',
106
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
107
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
108
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
109
- smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
110
- smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
111
- smallPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
106
+ borderRadius: borders?.radiusMedium,
107
+ borderStyle: borders?.style,
108
+ borderWidth: borders?.widthSmall,
109
+ smallHeight: forms?.inputHeightSmall,
110
+ smallFontSize: typography?.fontSizeSmall,
111
+ smallPaddingHorizontal: spacing?.xSmall,
112
112
  smallPaddingTop: '0.375rem',
113
113
  smallPaddingBottom: '0.3125rem',
114
- mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
115
- mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
116
- mediumPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.small,
114
+ mediumHeight: forms?.inputHeightMedium,
115
+ mediumFontSize: typography?.fontSizeMedium,
116
+ mediumPaddingHorizontal: spacing?.small,
117
117
  mediumPaddingTop: '0.5625rem',
118
118
  mediumPaddingBottom: '0.5625rem',
119
- largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
120
- largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
121
- largePaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
119
+ largeHeight: forms?.inputHeightLarge,
120
+ largeFontSize: typography?.fontSizeLarge,
121
+ largePaddingHorizontal: spacing?.medium,
122
122
  largePaddingTop: '0.6875rem',
123
123
  largePaddingBottom: '0.6875rem',
124
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit,
124
+ lineHeight: typography?.lineHeightFit,
125
125
  iconSizeSmall: '1rem',
126
126
  iconSizeMedium: '1.25rem',
127
127
  iconSizeLarge: '1.625rem',
@@ -129,47 +129,47 @@ const generateComponentTheme = theme => {
129
129
  iconTextGapCondensed: spacing.xxSmall,
130
130
  ...generateButtonThemeVars({
131
131
  style: 'primary',
132
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
133
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
134
- textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
135
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand
132
+ backgroundColor: colors?.backgroundBrand,
133
+ borderColor: colors?.borderBrand,
134
+ textColor: colors?.textLightest,
135
+ ghostTextColor: colors?.textBrand
136
136
  }),
137
137
  ...generateButtonThemeVars({
138
138
  style: 'secondary',
139
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
140
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLight,
141
- ghostBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
142
- textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
143
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest
139
+ backgroundColor: colors?.backgroundLight,
140
+ borderColor: colors?.borderLight,
141
+ ghostBorderColor: colors?.borderDarkest,
142
+ textColor: colors?.textDarkest,
143
+ ghostTextColor: colors?.textDarkest
144
144
  }),
145
145
  ...generateButtonThemeVars({
146
146
  style: 'success',
147
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
148
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
149
- textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
150
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
147
+ backgroundColor: colors?.backgroundSuccess,
148
+ borderColor: colors?.borderSuccess,
149
+ textColor: colors?.textLightest,
150
+ ghostTextColor: colors?.textSuccess
151
151
  }),
152
152
  ...generateButtonThemeVars({
153
153
  style: 'danger',
154
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
155
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
156
- textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
157
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
154
+ backgroundColor: colors?.backgroundDanger,
155
+ borderColor: colors?.borderDanger,
156
+ textColor: colors?.textLightest,
157
+ ghostTextColor: colors?.textDanger
158
158
  }),
159
159
  ...generateButtonThemeVars({
160
160
  style: 'primaryInverse',
161
- backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
162
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
163
- textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
164
- ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
161
+ backgroundColor: colors?.backgroundLightest,
162
+ borderColor: colors?.borderLightest,
163
+ textColor: colors?.textDarkest,
164
+ ghostTextColor: colors?.textLightest
165
165
  }),
166
166
  // Overrides for primary-inverse to match what was previously the `light` button variant
167
- primaryInverseBorderColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
168
- primaryInverseHoverBackground: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
169
- primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
170
- primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
167
+ primaryInverseBorderColor: (0, _darken.darken)(colors?.borderLight, 10),
168
+ primaryInverseHoverBackground: (0, _darken.darken)(colors?.backgroundLightest, 5),
169
+ primaryInverseActiveBackground: colors?.backgroundLightest,
170
+ primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _darken.darken)(colors?.borderLightest, 25)}`,
171
171
  // Overrides for ghost hover states to ensure correct color contrast for a11y
172
- successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
172
+ successGhostHoverBackground: (0, _alpha.alpha)(colors?.textSuccess, 1)
173
173
  };
174
174
  return { ...componentVariables,
175
175
  ...themeSpecificStyle[themeName]