@cloudflare/component-button 5.2.0 → 5.3.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/Button.d.ts +3 -3
  3. package/es/Button.js +28 -24
  4. package/lib/Button.js +28 -25
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Change Log
2
2
 
3
+ ## 5.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - a6575cebcd: Update peer dependency
8
+
9
+ ## 5.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - ebecfbb551: Change inverted styles, add plainDestructive type
14
+
15
+ ### Patch Changes
16
+
17
+ - 97244e8fe0: Increase transition time
18
+ - d74e81de82: Fix default button hover effect, plainDestructive focus outline color
19
+
3
20
  ## 5.2.0
4
21
 
5
22
  ### Minor Changes
package/dist/Button.d.ts CHANGED
@@ -37,7 +37,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
37
37
  readonly position: "relative";
38
38
  readonly textAlign: "center";
39
39
  readonly transitionProperty: "all";
40
- readonly transitionDuration: "200ms";
40
+ readonly transitionDuration: "300ms";
41
41
  readonly transitionTimingFunction: "ease";
42
42
  readonly userSelect: "none";
43
43
  readonly maxWidth: "initial";
@@ -93,7 +93,7 @@ declare type Props = {
93
93
  space?: number;
94
94
  direction?: 'column' | 'row';
95
95
  group?: 'first' | 'inbetween' | 'last';
96
- type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'plain' | 'plainMono';
96
+ type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'plain' | 'plainMono' | 'plainDestructive';
97
97
  testId?: string;
98
98
  loading?: boolean;
99
99
  inverted?: boolean;
@@ -114,7 +114,7 @@ declare const _default: React.ComponentType<{
114
114
  className?: string | undefined;
115
115
  id?: string | undefined;
116
116
  tabIndex?: number | undefined;
117
- type?: "default" | "primary" | "success" | "warning" | "danger" | "plain" | "plainMono" | undefined;
117
+ type?: "default" | "primary" | "success" | "warning" | "danger" | "plain" | "plainMono" | "plainDestructive" | undefined;
118
118
  direction?: "column" | "row" | undefined;
119
119
  key?: React.Key | null | undefined;
120
120
  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
package/es/Button.js CHANGED
@@ -14,7 +14,7 @@ import { Icon } from '@cloudflare/component-icon';
14
14
  var borderRadius = '4px';
15
15
 
16
16
  var standardColors = (theme, state) => {
17
- var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6;
17
+ var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6, _theme$colors$button$7;
18
18
 
19
19
  var color = theme.colors.gray[9];
20
20
  return {
@@ -22,13 +22,14 @@ var standardColors = (theme, state) => {
22
22
  success: color,
23
23
  warning: color,
24
24
  inverted: {
25
- danger: (_theme$colors$button$ = theme.colors.button.danger[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$[state === 'active' ? 'text' : 'background'],
26
- primary: (_theme$colors$button$2 = theme.colors.button.primary[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2[state === 'active' ? 'text' : 'background']
25
+ danger: (_theme$colors$button$ = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$.text,
26
+ primary: (_theme$colors$button$2 = theme.colors.button.plain[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2.text
27
27
  },
28
28
  primary: ((_theme$colors$button$3 = theme.colors.button.primary[state]) === null || _theme$colors$button$3 === void 0 ? void 0 : _theme$colors$button$3.text) || color,
29
29
  danger: ((_theme$colors$button$4 = theme.colors.button.danger[state]) === null || _theme$colors$button$4 === void 0 ? void 0 : _theme$colors$button$4.text) || color,
30
30
  plain: ((_theme$colors$button$5 = theme.colors.button.plain[state]) === null || _theme$colors$button$5 === void 0 ? void 0 : _theme$colors$button$5.text) || color,
31
- plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color
31
+ plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color,
32
+ plainDestructive: ((_theme$colors$button$7 = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$7 === void 0 ? void 0 : _theme$colors$button$7.text) || color
32
33
  };
33
34
  };
34
35
 
@@ -45,11 +46,12 @@ var buttonColors = theme => {
45
46
  warning: theme.colors.orange[standardIndex],
46
47
  danger: theme.colors.button.danger.normal.background,
47
48
  inverted: {
48
- danger: 'transparent',
49
- primary: 'transparent'
49
+ danger: theme.colors.button.plainDestructive.normal.background,
50
+ primary: theme.colors.button.plain.normal.background
50
51
  },
51
52
  plain: theme.colors.button.plain.normal.background,
52
- plainMono: theme.colors.button.plainMono.normal.background
53
+ plainMono: theme.colors.button.plainMono.normal.background,
54
+ plainDestructive: theme.colors.button.plainDestructive.normal.background
53
55
  },
54
56
  color: standardColors(theme, 'normal')
55
57
  },
@@ -62,11 +64,12 @@ var buttonColors = theme => {
62
64
  warning: theme.colors.orange[hoverIndex],
63
65
  danger: theme.colors.button.danger.hover.background,
64
66
  inverted: {
65
- danger: theme.colors.white,
66
- primary: theme.colors.white
67
+ danger: theme.colors.button.plainDestructive.hover.background,
68
+ primary: theme.colors.button.plain.hover.background
67
69
  },
68
70
  plain: theme.colors.button.plain.hover.background,
69
- plainMono: theme.colors.button.plainMono.hover.background
71
+ plainMono: theme.colors.button.plainMono.hover.background,
72
+ plainDestructive: theme.colors.button.plainDestructive.hover.background
70
73
  },
71
74
  color: standardColors(theme, 'hover')
72
75
  },
@@ -79,28 +82,30 @@ var buttonColors = theme => {
79
82
  warning: theme.colors.orange[standardIndex],
80
83
  danger: theme.colors.button.danger.active.background,
81
84
  inverted: {
82
- danger: theme.colors.red[hoverIndex],
83
- primary: theme.colors.blue[hoverIndex]
85
+ danger: theme.colors.button.plainDestructive.active.background,
86
+ primary: theme.colors.button.plain.active.background
84
87
  },
85
88
  plain: theme.colors.button.plain.active.background,
86
- plainMono: theme.colors.button.plainMono.active.background
89
+ plainMono: theme.colors.button.plainMono.active.background,
90
+ plainDestructive: theme.colors.button.plainDestructive.active.background
87
91
  },
88
92
  color: standardColors(theme, 'active')
89
93
  },
90
94
  // Focus
91
95
  focus: {
92
96
  backgroundColor: {
93
- default: theme.colors.gray[isDarkMode() ? 3 : 8],
97
+ default: theme.colors.gray[isDarkMode() ? 2 : 7],
94
98
  primary: theme.colors.button.primary.focus.background,
95
99
  success: theme.colors.green[standardIndex],
96
100
  warning: theme.colors.orange[standardIndex],
97
101
  danger: theme.colors.button.danger.focus.background,
98
102
  inverted: {
99
- danger: 'transparent',
100
- primary: 'transparent'
103
+ danger: theme.colors.button.plainDestructive.focus.background,
104
+ primary: theme.colors.button.plain.focus.background
101
105
  },
102
106
  plain: theme.colors.button.plain.focus.background,
103
- plainMono: theme.colors.button.plainMono.focus.background
107
+ plainMono: theme.colors.button.plainMono.focus.background,
108
+ plainDestructive: theme.colors.button.plainDestructive.focus.background
104
109
  },
105
110
  color: standardColors(theme, 'focus')
106
111
  }
@@ -128,7 +133,7 @@ var interactionStyleAccessor = (interactionState, props) => {
128
133
  return isInteractive ? {
129
134
  backgroundColor,
130
135
  color,
131
- boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(interactionState === 'active' ? backgroundColor : color) : undefined
136
+ boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(color) : undefined
132
137
  } : undefined;
133
138
  };
134
139
 
@@ -140,7 +145,6 @@ export var buttonStyles = props => {
140
145
  loading = false,
141
146
  disabled,
142
147
  direction,
143
- inverted = false,
144
148
  group,
145
149
  spaced,
146
150
  space = 2,
@@ -166,7 +170,7 @@ export var buttonStyles = props => {
166
170
  '&:focus-visible': {
167
171
  outlineOffset: 3,
168
172
  outlineStyle: 'auto',
169
- outlineColor: type === 'danger' ? theme.colors.red[isDarkMode() ? 3 : 4] : theme.colors.focus
173
+ outlineColor: type === 'danger' || type === 'plainDestructive' ? theme.colors.red[isDarkMode() ? 3 : 4] : theme.colors.focus
170
174
  },
171
175
  '&[title]': {
172
176
  pointerEvents: disabled ? 'auto' : 'none'
@@ -183,8 +187,8 @@ export var buttonStyles = props => {
183
187
  fontWeight: 400,
184
188
  lineHeight: 1.2,
185
189
  border: 'none'
186
- }, inverted ? {
187
- boxShadow: "inset 0px 0px 0px 1px ".concat(buttonState === 'active' ? backgroundColor : color)
190
+ }, props.inverted ? {
191
+ boxShadow: "inset 0px 0px 0px 1px ".concat(color)
188
192
  } : {}), {}, {
189
193
  borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
190
194
  borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
@@ -221,7 +225,7 @@ export var buttonStyles = props => {
221
225
  position: 'relative',
222
226
  textAlign: 'center',
223
227
  transitionProperty: 'all',
224
- transitionDuration: '200ms',
228
+ transitionDuration: '300ms',
225
229
  transitionTimingFunction: 'ease',
226
230
  userSelect: 'none',
227
231
  maxWidth: 'initial',
@@ -283,7 +287,7 @@ Button.propTypes = {
283
287
  direction: PropTypes.oneOf(['column', 'row']),
284
288
  className: PropTypes.string,
285
289
  group: PropTypes.oneOf(['first', 'inbetween', 'last']),
286
- type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono']),
290
+ type: PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono', 'plainDestructive']),
287
291
  testId: PropTypes.string,
288
292
  disabled: PropTypes.bool,
289
293
  loading: PropTypes.bool,
package/lib/Button.js CHANGED
@@ -28,7 +28,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
28
28
  var borderRadius = '4px';
29
29
 
30
30
  var standardColors = function standardColors(theme, state) {
31
- var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6;
31
+ var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6, _theme$colors$button$7;
32
32
 
33
33
  var color = theme.colors.gray[9];
34
34
  return {
@@ -36,13 +36,14 @@ var standardColors = function standardColors(theme, state) {
36
36
  success: color,
37
37
  warning: color,
38
38
  inverted: {
39
- danger: (_theme$colors$button$ = theme.colors.button.danger[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$[state === 'active' ? 'text' : 'background'],
40
- primary: (_theme$colors$button$2 = theme.colors.button.primary[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2[state === 'active' ? 'text' : 'background']
39
+ danger: (_theme$colors$button$ = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$.text,
40
+ primary: (_theme$colors$button$2 = theme.colors.button.plain[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2.text
41
41
  },
42
42
  primary: ((_theme$colors$button$3 = theme.colors.button.primary[state]) === null || _theme$colors$button$3 === void 0 ? void 0 : _theme$colors$button$3.text) || color,
43
43
  danger: ((_theme$colors$button$4 = theme.colors.button.danger[state]) === null || _theme$colors$button$4 === void 0 ? void 0 : _theme$colors$button$4.text) || color,
44
44
  plain: ((_theme$colors$button$5 = theme.colors.button.plain[state]) === null || _theme$colors$button$5 === void 0 ? void 0 : _theme$colors$button$5.text) || color,
45
- plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color
45
+ plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color,
46
+ plainDestructive: ((_theme$colors$button$7 = theme.colors.button.plainDestructive[state]) === null || _theme$colors$button$7 === void 0 ? void 0 : _theme$colors$button$7.text) || color
46
47
  };
47
48
  };
48
49
 
@@ -59,11 +60,12 @@ var buttonColors = function buttonColors(theme) {
59
60
  warning: theme.colors.orange[standardIndex],
60
61
  danger: theme.colors.button.danger.normal.background,
61
62
  inverted: {
62
- danger: 'transparent',
63
- primary: 'transparent'
63
+ danger: theme.colors.button.plainDestructive.normal.background,
64
+ primary: theme.colors.button.plain.normal.background
64
65
  },
65
66
  plain: theme.colors.button.plain.normal.background,
66
- plainMono: theme.colors.button.plainMono.normal.background
67
+ plainMono: theme.colors.button.plainMono.normal.background,
68
+ plainDestructive: theme.colors.button.plainDestructive.normal.background
67
69
  },
68
70
  color: standardColors(theme, 'normal')
69
71
  },
@@ -76,11 +78,12 @@ var buttonColors = function buttonColors(theme) {
76
78
  warning: theme.colors.orange[hoverIndex],
77
79
  danger: theme.colors.button.danger.hover.background,
78
80
  inverted: {
79
- danger: theme.colors.white,
80
- primary: theme.colors.white
81
+ danger: theme.colors.button.plainDestructive.hover.background,
82
+ primary: theme.colors.button.plain.hover.background
81
83
  },
82
84
  plain: theme.colors.button.plain.hover.background,
83
- plainMono: theme.colors.button.plainMono.hover.background
85
+ plainMono: theme.colors.button.plainMono.hover.background,
86
+ plainDestructive: theme.colors.button.plainDestructive.hover.background
84
87
  },
85
88
  color: standardColors(theme, 'hover')
86
89
  },
@@ -93,28 +96,30 @@ var buttonColors = function buttonColors(theme) {
93
96
  warning: theme.colors.orange[standardIndex],
94
97
  danger: theme.colors.button.danger.active.background,
95
98
  inverted: {
96
- danger: theme.colors.red[hoverIndex],
97
- primary: theme.colors.blue[hoverIndex]
99
+ danger: theme.colors.button.plainDestructive.active.background,
100
+ primary: theme.colors.button.plain.active.background
98
101
  },
99
102
  plain: theme.colors.button.plain.active.background,
100
- plainMono: theme.colors.button.plainMono.active.background
103
+ plainMono: theme.colors.button.plainMono.active.background,
104
+ plainDestructive: theme.colors.button.plainDestructive.active.background
101
105
  },
102
106
  color: standardColors(theme, 'active')
103
107
  },
104
108
  // Focus
105
109
  focus: {
106
110
  backgroundColor: {
107
- default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 8],
111
+ default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 2 : 7],
108
112
  primary: theme.colors.button.primary.focus.background,
109
113
  success: theme.colors.green[standardIndex],
110
114
  warning: theme.colors.orange[standardIndex],
111
115
  danger: theme.colors.button.danger.focus.background,
112
116
  inverted: {
113
- danger: 'transparent',
114
- primary: 'transparent'
117
+ danger: theme.colors.button.plainDestructive.focus.background,
118
+ primary: theme.colors.button.plain.focus.background
115
119
  },
116
120
  plain: theme.colors.button.plain.focus.background,
117
- plainMono: theme.colors.button.plainMono.focus.background
121
+ plainMono: theme.colors.button.plainMono.focus.background,
122
+ plainDestructive: theme.colors.button.plainDestructive.focus.background
118
123
  },
119
124
  color: standardColors(theme, 'focus')
120
125
  }
@@ -140,7 +145,7 @@ var interactionStyleAccessor = function interactionStyleAccessor(interactionStat
140
145
  return isInteractive ? {
141
146
  backgroundColor: backgroundColor,
142
147
  color: color,
143
- boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(interactionState === 'active' ? backgroundColor : color) : undefined
148
+ boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(color) : undefined
144
149
  } : undefined;
145
150
  };
146
151
 
@@ -152,8 +157,6 @@ var buttonStyles = function buttonStyles(props) {
152
157
  loading = _props$loading === void 0 ? false : _props$loading,
153
158
  disabled = props.disabled,
154
159
  direction = props.direction,
155
- _props$inverted = props.inverted,
156
- inverted = _props$inverted === void 0 ? false : _props$inverted,
157
160
  group = props.group,
158
161
  spaced = props.spaced,
159
162
  _props$space = props.space,
@@ -180,7 +183,7 @@ var buttonStyles = function buttonStyles(props) {
180
183
  '&:focus-visible': {
181
184
  outlineOffset: 3,
182
185
  outlineStyle: 'auto',
183
- outlineColor: type === 'danger' ? theme.colors.red[(0, _styleConst.isDarkMode)() ? 3 : 4] : theme.colors.focus
186
+ outlineColor: type === 'danger' || type === 'plainDestructive' ? theme.colors.red[(0, _styleConst.isDarkMode)() ? 3 : 4] : theme.colors.focus
184
187
  },
185
188
  '&[title]': {
186
189
  pointerEvents: disabled ? 'auto' : 'none'
@@ -197,8 +200,8 @@ var buttonStyles = function buttonStyles(props) {
197
200
  fontWeight: 400,
198
201
  lineHeight: 1.2,
199
202
  border: 'none'
200
- }, inverted ? {
201
- boxShadow: "inset 0px 0px 0px 1px ".concat(buttonState === 'active' ? backgroundColor : color)
203
+ }, props.inverted ? {
204
+ boxShadow: "inset 0px 0px 0px 1px ".concat(color)
202
205
  } : {}), {}, {
203
206
  borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
204
207
  borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
@@ -235,7 +238,7 @@ var buttonStyles = function buttonStyles(props) {
235
238
  position: 'relative',
236
239
  textAlign: 'center',
237
240
  transitionProperty: 'all',
238
- transitionDuration: '200ms',
241
+ transitionDuration: '300ms',
239
242
  transitionTimingFunction: 'ease',
240
243
  userSelect: 'none',
241
244
  maxWidth: 'initial',
@@ -304,7 +307,7 @@ Button.propTypes = {
304
307
  direction: _propTypes.default.oneOf(['column', 'row']),
305
308
  className: _propTypes.default.string,
306
309
  group: _propTypes.default.oneOf(['first', 'inbetween', 'last']),
307
- type: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono']),
310
+ type: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono', 'plainDestructive']),
308
311
  testId: _propTypes.default.string,
309
312
  disabled: _propTypes.default.bool,
310
313
  loading: _propTypes.default.bool,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-button",
3
3
  "description": "Cloudflare Button Component",
4
- "version": "5.2.0",
4
+ "version": "5.3.1",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -18,7 +18,7 @@
18
18
  "prop-types": "^15.6.0"
19
19
  },
20
20
  "peerDependencies": {
21
- "@cloudflare/style-const": "^5.3.9",
21
+ "@cloudflare/style-const": "^5.6.0",
22
22
  "@cloudflare/style-container": "^7.10.0",
23
23
  "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
24
24
  },