Merge pull request #1113 from nextcloud-libraries/fix/migrate-conflic…

…t-picker-to-NcDialog

fix: migrate conflictpicker to NcDialog and remove incorrect semantic closing icon

cypress/components/ConflictPicker.cy.ts

@@ -36,11 +36,11 @@ describe('ConflictPicker rendering', { testIsolation: true }, () => {
 		cy.get('[data-cy-conflict-picker-fieldset="all"]').should('exist')
 		cy.get('[data-cy-conflict-picker-fieldset="image.jpg"]').should('exist')
 
-		cy.get('[data-cy-conflict-picker-skip]').should('be.visible')
+		cy.get('[data-cy-conflict-picker-skip]').scrollIntoView().should('be.visible')
 		cy.get('[data-cy-conflict-picker-submit]').should('be.visible')
 
 		// Force close and cancel
-		cy.get('[data-cy-conflict-picker] .modal-container__close').click({ force: true })
+		cy.get('[data-cy-conflict-picker-skip]').click({ force: true })
 	})
 })
 

lib/components/ConflictPicker.vue

@@ -1,14 +1,14 @@
 <template>
-	<NcModal class="conflict-picker"
+	<NcDialog class="conflict-picker"
 		data-cy-conflict-picker
 		:close-on-click-outside="false"
+		:can-close="false"
 		:show="opened"
+		:name="name"
 		size="large"
 		@close="onCancel">
 		<!-- Header -->
 		<div class="conflict-picker__header">
-			<h2 class="conflict-picker__title" v-text="name" />
-
 			<!-- Description -->
 			<p id="conflict-picker-description" class="conflict-picker__description">
 				{{ t('Which files do you want to keep?') }}<br>
@@ -67,7 +67,7 @@
 				{{ t('Continue') }}
 			</NcButton>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script lang="ts">
@@ -81,7 +81,7 @@ import Vue from 'vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 
@@ -99,7 +99,7 @@ export default Vue.extend({
 		Close,
 		NcButton,
 		NcCheckboxRadioSwitch,
-		NcModal,
+		NcDialog,
 		NodesPicker,
 	},
 
@@ -372,7 +372,7 @@ export default Vue.extend({
 		position: sticky;
 		z-index: 10;
 		top: 0;
-		padding: var(--margin);
+		padding: 0 var(--margin);
 		padding-bottom: 0;
 	}