pkp/pkp-lib#9499 introduce semantic-defaults instead of legacyDefaults, apply on description and other html fields

Author: jardakotesovec

src/components/Form/FormGroup.vue

@@ -5,7 +5,7 @@
 			<div
 				v-if="description"
 				v-strip-unsafe-html="description"
-				class="pkpFormGroup__description"
+				class="pkpFormGroup__description semantic-defaults"
 			></div>
 		</div>
 		<div class="pkpFormGroup__fields">

src/components/Form/fields/FieldArchivingPn.vue

@@ -34,12 +34,12 @@
 			v-if="description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description pkpFormField--options__description"
+			class="pkpFormField__description pkpFormField--options__description semantic-defaults"
 		/>
 		<div
 			v-if="terms && value"
 			v-strip-unsafe-html="terms"
-			class="pkpFormField__description pkpFormField--options__description pkpFormField--archivingPn__terms"
+			class="pkpFormField__description pkpFormField--options__description pkpFormField--archivingPn__terms semantic-defaults"
 		/>
 		<FieldError
 			v-if="errors && errors.length"

src/components/Form/fields/FieldBaseAutosuggest.vue

@@ -35,7 +35,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control pkpAutosuggest__control">
 			<div
@@ -83,7 +83,7 @@
 				<Autosuggest
 					v-bind="autoSuggestProps"
 					ref="inputRef"
-					v-model:inputValue="inputValue"
+					v-model:input-value="inputValue"
 					@select-suggestion="selectSuggestion"
 					@deselect="deselect"
 					@focus-changed="changeFocus"

src/components/Form/fields/FieldColor.vue

@@ -36,7 +36,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control">
 			<color-picker

src/components/Form/fields/FieldHtml.vue

@@ -19,7 +19,7 @@
 		</div>
 		<div
 			v-strip-unsafe-html="description"
-			class="pkpFormField__control pkpFormField__control--html"
+			class="pkpFormField__control pkpFormField__control--html semantic-defaults"
 		/>
 	</div>
 </template>

src/components/Form/fields/FieldMetadataSetting.vue

@@ -21,7 +21,7 @@
 			v-if="description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description pkpFormField--options__description"
+			class="pkpFormField__description pkpFormField--options__description semantic-defaults"
 		/>
 		<FieldError
 			v-if="errors && errors.length"

src/components/Form/fields/FieldOptions.vue

@@ -36,7 +36,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description pkpFormField--options__description"
+			class="pkpFormField__description pkpFormField--options__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control">
 			<!-- avoid creating VueDraggable when not necessary as it was causing random problems with multiple VueDraggables in the form -->

src/components/Form/fields/FieldOrcid.vue

@@ -42,7 +42,7 @@
 			<div
 				v-if="hasOrcid"
 				v-strip-unsafe-html="orcidDisplayText"
-				class="pkpFormField__control pkpFormField__control--html"
+				class="pkpFormField__control pkpFormField__control--html semantic-defaults"
 			/>
 			<PkpButton
 				v-if="hasOrcid"

src/components/Form/fields/FieldPubId.vue

@@ -27,7 +27,7 @@
 			v-if="description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control">
 			<input

src/components/Form/fields/FieldRadioInput.vue

@@ -36,7 +36,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description pkpFormField--options__description"
+			class="pkpFormField__description pkpFormField--options__description semantic-defaults"
 		/>
 		<FieldError
 			v-if="errors && errors.length"

src/components/Form/fields/FieldRichTextarea.vue

@@ -37,7 +37,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div
 			class="pkpFormField__control pkpFormField--richTextarea__control"

src/components/Form/fields/FieldSelect.vue

@@ -29,7 +29,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div
 			class="pkpFormField__control"

src/components/Form/fields/FieldSelectIssue.vue

@@ -27,7 +27,7 @@
 			v-if="description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control">
 			<span class="pkpFormField__description">

src/components/Form/fields/FieldSlider.vue

@@ -34,7 +34,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="mt-2 flex">
 			<div class="mt-3 grow">

src/components/Form/fields/FieldText.vue

@@ -34,7 +34,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control" :class="controlClasses">
 			<div class="pkpFormField__control_top">

src/components/Form/fields/FieldTextarea.vue

@@ -34,7 +34,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div class="pkpFormField__control">
 			<textarea

src/components/Form/fields/FieldUpload.vue

@@ -29,7 +29,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div
 			:id="controlId"

src/components/Form/fields/FieldUploadImage.vue

@@ -29,7 +29,7 @@
 			v-if="isPrimaryLocale && description"
 			:id="describedByDescriptionId"
 			v-strip-unsafe-html="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description semantic-defaults"
 		/>
 		<div
 			:id="controlId"

src/components/ListPanel/users/SelectReviewerListItem.vue

