@khanacademy/wonder-blocks-button 4.0.12 → 4.0.14

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 (8) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/index.js +33 -27
  3. package/dist/index.js +33 -27
  4. package/package.json +6 -6
  5. package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap +144 -216
  6. package/src/components/__tests__/button.test.tsx +19 -0
  7. package/src/components/button-core.tsx +43 -41
  8. package/tsconfig-build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @khanacademy/wonder-blocks-button
2
2
 
3
+ ## 4.0.14
4
+
5
+ ### Patch Changes
6
+
7
+ - e0265198: Updated focus state for tertiary button to a border instead of underline
8
+ - 0f21caaa: Truncate text for buttons with icons
9
+ - Updated dependencies [ad8beb23]
10
+ - @khanacademy/wonder-blocks-clickable@3.1.0
11
+
12
+ ## 4.0.13
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [d4c412b5]
17
+ - @khanacademy/wonder-blocks-core@5.2.3
18
+ - @khanacademy/wonder-blocks-clickable@3.0.13
19
+ - @khanacademy/wonder-blocks-icon@2.0.13
20
+ - @khanacademy/wonder-blocks-progress-spinner@2.0.13
21
+ - @khanacademy/wonder-blocks-typography@2.0.13
22
+
3
23
  ## 4.0.12
4
24
 
