pkp/pkp-lib#9626 Adjust vertical alignment of icons next to texts

blesildaramirez · Oct 30, 2024 · fe67219 · fe67219
1 parent 874a8f6
commit fe67219
Show file tree

Hide file tree

Showing 21 changed files with 144 additions and 34 deletions.
diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
@@ -130,6 +130,7 @@ const EditorialStatsPageWithDataAndTemplate = {
 										v-if="row.description"
 										:label="'Description for ' + row.name"
 										:tooltip="row.description"
+										icon-size="small"
 									></Tooltip>
 								</TableCell>
 								<TableCell>{{ row.dateRange }}</TableCell>

diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
@@ -3,7 +3,7 @@
 		class="pkpFormField pkpFormField--options pkpFormField--archivingPn"
 		:class="classes"
 	>
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -15,7 +15,13 @@
 				*
 				<span class="-screenReader">{{ t('common.required') }}</span>
 			</span>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,6 +34,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</legend>
 		<div

diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -6,7 +6,11 @@
 			'pkpAutosuggest--rtl': isRTL,
 		}"
 	>
-		<div v-if="!isLabelInline" ref="heading" class="pkpFormField__heading">
+		<div
+			v-if="!isLabelInline"
+			ref="heading"
+			class="pkpFormField__heading flex items-center"
+		>
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -15,7 +19,13 @@
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,6 +38,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldColor.vue b/src/components/Form/fields/FieldColor.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--color">
-		<legend class="pkpFormField__heading--legend">
+		<legend class="pkpFormField__heading--legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</legend>
 		<div

diff --git a/src/components/Form/fields/FieldHtml.vue b/src/components/Form/fields/FieldHtml.vue
@@ -1,16 +1,23 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<span class="pkpFormFieldLabel">
 				{{ label }}
 			</span>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span v-if="tooltip" class="-screenReader" v-html="tooltip" />
 			<HelpButton
 				v-if="helpTopic"
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldMetadataSetting.vue b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -1,8 +1,14 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options pkpFormField--metadata">
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			{{ label }}
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -15,6 +21,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</legend>
 		<div

diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</legend>
 		<div
@@ -238,12 +240,12 @@ export default {
 		 */
 		if (this.isOrderable && this.selectedValue?.length) {
 			this.localizedOptions = this.localizedOptions.sort((a, b) => {
-				let aIndex = this.selectedValue.findIndex(value => a.value === value);
-				let bIndex = this.selectedValue.findIndex(value => b.value === value);
+				let aIndex = this.selectedValue.findIndex((value) => a.value === value);
+				let bIndex = this.selectedValue.findIndex((value) => b.value === value);
 				aIndex = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex;
 				bIndex = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex;
 				return aIndex < bIndex ? -1 : 1;
-			})
+			});
 		}
 	},
 	methods: {

diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
@@ -1,16 +1,23 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<span class="pkpFormFieldLabel">
 				{{ label }}
 			</span>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span v-if="tooltip" class="-screenReader" v-html="tooltip" />
 			<HelpButton
 				v-if="helpTopic"
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
@@ -1,13 +1,19 @@
 <template>
 	<div class="pkpFormField pkpFormField--pubid">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -20,6 +26,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldRadioInput.vue b/src/components/Form/fields/FieldRadioInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</legend>
 		<div

diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
@@ -3,7 +3,7 @@
 		class="pkpFormField pkpFormField--richTextarea"
 		:class="{'-isFocused': isFocused, 'pkpFormField--richTextarea--rtl': isRTL}"
 	>
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormField pkpFormField--select">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -9,7 +9,13 @@
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -22,6 +28,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
@@ -1,13 +1,19 @@
 <template>
 	<div class="pkpFormField pkpFormField--select pkpFormField--selectIssue">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -20,6 +26,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div

diff --git a/src/components/Form/fields/FieldSlider.vue b/src/components/Form/fields/FieldSlider.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="mt-5 max-w-lg">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:id="labelId"
 				:label="label"
@@ -14,6 +14,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -27,6 +28,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</div>
 		<div