terra-button - npm Package Compare versions

Comparing version 3.33.0 to 3.34.0

CHANGELOG.md

@@ -7,2 +7,8 @@ ChangeLog
 
+3.34.0 - (March 31, 2020)
+------------------
+### Fixed
+* Fixed long press enabling click focus styles.
+* Fixed button not getting focus after closing of modal.
+
 3.33.0 - (March 10, 2020)
@@ -9,0 +15,0 @@ ------------------

lib/Button.js

@@ -38,8 +38,12 @@ "use strict";
 
+function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -176,2 +180,4 @@
 
+  var _super = _createSuper(Button);
+
   function Button(props) {
@@ -182,3 +188,3 @@ var _this;
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Button).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
@@ -216,3 +222,5 @@ active: false,
       if (document.activeElement !== event.currentTarget) {
+        this.shouldShowFocus = false;
         event.currentTarget.focus();
+        this.shouldShowFocus = true;
       }
@@ -288,11 +296,2 @@
     value: function handleMouseDown(event) {
-      var _this2 = this;
-
-      // Prevent button from showing focus styles when clicked
-      this.shouldShowFocus = false; // Wait until after onFocus has been triggered on browsers where it will get triggered for click
-
-      setTimeout(function () {
-        _this2.shouldShowFocus = true;
-      }, 300);
-
       if (this.props.onMouseDown) {
@@ -355,3 +354,3 @@ this.props.onMouseDown(event);
       }]);