5
25
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -69,7 +69,7 @@ class ButtonCore extends React.Component {
69
69
  const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
70
70
  const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
71
71
  const disabled = spinner || disabledProp;
72
- const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
72
+ const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && !pressed && focused && [buttonStyles.focus, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
73
73
  const commonProps = _extends({
74
74
  "data-test-id": testId,
75
75
  id: id,
@@ -79,19 +79,22 @@ class ButtonCore extends React.Component {
79
79
  const Label = size === "small" ? LabelSmall : LabelLarge;
80
80
  const iconSize = size === "small" ? "small" : "medium";
81
81
  const label = React.createElement(Label, {
82
- style: [sharedStyles.text, size === "large" && sharedStyles.largeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && disabled && focused && [buttonStyles.focus, buttonStyles.disabledFocus]]
83
- }, icon && React.createElement(Icon, {
84
- size: iconSize,
85
- color: "currentColor",
86
- icon: icon,
87
- style: sharedStyles.icon
88
- }), children);
82
+ style: [sharedStyles.text, size === "large" && sharedStyles.largeText, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
83
+ testId: testId ? `${testId}-inner-label` : undefined
84
+ }, children);
89
85
  const sizeMapping = {
90
86
  medium: "small",
91
87
  small: "xsmall",
92
88
  large: "medium"
93
89
  };
94
- const contents = React.createElement(React.Fragment, null, label, spinner && React.createElement(CircularSpinner, {
90
+ const contents = React.createElement(React.Fragment, null, icon && React.createElement(Icon, {
91
+ size: iconSize,
92
+ color: "currentColor",
93
+ icon: icon,
94
+ style: sharedStyles.icon,
95
+ "aria-hidden": "true",
96
+ testId: testId ? `${testId}-icon` : undefined
97
+ }), label, spinner && React.createElement(CircularSpinner, {
95
98
  style: sharedStyles.spinner,
96
99
  size: sizeMapping[size],
97
100
  light: kind === "primary",
@@ -164,9 +167,6 @@ const sharedStyles = StyleSheet.create({
164
167
  fontSize: 18,
165
168
  lineHeight: "20px"
166
169
  },
167
- textWithIcon: {
168
- display: "flex"
169
- },
170
170
  textWithFocus: {
171
171
  position: "relative"
172
172
  },
@@ -231,14 +231,14 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
231
231
  borderColor: light ? white50 : offBlack50,
232
232
  borderStyle: "solid",
233
233
  borderWidth: 1,
234
- paddingLeft: iconWidth ? padding - 4 : padding,
234
+ paddingLeft: padding,
235
235
  paddingRight: padding
236
236
  },
237
237
  focus: {
238
238
  background: light ? "transparent" : white,
239
239
  borderColor: light ? white : color,
240
240
  borderWidth: 2,
241
- paddingLeft: iconWidth ? padding - 5 : padding - 1,
241
+ paddingLeft: padding - 1,
242
242
  paddingRight: padding - 1
243
243
  },
244
244
  active: {
@@ -246,7 +246,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
246
246
  color: light ? fadedColor : activeColor,
247
247
  borderColor: light ? fadedColor : activeColor,
248
248
  borderWidth: 2,
249
- paddingLeft: iconWidth ? padding - 5 : padding - 1,
249
+ paddingLeft: padding - 1,
250
250
  paddingRight: padding - 1
251
251
  },
252
252
  disabled: {
@@ -256,7 +256,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
256
256
  ":focus": {
257
257
  borderColor: light ? white50 : offBlack32,
258
258
  borderWidth: 2,
259
- paddingLeft: iconWidth ? padding - 5 : padding - 1,
259
+ paddingLeft: padding - 1,
260
260
  paddingRight: padding - 1
261
261
  }
262
262
  }
@@ -269,29 +269,35 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
269
269
  paddingLeft: 0,
270
270
  paddingRight: 0
271
271
  },
272
- focus: {
272
+ hover: {
273
273
  ":after": {
274
274
  content: "''",
275
275
  position: "absolute",
276
276
  height: 2,
277
- width: `calc(100% - ${iconWidth}px)`,
277
+ width: "100%",
278
278
  right: 0,
279
279
  bottom: 0,
280
280
  background: light ? white : color,
281
281
  borderRadius: 2
282
282
  }
283
283
  },
284
- active: {
285
- color: light ? fadedColor : activeColor,
284
+ focus: {
286
285
  ":after": {
287
286
  content: "''",
288
287
  position: "absolute",
289
- height: 2,
290
- width: `calc(100% - ${iconWidth}px)`,
291
- right: 0,
292
- bottom: -1,
293
- background: light ? fadedColor : activeColor,
294
- borderRadius: 2
288
+ width: `calc(100% + ${Spacing.xxxSmall_4}px)`,
289
+ height: `calc(100% - ${Spacing.xxxSmall_4}px)`,
290
+ borderStyle: "solid",
291
+ borderColor: light ? white : color,
292
+ borderWidth: Spacing.xxxxSmall_2,
293
+ borderRadius: Spacing.xxxSmall_4
294
+ }
295
+ },
296
+ active: {
297
+ color: light ? fadedColor : activeColor,
298
+ ":after": {
299
+ height: 1,
300
+ background: light ? fadedColor : activeColor
295
301
  }
296
302
  },
297
303
  disabled: {
@@ -300,7 +306,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
300
306
  },
301
307
  disabledFocus: {
302
308
  ":after": {
303
- background: light ? white : offBlack32
309
+ borderColor: light ? white50 : offBlack32
304
310
  }
305
311
  }
306
312
  };
package/dist/index.js CHANGED
@@ -96,7 +96,7 @@ class ButtonCore extends React__namespace.Component {
96
96
  const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
97
97
  const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
98
98
  const disabled = spinner || disabledProp;
99
- const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
99
+ const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && !pressed && focused && [buttonStyles.focus, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
100
100
  const commonProps = _extends({
101
101
  "data-test-id": testId,
102
102
  id: id,
@@ -106,19 +106,22 @@ class ButtonCore extends React__namespace.Component {
106
106
  const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
107
107
  const iconSize = size === "small" ? "small" : "medium";
108
108
  const label = React__namespace.createElement(Label, {
109
- style: [sharedStyles.text, size === "large" && sharedStyles.largeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), kind === "tertiary" && disabled && focused && [buttonStyles.focus, buttonStyles.disabledFocus]]
110
- }, icon && React__namespace.createElement(Icon__default["default"], {
111
- size: iconSize,
112
- color: "currentColor",
113
- icon: icon,
114
- style: sharedStyles.icon
115
- }), children);
109
+ style: [sharedStyles.text, size === "large" && sharedStyles.largeText, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? [buttonStyles.hover, buttonStyles.active] : hovered && buttonStyles.hover)],
110
+ testId: testId ? `${testId}-inner-label` : undefined
111
+ }, children);
116
112
  const sizeMapping = {
117
113
  medium: "small",
118
114
  small: "xsmall",
119
115
  large: "medium"
120
116
  };
121
- const contents = React__namespace.createElement(React__namespace.Fragment, null, label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
117
+ const contents = React__namespace.createElement(React__namespace.Fragment, null, icon && React__namespace.createElement(Icon__default["default"], {
118
+ size: iconSize,
119
+ color: "currentColor",
120
+ icon: icon,
121
+ style: sharedStyles.icon,
122
+ "aria-hidden": "true",
123
+ testId: testId ? `${testId}-icon` : undefined
124
+ }), label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
122
125
  style: sharedStyles.spinner,
123
126
  size: sizeMapping[size],
124
127
  light: kind === "primary",
@@ -191,9 +194,6 @@ const sharedStyles = aphrodite.StyleSheet.create({
191
194
  fontSize: 18,
192
195
  lineHeight: "20px"
193
196
  },
194
- textWithIcon: {
195
- display: "flex"
196
- },
197
197
  textWithFocus: {
198
198
  position: "relative"
199
199
  },
@@ -258,14 +258,14 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
258
258
  borderColor: light ? white50 : offBlack50,
259
259
  borderStyle: "solid",
260
260
  borderWidth: 1,
261
- paddingLeft: iconWidth ? padding - 4 : padding,
261
+ paddingLeft: padding,
262
262
  paddingRight: padding
263
263
  },
264
264
  focus: {
265
265
  background: light ? "transparent" : white,
266
266
  borderColor: light ? white : color,
267
267
  borderWidth: 2,
268
- paddingLeft: iconWidth ? padding - 5 : padding - 1,
268
+ paddingLeft: padding - 1,
269
269
  paddingRight: padding - 1
270
270
  },
271
271
  active: {
@@ -273,7 +273,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
273
273
  color: light ? fadedColor : activeColor,
274
274
  borderColor: light ? fadedColor : activeColor,
275
275
  borderWidth: 2,
276
- paddingLeft: iconWidth ? padding - 5 : padding - 1,
276
+ paddingLeft: padding - 1,
277
277
  paddingRight: padding - 1
278
278
  },
279
279
  disabled: {
@@ -283,7 +283,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
283
283
  ":focus": {
284
284
  borderColor: light ? white50 : offBlack32,
285
285
  borderWidth: 2,
286
- paddingLeft: iconWidth ? padding - 5 : padding - 1,
286
+ paddingLeft: padding - 1,
287
287
  paddingRight: padding - 1
288
288
  }
289
289
  }
@@ -296,29 +296,35 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
296
296
  paddingLeft: 0,
297
297
  paddingRight: 0
298
298
  },
299
- focus: {
299
+ hover: {
300
300
  ":after": {
301
301
  content: "''",
302
302
  position: "absolute",
303
303
  height: 2,
304
- width: `calc(100% - ${iconWidth}px)`,
304
+ width: "100%",
305
305
  right: 0,
306
306
  bottom: 0,
307
307
  background: light ? white : color,
308
308
  borderRadius: 2
309
309
  }
310
310
  },
311
- active: {
312
- color: light ? fadedColor : activeColor,
311
+ focus: {
313
312
  ":after": {
314
313
  content: "''",
315
314
  position: "absolute",
316
- height: 2,
317
- width: `calc(100% - ${iconWidth}px)`,
318
- right: 0,
319
- bottom: -1,
320
- background: light ? fadedColor : activeColor,
321
- borderRadius: 2
315
+ width: `calc(100% + ${Spacing__default["default"].xxxSmall_4}px)`,
316
+ height: `calc(100% - ${Spacing__default["default"].xxxSmall_4}px)`,
317
+ borderStyle: "solid",
318
+ borderColor: light ? white : color,
319
+ borderWidth: Spacing__default["default"].xxxxSmall_2,
320
+ borderRadius: Spacing__default["default"].xxxSmall_4
321
+ }
322
+ },
323
+ active: {
324
+ color: light ? fadedColor : activeColor,
325
+ ":after": {
326
+ height: 1,
327
+ background: light ? fadedColor : activeColor
322
328
  }
323
329
  },
324
330
  disabled: {
@@ -327,7 +333,7 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
327
333
  },
328
334
  disabledFocus: {
329
335
  ":after": {
330
- background: light ? white : offBlack32
336
+ borderColor: light ? white50 : offBlack32
331
337
  }
332
338
  }
333
339
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-button",
3
- "version": "4.0.12",
3
+ "version": "4.0.14",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -16,13 +16,13 @@
16
16
  "license": "MIT",
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
- "@khanacademy/wonder-blocks-clickable": "^3.0.12",
19
+ "@khanacademy/wonder-blocks-clickable": "^3.1.0",
20
20
  "@khanacademy/wonder-blocks-color": "^2.0.1",
21
- "@khanacademy/wonder-blocks-core": "^5.2.2",
22
- "@khanacademy/wonder-blocks-icon": "^2.0.12",
23
- "@khanacademy/wonder-blocks-progress-spinner": "^2.0.12",
21
+ "@khanacademy/wonder-blocks-core": "^5.2.3",
22
+ "@khanacademy/wonder-blocks-icon": "^2.0.13",
23
+ "@khanacademy/wonder-blocks-progress-spinner": "^2.0.13",
24
24
  "@khanacademy/wonder-blocks-spacing": "^4.0.1",
25
- "@khanacademy/wonder-blocks-typography": "^2.0.12"
25
+ "@khanacademy/wonder-blocks-typography": "^2.0.13"
26
26
  },
27
27
  "peerDependencies": {
28
28
  "aphrodite": "^1.2.5",