@cloudflare/component-button 2.11.6 → 2.11.10

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.10](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.9...@cloudflare/component-button@2.11.10) (2021-11-15)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.11.9](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.8...@cloudflare/component-button@2.11.9) (2021-11-05)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.11.8](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.7...@cloudflare/component-button@2.11.8) (2021-11-04)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.11.7](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.6...@cloudflare/component-button@2.11.7) (2021-11-04)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
 ## [2.11.6](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.5...@cloudflare/component-button@2.11.6) (2021-11-04)
 
 **Note:** Version bump only for package @cloudflare/component-button

package/dist/Button.d.ts

@@ -18,6 +18,7 @@ declare const _default: React.ComponentType<{
     iconType?: IconType | undefined;
     iconLabel?: string | undefined;
     iconSize?: number | undefined;
+    ariaLabel?: string | 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/es/Button.js

@@ -241,7 +241,8 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
         iconLabel = props.iconLabel,
         iconSize = props.iconSize,
         form = props.form,
-        tabIndex = props.tabIndex;
+        tabIndex = props.tabIndex,
+        ariaLabel = props.ariaLabel;
   const dataAttributes = Object.keys(props).filter(propName => propName.startsWith('data-')).reduce((memo, dataPropName) => _objectSpread({}, memo, {
     [dataPropName]: props[dataPropName]
   }), {});
@@ -253,7 +254,8 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClick: onClick,
     form: form,
     tabIndex: tabIndex,
-    ref: ref
+    ref: ref,
+    "aria-label": ariaLabel
   }), iconType && /*#__PURE__*/React.createElement(Icon, {
     size: iconSize,
     type: iconType,
@@ -276,7 +278,8 @@ Button.propTypes = {
   iconLabel: PropTypes.string,
   iconSize: PropTypes.number,
   form: PropTypes.string,
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  ariaLabel: PropTypes.string
 };
 Button.displayName = 'Button';
 export default createStyledComponent(styles, Button);

package/es/IconTextButton.js

@@ -4,8 +4,7 @@ import { Icon } from '@cloudflare/component-icon';
 import TextButton from './TextButton';
 const IconTextWrapper = createStyledComponent(() => ({
   display: 'flex',
-  alignItems: 'center',
-  marginTop: '2px'
+  alignItems: 'center'
 }), 'div');
 
 const IconTextButton = ({

package/es/TextButton.js

@@ -12,6 +12,7 @@ const TextButton = createStyledComponent(({
   padding: '0px',
   display: 'inline-block',
   alignItems: 'center',
+  lineHeight: '1.5',
   height: 'fit-content',
   fontSize: 2,
   fontWeight: 400,
@@ -19,10 +20,9 @@ const TextButton = createStyledComponent(({
   ':hover': {
     color: theme.colors.orange[6]
   },
-  ':focus': {
+  ':focus-visible': {
     outline: '-webkit-focus-ring-color auto 1px',
-    outlineOffset: '1px',
-    paddingBottom: '2px'
+    outlineOffset: '1px'
   }
 }), 'button');
 export default TextButton;

package/lib/Button.js

@@ -257,7 +257,8 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       iconLabel = props.iconLabel,
       iconSize = props.iconSize,
       form = props.form,
-      tabIndex = props.tabIndex;
+      tabIndex = props.tabIndex,
+      ariaLabel = props.ariaLabel;
   var dataAttributes = Object.keys(props).filter(function (propName) {
     return propName.startsWith('data-');
   }).reduce(function (memo, dataPropName) {
@@ -271,7 +272,8 @@ var Button = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick: onClick,
     form: form,
     tabIndex: tabIndex,
-    ref: ref
+    ref: ref,
+    "aria-label": ariaLabel
   }), iconType && /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
     size: iconSize,
     type: iconType,
@@ -295,7 +297,8 @@ Button.propTypes = {
   iconLabel: _propTypes.default.string,
   iconSize: _propTypes.default.number,
   form: _propTypes.default.string,
-  tabIndex: _propTypes.default.number
+  tabIndex: _propTypes.default.number,
+  ariaLabel: _propTypes.default.string
 };
 Button.displayName = 'Button';
 

package/lib/IconTextButton.js

@@ -18,8 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var IconTextWrapper = (0, _styleContainer.createStyledComponent)(function () {
   return {
     display: 'flex',
-    alignItems: 'center',
-    marginTop: '2px'
+    alignItems: 'center'
   };
 }, 'div');
 

package/lib/TextButton.js

@@ -20,6 +20,7 @@ var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
     padding: '0px',
     display: 'inline-block',
     alignItems: 'center',
+    lineHeight: '1.5',
     height: 'fit-content',
     fontSize: 2,
     fontWeight: 400,
@@ -27,10 +28,9 @@ var TextButton = (0, _styleContainer.createStyledComponent)(function (_ref) {
     ':hover': {
       color: theme.colors.orange[6]
     },
-    ':focus': {
+    ':focus-visible': {
       outline: '-webkit-focus-ring-color auto 1px',
-      outlineOffset: '1px',
-      paddingBottom: '2px'
+      outlineOffset: '1px'
     }
   };
 }, 'button');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-button",
   "description": "Cloudflare Button Component",
-  "version": "2.11.6",
+  "version": "2.11.10",
   "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.5.6",
-    "@cloudflare/style-const": "^5.1.6",
-    "@cloudflare/style-container": "^7.5.12",
+    "@cloudflare/component-icon": "^6.5.10",
+    "@cloudflare/style-const": "^5.1.10",
+    "@cloudflare/style-container": "^7.5.16",
     "polished": "^1.9.3",
     "prop-types": "^15.6.0"
   },
@@ -32,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "cc0df5f700d3070ec5e9f6ebd472c01f15c30ff8"
+  "gitHead": "2ee21b47b66137477e1ae4798a440e90319bfe2d"
 }