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

package/es/v1/Button/constants/index.js

@@ -39,8 +39,8 @@ export const LOADER_PLACEMENT = {
   OVERLAY: 'overlay'
 };
 export const ICON_PLACEMENT = {
-  LEFT: 'left',
-  RIGHT: 'right'
+  START: 'start',
+  END: 'end'
 };
 export const SHAPE = {
   PILL: 'pill',
@@ -81,7 +81,7 @@ export const DEFAULT_VARIANT = VARIANT.TEXT;
 export const DEFAULT_SIZE = SIZE.MEDIUM;
 export const DEFAULT_STATUS = STATUS.DEFAULT;
 export const DEFAULT_LOADER_PLACEMENT = LOADER_PLACEMENT.OVERLAY;
-export const DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
+export const DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.START;
 export const DEFAULT_ICON_SIZE = 16;
 export const DEFAULT_SHAPE = SHAPE.ROUNDED_RECTANGLE;
 export const DEFAULT_DISABLED_APPEARANCE = DISABLED_APPEARANCE.DULL;

package/es/v1/Button/constants/presets.js

@@ -95,6 +95,17 @@ export const SECONDARY_GHOST_BRAND_TINTED_ONSELECT = {
     text: 'black'
   }
 };
+export const SECONDARY_GHOST_CANCEL = {
+  palette: 'secondary',
+  appearance: {
+    bg: false,
+    border: true
+  },
+  hoverAppearance: {
+    bg: false,
+    border: true
+  }
+};
 export const BLACK_TEXT_BRAND_ONHOVER = {
   palette: 'brand',
   appearance: {

package/es/v1/Button/css/cssJSLogic.js

@@ -1,6 +1,5 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
-import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS, DEFAULT_APPEARANCE, DEFAULT_HOVER_APPEARANCE, DEFAULT_SELECTED_APPEARANCE } from "../constants";
+import { DISABLED_APPEARANCE, LOADER_PLACEMENT, STATUS, DEFAULT_APPEARANCE, DEFAULT_HOVER_APPEARANCE, DEFAULT_SELECTED_APPEARANCE } from "../constants";
 import buttonResetStyle from "../../../semantic/Button/semanticButton.module.css";
 import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
 import style from "./Button_v1.module.css";
@@ -23,7 +22,7 @@ export default function cssJSLogic({
     shape,
     loaderPlacement,
     disabledAppearance,
-    customClass = DUMMY_OBJECT
+    customClass
   } = props;
   const {
     wrapper: wrapperClass = '',
@@ -37,13 +36,13 @@ export default function cssJSLogic({
   const isInteractive = !isDisabled && !isLoading;
   const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
   const mergedAppearance = { ...DEFAULT_APPEARANCE,
-    ...(appearance || {})
+    ...appearance
   };
   const mergedHoverAppearance = { ...DEFAULT_HOVER_APPEARANCE,
-    ...(hoverAppearance || {})
+    ...hoverAppearance
   };
   const mergedSelectedAppearance = { ...DEFAULT_SELECTED_APPEARANCE,
-    ...(selectedAppearance || {})
+    ...selectedAppearance
   };
   const {
     bg,

package/es/v1/Button/props/defaultProps.js

@@ -2,6 +2,9 @@ import { DUMMY_FUNCTION, DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constant
 import { DEFAULT_VARIANT, DEFAULT_SIZE, DEFAULT_STATUS, DEFAULT_LOADER_PLACEMENT, DEFAULT_ICON_PLACEMENT, DEFAULT_ICON_SIZE, DEFAULT_SHAPE, DEFAULT_DISABLED_APPEARANCE, DEFAULT_BUTTON_TYPE } from "../constants";
 const defaultProps = {
   palette: '',
+  appearance: DUMMY_OBJECT,
+  hoverAppearance: DUMMY_OBJECT,
+  selectedAppearance: DUMMY_OBJECT,
   variant: DEFAULT_VARIANT,
   size: DEFAULT_SIZE,
   status: DEFAULT_STATUS,