@cloudflare/component-button 2.11.9 → 2.11.13

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.13](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.12...@cloudflare/component-button@2.11.13) (2021-11-22)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.11.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.11...@cloudflare/component-button@2.11.12) (2021-11-16)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [2.11.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-button@2.11.10...@cloudflare/component-button@2.11.11) (2021-11-16)
+
+**Note:** Version bump only for package @cloudflare/component-button
+
+
+
+
+
+## [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

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

@@ -102,21 +102,24 @@ const buttonColors = theme => {
   };
 };
 
-const getFocusBorderColor = (theme, type, inverted) => {
-  var _invertedBorders$type;
+const getFocusOutlineColor = (theme, type, inverted) => {
+  var _invertedOutlines$typ;
 
-  const borders = {
-    default: theme.colors.gray[0],
-    primary: theme.colors.blue[0],
-    success: theme.colors.green[0],
-    warning: theme.colors.orange[0],
-    danger: theme.colors.red[0]
+  const standardIndex = isDarkMode() ? 3 : 4;
+  const FOCUS_OFFSET_INDEX = 2;
+  const focusIndex = standardIndex - FOCUS_OFFSET_INDEX;
+  const outlines = {
+    default: 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]
   };
-  const invertedBorders = {
-    danger: theme.colors.red[0],
-    primary: theme.colors.blue[0]
+  const invertedOutlines = {
+    danger: theme.colors.red[focusIndex],
+    primary: theme.colors.blue[focusIndex]
   };
-  return inverted ? (_invertedBorders$type = invertedBorders[type]) !== null && _invertedBorders$type !== void 0 ? _invertedBorders$type : borders[type] : borders[type];
+  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
 };
 
 const colorAccessor = (property, {
@@ -137,8 +140,6 @@ const interactionStyleAccessor = (interactionState, props) => {
 };
 
 const styles = props => {
-  var _props$type;
-
   const theme = props.theme,
         _props$loading = props.loading,
         loading = _props$loading === void 0 ? false : _props$loading,
@@ -147,19 +148,24 @@ const styles = props => {
         _props$inverted = props.inverted,
         inverted = _props$inverted === void 0 ? false : _props$inverted,
         group = props.group,
-        spaced = props.spaced;
+        spaced = props.spaced,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'default' : _props$type;
   const normalStyles = buttonColors(theme).normal;
-  const focusBorderColor = getFocusBorderColor(theme, (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'default', inverted);
+  const hoverStyles = interactionStyleAccessor('hover', props);
+  const activeStyles = interactionStyleAccessor('active', props);
+  const focusStyles = interactionStyleAccessor('focus', props);
   return {
-    '&:hover': interactionStyleAccessor('hover', props),
-    '&:active': interactionStyleAccessor('active', props),
-    '&:focus': _objectSpread({}, interactionStyleAccessor('focus', props)),
+    '&:hover': hoverStyles,
+    '&:active': activeStyles,
+    '&:focus': focusStyles,
     '&:focus-visible': {
-      outline: 'none',
-      boxShadow: `inset 0px 0px 0px 2px ${focusBorderColor}`
+      outlineOffset: 3,
+      outlineStyle: 'auto',
+      outlineColor: getFocusOutlineColor(theme, type, inverted)
     },
-    '&:focus-within:hover': interactionStyleAccessor('focus', props),
-    '&:active:hover': interactionStyleAccessor('active', props),
+    '&:focus-within:hover': focusStyles,
+    '&:active:hover': activeStyles,
     '&[title]': {
       pointerEvents: disabled ? 'auto' : 'none'
     },
@@ -241,7 +247,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 +260,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 +284,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 = ({
@@ -13,6 +12,7 @@ const IconTextButton = ({
   iconType,
   children
 }) => /*#__PURE__*/React.createElement(TextButton, {
+  type: "button",
   onClick: onClick
 }, /*#__PURE__*/React.createElement(IconTextWrapper, null, /*#__PURE__*/React.createElement(Icon, {
   type: iconType,

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

@@ -115,21 +115,24 @@ var buttonColors = function buttonColors(theme) {
   };
 };
 
-var getFocusBorderColor = function getFocusBorderColor(theme, type, inverted) {
-  var _invertedBorders$type;
+var getFocusOutlineColor = function getFocusOutlineColor(theme, type, inverted) {
+  var _invertedOutlines$typ;
 
-  var borders = {
-    default: theme.colors.gray[0],
-    primary: theme.colors.blue[0],
-    success: theme.colors.green[0],
-    warning: theme.colors.orange[0],
-    danger: theme.colors.red[0]
+  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 invertedBorders = {
-    danger: theme.colors.red[0],
-    primary: theme.colors.blue[0]
+  var invertedOutlines = {
+    danger: theme.colors.red[focusIndex],
+    primary: theme.colors.blue[focusIndex]
   };
-  return inverted ? (_invertedBorders$type = invertedBorders[type]) !== null && _invertedBorders$type !== void 0 ? _invertedBorders$type : borders[type] : borders[type];
+  return inverted ? (_invertedOutlines$typ = invertedOutlines[type]) !== null && _invertedOutlines$typ !== void 0 ? _invertedOutlines$typ : outlines[type] : outlines[type];
 };
 
 var colorAccessor = function colorAccessor(property, _ref) {
@@ -153,8 +156,6 @@ var interactionStyleAccessor = function interactionStyleAccessor(interactionStat
 };
 
 var styles = function styles(props) {
-  var _props$type;
-
   var theme = props.theme,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
@@ -163,19 +164,24 @@ var styles = function styles(props) {
       _props$inverted = props.inverted,
       inverted = _props$inverted === void 0 ? false : _props$inverted,
       group = props.group,
-      spaced = props.spaced;
+      spaced = props.spaced,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'default' : _props$type;
   var normalStyles = buttonColors(theme).normal;
-  var focusBorderColor = getFocusBorderColor(theme, (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'default', inverted);
+  var hoverStyles = interactionStyleAccessor('hover', props);
+  var activeStyles = interactionStyleAccessor('active', props);
+  var focusStyles = interactionStyleAccessor('focus', props);
   return {
-    '&:hover': interactionStyleAccessor('hover', props),
-    '&:active': interactionStyleAccessor('active', props),
-    '&:focus': _objectSpread({}, interactionStyleAccessor('focus', props)),
+    '&:hover': hoverStyles,
+    '&:active': activeStyles,
+    '&:focus': focusStyles,
     '&:focus-visible': {
-      outline: 'none',
-      boxShadow: "inset 0px 0px 0px 2px ".concat(focusBorderColor)
+      outlineOffset: 3,
+      outlineStyle: 'auto',
+      outlineColor: getFocusOutlineColor(theme, type, inverted)
     },
-    '&:focus-within:hover': interactionStyleAccessor('focus', props),
-    '&:active:hover': interactionStyleAccessor('active', props),
+    '&:focus-within:hover': focusStyles,
+    '&:active:hover': activeStyles,
     '&[title]': {
       pointerEvents: disabled ? 'auto' : 'none'
     },
@@ -257,7 +263,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 +278,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 +303,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');
 
@@ -28,6 +27,7 @@ var IconTextButton = function IconTextButton(_ref) {
       iconType = _ref.iconType,
       children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_TextButton.default, {
+    type: "button",
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(IconTextWrapper, null, /*#__PURE__*/_react.default.createElement(_componentIcon.Icon, {
     type: iconType,

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.9",
+  "version": "2.11.13",
   "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.9",
-    "@cloudflare/style-const": "^5.1.9",
-    "@cloudflare/style-container": "^7.5.15",
+    "@cloudflare/component-icon": "^6.5.13",
+    "@cloudflare/style-const": "^5.1.13",
+    "@cloudflare/style-container": "^7.5.19",
     "polished": "^1.9.3",
     "prop-types": "^15.6.0"
   },
@@ -32,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "abca007122f523baa19aeeeac04d97bdded33584"
+  "gitHead": "569113c2ab73ce93969008d15ad9e6648d0d3ed0"
 }