@cloudflare/component-button 5.0.0 → 5.2.0

package/lib/Button.js

@@ -25,18 +25,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var standardColors = function standardColors(theme) {
+var borderRadius = '4px';
+
+var standardColors = function standardColors(theme, state) {
+  var _theme$colors$button$, _theme$colors$button$2, _theme$colors$button$3, _theme$colors$button$4, _theme$colors$button$5, _theme$colors$button$6;
+
   var color = theme.colors.gray[9];
   return {
     default: (0, _styleConst.isDarkMode)() ? color : theme.colors.gray[1],
-    primary: color,
     success: color,
     warning: color,
-    danger: color,
     inverted: {
-      danger: theme.colors.red[3],
-      primary: theme.colors.blue[3]
-    }
+      danger: (_theme$colors$button$ = theme.colors.button.danger[state]) === null || _theme$colors$button$ === void 0 ? void 0 : _theme$colors$button$[state === 'active' ? 'text' : 'background'],
+      primary: (_theme$colors$button$2 = theme.colors.button.primary[state]) === null || _theme$colors$button$2 === void 0 ? void 0 : _theme$colors$button$2[state === 'active' ? 'text' : 'background']
+    },
+    primary: ((_theme$colors$button$3 = theme.colors.button.primary[state]) === null || _theme$colors$button$3 === void 0 ? void 0 : _theme$colors$button$3.text) || color,
+    danger: ((_theme$colors$button$4 = theme.colors.button.danger[state]) === null || _theme$colors$button$4 === void 0 ? void 0 : _theme$colors$button$4.text) || color,
+    plain: ((_theme$colors$button$5 = theme.colors.button.plain[state]) === null || _theme$colors$button$5 === void 0 ? void 0 : _theme$colors$button$5.text) || color,
+    plainMono: ((_theme$colors$button$6 = theme.colors.button.plainMono[state]) === null || _theme$colors$button$6 === void 0 ? void 0 : _theme$colors$button$6.text) || color
   };
 };
 
@@ -48,95 +54,73 @@ var buttonColors = function buttonColors(theme) {
     normal: {
       backgroundColor: {
         default: (0, _styleConst.isDarkMode)() ? theme.colors.gray[standardIndex] : theme.colors.gray[8],
-        primary: theme.colors.blue[standardIndex],
+        primary: theme.colors.button.primary.normal.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.normal.background,
         inverted: {
           danger: 'transparent',
           primary: 'transparent'
-        }
+        },
+        plain: theme.colors.button.plain.normal.background,
+        plainMono: theme.colors.button.plainMono.normal.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'normal')
     },
     // Hover
     hover: {
       backgroundColor: {
         default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 2 : 7],
-        primary: theme.colors.blue[hoverIndex],
+        primary: theme.colors.button.primary.hover.background,
         success: theme.colors.green[hoverIndex],
         warning: theme.colors.orange[hoverIndex],
-        danger: theme.colors.red[hoverIndex],
-        inverted: {
-          danger: theme.colors.red[hoverIndex],
-          primary: theme.colors.blue[hoverIndex]
-        }
-      },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
+        danger: theme.colors.button.danger.hover.background,
         inverted: {
           danger: theme.colors.white,
           primary: theme.colors.white
-        }
-      })
+        },
+        plain: theme.colors.button.plain.hover.background,
+        plainMono: theme.colors.button.plainMono.hover.background
+      },
+      color: standardColors(theme, 'hover')
     },
     // Active
     active: {
       backgroundColor: {
-        default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 6],
+        primary: theme.colors.button.primary.active.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.active.background,
         inverted: {
-          danger: theme.colors.red[standardIndex],
-          primary: theme.colors.blue[standardIndex]
-        }
+          danger: theme.colors.red[hoverIndex],
+          primary: theme.colors.blue[hoverIndex]
+        },
+        plain: theme.colors.button.plain.active.background,
+        plainMono: theme.colors.button.plainMono.active.background
       },
-      color: _objectSpread(_objectSpread({}, standardColors(theme)), {}, {
-        inverted: {
-          danger: theme.colors.gray[9],
-          primary: theme.colors.gray[9]
-        }
-      })
+      color: standardColors(theme, 'active')
     },
     // Focus
     focus: {
       backgroundColor: {
         default: theme.colors.gray[(0, _styleConst.isDarkMode)() ? 3 : 8],
-        primary: theme.colors.blue[standardIndex],
+        primary: theme.colors.button.primary.focus.background,
         success: theme.colors.green[standardIndex],
         warning: theme.colors.orange[standardIndex],
-        danger: theme.colors.red[standardIndex],
+        danger: theme.colors.button.danger.focus.background,
         inverted: {
           danger: 'transparent',
           primary: 'transparent'
-        }
+        },
+        plain: theme.colors.button.plain.focus.background,
+        plainMono: theme.colors.button.plainMono.focus.background
       },
