@cloudflare/component-button 5.3.2 → 5.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 5.4.1
+
+### Patch Changes
+
+- 4396bfb286: Fix dark mode focus state
+
+## 5.4.0
+
+### Minor Changes
+
+- c464928e05: Add compact prop
+
 ## 5.3.2
 
 ### Patch Changes

package/dist/Button.d.ts

@@ -31,8 +31,8 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly mr: 0;
     readonly mb: 0;
     readonly ml: number;
-    readonly px: 3;
-    readonly py: 2;
+    readonly px: 3 | "11px";
+    readonly py: 1 | 2;
     readonly pointerEvents: "none" | "auto";
     readonly position: "relative";
     readonly textAlign: "center";
@@ -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]': {
@@ -61,7 +62,7 @@ export declare const buttonStyles: (props: PropsWithTheme) => {
     readonly alignItems: "center";
     readonly justifyContent: "center";
     readonly fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, \"Helvetica Neue\",  Arial, sans-serif";
-    readonly fontSize: 2;
+    readonly fontSize: 1 | 2;
     readonly fontWeight: 400;
     readonly lineHeight: 1.2;
     readonly border: "none";
@@ -105,11 +106,13 @@ declare type Props = {
     stretch?: boolean;
     noWrapText?: boolean;
     buttonState?: 'hover' | 'active' | 'focus';
+    compact?: boolean;
 } & Pick<JSX.IntrinsicElements['button'], 'onClick' | 'disabled' | 'form' | 'tabIndex' | 'className'>;
 declare type PropsWithTheme = Props & ThemeProp;
 declare const _default: React.ComponentType<{
     space?: number | undefined;
     disabled?: boolean | undefined;
+    compact?: boolean | undefined;
     form?: string | undefined;
     className?: string | undefined;
     id?: string | undefined;

package/es/Button.js

@@ -151,7 +151,8 @@ export var buttonStyles = props => {
     type = 'default',
     stretch,
     noWrapText,
-    buttonState
+    buttonState,
+    compact
   } = props;
   var styles = {
     normal: buttonColors(theme).normal,
@@ -168,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]': {
@@ -183,7 +185,7 @@ export var buttonStyles = props => {
     alignItems: 'center',
     justifyContent: 'center',
     fontFamily: theme.fontFamily,
-    fontSize: 2,
+    fontSize: compact ? 1 : 2,
     fontWeight: 400,
     lineHeight: 1.2,
     border: 'none'
@@ -219,8 +221,8 @@ export var buttonStyles = props => {
     mr: 0,
     mb: 0,
     ml: spaced && direction === 'row' && group !== 'first' ? space : 0,
-    px: 3,
-    py: 2,
+    px: compact ? '11px' : 3,
+    py: compact ? 1 : 2,
     pointerEvents: disabled ? 'none' : 'auto',
     position: 'relative',
     textAlign: 'center',
@@ -300,7 +302,8 @@ Button.propTypes = {
   ariaLabel: PropTypes.string,
   stretch: PropTypes.bool,
   noWrapText: PropTypes.bool,
-  buttonState: PropTypes.oneOf(['hover', 'active', 'focus'])
+  buttonState: PropTypes.oneOf(['hover', 'active', 'focus']),
+  compact: PropTypes.bool
 };
 Button.displayName = 'Button';
 export default createStyledComponent(buttonStyles, Button);

package/lib/Button.js

@@ -165,7 +165,8 @@ var buttonStyles = function buttonStyles(props) {
       type = _props$type === void 0 ? 'default' : _props$type,
       stretch = props.stretch,
       noWrapText = props.noWrapText,
-      buttonState = props.buttonState;
+      buttonState = props.buttonState,
+      compact = props.compact;
   var styles = {
     normal: buttonColors(theme).normal,
     hover: interactionStyleAccessor('hover', props),
@@ -181,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]': {
@@ -196,7 +198,7 @@ var buttonStyles = function buttonStyles(props) {
     alignItems: 'center',
     justifyContent: 'center',
     fontFamily: theme.fontFamily,
-    fontSize: 2,
+    fontSize: compact ? 1 : 2,
     fontWeight: 400,
     lineHeight: 1.2,
     border: 'none'
@@ -232,8 +234,8 @@ var buttonStyles = function buttonStyles(props) {
     mr: 0,
     mb: 0,
     ml: spaced && direction === 'row' && group !== 'first' ? space : 0,
-    px: 3,
-    py: 2,
+    px: compact ? '11px' : 3,
+    py: compact ? 1 : 2,
     pointerEvents: disabled ? 'none' : 'auto',
     position: 'relative',
     textAlign: 'center',
@@ -320,7 +322,8 @@ Button.propTypes = {
   ariaLabel: _propTypes.default.string,
   stretch: _propTypes.default.bool,
   noWrapText: _propTypes.default.bool,
-  buttonState: _propTypes.default.oneOf(['hover', 'active', 'focus'])
+  buttonState: _propTypes.default.oneOf(['hover', 'active', 'focus']),
+  compact: _propTypes.default.bool
 };
 Button.displayName = 'Button';
 

package/package.json

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