@zohodesk/components 1.0.0-temp-259.2 → 1.0.0-temp-260

package/README.md

@@ -1,7 +1,25 @@
-# DOT Style Guide
+# @zohodesk/components
 
-Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
+Reusable React UI primitives for building DOT applications. This package is part of the **DOT System** (**D**esign **O**ptimization **T**hinking).
+
+## Installation
+
+```bash
+npm install @zohodesk/components
+```
+
+## Usage
+
+Import the UI building blocks you need from `@zohodesk/components` and use them in your React app for common interface patterns, including:
+
+- Buttons, inputs, and form controls
+- Overlays, dialogs, and selection patterns
+- Avatars, tabs, and other shared UI primitives
+
+```js
+import * as components from '@zohodesk/components';
+```
 
 ## Changelog
 
-See [CHANGELOG.md](./CHANGELOG.md) for details on release history and updates.
+See [CHANGELOG.md](https://unpkg.com/@zohodesk/components/CHANGELOG.md) for details on release history and updates.

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -16,15 +16,30 @@
 	--zdt_v1_label_secondary_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
-	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
+	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
+	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
+	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
+	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
+	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
+	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
+	--zdt_v1_palette_grey_light_bg: hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_light_border: hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_light_hover_bg: hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_palette_grey_bg: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_border: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_hover_border: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -16,15 +16,30 @@
 	--zdt_v1_label_secondary_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
-	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
+	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
+	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
+	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
+	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
+	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
+	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
+	--zdt_v1_palette_grey_light_bg: hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_light_border: hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_light_hover_bg: hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_palette_grey_bg: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_text: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_border: hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_hover_border: hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_text: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -16,15 +16,30 @@
 	--zdt_v1_label_secondary_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* palette - universal color tokens */
-	--zdt_v1_palette_brand_border: var(--zdt_cta_alpha_border);
-	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_alpha_hover_text);
-	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_alpha_hover_border);
-	--zdt_v1_palette_brand_light_border: var(--zdt_cta_secondary_light_border);
-	--zdt_v1_palette_grey_light_hover_bg: var(--zdt_cta_grey_20_bg);
+	--zdt_v1_palette_brand_filled_text: var(--zdt_cta_secondary_text);
+	--zdt_v1_palette_brand_bg: var(--zdt_cta_primary_bg);
+	--zdt_v1_palette_brand_text: var(--zdt_cta_primary_text);
+	--zdt_v1_palette_brand_border: var(--zdt_cta_primary_border);
+	--zdt_v1_palette_brand_hover_bg: var(--zdt_cta_primary_hover_bg);
+	--zdt_v1_palette_brand_hover_text: var(--zdt_cta_primary_hover_text);
+	--zdt_v1_palette_brand_hover_border: var(--zdt_cta_primary_hover_border);
+	--zdt_v1_palette_brand_light_bg: var(--zdt_cta_primary_light_bg);
+	--zdt_v1_palette_brand_light_hover_bg: var(--zdt_cta_primary_light_hover_bg);
+	--zdt_v1_palette_brand_light_border: var(--zdt_cta_primary_light_border);
+	--zdt_v1_palette_grey_light_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_light_border: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_light_hover_bg: hsla(0, calc(var(--zd-saturation, 1) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_palette_grey_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_grey_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_bg: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_grey_hover_text: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_palette_grey_hover_border: hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_border: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_bg: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_palette_blue_hover_text: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_hover_border: hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_palette_blue_light_border: hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));

package/es/AdvancedPopup/AdvancedPopup.js