-      color: standardColors(theme)
+      color: standardColors(theme, 'focus')
     }
   };
 };
 
-var getFocusOutlineColor = function getFocusOutlineColor(theme, type, inverted) {
-  var _invertedOutlines$typ;
-
-  var standardIndex = (0, _styleConst.isDarkMode)() ? 3 : 4;
-  var FOCUS_OFFSET_INDEX = 2;
-  var focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
-  var outlines = {
-    default: (0, _styleConst.isDarkMode)() ? theme.colors.gray[focusIndex] : theme.colors.gray[8 - FOCUS_OFFSET_INDEX],
-    primary: theme.colors.blue[focusIndex],
-    success: theme.colors.green[focusIndex],
-    warning: theme.colors.orange[focusIndex],
-    danger: theme.colors.red[focusIndex]
-  };
-  var invertedOutlines = {
-    danger: theme.colors.red[focusIndex],
-    primary: theme.colors.blue[focusIndex]
-  };
-  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
-};
-
 var colorAccessor = function colorAccessor(property, _ref) {
   var _ref$inverted = _ref.inverted,
       inverted = _ref$inverted === void 0 ? false : _ref$inverted,
@@ -151,13 +135,18 @@ var interactionStyleAccessor = function interactionStyleAccessor(interactionStat
       disabled = props.disabled;
   var isInteractive = !(loading || disabled);
   var stateStyles = buttonColors(theme)[interactionState];
+  var color = colorAccessor(stateStyles.color, props);
+  var backgroundColor = colorAccessor(stateStyles.backgroundColor, props);
   return isInteractive ? {
-    backgroundColor: colorAccessor(stateStyles.backgroundColor, props),
-    color: colorAccessor(stateStyles.color, props)
+    backgroundColor: backgroundColor,
+    color: color,
+    boxShadow: props.inverted ? "inset 0px 0px 0px 1px ".concat(interactionState === 'active' ? backgroundColor : color) : undefined
   } : undefined;
 };
 
 var buttonStyles = function buttonStyles(props) {
+  var _styles$buttonState, _styles$buttonState2;
+
   var theme = props.theme,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
@@ -172,27 +161,32 @@ var buttonStyles = function buttonStyles(props) {
       _props$type = props.type,
       type = _props$type === void 0 ? 'default' : _props$type,
       stretch = props.stretch,
-      noWrapText = props.noWrapText;
-  var normalStyles = buttonColors(theme).normal;
-  var hoverStyles = interactionStyleAccessor('hover', props);
-  var activeStyles = interactionStyleAccessor('active', props);
-  var focusStyles = interactionStyleAccessor('focus', props);
-  return {
-    '&:hover': hoverStyles,
-    '&:active': activeStyles,
-    '&:focus': focusStyles,
+      noWrapText = props.noWrapText,
+      buttonState = props.buttonState;
+  var styles = {
+    normal: buttonColors(theme).normal,
+    hover: interactionStyleAccessor('hover', props),
+    active: interactionStyleAccessor('active', props),
+    focus: interactionStyleAccessor('focus', props)
+  };
+  var color = buttonState && styles[buttonState] ? (_styles$buttonState = styles[buttonState]) === null || _styles$buttonState === void 0 ? void 0 : _styles$buttonState.color : colorAccessor(styles.normal.color, props);
+  var backgroundColor = buttonState && styles[buttonState] ? (_styles$buttonState2 = styles[buttonState]) === null || _styles$buttonState2 === void 0 ? void 0 : _styles$buttonState2.backgroundColor : colorAccessor(styles.normal.backgroundColor, props);
+  return _objectSpread(_objectSpread(_objectSpread({}, buttonState ? {} : {
+    '&:focus': styles.focus,
+    '&:hover': styles.hover,
+    '&:active': styles.active,
+    '&:focus:active': styles.active
+  }), {}, {
     '&:focus-visible': {
       outlineOffset: 3,
       outlineStyle: 'auto',
-      outlineColor: getFocusOutlineColor(theme, type, inverted)
+      outlineColor: type === 'danger' ? theme.colors.red[(0, _styleConst.isDarkMode)() ? 3 : 4] : theme.colors.focus
     },
-    '&:focus-within:hover': focusStyles,
-    '&:active:hover': activeStyles,
     '&[title]': {
       pointerEvents: disabled ? 'auto' : 'none'
     },
-    backgroundColor: colorAccessor(normalStyles.backgroundColor, props),
-    color: loading ? 'transparent' : colorAccessor(normalStyles.color, props),
+    backgroundColor: backgroundColor,
+    color: loading ? 'transparent' : color,
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
     flexGrow: stretch ? 1 : undefined,
@@ -202,22 +196,17 @@ var buttonStyles = function buttonStyles(props) {
     fontSize: 2,
     fontWeight: 400,
     lineHeight: 1.2,
-    borderBottomWidth: inverted ? '1px' : 0,
-    borderLeftWidth: inverted ? '1px' : 0,
-    borderRightWidth: inverted ? '1px' : 0,
-    borderTopWidth: inverted ? '1px' : 0,
-    borderBottomStyle: 'solid',
-    borderTopStyle: 'solid',
-    borderLeftStyle: 'solid',
-    borderRightStyle: 'solid',
-    borderColor: inverted ? colorAccessor(normalStyles.color, props) : 'currentColor',
-    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
-    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : theme.radii[2],
+    border: 'none'
+  }, inverted ? {
+    boxShadow: "inset 0px 0px 0px 1px ".concat(buttonState === 'active' ? backgroundColor : color)
+  } : {}), {}, {
+    borderTopRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderTopLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomLeftRadius: (group === 'last' || group === 'inbetween') && !spaced ? 0 : borderRadius,
+    borderBottomRightRadius: (group === 'first' || group === 'inbetween') && !spaced ? 0 : borderRadius,
     '&::before': loading ? {
       content: '"•••"',
-      color: colorAccessor(normalStyles.color, props),
+      color: color,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -245,7 +234,7 @@ var buttonStyles = function buttonStyles(props) {
     pointerEvents: disabled ? 'none' : 'auto',
     position: 'relative',
     textAlign: 'center',
-    transitionProperty: loading ? 'background-color,border-color' : 'background-color,border-color,color',
+    transitionProperty: 'all',
     transitionDuration: '200ms',
     transitionTimingFunction: 'ease',
     userSelect: 'none',
@@ -253,13 +242,14 @@ var buttonStyles = function buttonStyles(props) {
     float: 'none',
     whiteSpace: noWrapText ? 'nowrap' : 'normal',
     width: direction === 'column' ? '100%' : 'auto'
-  };
+  });
 };
 
 exports.buttonStyles = buttonStyles;
 
 var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$submit = props.submit,
+  var id = props.id,
+      _props$submit = props.submit,
       submit = _props$submit === void 0 ? false : _props$submit,
       className = props.className,
       disabled = props.disabled,
@@ -282,6 +272,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return _objectSpread(_objectSpread({}, memo), {}, _defineProperty({}, propName, props[propName]));
   }, {});
   return /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaAndDataProps, {
+    id: id,
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -305,6 +296,7 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Button.propTypes = {
+  id: _propTypes.default.string,
   onClick: _propTypes.default.func,
   submit: _propTypes.default.bool,
   spaced: _propTypes.default.bool,
@@ -312,7 +304,7 @@ Button.propTypes = {
   direction: _propTypes.default.oneOf(['column', 'row']),
   className: _propTypes.default.string,
   group: _propTypes.default.oneOf(['first', 'inbetween', 'last']),
-  type: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'danger']),
+  type: _propTypes.default.oneOf(['default', 'primary', 'success', 'warning', 'danger', 'plain', 'plainMono']),
   testId: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   loading: _propTypes.default.bool,
@@ -324,7 +316,8 @@ Button.propTypes = {
   tabIndex: _propTypes.default.number,
   ariaLabel: _propTypes.default.string,
   stretch: _propTypes.default.bool,
-  noWrapText: _propTypes.default.bool
+  noWrapText: _propTypes.default.bool,
+  buttonState: _propTypes.default.oneOf(['hover', 'active', 'focus'])
 };
 Button.displayName = 'Button';
 

package/lib/UnstyledButton.js

@@ -7,16 +7,26 @@ exports.default = void 0;
 
 var _styleContainer = require("@cloudflare/style-container");
 
-var UnstyledButton = (0, _styleContainer.createStyledComponent)(function () {
-  return {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var UnstyledButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
+  var theme = _ref.theme,
+      focus = _ref.focus,
+      disabled = _ref.disabled;
+  return _objectSpread({
     background: 'none',
     color: 'inherit',
     border: 'none',
     padding: 0,
+    opacity: disabled ? 0.5 : undefined,
     font: 'inherit',
     cursor: 'pointer',
     outline: 'inherit'
-  };
+  }, focus ? theme.mixins.focus() : {});
 }, 'button');
 var _default = UnstyledButton;
 exports.default = _default;

package/package.json

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