Remove marginTop option from presentation divider (#8467)

* Remove margins

* Remove marginTop from interface

* Remove margin for first divider in form

* Remove merge conflict resolve conflict resolve conflict

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/components/v-form/v-form.vue

@@ -23,7 +23,7 @@
 				v-if="field.meta?.special?.includes('group')"
 				v-show="!field.meta?.hidden"
 				:key="field.field"
-				:class="field.meta?.width || 'full'"
+				:class="[field.meta?.width || 'full', index === firstVisibleFieldIndex ? 'first-visible-field' : '']"
 				:field="field"
 				:fields="fieldsForGroup[index]"
 				:values="modelValue || {}"
@@ -41,6 +41,7 @@
 			<form-field
 				v-else-if="!field.meta?.hidden"
 				:key="field.field"
+				:class="index === firstVisibleFieldIndex ? 'first-visible-field' : ''"
 				:field="field"
 				:autofocus="index === firstEditableFieldIndex && autofocus"
 				:model-value="(values || {})[field.field]"
@@ -165,6 +166,15 @@ export default defineComponent({
 			return null;
 		});
 
+		const firstVisibleFieldIndex = computed(() => {
+			for (let i = 0; i < formFields.value.length; i++) {
+				if (formFields.value[i].meta && !formFields.value[i].meta?.hidden) {
+					return i;
+				}
+			}
+			return null;
+		});
+
 		/**
 		 * The validation errors that don't apply to any visible fields. This can occur if an admin accidentally
 		 * made a hidden field required for example. We want to show these errors at the top of the page, so the
@@ -197,6 +207,7 @@ export default defineComponent({
 			unsetValue,
 			unknownValidationErrors,
 			firstEditableFieldIndex,
+			firstVisibleFieldIndex,
 			isNil,
 			apply,
 			el,
@@ -340,4 +351,8 @@ export default defineComponent({
 .v-form {
 	@include form-grid;
 }
+
+.v-form .first-visible-field :deep(.v-divider) {
+	margin-top: 0;
+}
 </style>

app/src/interfaces/presentation-divider/index.ts

@@ -44,21 +44,6 @@ export default defineInterface({
 				interface: 'select-icon',
 			},
 		},
-		{
-			field: 'marginTop',
-			name: '$t:interfaces.presentation-divider.margin_top',
-			type: 'boolean',
-			meta: {
-				width: 'half',
-				interface: 'boolean',
-				options: {
-					label: '$t:interfaces.presentation-divider.margin_top_label',
-				},
-			},
-			schema: {
-				default_value: true,
-			},
-		},
 		{
 			field: 'inlineTitle',
 			name: '$t:interfaces.presentation-divider.inline_title',

app/src/interfaces/presentation-divider/presentation-divider.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-divider
-		:class="{ 'add-margin-top': marginTop }"
+		:class="{ 'add-margin-top': icon || title }"
 		:style="{
 			'--v-divider-label-color': color,
 			'--v-divider-color': 'var(--border-subdued)',
@@ -34,20 +34,11 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		marginTop: {
-			type: Boolean,
-			default: true,
-		},
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.v-divider {
-	margin-top: 10px;
-	margin-bottom: -10px;
-}
-
 .add-margin-top {
 	margin-top: 40px;
 }