-      var buttonText = !isIconOnly && variant !== 'utility' ? _react.default.createElement("span", {
+      var buttonText = !isIconOnly && variant !== 'utility' ? /*#__PURE__*/_react.default.createElement("span", {
         className: buttonTextClasses
@@ -368,3 +367,3 @@ }, text) : null;
 
-        buttonIcon = _react.default.createElement("span", {
+        buttonIcon = /*#__PURE__*/_react.default.createElement("span", {
           className: iconClasses
@@ -380,3 +379,3 @@ }, cloneIcon);
 
-      var buttonLabel = _react.default.createElement("span", {
+      var buttonLabel = /*#__PURE__*/_react.default.createElement("span", {
         className: buttonLabelClasses
@@ -392,3 +391,3 @@ }, isReversed ? buttonText : buttonIcon, isReversed ? buttonIcon : buttonText);
       var ComponentType = href ? 'a' : 'button';
-      return _react.default.createElement(ComponentType, _extends({}, customProps, {
+      return /*#__PURE__*/_react.default.createElement(ComponentType, _extends({}, customProps, {
         className: buttonClasses,
@@ -395,0 +394,0 @@ type: type,

lib/terra-dev-site/doc/example/ButtonAnchor.js

@@ -21,3 +21,3 @@ "use strict";
 var ButtonAnchor = function ButtonAnchor() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     href: "#",
@@ -24,0 +24,0 @@ text: "I am rendered with an anchor tag",

lib/terra-dev-site/doc/example/ButtonBlock.js

@@ -21,3 +21,3 @@ "use strict";
 var ButtonBlock = function ButtonBlock() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Neutral Block",
@@ -24,0 +24,0 @@ isBlock: true,

lib/terra-dev-site/doc/example/ButtonCompact.js

@@ -21,14 +21,14 @@ "use strict";
 var ButtonCompact = function ButtonCompact() {
-  return _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Neutral Standard",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Neutral Compact",
     isCompact: true,
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Emphasis Standard",
     variant: "emphasis",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Emphasis Compact",
@@ -35,0 +35,0 @@ variant: "emphasis",

lib/terra-dev-site/doc/example/ButtonDisabled.js

@@ -23,7 +23,7 @@ "use strict";
 var ButtonDisabled = function ButtonDisabled() {
-  return _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Disabled Button",
     isDisabled: true,
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Disabled Emphasis",
@@ -33,3 +33,3 @@ variant: "emphasis",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Disabled Ghost",
@@ -39,3 +39,3 @@ variant: "ghost",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Disabled De-emphasis",
@@ -45,13 +45,13 @@ variant: "de-emphasis",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Disabled Action",
     variant: "action",
     isDisabled: true,
-    icon: _react.default.createElement(_IconEdit.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconEdit.default, null),
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Disabled Utility",
     variant: "utility",
     isDisabled: true,
-    icon: _react.default.createElement(_IconEdit.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconEdit.default, null),
     className: cx('button')
@@ -58,0 +58,0 @@ }));

lib/terra-dev-site/doc/example/ButtonIcon.js

@@ -22,10 +22,10 @@ "use strict";
 
-var Icon = _react.default.createElement(_IconEdit.default, null);
+var Icon = /*#__PURE__*/_react.default.createElement(_IconEdit.default, null);
 
 var ButtonIcon = function ButtonIcon() {
-  return _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     icon: Icon,
     text: "icon",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     icon: Icon,
@@ -35,3 +35,3 @@ text: "icon",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     icon: Icon,
@@ -38,0 +38,0 @@ isIconOnly: true,

lib/terra-dev-site/doc/example/ButtonOnClick.js

@@ -21,3 +21,5 @@ "use strict";
 var ButtonOnClick = function ButtonOnClick() {
-  return (// eslint-disable-next-line no-alert
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line no-alert
     _react.default.createElement(_Button.default, {
@@ -24,0 +26,0 @@ text: "Click Me",

lib/terra-dev-site/doc/example/ButtonVariant.js

@@ -23,26 +23,26 @@ "use strict";
 var ButtonVariant = function ButtonVariant() {
-  return _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Neutral",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Emphasis",
     variant: "emphasis",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Ghost",
     variant: "ghost",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "De-emphasis",
     variant: "de-emphasis",
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Action",
     variant: "action",
-    icon: _react.default.createElement(_IconEdit.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconEdit.default, null),
     className: cx('button')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Utility",
     variant: "utility",
-    icon: _react.default.createElement(_IconEdit.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconEdit.default, null),
     className: cx('button')
@@ -49,0 +49,0 @@ }));

lib/terra-dev-site/test/button/ActiveVariantButtons.test.js

@@ -23,6 +23,6 @@ "use strict";
 var NeutralButton = function NeutralButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "neutral",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "neutralActive",
@@ -32,6 +32,6 @@ text: "Neutral-Active",
     className: "is-active"
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: "neutralActiveFocusSpan",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "neutralActiveFocus",
@@ -45,6 +45,6 @@ text: "Neutral-Active+Focus",
 var EmphasisButton = function EmphasisButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "emphasis",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "emphasisActive",
@@ -54,6 +54,6 @@ text: "Emphasis-Active",
     className: "is-active"
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: "emphasisActiveFocusSpan",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "emphasisActiveFocus",
@@ -67,6 +67,6 @@ text: "Emphasis-Active+Focus",
 var GhostButton = function GhostButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "ghost",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "ghostActive",
@@ -76,6 +76,6 @@ text: "Ghost-Active",
     className: "is-active"
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: "ghostActiveFocusSpan",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "ghostActiveFocus",
@@ -89,6 +89,6 @@ text: "Ghost-Active+Focus",
 var DeemphasisButton = function DeemphasisButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "deempshasis",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "de-emphasisActive",
@@ -98,6 +98,6 @@ text: "De-emphasis-Active",
     className: "is-active"
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: "de-emphasisActiveFocusSpan",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "de-emphasisActiveFocus",
@@ -111,18 +111,18 @@ text: "De-emphasis-Active+Focus",
 var ActionButton = function ActionButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "action",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "actionActive",
     text: "Action-Active",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "action",
     className: "is-active"
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: "actionActiveFocusSpan",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "actionActiveFocus",
     text: "Action-Active+Focus",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "action",
@@ -134,18 +134,18 @@ className: ['is-active', 'is-focused']
 var UtilityButton = function UtilityButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "utility",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "utilityActive",
     text: "Utility-Active",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "utility",
     className: "is-active"
-  }), _react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     id: "utilityActiveFocusSpan",
     className: cx('spacing')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "utilityButtonActiveFocus",
     text: "Utility-Active+Focus",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "utility",
@@ -157,3 +157,3 @@ className: ['is-active', 'is-focused']
 var activeButtons = function activeButtons() {
-  return _react.default.createElement("div", null, _react.default.createElement(NeutralButton, null), _react.default.createElement(EmphasisButton, null), _react.default.createElement(GhostButton, null), _react.default.createElement(DeemphasisButton, null), _react.default.createElement(ActionButton, null), _react.default.createElement(UtilityButton, null));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(NeutralButton, null), /*#__PURE__*/_react.default.createElement(EmphasisButton, null), /*#__PURE__*/_react.default.createElement(GhostButton, null), /*#__PURE__*/_react.default.createElement(DeemphasisButton, null), /*#__PURE__*/_react.default.createElement(ActionButton, null), /*#__PURE__*/_react.default.createElement(UtilityButton, null));
 };
@@ -160,0 +160,0 @@

lib/terra-dev-site/test/button/ButtonTypes.test.js

@@ -21,3 +21,3 @@ "use strict";
 var ButtonWithTypeButton = function ButtonWithTypeButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "buttonWithTypeButton",
@@ -30,3 +30,3 @@ text: "Button Type is Default",
 var ButtonWithTypeReset = function ButtonWithTypeReset() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "buttonWithTypeReset",
@@ -39,3 +39,3 @@ text: "Button Type is Reset",
 var ButtonWithTypeSubmit = function ButtonWithTypeSubmit() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "buttonWithTypeSubmit",
@@ -48,9 +48,9 @@ text: "Button Type is Submit",
 var _default = function _default() {
-  return _react.default.createElement("div", null, _react.default.createElement(ButtonWithTypeButton, null), _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ButtonWithTypeButton, null), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(ButtonWithTypeReset, null), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(ButtonWithTypeReset, null), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(ButtonWithTypeSubmit, null));
+  }), /*#__PURE__*/_react.default.createElement(ButtonWithTypeSubmit, null));
 };
 
 exports.default = _default;

lib/terra-dev-site/test/button/CompactButton.test.js

@@ -15,3 +15,3 @@ "use strict";
 var CompactButton = function CompactButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "compactButton",
@@ -18,0 +18,0 @@ text: "Compact",

lib/terra-dev-site/test/button/IconButton.test.js

@@ -23,6 +23,6 @@ "use strict";
 var IconNeutralButton = function IconNeutralButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "iconNeutralButton",
     text: "Button with Icon",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null)
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null)
   });
@@ -32,7 +32,7 @@ };
 var IconOnlyButton = function IconOnlyButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "iconOnlyButton",
     text: "iconOnlyButton",
     isIconOnly: true,
-    icon: _react.default.createElement(_IconSquareSymbol.default, null)
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null)
   });
