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

package/es/v1/Button/Button.js

@@ -6,8 +6,7 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
 import Icon from '@zohodesk/icons/es/Icon';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import { isRenderable } from '@zohodesk/utils/es/renderNode';
-import renderNode from '@zohodesk/utils/es/renderNode';
+import renderNode, { isRenderable } from '@zohodesk/utils/es/renderNode';
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
 import Typography from "../../Typography/Typography";
@@ -73,9 +72,10 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     text: textAttributes = DUMMY_OBJECT
   } = customAttributes || DUMMY_OBJECT;
   const iconTagAttributes = { ...iconAttributes,
-    'data-test-id': testId ? `${testId}_icon` : undefined
+    ...(testId && {
+      'data-test-id': `${testId}_icon`
+    })
   };
-  const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
 
   const _renderLoader = () => {
     if (!isLoading) return null;
@@ -84,13 +84,15 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     if (hasCustomLoader && !isOverlay) return renderNode(renderLoader, {
       status: STATUS.LOADING
     });
-    return /*#__PURE__*/React.createElement(Flex, _extends({
+    return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: isOverlay ? loaderOverlayClass : '',
-      testId: testId ? `${testId}_loader` : undefined
-    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? renderNode(renderLoader, {
+      testId: testId ? `${testId}_loader` : undefined,
+      customId: customId ? `${customId}_loader` : undefined,
+      $tagAttributes_container: hasCustomLoader ? undefined : loaderAttributes
+    }, hasCustomLoader ? renderNode(renderLoader, {
       status: STATUS.LOADING
     }) : /*#__PURE__*/React.createElement(Spinner, {
       customClass: loaderClassName
@@ -104,13 +106,15 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     if (hasCustomSuccess && !isOverlay) return renderNode(renderSuccess, {
       status: STATUS.SUCCESS
     });
-    return /*#__PURE__*/React.createElement(Flex, _extends({
+    return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: isOverlay ? successOverlayClass : '',
-      testId: testId ? `${testId}_success` : undefined
-    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? renderNode(renderSuccess, {
+      testId: testId ? `${testId}_success` : undefined,
+      customId: customId ? `${customId}_success` : undefined,
+      $tagAttributes_container: hasCustomSuccess ? undefined : successAttributes
+    }, hasCustomSuccess ? renderNode(renderSuccess, {
       status: STATUS.SUCCESS
     }) : /*#__PURE__*/React.createElement(SuccessTick, {
       customClass: successClassName
@@ -118,14 +122,18 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
   };
 
   const _renderIconNode = () => {
+    const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
     if (!showIcon) return null;
-    if (isRenderable(renderIcon)) return renderNode(renderIcon);
+    if (isRenderable(renderIcon)) return renderNode(renderIcon, {
+      iconName,
+      iconSize
+    });
     return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,
-      dataId: testId ? `${testId}_icon` : undefined
+      dataId: customId ? `${customId}_icon` : undefined
     }));
   };
 
@@ -135,31 +143,40 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     const showLoaderAfter = isLoading && loaderPlacement === LOADER_PLACEMENT.END;
     const showSuccessStart = isSuccess && loaderPlacement === LOADER_PLACEMENT.START;
     const showSuccessAfter = isSuccess && loaderPlacement === LOADER_PLACEMENT.END;
-    return /*#__PURE__*/React.createElement(Flex, _extends({
+    return /*#__PURE__*/React.createElement(Flex, {
       $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, isRenderable(renderBefore) ? renderNode(renderBefore, props) : null, iconPlacement === ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, _extends({
-      $ui_size: getTypographySize(size)
+      $ui_className: contentWrapperClass,
+      $tagAttributes_container: contentWrapperAttributes
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, isRenderable(renderBefore) ? renderNode(renderBefore, props) : null, iconPlacement === ICON_PLACEMENT.START ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, _extends({
+      size: getTypographySize(size)
     }, contentProps, {
       tagAttributes: textAttributes,
-      $ui_className: textClassName,
-      $flag_dotted: variant !== VARIANT.ICON
-    }), children) : children : null, iconPlacement === ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, isRenderable(renderAfter) ? renderNode(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+      customClass: textClassName,
+      isDotted: true
+    }), children) : children : null, iconPlacement === ICON_PLACEMENT.END ? _renderIconNode() : null, isRenderable(renderAfter) ? renderNode(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
   const containerAttributes = { ...buttonAttributes,
-    'data-id': isDisabled ? `${customId}_disabled` : customId,
-    'data-test-id': isDisabled ? `${testId}_disabled` : testId,
-    'data-selector-id': dataSelectorId,
-    'data-title': title
+    ...(customId && {
+      'data-id': isDisabled ? `${customId}_disabled` : customId
+    }),
+    ...(testId && {
+      'data-test-id': isDisabled ? `${testId}_disabled` : testId
+    }),
+    ...(dataSelectorId && {
+      'data-selector-id': dataSelectorId
+    }),
+    ...(title && {
+      'data-title': title
+    })
   };
   return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, {
     "aria-busy": isLoading,
-    disabled: isDisabledState,
+    "aria-disabled": isDisabledState,
     "aria-pressed": isSelected
   }, a11yAttributes, {
     ref: ref,
@@ -208,7 +225,21 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   const isDisabledState = isDisabled || isLoading;
   const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
   const classNames = useMemo(() => cssJSLogic({
-    props
+    props: {
+      palette,
+      appearance,
+      hoverAppearance,
+      selectedAppearance,
+      size,
+      variant,
+      status,
+      isDisabled,
+      isSelected,
+      shape,
+      loaderPlacement,
+      disabledAppearance,
+      customClass
+    }
   }), [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, customClass]);
 
   const handleClick = event => {

package/es/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/es/v1/Button/__tests__/Button.spec.js

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import Button from "../index";
 import '@testing-library/jest-dom';
 import { PALETTE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
-import { BRAND_GHOST, BRAND_TEXT_ONLY, BRAND_TINTED_OUTLINE, SUCCESS_GHOST, SUCCESS_TEXT_ONLY, SUCCESS_TINTED_OUTLINE, SECONDARY_GHOST_BRAND_TINTED_ONSELECT, BLACK_TEXT_BRAND_ONHOVER, BRAND_BG_ONSELECT, BRAND_TEXT_TINTED_HOVER, BRAND_TEXT_TINTED_DANGER_HOVER } from "../constants/presets";
+import { BRAND_GHOST, BRAND_TEXT_ONLY, BRAND_TINTED_OUTLINE, SUCCESS_GHOST, SUCCESS_TEXT_ONLY, SUCCESS_TINTED_OUTLINE, SECONDARY_GHOST_BRAND_TINTED_ONSELECT, SECONDARY_GHOST_CANCEL, BLACK_TEXT_BRAND_ONHOVER, BRAND_BG_ONSELECT, BRAND_TEXT_TINTED_HOVER, BRAND_TEXT_TINTED_DANGER_HOVER } from "../constants/presets";
 afterEach(() => {
   cleanup();
 });
@@ -119,7 +119,7 @@ describe('Button', () => {
     } = render( /*#__PURE__*/React.createElement(Button, {
       variant: "iconWithText",
       iconName: "ZD-plus",
-      iconPlacement: "right"
+      iconPlacement: "end"
     }, "Button"));
     expect(asFragment()).toMatchSnapshot();
   });
@@ -347,7 +347,7 @@ describe('Button', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   describe('Presets', () => {
-    const presets = [['BRAND_GHOST', BRAND_GHOST], ['BRAND_TEXT_ONLY', BRAND_TEXT_ONLY], ['BRAND_TINTED_OUTLINE', BRAND_TINTED_OUTLINE], ['SUCCESS_GHOST', SUCCESS_GHOST], ['SUCCESS_TEXT_ONLY', SUCCESS_TEXT_ONLY], ['SUCCESS_TINTED_OUTLINE', SUCCESS_TINTED_OUTLINE], ['SECONDARY_GHOST_BRAND_TINTED_ONSELECT', SECONDARY_GHOST_BRAND_TINTED_ONSELECT], ['BLACK_TEXT_BRAND_ONHOVER', BLACK_TEXT_BRAND_ONHOVER], ['BRAND_BG_ONSELECT', BRAND_BG_ONSELECT], ['BRAND_TEXT_TINTED_HOVER', BRAND_TEXT_TINTED_HOVER], ['BRAND_TEXT_TINTED_DANGER_HOVER', BRAND_TEXT_TINTED_DANGER_HOVER]];
+    const presets = [['BRAND_GHOST', BRAND_GHOST], ['BRAND_TEXT_ONLY', BRAND_TEXT_ONLY], ['BRAND_TINTED_OUTLINE', BRAND_TINTED_OUTLINE], ['SUCCESS_GHOST', SUCCESS_GHOST], ['SUCCESS_TEXT_ONLY', SUCCESS_TEXT_ONLY], ['SUCCESS_TINTED_OUTLINE', SUCCESS_TINTED_OUTLINE], ['SECONDARY_GHOST_BRAND_TINTED_ONSELECT', SECONDARY_GHOST_BRAND_TINTED_ONSELECT], ['SECONDARY_GHOST_CANCEL', SECONDARY_GHOST_CANCEL], ['BLACK_TEXT_BRAND_ONHOVER', BLACK_TEXT_BRAND_ONHOVER], ['BRAND_BG_ONSELECT', BRAND_BG_ONSELECT], ['BRAND_TEXT_TINTED_HOVER', BRAND_TEXT_TINTED_HOVER], ['BRAND_TEXT_TINTED_DANGER_HOVER', BRAND_TEXT_TINTED_DANGER_HOVER]];
     test.each(presets)('Should render preset %s', (_name, preset) => {
       const {
         asFragment