@@ -0,0 +1,105 @@
+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); }
+
+import React, { useRef } from 'react';
+import { useAdvancedPopup } from '@zohodesk/dotkit/es/react/components/Popup/hooks/useAdvancedPopup.js';
+import { getLibraryConfig } from "../Provider/Config.js";
+
+const AdvancedPopup = PopupComponent => {
+  const wrapper = props => {
+    const positionMetaRef = useRef(null);
+    const triggerMetaRef = useRef(null);
+    const initialPlacementRef = useRef(props.defaultPosition);
+
+    const getRootElement = () => {
+      return getLibraryConfig('getRootElement');
+    };
+
+    const getMobileWidth = () => {
+      return getLibraryConfig('mobileWidth');
+    };
+
+    const {
+      isArrow,
+      defaultPosition,
+      customOrder,
+      isAbsolutePositioningNeeded,
+      isOutsideScrollBlocked,
+      sizeModifiers,
+      checkBeforeClose,
+      scrollDebounceTime,
+      needResizeHandling,
+      popupGroup
+    } = props;
+    const {
+      setTriggerElement,
+      setContainerElement,
+      togglePopup,
+      openPopupOnly,
+      closePopupOnly,
+      closePopupFromRange,
+      isPopupOpen,
+      isPopupReady,
+      removeClose,
+      recomputePosition,
+      isMobile,
+      position
+    } = useAdvancedPopup({
+      strategy: isAbsolutePositioningNeeded === false ? 'fixed' : 'absolute',
+      groupName: popupGroup,
+      checkBeforeClose,
+      getRootElement,
+      scrollDebounceTime,
+      enableResizeHandling: needResizeHandling,
+      sizeModifiers,
+      onPositionChange: meta => {
+        positionMetaRef.current = meta;
+      },
+      onVisibilityChange: isVisible => {
+        triggerMetaRef.current = isVisible;
+      },
+      middleware: {
+        autoPlacement: {
+          initialPlacement: initialPlacementRef.current,
+          placementOrder: customOrder
+        },
+        arrow: {
+          isRequired: !!isArrow
+        },
+        scrollable: !isOutsideScrollBlocked,
+        applyStyles: true,
+        mobile: {
+          isEnabled: true,
+          breakpoint: getMobileWidth()
+        }
+      }
+    });
+    return /*#__PURE__*/React.createElement(PopupComponent, _extends({}, props, {
+      getTargetRef: setTriggerElement,
+      getContainerRef: setContainerElement,
+      togglePopup: (e, initialPlacement) => {
+        initialPlacementRef.current = initialPlacement;
+        togglePopup(e);
+      },
+      openPopupOnly: (e, initialPlacement) => {
+        initialPlacementRef.current = initialPlacement;
+        openPopupOnly(e);
+      },
+      closePopupOnly: closePopupOnly,
+      closePopupFromRange: closePopupFromRange,
+      removeClose: removeClose,
+      recomputePosition: recomputePosition,
+      isMobile: isMobile,
+      position: position?.view,
+      positions: position?.views,
+      positionsOffset: position?.viewsOffset,
+      targetOffset: position?.targetOffset,
+      popupOffset: position?.popupOffset,
+      isPopupOpen: isPopupOpen,
+      isPopupReady: isPopupReady
+    }));
+  };
+
+  return wrapper;
+};
+
+export default AdvancedPopup;

package/es/v1/Button/Button.js

@@ -6,32 +6,31 @@ 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 Typography from "../../Typography/Typography";
 import { isRenderable } from '@zohodesk/utils/es/renderNode';
 import renderNode from '@zohodesk/utils/es/renderNode';
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
 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";
 import Spinner from "../shared/Spinner/Spinner";
 import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
-import propTypes from "./props/propTypes";
-import defaultProps from "./props/defaultProps";
 
 const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
 