@@ -42,6 +42,6 @@ };
 var IconReversedButton = function IconReversedButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "iconReversedButton",
     text: "Button with Icon and reversed",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     isReversed: true
@@ -52,9 +52,9 @@ });
 var _default = function _default() {
-  return _react.default.createElement("div", null, _react.default.createElement(IconNeutralButton, null), _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(IconNeutralButton, null), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(IconOnlyButton, null), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(IconOnlyButton, null), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(IconReversedButton, null));
+  }), /*#__PURE__*/_react.default.createElement(IconReversedButton, null));
 };
 
 exports.default = _default;

lib/terra-dev-site/test/button/LongTextButton.test.js

@@ -26,3 +26,3 @@ "use strict";
 var LongTextButton = function LongTextButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "long-text",
@@ -34,3 +34,3 @@ text: text
 var LongTextBlockButton = function LongTextBlockButton() {
-  return _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "long-text-block",
@@ -43,24 +43,24 @@ text: text,
 var _default = function _default() {
-  return _react.default.createElement("div", null, _react.default.createElement(LongTextButton, null), _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(LongTextButton, null), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(LongTextBlockButton, null), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement(LongTextBlockButton, null), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "long-word",
     text: words
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "long-word-block",
     text: words,
     isBlock: true
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(_Button.default, {
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     text: words
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('spacing')
-  }), _react.default.createElement(_Button.default, {
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     text: words,
@@ -67,0 +67,0 @@ isReversed: true

lib/terra-dev-site/test/button/ProgrammaticFocus.test.js

@@ -23,3 +23,3 @@ "use strict";
   var button2 = (0, _react.useRef)();
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Button.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     refCallback: function refCallback(ref) {
@@ -33,3 +33,3 @@ button1.current = ref;
     id: "button1"
-  }), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.default, {
     refCallback: function refCallback(ref) {
@@ -43,3 +43,3 @@ button2.current = ref;
     id: "button2"
-  }), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.default, {
     text: "Button 3 (Press to focus this button but without focus styles)",
@@ -46,0 +46,0 @@ id: "button3"

lib/terra-dev-site/test/button/Variants/ActionButton.test.js

@@ -23,14 +23,14 @@ "use strict";
 var ActionButton = function ActionButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "action",
     className: cx('button-wrapper')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "actionButton",
     text: "Action",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "action"
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "actionButtonDisabled",
     text: "Action Disabled",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "action",
@@ -37,0 +37,0 @@ isDisabled: true

lib/terra-dev-site/test/button/Variants/DeemphasisButton.test.js

@@ -21,10 +21,10 @@ "use strict";
 var DeemphasisButton = function DeemphasisButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "de-emphasis",
     className: cx('button-wrapper')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "de-emphasisButton",
     text: "De-emphasis",
     variant: "de-emphasis"
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "de-emphasisButtonDisabled",
@@ -31,0 +31,0 @@ text: "De-emphasis Disabled",

lib/terra-dev-site/test/button/Variants/EmphasisButton.test.js

@@ -21,10 +21,10 @@ "use strict";
 var EmphasisButton = function EmphasisButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "emphasis",
     className: cx('button-wrapper')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "emphasisButton",
     text: "Emphasis",
     variant: "emphasis"
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "emphasisButtonDisabled",
@@ -31,0 +31,0 @@ text: "Emphasis Disabled",

lib/terra-dev-site/test/button/Variants/GhostButton.test.js

@@ -21,10 +21,10 @@ "use strict";
 var GhostButton = function GhostButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "ghost",
     className: cx('button-wrapper')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "ghostButton",
     text: "Ghost",
     variant: "ghost"
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "ghostButtonDisabled",
@@ -31,0 +31,0 @@ text: "Ghost Disabled",

lib/terra-dev-site/test/button/Variants/NeutralButton.test.js

@@ -21,10 +21,10 @@ "use strict";
 var NeutralButton = function NeutralButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "neutral",
     className: cx('button-wrapper')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "neutralButton",
     text: "Neutral",
     variant: "neutral"
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "neutralButtonDisabled",
@@ -31,0 +31,0 @@ text: "Neutral Disabled",

lib/terra-dev-site/test/button/Variants/UtilityButton.test.js

@@ -23,14 +23,14 @@ "use strict";
 var UtilityButton = function UtilityButton() {
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     id: "utility",
     className: cx('button-wrapper')
-  }, _react.default.createElement(_Button.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "utilityButton",
     text: "Utility",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "utility"
-  }), _react.default.createElement(_Button.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "utilityButtonDisabled",
     text: "Utility Disabled",
-    icon: _react.default.createElement(_IconSquareSymbol.default, null),
+    icon: /*#__PURE__*/_react.default.createElement(_IconSquareSymbol.default, null),
     variant: "utility",
@@ -37,0 +37,0 @@ isDisabled: true

package.json

 {
   "name": "terra-button",
   "main": "lib/Button.js",
-  "version": "3.33.0",
+  "version": "3.34.0",
   "description": "The terra-button component provides users a way to trigger actions in the UI.",
@@ -46,3 +46,3 @@ "repository": {
   },
-  "gitHead": "28a1067266d1014f6ddab6f7ee74c82b66de024b"
+  "gitHead": "53b691e18d215fd8fd10da8cf03a22a0c3876f4e"
 }

src/Button.jsx

@@ -142,3 +142,5 @@ import React from 'react';
     if (document.activeElement !== event.currentTarget) {
+      this.shouldShowFocus = false;
       event.currentTarget.focus();
+      this.shouldShowFocus = true;
     }
@@ -201,7 +203,2 @@
   handleMouseDown(event) {
-    // Prevent button from showing focus styles when clicked
-    this.shouldShowFocus = false;
-    // Wait until after onFocus has been triggered on browsers where it will get triggered for click
-    setTimeout(() => { this.shouldShowFocus = true; }, 300);
-
     if (this.props.onMouseDown) {
@@ -283,4 +280,4 @@ this.props.onMouseDown(event);
       <span className={buttonLabelClasses}>
-        {isReversed ? buttonText : buttonIcon }
-        {isReversed ? buttonIcon : buttonText }
+        {isReversed ? buttonText : buttonIcon}
+        {isReversed ? buttonIcon : buttonText}
       </span>
@@ -287,0 +284,0 @@ );

tests/wdio/button-spec.js

@@ -263,2 +263,12 @@ Terra.describeViewports('Button', ['tiny'], () => {
   });
+
+  describe('Dismissing Modal should focus the button', () => {
+    before(() => {
+      browser.url('/#/raw/tests/terra-button/button/button-modal-focus');
+      browser.click('#modal-open-button');
+      browser.pause(300);
+    });
+
+    Terra.it.validatesElement('Button has focus');
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184324

increased by4.3%

Number of package files

69

increased by2.99%

Lines of code

2146

increased by4.68%

No dependency changes