@cloudflare/component-button 2.11.25 → 2.12.1

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.12.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.12.0...@cloudflare/component-button@2.12.1) (2022-01-19)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+# [2.12.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.27...@cloudflare/component-button@2.12.0) (2022-01-07)
+
+
+### Features
+
+* **component-button:** A11Y-584 Additional props for form layout ([1566784](http://stash.cfops.it:7999/fe/stratus/commits/1566784))
+
+
+
+
+
+## [2.11.27](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.26...@cloudflare/component-button@2.11.27) (2022-01-06)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.11.26](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.25...@cloudflare/component-button@2.11.26) (2021-12-28)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
 ## [2.11.25](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.24...@cloudflare/component-button@2.11.25) (2021-12-22)
 
 **Note:** Version bump only for package @cloudflare/component-button

package/dist/Button.d.ts

@@ -9,7 +9,9 @@ declare const _default: React.ComponentType<{
     tabIndex?: number | undefined;
     direction?: "column" | "row" | undefined;
     disabled?: boolean | undefined;
+    space?: number | undefined;
     loading?: boolean | undefined;
+    stretch?: boolean | undefined;
     submit?: boolean | undefined;
     inverted?: boolean | undefined;
     spaced?: boolean | undefined;

package/dist/ButtonGroup.d.ts

@@ -2,7 +2,9 @@ import React from 'react';
 declare const _default: React.ComponentType<{
     className?: string | undefined;
     spaced?: boolean | undefined;
+    space?: number | undefined;
     direction?: "column" | "row" | undefined;
+    stretch?: boolean | undefined;
     p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
     color?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     height?: import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined;

package/dist/TextButton.d.ts

@@ -331,6 +331,7 @@ declare const TextButton: import("react").ComponentType<{
     px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
     py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
     borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
+    'data-testid'?: string | undefined;
     innerRef?: import("react").Ref<HTMLButtonElement> | undefined;
 }>;
 export default TextButton;

package/es/Button.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isDarkMode } from '@cloudflare/style-const';
-import { createStyledComponent } from '@cloudflare/style-container';
+import { ariaAttributes, createStyledComponent } from '@cloudflare/style-container';
 import { Icon } from '@cloudflare/component-icon';
 
 const standardColors = theme => {
@@ -149,8 +149,11 @@ const styles = props => {
         inverted = _props$inverted === void 0 ? false : _props$inverted,
         group = props.group,
         spaced = props.spaced,
+        _props$space = props.space,
+        space = _props$space === void 0 ? 2 : _props$space,
         _props$type = props.type,
-        type = _props$type === void 0 ? 'default' : _props$type;
+        type = _props$type === void 0 ? 'default' : _props$type,
+        stretch = props.stretch;
   const normalStyles = buttonColors(theme).normal;
   const hoverStyles = interactionStyleAccessor('hover', props);
   const activeStyles = interactionStyleAccessor('active', props);
@@ -173,6 +176,7 @@ const styles = props => {
     color: loading ? 'transparent' : colorAccessor(normalStyles.color, props),
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
+    flexGrow: stretch ? 1 : undefined,
     alignItems: 'center',
     justifyContent: 'center',
     fontFamily: theme.fontFamily,
@@ -213,10 +217,10 @@ const styles = props => {
       animationTimingFunction: 'linear'
     } : undefined,
     opacity: disabled ? 0.5 : 'inherit',
-    mt: spaced && direction === 'column' && group !== 'first' ? 2 : 0,
+    mt: spaced && direction === 'column' && group !== 'first' ? space : 0,
     mr: 0,
     mb: 0,
-    ml: spaced && direction === 'row' && group !== 'first' ? 2 : 0,
+    ml: spaced && direction === 'row' && group !== 'first' ? space : 0,
     px: 3,
     py: 2,
     pointerEvents: disabled ? 'none' : 'auto',
@@ -249,10 +253,10 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
         form = props.form,
         tabIndex = props.tabIndex,
         ariaLabel = props.ariaLabel;
-  const dataAttributes = Object.keys(props).filter(propName => propName.startsWith('data-')).reduce((memo, dataPropName) => _objectSpread({}, memo, {
-    [dataPropName]: props[dataPropName]
+  const ariaAndDataProps = Object.keys(props).filter(propName => propName.startsWith('data-') || ariaAttributes.includes(propName)).reduce((memo, propName) => _objectSpread({}, memo, {
+    [propName]: props[propName]
   }), {});
-  return /*#__PURE__*/React.createElement("button", _extends({}, dataAttributes, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, ariaAndDataProps, {
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -272,6 +276,7 @@ Button.propTypes = {
   onClick: PropTypes.func,
   submit: PropTypes.bool,
   spaced: PropTypes.bool,
+  space: PropTypes.number,
   direction: PropTypes.oneOf(['column', 'row']),
   className: PropTypes.string,
   group: PropTypes.oneOf(['first', 'inbetween', 'last']),
@@ -285,7 +290,8 @@ Button.propTypes = {
   iconSize: PropTypes.number,
   form: PropTypes.string,
   tabIndex: PropTypes.number,
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  stretch: PropTypes.bool
 };
 Button.displayName = 'Button';
 export default createStyledComponent(styles, Button);

package/es/ButtonGroup.js

@@ -14,12 +14,14 @@ const getGroupByIndex = (index, length) => {
   return 'inbetween';
 };
 
-const addGroupProps = (children, spaced, direction) => React.Children.map(children, (child, index) => {
+const addGroupProps = (children, spaced, space, direction, stretch) => React.Children.map(children, (child, index) => {
   if ( /*#__PURE__*/React.isValidElement(child)) {
     return /*#__PURE__*/React.cloneElement(child, {
       group: getGroupByIndex(index, React.Children.count(children)),
       spaced,
-      direction
+      space,
+      direction,
+      stretch
     });
   }
 
@@ -30,15 +32,19 @@ const ButtonGroup = ({
   className,
   children,
   spaced,
-  direction = 'row'
+  space,
+  direction = 'row',
+  stretch
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     className: className
-  }, addGroupProps(children, spaced, direction));
+  }, addGroupProps(children, spaced, space, direction, stretch));
 };
 
 ButtonGroup.propTypes = {
   spaced: PropTypes.bool,
+  space: PropTypes.number,
+  stretch: PropTypes.bool,
   className: PropTypes.string.isRequired,
   direction: PropTypes.oneOf(['column', 'row'])
 };

package/es/TextButton.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import { createStyledComponent } from '@cloudflare/style-container';
 const TextButton = createStyledComponent(({
   theme
@@ -17,6 +18,7 @@ const TextButton = createStyledComponent(({
   fontSize: 2,
   fontWeight: 400,
   outline: 'none',
+  overflow: 'hidden',
   ':hover': {
     color: theme.colors.orange[6]
   },
@@ -25,4 +27,8 @@ const TextButton = createStyledComponent(({
     outlineOffset: '1px'
   }
 }), 'button');
+TextButton.propTypes = {
+  'data-testid': PropTypes.string
+};
+TextButton.displayName = 'TextButton';
 export default TextButton;

package/lib/Button.js

@@ -165,8 +165,11 @@ var styles = function styles(props) {
       inverted = _props$inverted === void 0 ? false : _props$inverted,
       group = props.group,
       spaced = props.spaced,
+      _props$space = props.space,
+      space = _props$space === void 0 ? 2 : _props$space,
       _props$type = props.type,
-      type = _props$type === void 0 ? 'default' : _props$type;
+      type = _props$type === void 0 ? 'default' : _props$type,
+      stretch = props.stretch;
   var normalStyles = buttonColors(theme).normal;
   var hoverStyles = interactionStyleAccessor('hover', props);
   var activeStyles = interactionStyleAccessor('active', props);
@@ -189,6 +192,7 @@ var styles = function styles(props) {
     color: loading ? 'transparent' : colorAccessor(normalStyles.color, props),
     cursor: disabled || loading ? 'default' : 'pointer',
     display: 'inline-flex',
+    flexGrow: stretch ? 1 : undefined,
     alignItems: 'center',
     justifyContent: 'center',
     fontFamily: theme.fontFamily,
@@ -229,10 +233,10 @@ var styles = function styles(props) {
       animationTimingFunction: 'linear'
     } : undefined,
     opacity: disabled ? 0.5 : 'inherit',
-    mt: spaced && direction === 'column' && group !== 'first' ? 2 : 0,
+    mt: spaced && direction === 'column' && group !== 'first' ? space : 0,
     mr: 0,
     mb: 0,
-    ml: spaced && direction === 'row' && group !== 'first' ? 2 : 0,
+    ml: spaced && direction === 'row' && group !== 'first' ? space : 0,
     px: 3,
     py: 2,
     pointerEvents: disabled ? 'none' : 'auto',
@@ -265,12 +269,12 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       form = props.form,
       tabIndex = props.tabIndex,
       ariaLabel = props.ariaLabel;
-  var dataAttributes = Object.keys(props).filter(function (propName) {
-    return propName.startsWith('data-');
-  }).reduce(function (memo, dataPropName) {
-    return _objectSpread({}, memo, _defineProperty({}, dataPropName, props[dataPropName]));
+  var ariaAndDataProps = Object.keys(props).filter(function (propName) {
+    return propName.startsWith('data-') || _styleContainer.ariaAttributes.includes(propName);
+  }).reduce(function (memo, propName) {
+    return _objectSpread({}, memo, _defineProperty({}, propName, props[propName]));
   }, {});
-  return /*#__PURE__*/_react.default.createElement("button", _extends({}, dataAttributes, {
+  return /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaAndDataProps, {
     type: submit ? 'submit' : 'button',
     "data-testid": testId,
     disabled: disabled || loading,
@@ -291,6 +295,7 @@ Button.propTypes = {
   onClick: _propTypes.default.func,
   submit: _propTypes.default.bool,
   spaced: _propTypes.default.bool,
+  space: _propTypes.default.number,
   direction: _propTypes.default.oneOf(['column', 'row']),
   className: _propTypes.default.string,
   group: _propTypes.default.oneOf(['first', 'inbetween', 'last']),
@@ -304,7 +309,8 @@ Button.propTypes = {
   iconSize: _propTypes.default.number,
   form: _propTypes.default.string,
   tabIndex: _propTypes.default.number,
-  ariaLabel: _propTypes.default.string
+  ariaLabel: _propTypes.default.string,
+  stretch: _propTypes.default.bool
 };
 Button.displayName = 'Button';
 

package/lib/ButtonGroup.js

@@ -25,13 +25,15 @@ var getGroupByIndex = function getGroupByIndex(index, length) {
   return 'inbetween';
 };
 
-var addGroupProps = function addGroupProps(children, spaced, direction) {
+var addGroupProps = function addGroupProps(children, spaced, space, direction, stretch) {
   return _react.default.Children.map(children, function (child, index) {
     if ( /*#__PURE__*/_react.default.isValidElement(child)) {
       return /*#__PURE__*/_react.default.cloneElement(child, {
         group: getGroupByIndex(index, _react.default.Children.count(children)),
         spaced: spaced,
-        direction: direction
+        space: space,
+        direction: direction,
+        stretch: stretch
       });
     }
 
@@ -43,15 +45,19 @@ var ButtonGroup = function ButtonGroup(_ref) {
   var className = _ref.className,
       children = _ref.children,
       spaced = _ref.spaced,
+      space = _ref.space,
       _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'row' : _ref$direction;
+      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+      stretch = _ref.stretch;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
-  }, addGroupProps(children, spaced, direction));
+  }, addGroupProps(children, spaced, space, direction, stretch));
 };
 
 ButtonGroup.propTypes = {
   spaced: _propTypes.default.bool,
+  space: _propTypes.default.number,
+  stretch: _propTypes.default.bool,
   className: _propTypes.default.string.isRequired,
   direction: _propTypes.default.oneOf(['column', 'row'])
 };

package/lib/TextButton.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styleContainer = require("@cloudflare/style-container");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -25,6 +29,7 @@ var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
     fontSize: 2,
     fontWeight: 400,
     outline: 'none',
+    overflow: 'hidden',
     ':hover': {
       color: theme.colors.orange[6]
     },
@@ -34,5 +39,9 @@ var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
     }
   };
 }, 'button');
+TextButton.propTypes = {
+  'data-testid': _propTypes.default.string
+};
+TextButton.displayName = 'TextButton';
 var _default = TextButton;
 exports.default = _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "2.11.25",
+  "version": "2.12.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -12,9 +12,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^6.6.7",
-    "@cloudflare/style-const": "^5.1.20",
-    "@cloudflare/style-container": "^7.5.26",
+    "@cloudflare/component-icon": "^6.6.10",
+    "@cloudflare/style-const": "^5.2.0",
+    "@cloudflare/style-container": "^7.6.1",
     "polished": "^1.9.3",
     "prop-types": "^15.6.0"
   },
@@ -32,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "584b1bfe5468d76991b11dd7929f537ba0961f96"
+  "gitHead": "2ff85104561ff104d4e3d777f0c3d9ee49c2d4c7"
 }