@cloudflare/component-button 5.4.0 → 5.4.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 5.4.3
+
+### Patch Changes
+
+- 03d9b64e82: Add optional name attribute to Button.
+
+## 5.4.2
+
+### Patch Changes
+
+- 65f3dbc58e: Add optional name attribute to Button.
+
+## 5.4.1
+
+### Patch Changes
+
+- 4396bfb286: Fix dark mode focus state
+
 ## 5.4.0
 
 ### Minor Changes

package/dist/Button.d.ts

@@ -46,8 +46,9 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly width: "auto" | "100%";
     readonly boxShadow?: string | undefined;
     readonly '&:focus-visible': {
-        readonly outlineOffset: 3;
-        readonly outlineStyle: "auto";
+        readonly outlineOffset: 2;
+        readonly outlineWidth: 2;
+        readonly outlineStyle: "solid";
         readonly outlineColor: string;
     };
     readonly '&[title]': {
@@ -88,6 +89,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
 };
 declare type Props = {
     id?: string;
+    name?: string;
     submit?: boolean;
     spaced?: boolean;
     space?: number;
@@ -109,6 +111,7 @@ declare type Props = {
 } & Pick<JSX.IntrinsicElements['button'], 'onClick' | 'disabled' | 'form' | 'tabIndex' | 'className'>;
 declare type PropsWithTheme = Props & ThemeProp;
 declare const _default: React.ComponentType<{
+    name?: string | undefined;
     space?: number | undefined;
     disabled?: boolean | undefined;
     compact?: boolean | undefined;

package/es/Button.js

@@ -169,8 +169,9 @@ export var buttonStyles = props => {
     '&:focus:active': styles.active
   }), {}, {
     '&:focus-visible': {
-      outlineOffset: 3,
-      outlineStyle: 'auto',
+      outlineOffset: 2,
+      outlineWidth: 2,
+      outlineStyle: 'solid',
       outlineColor: type === 'danger' || type === 'plainDestructive' ? theme.colors.red[isDarkMode() ? 3 : 4] : theme.colors.focus
     },
     '&[title]': {
@@ -238,6 +239,7 @@ export var buttonStyles = props => {
 var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   var {
     id,
+    name,
     submit = false,
     className,
     disabled,
@@ -258,6 +260,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), {});
   return /*#__PURE__*/React.createElement("button", _extends({}, ariaAndDataProps, {
     id: id,
+    name: name,
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -281,6 +284,7 @@ var Button = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 Button.propTypes = {
   id: PropTypes.string,
+  name: PropTypes.string,
   onClick: PropTypes.func,
   submit: PropTypes.bool,
   spaced: PropTypes.bool,

package/lib/Button.js

@@ -182,8 +182,9 @@ var buttonStyles = function buttonStyles(props) {
     '&:focus:active': styles.active
   }), {}, {
     '&:focus-visible': {
-      outlineOffset: 3,
-      outlineStyle: 'auto',
+      outlineOffset: 2,
+      outlineWidth: 2,
+      outlineStyle: 'solid',
       outlineColor: type === 'danger' || type === 'plainDestructive' ? theme.colors.red[(0, _styleConst.isDarkMode)() ? 3 : 4] : theme.colors.focus
     },
     '&[title]': {
@@ -253,6 +254,7 @@ exports.buttonStyles = buttonStyles;
 
 var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var id = props.id,
+      name = props.name,
       _props$submit = props.submit,
       submit = _props$submit === void 0 ? false : _props$submit,
       className = props.className,
@@ -277,6 +279,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, {});
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaAndDataProps, {
     id: id,
+    name: name,
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -301,6 +304,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
 Button.propTypes = {
   id: _propTypes.default.string,
+  name: _propTypes.default.string,
   onClick: _propTypes.default.func,
   submit: _propTypes.default.bool,
   spaced: _propTypes.default.bool,

package/package.json

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