@zohodesk/dot 1.9.9 → 1.9.11

package/lib/ActionButton/ActionButton.js

@@ -25,12 +25,16 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
 
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
+
 var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.css"));
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -62,8 +66,10 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, ActionButton);
 
     _this = _super.call(this, props);
+    _this.getElementId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
     _this.handlePopupOpen = _this.handlePopupOpen.bind(_assertThisInitialized(_this));
+    _this.popupId = _this.getElementId();
     return _this;
   }
 
@@ -117,7 +123,9 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
           isAbsolutePositioningNeeded = _this$props3.isAbsolutePositioningNeeded,
           isRestrictScroll = _this$props3.isRestrictScroll,
           positionsOffset = _this$props3.positionsOffset,
-          targetOffset = _this$props3.targetOffset;
+          targetOffset = _this$props3.targetOffset,
+          a11yAttributes = _this$props3.a11yAttributes;
+      var a11yAttributes_splitButton = a11yAttributes.splitButton;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -144,8 +152,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"].contentBox, " ").concat(_ActionButtonModule["default"][palette + 'Btn'], " ").concat(_ActionButtonModule["default"][size + '_btnBox'], " ").concat(children ? _ActionButtonModule["default"].contentBoxBdr : _ActionButtonModule["default"].contentBoxBdrRds, " ").concat(_ActionButtonModule["default"].clickable, " ").concat(innerClassName, " "),
         "data-title": dataTitle,
-        tagName: "button",
-        tabIndex: "0"
+        tagName: "button"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -165,16 +172,17 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
       }, text) : null)), subText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": removeChildrenTooltip ? null : subText,
         className: _ActionButtonModule["default"].subTxt
-      }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, _extends({}, a11yAttributes_splitButton, {
         onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
         dataId: "".concat(dataId, "_arrowButton"),
-        tabIndex: "0",
         tagName: "button",
-        dataSelectorId: "".concat(dataSelectorId, "_arrowButton")
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        dataSelectorId: "".concat(dataSelectorId, "_arrowButton"),
+        "aria-expanded": isPopupOpen,
+        "aria-controls": this.popupId
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
@@ -198,7 +206,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
         isRestrictScroll: isRestrictScroll,
         positionsOffset: positionsOffset,
-        targetOffset: targetOffset
+        targetOffset: targetOffset,
+        htmlId: this.popupId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/ActionButton/ActionButton.module.css

@@ -89,11 +89,14 @@
 }
 
 .small_btnBox {
-  padding: 0 var(--zd_size8) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size8) ;
 }
 
-.medium_btnBox, .large_btnBox {
-  padding: 0 var(--zd_size10) ;
+.medium_btnBox,
+.large_btnBox {
+  padding-block:0 ;
+  padding-inline: var(--zd_size10) ;
 }
 
 .txt {
@@ -174,8 +177,10 @@
 }
 
 .popupWrapper {
-  padding: var(--zd_size10) 0 ;
-  margin: var(--zd_size5) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
+  margin-block: var(--zd_size5) ;
+  margin-inline:0 ;
 }
 
 .arrow,
@@ -184,10 +189,6 @@
   color: var(--buttonText);
 }
 
-[dir=ltr] .iconMrgn {
-  margin-right: var(--zd_size6) ;
+.iconMrgn {
+  margin-inline-end: var(--zd_size6) ;
 }
-
-[dir=rtl] .iconMrgn {
-  margin-left: var(--zd_size6) ;
-}