@cloudflare/component-button 8.3.2 → 8.3.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 8.3.4
+
+## 8.3.3
+
+### Patch Changes
+
+- 48cd0bded9: Buttons now space their children elements using `gap` instead of `margin-left` or `margin-right`.
+
+  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.
+
 ## 8.3.2
 
 ## 8.3.1

package/dist/Button.d.ts

@@ -73,6 +73,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly color: string | undefined;
     readonly cursor: "default" | "pointer";
     readonly display: "inline-flex";
+    readonly gap: 1;
     readonly flexGrow: 1 | undefined;
     readonly alignItems: "center";
     readonly justifyContent: "center";
@@ -147,7 +148,7 @@ declare const _default: React.ComponentType<{
     inverted?: boolean | undefined;
     spaced?: boolean | undefined;
     group?: "first" | "last" | "inbetween" | undefined;
-    iconType?: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "timer" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo" | undefined;
+    iconType?: "search" | "link" | "code" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "down" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "expand" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "garbage" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "hide-eye" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "processing" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "timer" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zero-trust-risk-scoring" | "zerotrust-casb-logo" | "zerotrust-networks-logo" | undefined;
     iconLabel?: string | undefined;
     iconSize?: number | undefined;
     iconPosition?: "right" | "left" | undefined;
@@ -210,7 +211,7 @@ declare const _default: React.ComponentType<{
     borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
     borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
     borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
-    borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
     textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
     verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
     alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;

package/dist/ButtonGroup.d.ts

@@ -63,7 +63,7 @@ declare const _default: React.ComponentType<{
     borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
     borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
     borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
-    borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
     textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
     verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
     alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;

package/dist/TextButton.d.ts

@@ -324,7 +324,7 @@ declare const TextButton: import("react").ComponentType<{
     borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
     borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
     borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
-    borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
     textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
     verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
     alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;

package/dist/UnstyledButton.d.ts

@@ -324,7 +324,7 @@ declare const UnstyledButton: import("react").ComponentType<{
     borderTopLeftRadius?: import("csstype").BorderTopLeftRadiusProperty<string | number> | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined, import("csstype").BorderTopLeftRadiusProperty<string | number> | undefined] | undefined;
     borderTopRightRadius?: import("csstype").BorderTopRightRadiusProperty<string | number> | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined, import("csstype").BorderTopRightRadiusProperty<string | number> | undefined] | undefined;
     borderBottomLeftRadius?: import("csstype").BorderBottomLeftRadiusProperty<string | number> | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined, import("csstype").BorderBottomLeftRadiusProperty<string | number> | undefined] | undefined;
-    borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
+    borderBottomRightRadius?: import("csstype").BorderBottomRightRadiusProperty<string | number> | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | [import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined, import("csstype").BorderBottomRightRadiusProperty<string | number> | undefined] | undefined;
     textAlign?: import("csstype").TextAlignProperty | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | [import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined, import("csstype").TextAlignProperty | undefined] | undefined;
     verticalAlign?: import("csstype").VerticalAlignProperty<string | number> | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | [import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined, import("csstype").VerticalAlignProperty<string | number> | undefined] | undefined;
     alignItems?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;

package/es/Button.js

@@ -181,6 +181,7 @@ export var buttonStyles = props => {
     color: loading ? 'transparent' : color,
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
+    gap: 1,
     flexGrow: stretch ? 1 : undefined,
     alignItems: 'center',
     justifyContent: 'center',
@@ -275,13 +276,11 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), iconType && iconPosition === 'left' && /*#__PURE__*/React.createElement(Icon, {
     size: iconSize,
     type: iconType,
-    ariaLabel: iconLabel,
-    mr: 1
+    ariaLabel: iconLabel
   }), children, iconType && iconPosition === 'right' && /*#__PURE__*/React.createElement(Icon, {
     size: iconSize,
     type: iconType,
-    ariaLabel: iconLabel,
-    ml: 1
+    ariaLabel: iconLabel
   }));
 });
 Button.propTypes = {

package/lib/Button.js

@@ -194,6 +194,7 @@ var buttonStyles = function buttonStyles(props) {
     color: loading ? 'transparent' : color,
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
+    gap: 1,
     flexGrow: stretch ? 1 : undefined,
     alignItems: 'center',
     justifyContent: 'center',
@@ -294,13 +295,11 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), iconType && iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
     size: iconSize,
     type: iconType,
-    ariaLabel: iconLabel,
-    mr: 1
+    ariaLabel: iconLabel
   }), children, iconType && iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
     size: iconSize,
     type: iconType,
-    ariaLabel: iconLabel,
-    ml: 1
+    ariaLabel: iconLabel
   }));
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "8.3.2",
+  "version": "8.3.4",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",