@@ -227,7 +227,10 @@
 					<div class="listPanel__item--reviewer__detailHeading">
 						{{ biographyLabel }}
 					</div>
-					<div v-strip-unsafe-html="localize(item.biography)"></div>
+					<div
+						v-strip-unsafe-html="localize(item.biography)"
+						class="semantic-defaults"
+					></div>
 				</ListItem>
 			</List>
 		</div>

src/components/ListPanel/users/SelectReviewerSuggestionListItem.vue

@@ -12,7 +12,7 @@
 					</div>
 					<div
 						v-strip-unsafe-html="localize(item.suggestionReason)"
-						class="reviewer_sugestion_reason_container"
+						class="reviewer_sugestion_reason_container semantic-defaults"
 					></div>
 				</div>
 

src/components/Modal/Dialog.vue

@@ -55,7 +55,7 @@
 								</DialogTitle>
 							</div>
 							<div class="modal-content" :class="icon ? 'px-24' : 'pt- px-12'">
-								<div v-strip-unsafe-html="message" />
+								<div v-strip-unsafe-html="message" class="semantic-defaults" />
 								<component
 									:is="bodyComponent"
 									v-if="bodyComponent"

src/components/Modal/DialogBody.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="modal-content" :class="hasIcon ? 'px-24' : 'pt- px-12'">
+		<slot>
+			<div
+				v-if="message"
+				v-strip-unsafe-html="message"
+				class="semantic-defaults"
+			/>
+		</slot>
+	</div>
+
+	<div
+		class="flex items-center gap-x-4"
+		:class="hasIcon ? 'p-10 ps-24' : 'p-12'"
+	>
+		<slot name="actions">
+			<PkpButton
+				v-for="action in actions"
+				:key="action.label"
+				:element="action.element || 'button'"
+				:href="action.href || null"
+				:is-primary="action.isPrimary || null"
+				:is-warnable="action.isWarnable || null"
+				:is-disabled="isLoading"
+				@click="action.callback ? fireCallback(action.callback) : null"
+			>
+				{{ action.label }}
+			</PkpButton>
+		</slot>
+
+		<Spinner v-if="isLoading || isDialogLoading" />
+	</div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import PkpButton from '@/components/Button/Button.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
+
+const props = defineProps({
+	message: {
+		type: String,
+		required: true,
+	},
+	actions: {type: Array, default: () => []},
+	hasIcon: Boolean,
+	onClose: {
+		type: Function,
+		default: () => () => {},
+	},
+	isLoading: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+// for components that doesn't manually handle loading state
+const isDialogLoading = ref(props.isLoading);
+
+function fireCallback(callback) {
+	isDialogLoading.value = true;
+	if (typeof callback === 'function') {
+		callback(() => {
+			props.onClose?.();
+		});
+	}
+}
+</script>

src/pages/jobs/FailedJobsPage.vue

@@ -4,7 +4,7 @@
 			<span v-strip-unsafe-html="label"></span>
 		</template>
 		<template v-if="description" #description>
-			<span v-strip-unsafe-html="description"></span>
+			<span v-strip-unsafe-html="description" class="semantic-defaults"></span>
 		</template>
 		<template v-if="total > 0" #top-controls>
 			<Spinner v-if="isLoadingItems"></Spinner>

src/pages/jobs/JobsPage.vue

@@ -4,7 +4,7 @@
 			<span v-strip-unsafe-html="label"></span>
 		</template>
 		<template v-if="description" #description>
-			<span v-strip-unsafe-html="description"></span>
+			<span v-strip-unsafe-html="description" class="semantic-defaults"></span>
 		</template>
 		<TableHeader>
 			<TableColumn

src/pages/reviewerSubmission/RoundHistoryModal.vue

@@ -43,13 +43,13 @@
 									v-strip-unsafe-html="
 										store.reviewRoundHistory.declineEmail.subject
 									"
-									class="mb-4 text-lg-normal text-secondary"
+									class="semantic-defaults mb-4 text-lg-normal text-secondary"
 								></p>
 								<p
 									v-strip-unsafe-html="
 										store.reviewRoundHistory.declineEmail.body
 									"
-									class="mt-4"
+									class="semantic-defaults mt-4"
 								></p>
 							</div>
 							<p v-else>
@@ -110,7 +110,10 @@
 											})
 										}}
 									</dt>
-									<dd v-strip-unsafe-html="reviewComment"></dd>
+									<dd
+										v-strip-unsafe-html="reviewComment"
+										class="semantic-defaults"
+									></dd>
 								</template>
 							</dl>
 						</div>

src/styles/_global.less

@@ -38,7 +38,7 @@
 }
 
 /* To compensate for tailwindcss default, which breaks legacy unstyled html */
-.legacyDefaults {
+.semantic-defaults {
 	/* Default browser styles for common HTML elements */
 
 	/* Heading 2 */