@vention/machine-ui 3.30.5 → 3.31.0

package/index.esm.js

@@ -5683,7 +5683,8 @@ const VentionModal = props => {
     isTouchDevice = false,
     type,
     backDropClickClosable = true,
-    textAlign = "center"
+    textAlign = "center",
+    buttonPosition
   } = props;
   const {
     classes
@@ -5691,7 +5692,8 @@ const VentionModal = props => {
     modalSize,
     isTouchDevice,
     type,
-    textAlign
+    textAlign,
+    buttonPosition
   });
   const iconProps = isTouchDevice ? {
     stroke: 2,
@@ -5737,21 +5739,22 @@ const VentionModal = props => {
         children: props.body
       }), jsxs(Box$1, {
         className: classes.modalActions,
+        "data-testid": ventionModalTestIds.modalActions,
         children: [props.secondaryButton && jsx(VentionButton, {
           size: buttonSize,
           onClick: props.secondaryButton.onClick,
           variant: props.secondaryButton.variant || "outline",
-          className: classes.modalButton,
           loading: props.secondaryButton.loading,
           disabled: props.secondaryButton.disabled,
+          fullWidth: props.buttonPosition === undefined ? true : false,
           children: props.secondaryButton.text
         }), props.primaryButton && jsx(VentionButton, {
           size: buttonSize,
           onClick: props.primaryButton.onClick,
           variant: props.primaryButton.variant || "filled",
-          className: classes.modalButton,
           loading: props.primaryButton.loading,
           disabled: props.primaryButton.disabled,
+          fullWidth: props.buttonPosition === undefined ? true : false,
           children: props.primaryButton.text
         })]
       })]
@@ -5763,6 +5766,7 @@ const useStyles$v = tss.withParams().create(({
   modalSize,
   isTouchDevice,
   textAlign,
+  buttonPosition,
   theme
 }) => {
   const colors = getColors$2(type, theme);
@@ -5804,10 +5808,8 @@ const useStyles$v = tss.withParams().create(({
     modalActions: {
       display: "flex",
       width: "100%",
-      gap: isTouchDevice || modalSize === "xx-large" ? theme.spacing(5) : theme.spacing(4)
-    },
-    modalButton: {
-      flex: 1
+      gap: isTouchDevice || modalSize === "xx-large" ? theme.spacing(5) : theme.spacing(4),
+      justifyContent: buttonPosition === "left" ? "flex-start" : buttonPosition === "right" ? "flex-end" : "space-between"
     },
     titleText: {
       textAlign,
@@ -5815,6 +5817,7 @@ const useStyles$v = tss.withParams().create(({
     },
     bodyText: {
       textAlign,
+      width: "100%",
       marginBottom: isTouchDevice || modalSize === "xx-large" ? theme.spacing(9) : theme.spacing(5)
     }
   };
@@ -5882,7 +5885,8 @@ const ventionModalTestIds = {
   positiveIcon: "vention-modal-positive-icon",
   infoIcon: "vention-modal-info-icon",
   warningIcon: "vention-modal-warning-icon",
-  negativeIcon: "vention-modal-negative-icon"
+  negativeIcon: "vention-modal-negative-icon",
+  modalActions: "vention-modal-actions"
 };
 
 const defaultProps$5 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vention/machine-ui",
-  "version": "3.30.5",
+  "version": "3.31.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/VentionCo/machine-cloud.git"

package/src/lib/components/vention-modal/vention-modal.d.ts

@@ -13,6 +13,7 @@ export interface VentionModalProps {
     isTouchDevice?: boolean;
     isOpen: VentionModalBaseProps["isOpen"];
     onClose: () => void;
+    buttonPosition?: "left" | "right";
     primaryButton?: {
         text: string;
         onClick: () => void;
@@ -45,4 +46,5 @@ export declare const ventionModalTestIds: {
     infoIcon: string;
     warningIcon: string;
     negativeIcon: string;
+    modalActions: string;
 };