@cloudflare/component-button 8.3.2 → 8.3.3
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 +8 -0
- package/dist/Button.d.ts +1 -0
- package/es/Button.js +3 -4
- package/lib/Button.js +3 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 8.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 48cd0bded9: Buttons now space their children elements using `gap` instead of `margin-left` or `margin-right`.
|
|
8
|
+
|
|
9
|
+
Previously, when including an icon in a button with no children via the `iconType` prop there would be an extraneous margin. Now with `gap`, the space is only present when there label text is also included.
|
|
10
|
+
|
|
3
11
|
## 8.3.2
|
|
4
12
|
|
|
5
13
|
## 8.3.1
|
package/dist/Button.d.ts
CHANGED
|
@@ -73,6 +73,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
|
|
|
73
73
|
readonly color: string | undefined;
|
|
74
74
|
readonly cursor: "default" | "pointer";
|
|
75
75
|
readonly display: "inline-flex";
|
|
76
|
+
readonly gap: 1;
|
|
76
77
|
readonly flexGrow: 1 | undefined;
|
|
77
78
|
readonly alignItems: "center";
|
|
78
79
|
readonly justifyContent: "center";
|
package/es/Button.js
CHANGED
|
@@ -181,6 +181,7 @@ export var buttonStyles = props => {
|
|
|
181
181
|
color: loading ? 'transparent' : color,
|
|
182
182
|
cursor: disabled || loading ? 'default' : 'pointer',
|
|
183
183
|
display: 'inline-flex',
|
|
184
|
+
gap: 1,
|
|
184
185
|
flexGrow: stretch ? 1 : undefined,
|
|
185
186
|
alignItems: 'center',
|
|
186
187
|
justifyContent: 'center',
|
|
@@ -275,13 +276,11 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
275
276
|
}), iconType && iconPosition === 'left' && /*#__PURE__*/React.createElement(Icon, {
|
|
276
277
|
size: iconSize,
|
|
277
278
|
type: iconType,
|
|
278
|
-
ariaLabel: iconLabel
|
|
279
|
-
mr: 1
|
|
279
|
+
ariaLabel: iconLabel
|
|
280
280
|
}), children, iconType && iconPosition === 'right' && /*#__PURE__*/React.createElement(Icon, {
|
|
281
281
|
size: iconSize,
|
|
282
282
|
type: iconType,
|
|
283
|
-
ariaLabel: iconLabel
|
|
284
|
-
ml: 1
|
|
283
|
+
ariaLabel: iconLabel
|
|
285
284
|
}));
|
|
286
285
|
});
|
|
287
286
|
Button.propTypes = {
|
package/lib/Button.js
CHANGED
|
@@ -194,6 +194,7 @@ var buttonStyles = function buttonStyles(props) {
|
|
|
194
194
|
color: loading ? 'transparent' : color,
|
|
195
195
|
cursor: disabled || loading ? 'default' : 'pointer',
|
|
196
196
|
display: 'inline-flex',
|
|
197
|
+
gap: 1,
|
|
197
198
|
flexGrow: stretch ? 1 : undefined,
|
|
198
199
|
alignItems: 'center',
|
|
199
200
|
justifyContent: 'center',
|
|
@@ -294,13 +295,11 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
294
295
|
}), iconType && iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
|
|
295
296
|
size: iconSize,
|
|
296
297
|
type: iconType,
|
|
297
|
-
ariaLabel: iconLabel
|
|
298
|
-
mr: 1
|
|
298
|
+
ariaLabel: iconLabel
|
|
299
299
|
}), children, iconType && iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
|
|
300
300
|
size: iconSize,
|
|
301
301
|
type: iconType,
|
|
302
|
-
ariaLabel: iconLabel
|
|
303
|
-
ml: 1
|
|
302
|
+
ariaLabel: iconLabel
|
|
304
303
|
}));
|
|
305
304
|
});
|
|
306
305
|
|
package/package.json
CHANGED