@cloudflare/component-button 8.5.11 → 8.5.13

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 8.5.13
+
+## 8.5.12
+
+### Patch Changes
+
+- 0dccb6d732: feat(@cloudflare/component-button): DESSYS-1848 Add iconProps prop
+  In the Workers and Pages settings pages, we make use of component-button for our action buttons. Each of these buttons' icons have a margin-right specified on them in accordance with the iconPosition prop. If the position is "left" (default), then a margin-right is applied and the reverse it true for right.
+
+  We'd like to able to override that margin and zero it out. This change proposes the introduction of a new prop to component-button: `iconProps` which passes through props to the Icon component from Button.
+
 ## 8.5.11
 
 ## 8.5.10

package/dist/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ThemeProp } from '@cloudflare/style-container';
-import { IconType } from '@cloudflare/component-icon';
+import { Icon, IconType } from '@cloudflare/component-icon';
+declare type IconProps = React.ComponentProps<typeof Icon>;
 export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly borderTopRightRadius: 0 | "4px";
     readonly borderTopLeftRadius: 0 | "4px";
@@ -117,6 +118,7 @@ declare type Props = React.PropsWithChildren<{
     inverted?: boolean;
     iconType?: IconType;
     iconLabel?: string;
+    iconProps?: IconProps;
     iconSize?: number;
     iconPosition?: 'left' | 'right';
     ariaLabel?: string;
@@ -148,8 +150,9 @@ 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" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-down-stroke" | "caret-left" | "caret-left-stroke" | "caret-right" | "caret-right-stroke" | "caret-up" | "caret-up-stroke" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edge-log-delivery" | "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" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "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" | "router" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "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" | "caret" | "warning" | "pause" | "dlp" | "timer" | "account-analytics-logo" | "add-member" | "ai-audit" | "analytics-data" | "api-security" | "api" | "applications" | "arrow-down" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "calls" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down-stroke" | "caret-down" | "caret-left-stroke" | "caret-left" | "caret-right-stroke" | "caret-right" | "caret-up-stroke" | "caret-up" | "case-study" | "certificate" | "chart" | "clipboard" | "cloud-internet-solid" | "cloud-internet" | "cloud-multi" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-email-security" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "code-edit" | "connector" | "credit-card" | "d1" | "ddos-attack" | "device-desktop" | "device-laptop" | "device-mobile" | "device-tablet" | "discord" | "discover" | "documentation" | "drive" | "edge-log-delivery" | "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" | "hyperdrive" | "inbox" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "no-edit" | "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" | "router" | "security-bots" | "security-waf" | "server-origin" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "thumbs-down-outline" | "thumbs-down-solid" | "thumbs-up-outline" | "thumbs-up-solid" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "vectorize" | "waiting-room" | "warp" | "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;
+    iconProps?: IconProps | undefined;
     iconSize?: number | undefined;
     iconPosition?: "right" | "left" | undefined;
     noWrapText?: boolean | undefined;

package/es/Button.js

@@ -252,6 +252,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClick,
     iconType,
     iconLabel,
+    iconProps,
     iconSize,
     iconPosition = 'left',
     form,
@@ -273,15 +274,15 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     tabIndex: tabIndex,
     ref: ref,
     "aria-label": ariaLabel
-  }), iconType && iconPosition === 'left' && /*#__PURE__*/React.createElement(Icon, {
+  }), iconType && iconPosition === 'left' && /*#__PURE__*/React.createElement(Icon, _extends({
     size: iconSize,
     type: iconType,
     ariaLabel: iconLabel
-  }), children, iconType && iconPosition === 'right' && /*#__PURE__*/React.createElement(Icon, {
+  }, iconProps)), children, iconType && iconPosition === 'right' && /*#__PURE__*/React.createElement(Icon, _extends({
     size: iconSize,
     type: iconType,
     ariaLabel: iconLabel
-  }));
+  }, iconProps)));
 });
 Button.propTypes = {
   id: PropTypes.string,

package/lib/Button.js

@@ -269,6 +269,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onClick = props.onClick,
       iconType = props.iconType,
       iconLabel = props.iconLabel,
+      iconProps = props.iconProps,
       iconSize = props.iconSize,
       _props$iconPosition = props.iconPosition,
       iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
@@ -292,15 +293,15 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     tabIndex: tabIndex,
     ref: ref,
     "aria-label": ariaLabel
-  }), iconType && iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
+  }), iconType && iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, _extends({
     size: iconSize,
     type: iconType,
     ariaLabel: iconLabel
-  }), children, iconType && iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
+  }, iconProps)), children, iconType && iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, _extends({
     size: iconSize,
     type: iconType,
     ariaLabel: iconLabel
-  }));
+  }, iconProps)));
 });
 
 Button.propTypes = {

package/package.json

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