-export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPresentational(props, ref) {
+const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   const {
-    isLoading,
-    isSuccess,
-    isDisabled,
-    isDisabledState,
-    overlayActive,
+    palette,
+    bgAppearance,
+    borderAppearance,
     variant,
-    iconPlacement,
+    status,
     loaderPlacement,
     size,
     iconName,
     iconSize,
+    iconPlacement,
     renderIcon,
     renderBefore,
     renderAfter,
@@ -39,87 +38,104 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     renderSuccess,
     children,
     type,
+    onClick,
+    isDisabled,
+    isReadOnly,
     isSelected,
+    shape,
+    paletteShade,
+    disabledAppearance,
     title,
     customProps,
     customAttributes,
     a11yAttributes,
     customId,
-    testId,
-    dataSelectorId,
-    handleClick,
-    classNames
+    testId
   } = props;
+  const isLoading = status === STATUS.LOADING;
+  const isSuccess = status === STATUS.SUCCESS;
+  const isDisabledState = isDisabled || isLoading;
+  const isInteractionDisabled = isDisabledState || isReadOnly;
+  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const {
+    text: contentProps = DUMMY_OBJECT,
+    icon: iconProps = DUMMY_OBJECT
+  } = customProps;
+  const iconTagAttributes = useMemo(() => ({ ...(iconProps.tagAttributes || DUMMY_OBJECT),
+    'data-test-id': testId ? `${testId}_icon` : undefined
+  }), [iconProps.tagAttributes, testId]);
+  const classes = useMemo(() => cssJSLogic({
+    props
+  }), [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
   const {
     loaderOverlayClass,
     successOverlayClass,
     contentWrapperClass,
     textClassName,
     buttonClassName,
-    iconClassName,
-    loaderClassName,
-    successClassName
-  } = classNames;
-  const {
-    text: contentProps = DUMMY_OBJECT,
-    icon: iconProps = DUMMY_OBJECT
-  } = customProps || DUMMY_OBJECT;
-  const {
-    button: buttonAttributes = DUMMY_OBJECT,
-    contentWrapper: contentWrapperAttributes = DUMMY_OBJECT,
-    loader: loaderAttributes = DUMMY_OBJECT,
-    success: successAttributes = DUMMY_OBJECT,
-    icon: iconAttributes = DUMMY_OBJECT,
-    text: textAttributes = DUMMY_OBJECT
-  } = customAttributes || DUMMY_OBJECT;
-  const iconTagAttributes = { ...iconAttributes,
-    'data-test-id': testId ? `${testId}_icon` : undefined
-  };
+    iconClassName
+  } = classes;
   const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
 
+  const _handleClick = event => {
+    if (isInteractionDisabled) {
+      return;
+    }
+
+    onClick(event);
+  };
+
   const _renderLoader = () => {
-    if (!isLoading) return null;
-    const isOverlay = loaderPlacement === LOADER_PLACEMENT.OVERLAY;
-    const hasCustomLoader = isRenderable(renderLoader);
-    if (hasCustomLoader && !isOverlay) return renderNode(renderLoader, {
-      status: STATUS.LOADING
-    });
-    return /*#__PURE__*/React.createElement(Flex, _extends({
+    if (!isLoading) {
+      return null;
+    }
+
+    if (isRenderable(renderLoader)) {
+      return renderNode(renderLoader, {
+        status
+      });
+    }
+
+    const loaderClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: isOverlay ? loaderOverlayClass : '',
+      $ui_className: loaderClassName,
       testId: testId ? `${testId}_loader` : undefined
-    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? renderNode(renderLoader, {
-      status: STATUS.LOADING
-    }) : /*#__PURE__*/React.createElement(Spinner, {
-      customClass: loaderClassName
-    }));
+    }, /*#__PURE__*/React.createElement(Spinner, null));
   };
 
   const _renderSuccess = () => {
-    if (!isSuccess) return null;
-    const isOverlay = loaderPlacement === LOADER_PLACEMENT.OVERLAY;
-    const hasCustomSuccess = isRenderable(renderSuccess);
-    if (hasCustomSuccess && !isOverlay) return renderNode(renderSuccess, {
-      status: STATUS.SUCCESS
-    });
-    return /*#__PURE__*/React.createElement(Flex, _extends({
+    if (!isSuccess) {
+      return null;
+    }
+
+    if (isRenderable(renderSuccess)) {
+      return renderNode(renderSuccess, {
+        status
+      });
+    }
+
+    const successClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: isOverlay ? successOverlayClass : '',
+      $ui_className: successClassName,
       testId: testId ? `${testId}_success` : undefined
-    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? renderNode(renderSuccess, {
-      status: STATUS.SUCCESS
-    }) : /*#__PURE__*/React.createElement(SuccessTick, {
-      customClass: successClassName
-    }));
+    }, /*#__PURE__*/React.createElement(SuccessTick, null));
   };
 
   const _renderIconNode = () => {
-    if (!showIcon) return null;
-    if (isRenderable(renderIcon)) return renderNode(renderIcon);
+    if (!showIcon) {
+      return null;
+    }
+
+    if (isRenderable(renderIcon)) {
+      return renderNode(renderIcon);
+    }
+
     return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
@@ -129,126 +145,58 @@ export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPrese
     }));
   };
 
+  const _renderBeforeNode = () => {
+    if (!isRenderable(renderBefore)) {
+      return null;
+    }
+
+    return renderNode(renderBefore, props);
+  };
+
+  const _renderAfterNode = () => {
+    if (!isRenderable(renderAfter)) {
+      return null;
+    }
+
+    return renderNode(renderAfter, props);
+  };
+
   const _renderContent = () => {
-    const shouldShowText = variant !== VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
+    const shouldShowText = variant !== VARIANT.ICON && children !== undefined && children !== null;
     const showLoaderStart = isLoading && loaderPlacement === LOADER_PLACEMENT.START;
     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)
