@cloudflare/component-button 5.3.1 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 5.4.0
+
+### Minor Changes
+
+- c464928e05: Add compact prop
+
+## 5.3.2
+
+### Patch Changes
+
+- 8fe46c6d2d: Make normal plain button backgrounds transparent
+
 ## 5.3.1
 
 ### 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";
@@ -61,7 +61,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 +105,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

@@ -49,9 +49,9 @@ var buttonColors = theme => {
           danger: theme.colors.button.plainDestructive.normal.background,
           primary: theme.colors.button.plain.normal.background
         },
-        plain: theme.colors.button.plain.normal.background,
-        plainMono: theme.colors.button.plainMono.normal.background,
-        plainDestructive: theme.colors.button.plainDestructive.normal.background
+        plain: 'transparent',
+        plainMono: 'transparent',
+        plainDestructive: 'transparent'
       },
       color: standardColors(theme, 'normal')
     },
@@ -151,7 +151,8 @@ export var buttonStyles = props => {
     type = 'default',
     stretch,
     noWrapText,
-    buttonState
+    buttonState,
+    compact
   } = props;
   var styles = {
     normal: buttonColors(theme).normal,
@@ -183,7 +184,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 +220,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 +301,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

@@ -63,9 +63,9 @@ var buttonColors = function buttonColors(theme) {
           danger: theme.colors.button.plainDestructive.normal.background,
           primary: theme.colors.button.plain.normal.background
         },
-        plain: theme.colors.button.plain.normal.background,
-        plainMono: theme.colors.button.plainMono.normal.background,
-        plainDestructive: theme.colors.button.plainDestructive.normal.background
+        plain: 'transparent',
+        plainMono: 'transparent',
+        plainDestructive: 'transparent'
       },
       color: standardColors(theme, 'normal')
     },
@@ -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),
@@ -196,7 +197,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 +233,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 +321,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.1",
+  "version": "5.4.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",