@evoke-platform/ui-components 1.10.0-dev.22 → 1.10.0-dev.23

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -155,7 +155,6 @@ const FormRendererInternal = (props) => {
         errors,
         hasAccordions: hasSections && isSmallerThanMd,
         shouldShowValidationErrors: isSubmitted,
-        isDeleteForm: form.id === '',
         action,
         validationContainerRef: validationContainerRef,
         autosaveEnabled: !!form.autosaveActionId,
@@ -213,7 +212,7 @@ const FormRendererInternal = (props) => {
                         expandedSections,
                         hasAccordions: hasSections && isSmallerThanMd,
                     } })),
-                (actionId || form.id === 'documentForm') &&
+                (action || form.id === 'documentForm') &&
                     onSubmit &&
                     (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };

package/dist/published/components/custom/FormV2/FormRendererContainer.js

@@ -135,7 +135,7 @@ function FormRendererContainer(props) {
                 entries: [
                     {
                         type: 'content',
-                        html: `<p>You are about to delete <strong>${instance?.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance?.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
                     },
                 ],
                 objectId: objectId,

package/dist/published/components/custom/FormV2/components/Footer.js

@@ -6,7 +6,7 @@ import { Box } from '../../../layout';
 import { FormContext } from './FormContext';
 /* Default FormRenderer Footer. Displays a submit button and cancel changes button. */
 export const Footer = (props) => {
-    const { action, sx } = props;
+    const { sx } = props;
     const { width } = useContext(FormContext);
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
@@ -20,9 +20,12 @@ export const Footer = (props) => {
             padding: isSmallerThanMd ? '16px' : '20px',
             justifyContent: isXs ? 'center' : 'flex-end',
             alignItems: 'center',
-            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+            borderTop: '1px solid #f4f6f8',
             borderRadius: '0px 0px 6px 6px',
             zIndex: 3,
+            width: '100%',
+            // this will ensure footer does not exceed form width when form has padding
+            maxWidth: width - (isSmallerThanMd ? 32 : 40),
             ...sx,
         } },
         React.createElement(FooterActions, { ...props })));

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -84,7 +84,7 @@ export const ActionDialog = (props) => {
         objectId: relatedParameter.objectId, onSubmit: handleFormSave, onDiscardChanges: onClose, onSubmitError: handleSaveError, richTextEditor: richTextEditor, associatedObject: associatedObject, renderHeader: (formHeaderProps) => {
             return (React.createElement(DialogTitle, { sx: {
                     ...styles.dialogTitle,
-                    borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef',
+                    borderBottom: '1px solid #e9ecef',
                 } },
                 action && hasAccess && !loading ? action?.name : '',
                 React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose, "aria-label": "Close" },
@@ -99,7 +99,7 @@ export const ActionDialog = (props) => {
             React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(ValidationErrors, { errors: bodyProps.errors, sx: {
                     my: isSm || isXs ? 2 : 3,
                 } })) : null),
-            React.createElement(Body, { ...bodyProps, sx: { padding: 0 } }))), renderFooter: (footerProps) => (React.createElement(DialogActions, { sx: { padding: 0 } },
+            React.createElement(Body, { ...bodyProps, sx: { padding: 0 } }))), renderFooter: (footerProps) => (React.createElement(DialogActions, { sx: { padding: 0, margin: 0 } },
             React.createElement(Footer, { ...footerProps, discardChangesButtonLabel: "Cancel" }))), renderContainer: ({ status, error, defaultContainer }) => (React.createElement(React.Fragment, null,
             status === 'ready' && defaultContainer,
             status === 'loading' && (React.createElement(DialogContent, null,

package/dist/published/components/custom/FormV2/components/Header.d.ts

@@ -11,14 +11,6 @@ export type HeaderProps = {
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;
     onCollapseAll?: () => void;
-    /**
-     * Indicates whether this is a "delete form".
-     * This flag adjusts header styling specifically for delete forms.
-     *
-     * @warning This prop is temporary and will be removed
-     * when delete form styling is finalized.
-     */
-    isDeleteForm?: boolean;
     errors?: FieldErrors;
     action?: Action;
     autosaving?: boolean;

package/dist/published/components/custom/FormV2/components/Header.js

@@ -7,7 +7,7 @@ import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, isDeleteForm, autosaveEnabled, } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, autosaveEnabled } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -24,8 +24,7 @@ const Header = (props) => {
             alignItems: 'center',
             flexWrap: 'wrap',
             paddingY: isSm || isXs ? 2 : 3,
-            // when rendering the default delete action, we don't want a border
-            borderBottom: isDeleteForm ? undefined : '1px solid #e9ecef',
+            borderBottom: '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
         }, ref: validationContainerRef },

package/dist/published/stories/FormRendererData.js

@@ -563,6 +563,8 @@ export const mockEvokeForm = {
             display: {
                 label: 'Collection',
                 createActionId: '_create',
+                deleteActionId: '_delete',
+                deleteFormId: '_auto_',
                 createFormId: 'customerCreateForm',
             },
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-dev.22",
+    "version": "1.10.0-dev.23",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",