@zohodesk/components 1.0.0-temp-259.3 → 1.0.0-temp-259.5

package/lib/v1/Button/Button.js

@@ -111,12 +111,10 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
       _ref2$text = _ref2.text,
       textAttributes = _ref2$text === void 0 ? _constants.DUMMY_OBJECT : _ref2$text;
 
-  var iconTagAttributes = _objectSpread(_objectSpread({}, iconAttributes), {}, {
-    'data-test-id': testId ? "".concat(testId, "_icon") : undefined
+  var iconTagAttributes = _objectSpread(_objectSpread({}, iconAttributes), testId && {
+    'data-test-id': "".concat(testId, "_icon")
   });
 
-  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
-
   var _renderLoader = function _renderLoader() {
     if (!isLoading) return null;
     var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
@@ -124,13 +122,15 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
     if (hasCustomLoader && !isOverlay) return (0, _renderNode["default"])(renderLoader, {
       status: _constants2.STATUS.LOADING
     });
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: isOverlay ? loaderOverlayClass : '',
-      testId: testId ? "".concat(testId, "_loader") : undefined
-    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? (0, _renderNode["default"])(renderLoader, {
+      testId: testId ? "".concat(testId, "_loader") : undefined,
+      customId: customId ? "".concat(customId, "_loader") : undefined,
+      $tagAttributes_container: hasCustomLoader ? undefined : loaderAttributes
+    }, hasCustomLoader ? (0, _renderNode["default"])(renderLoader, {
       status: _constants2.STATUS.LOADING
     }) : /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
       customClass: loaderClassName
@@ -144,13 +144,15 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
     if (hasCustomSuccess && !isOverlay) return (0, _renderNode["default"])(renderSuccess, {
       status: _constants2.STATUS.SUCCESS
     });
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: isOverlay ? successOverlayClass : '',
-      testId: testId ? "".concat(testId, "_success") : undefined
-    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? (0, _renderNode["default"])(renderSuccess, {
+      testId: testId ? "".concat(testId, "_success") : undefined,
+      customId: customId ? "".concat(customId, "_success") : undefined,
+      $tagAttributes_container: hasCustomSuccess ? undefined : successAttributes
+    }, hasCustomSuccess ? (0, _renderNode["default"])(renderSuccess, {
       status: _constants2.STATUS.SUCCESS
     }) : /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
       customClass: successClassName
@@ -158,14 +160,18 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
   };
 
   var _renderIconNode = function _renderIconNode() {
+    var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
     if (!showIcon) return null;
-    if ((0, _renderNode.isRenderable)(renderIcon)) return (0, _renderNode["default"])(renderIcon);
+    if ((0, _renderNode.isRenderable)(renderIcon)) return (0, _renderNode["default"])(renderIcon, {
+      iconName: iconName,
+      iconSize: iconSize
+    });
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,
-      dataId: testId ? "".concat(testId, "_icon") : undefined
+      dataId: customId ? "".concat(customId, "_icon") : undefined
     }));
   };
 
@@ -175,32 +181,36 @@ var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPr
     var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
     var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showSuccessAfter = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_direction: "row",
       $flag_shrink: true,
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: contentWrapperClass
-    }, contentWrapperAttributes), showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, (0, _renderNode.isRenderable)(renderBefore) ? (0, _renderNode["default"])(renderBefore, props) : null, iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
-      $ui_size: getTypographySize(size)
+      $ui_className: contentWrapperClass,
+      $tagAttributes_container: contentWrapperAttributes
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, (0, _renderNode.isRenderable)(renderBefore) ? (0, _renderNode["default"])(renderBefore, props) : null, iconPlacement === _constants2.ICON_PLACEMENT.START ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
+      size: getTypographySize(size)
     }, contentProps, {
       tagAttributes: textAttributes,
-      $ui_className: textClassName,
-      $flag_dotted: variant !== _constants2.VARIANT.ICON
-    }), children) : children : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, (0, _renderNode.isRenderable)(renderAfter) ? (0, _renderNode["default"])(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+      customClass: textClassName,
+      isDotted: true
+    }), children) : children : null, iconPlacement === _constants2.ICON_PLACEMENT.END ? _renderIconNode() : null, (0, _renderNode.isRenderable)(renderAfter) ? (0, _renderNode["default"])(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  var containerAttributes = _objectSpread(_objectSpread({}, buttonAttributes), {}, {
-    'data-id': isDisabled ? "".concat(customId, "_disabled") : customId,
-    'data-test-id': isDisabled ? "".concat(testId, "_disabled") : testId,
-    'data-selector-id': dataSelectorId,
+  var containerAttributes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonAttributes), customId && {
+    'data-id': isDisabled ? "".concat(customId, "_disabled") : customId
+  }), testId && {
+    'data-test-id': isDisabled ? "".concat(testId, "_disabled") : testId
+  }), dataSelectorId && {
+    'data-selector-id': dataSelectorId
+  }), title && {
     'data-title': title
   });
 
   return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, {
     "aria-busy": isLoading,
-    disabled: isDisabledState,
+    "aria-disabled": isDisabledState,
     "aria-pressed": isSelected
   }, a11yAttributes, {
     ref: ref,
@@ -249,7 +259,21 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
   var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
   var classNames = (0, _react.useMemo)(function () {
     return (0, _cssJSLogic["default"])({
-      props: props
+      props: {
+        palette: palette,
+        appearance: appearance,
+        hoverAppearance: hoverAppearance,
+        selectedAppearance: selectedAppearance,
+        size: size,
+        variant: variant,
+        status: status,
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        shape: shape,
+        loaderPlacement: loaderPlacement,
+        disabledAppearance: disabledAppearance,
+        customClass: customClass
+      }
     });
   }, [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, customClass]);
 

package/lib/v1/Button/README.md

@@ -52,6 +52,7 @@ import {
   BRAND_GHOST,
   BRAND_TEXT_ONLY,
   SECONDARY_GHOST_BRAND_TINTED_ONSELECT,
+  SECONDARY_GHOST_CANCEL,
   BRAND_TINTED_OUTLINE,
   BRAND_TEXT_TINTED_HOVER
 } from '@zohodesk/components/es/v1/Button/constants/presets';
@@ -66,7 +67,7 @@ import {
 ```jsx
 <Button variant="icon" iconName="ZD-plus" iconSize={20} />
 
-<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="left">
+<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="start">
   Add Item
 </Button>
 ```
@@ -109,7 +110,7 @@ import {
 | `shape` | `oneOf: pill, rectangle, roundedRectangle` | `roundedRectangle` | Border shape |
 | `iconName` | `string` | — | Icon name from `@zohodesk/icons` |
 | `iconSize` | `number` | `16` | Icon size in pixels |
-| `iconPlacement` | `oneOf: left, right` | `left` | Icon position relative to text |
+| `iconPlacement` | `oneOf: start, end` | `start` | Icon position relative to text |
 | `disabledAppearance` | `oneOf: none, dull, strike` | `dull` | Visual style when disabled |
 | `isDisabled` | `bool` | `false` | Disables the button |
 | `isSelected` | `bool` | `false` | Selected/pressed state (`aria-pressed`) |
@@ -143,6 +144,7 @@ Ready-made palette + appearance combinations exported from `constants/presets`:
 | `SUCCESS_TEXT_ONLY` | `success` | `{ bg: false }` | Text only, no border |
 | `SUCCESS_TINTED_OUTLINE` | `successLighter` | `{ border: true }` | Tinted fill, success border |
 | `SECONDARY_GHOST_BRAND_TINTED_ONSELECT` | `secondary` | `{ bg: false, border: true }` | Secondary ghost; selected state switches to brand tint |
+| `SECONDARY_GHOST_CANCEL` | `secondary` | `{ bg: false, border: true }` | Secondary ghost without a selected state; cancel / dismiss buttons |
 | `BLACK_TEXT_BRAND_ONHOVER` | `brand` | `{ bg: false, text: 'black' }` | Black text, brand color on hover |
 | `BRAND_BG_ONSELECT` | `brand` | `{ bg: false, border: true }` | Ghost without a defined selected state |
 | `BRAND_TEXT_TINTED_HOVER` | `brandLighter` | `{ bg: false }` | Ghost that becomes tinted on hover |

package/lib/v1/Button/__tests__/Button.spec.js

@@ -134,7 +134,7 @@ describe('Button', function () {
     var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       variant: "iconWithText",
       iconName: "ZD-plus",
-      iconPlacement: "right"
+      iconPlacement: "end"
     }, "Button")),
         asFragment = _render12.asFragment;
 
@@ -384,7 +384,7 @@ describe('Button', function () {
     expect(asFragment()).toMatchSnapshot();
   });
   describe('Presets', function () {
-    var presets = [['BRAND_GHOST', _presets.BRAND_GHOST], ['BRAND_TEXT_ONLY', _presets.BRAND_TEXT_ONLY], ['BRAND_TINTED_OUTLINE', _presets.BRAND_TINTED_OUTLINE], ['SUCCESS_GHOST', _presets.SUCCESS_GHOST], ['SUCCESS_TEXT_ONLY', _presets.SUCCESS_TEXT_ONLY], ['SUCCESS_TINTED_OUTLINE', _presets.SUCCESS_TINTED_OUTLINE], ['SECONDARY_GHOST_BRAND_TINTED_ONSELECT', _presets.SECONDARY_GHOST_BRAND_TINTED_ONSELECT], ['BLACK_TEXT_BRAND_ONHOVER', _presets.BLACK_TEXT_BRAND_ONHOVER], ['BRAND_BG_ONSELECT', _presets.BRAND_BG_ONSELECT], ['BRAND_TEXT_TINTED_HOVER', _presets.BRAND_TEXT_TINTED_HOVER], ['BRAND_TEXT_TINTED_DANGER_HOVER', _presets.BRAND_TEXT_TINTED_DANGER_HOVER]];
+    var presets = [['BRAND_GHOST', _presets.BRAND_GHOST], ['BRAND_TEXT_ONLY', _presets.BRAND_TEXT_ONLY], ['BRAND_TINTED_OUTLINE', _presets.BRAND_TINTED_OUTLINE], ['SUCCESS_GHOST', _presets.SUCCESS_GHOST], ['SUCCESS_TEXT_ONLY', _presets.SUCCESS_TEXT_ONLY], ['SUCCESS_TINTED_OUTLINE', _presets.SUCCESS_TINTED_OUTLINE], ['SECONDARY_GHOST_BRAND_TINTED_ONSELECT', _presets.SECONDARY_GHOST_BRAND_TINTED_ONSELECT], ['SECONDARY_GHOST_CANCEL', _presets.SECONDARY_GHOST_CANCEL], ['BLACK_TEXT_BRAND_ONHOVER', _presets.BLACK_TEXT_BRAND_ONHOVER], ['BRAND_BG_ONSELECT', _presets.BRAND_BG_ONSELECT], ['BRAND_TEXT_TINTED_HOVER', _presets.BRAND_TEXT_TINTED_HOVER], ['BRAND_TEXT_TINTED_DANGER_HOVER', _presets.BRAND_TEXT_TINTED_DANGER_HOVER]];
     test.each(presets)('Should render preset %s', function (_name, preset) {
       var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], preset, "Button")),
           asFragment = _render36.asFragment;