-    }, contentProps, {
-      tagAttributes: textAttributes,
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/React.createElement(Typography, _extends({}, contentProps, {
       $ui_className: textClassName,
+      $ui_size: getTypographySize(size),
       $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);
+    }), children) : null, iconPlacement === ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), 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,
+  const containerAttributes = { ...customAttributes,
+    'data-id': customId,
+    'data-test-id': testId,
     'data-title': title
   };
-  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, {
-    "aria-busy": isLoading,
-    disabled: isDisabledState,
-    "aria-pressed": isSelected
-  }, a11yAttributes, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
     ref: ref,
     type: type,
     className: cn(buttonClassName),
-    onClick: handleClick
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-readonly": isReadOnly,
+    "aria-pressed": isSelected,
+    onClick: _handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
-ButtonPresentational.displayName = 'ButtonPresentational';
-const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
-  const {
-    palette,
-    appearance,
-    hoverAppearance,
-    selectedAppearance,
-    variant,
-    status,
-    loaderPlacement,
-    size,
-    iconName,
-    iconSize,
-    iconPlacement,
-    renderIcon,
-    renderBefore,
-    renderAfter,
-    renderLoader,
-    renderSuccess,
-    children,
-    type,
-    onClick,
-    isDisabled,
-    isSelected,
-    shape,
-    disabledAppearance,
-    title,
-    customProps,
-    customAttributes,
-    a11yAttributes,
-    customId,
-    testId,
-    dataSelectorId
-  } = props;
-  const isLoading = status === STATUS.LOADING;
-  const isSuccess = status === STATUS.SUCCESS;
-  const isDisabledState = isDisabled || isLoading;
-  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
-  const classNames = useMemo(() => cssJSLogic({
-    props
-  }), [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
-
-  const handleClick = event => {
-    if (isDisabledState) return;
-    onClick(event);
-  };
-
-  const essentials = {
-    isLoading,
-    isSuccess,
-    isDisabled,
-    isDisabledState,
-    overlayActive,
-    variant,
-    iconPlacement,
-    loaderPlacement,
-    size,
-    iconName,
-    iconSize,
-    renderIcon,
-    renderBefore,
-    renderAfter,
-    renderLoader,
-    renderSuccess,
-    children,
-    type,
-    isSelected,
-    title,
-    customProps,
-    customAttributes,
-    a11yAttributes,
-    customId,
-    testId,
-    dataSelectorId,
-    handleClick
-  };
-  return /*#__PURE__*/React.createElement(ButtonPresentational, _extends({}, essentials, {
-    classNames: classNames,
-    ref: ref
-  }));
-});
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 Button.displayName = 'Button';

package/es/v1/Button/README.md

@@ -62,9 +62,8 @@ import Button from '@zohodesk/components/es/v1/Button/Button';
 | `customId` | `string` | — | `data-id` attribute for automation |
 | `testId` | `string` | — | `data-test-id` attribute for testing |
 | `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
-| `appearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored at rest |
-| `hoverAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored on hover/focus/active |
-| `selectedAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored when `isSelected` |
+| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
+| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
 | `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
 | `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
 | `status` | `oneOf: default, loading, success` | `default` | Status state |

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

@@ -28,29 +28,21 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const appearanceCombos = [['bg'], ['border'], ['text'], ['bg', 'border'], []];
-  test.each(appearanceCombos.map(combo => [combo]))('Should render appearance of buttons - %s', appearance => {
+  const bgAppearance = ['default', 'onHover', 'none'];
+  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', bg => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      appearance: appearance
+      bgAppearance: bg
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test.each(appearanceCombos.map(combo => [combo]))('Should render hoverAppearance of buttons - %s', appearance => {
+  const borderAppearance = ['default', 'onHover', 'none'];
+  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', border => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      hoverAppearance: appearance
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test.each(appearanceCombos.map(combo => [combo]))('Should render selectedAppearance of buttons - %s', appearance => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Button, {
-      isSelected: true,
-      selectedAppearance: appearance
+      borderAppearance: border
     }));
     expect(asFragment()).toMatchSnapshot();
   });