pkp/pkp-lib#9626 Remove prop flex in Tooltip and HelpButton components

blesildaramirez · Nov 8, 2024 · 86ae6aa · 86ae6aa
1 parent 8cd45cd
commit 86ae6aa
Show file tree

Hide file tree

Showing 20 changed files with 55 additions and 143 deletions.
diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
@@ -3,25 +3,19 @@
 		class="pkpFormField pkpFormField--options pkpFormField--archivingPn"
 		:class="classes"
 	>
-		<legend class="pkpFormField--options__legend flex items-center">
+		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
 				<span class="-screenReader">{{ t('common.required') }}</span>
 			</span>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -34,7 +28,6 @@
 				: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,26 +6,17 @@
 			'pkpAutosuggest--rtl': isRTL,
 		}"
 	>
-		<div
-			v-if="!isLabelInline"
-			ref="heading"
-			class="pkpFormField__heading flex items-center"
-		>
+		<div v-if="!isLabelInline" ref="heading" class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:locale-label="localeLabel"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -38,7 +29,6 @@
 				: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,12 +1,12 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--color">
-		<legend class="pkpFormField__heading--legend flex items-center">
+		<legend class="pkpFormField__heading--legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -17,7 +17,6 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +30,6 @@
 				: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,23 +1,16 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading flex items-center">
-			<span class="pkpFormFieldLabel">
+		<div class="pkpFormField__heading">
+			<span class="pkpFormFieldLabel align-middle">
 				{{ label }}
 			</span>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<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,14 +1,8 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options pkpFormField--metadata">
-		<legend class="pkpFormField--options__legend flex items-center">
-			{{ label }}
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+		<legend class="pkpFormField--options__legend">
+			<span class="align-middle">{{ label }}</span>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -21,7 +15,6 @@
 				: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,12 +1,12 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend flex items-center">
+		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -17,7 +17,6 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +30,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</legend>
 		<div

diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
@@ -1,23 +1,16 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading flex items-center">
-			<span class="pkpFormFieldLabel">
+		<div class="pkpFormField__heading">
+			<span class="pkpFormFieldLabel align-middle">
 				{{ label }}
 			</span>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<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,19 +1,14 @@
 <template>
 	<div class="pkpFormField pkpFormField--pubid">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -26,7 +21,6 @@
 				: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,12 +1,12 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend flex items-center">
+		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -17,7 +17,6 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +30,6 @@
 				: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,21 +3,21 @@
 		class="pkpFormField pkpFormField--richTextarea"
 		:class="{'-isFocused': isFocused, 'pkpFormField--richTextarea--rtl': isRTL}"
 	>
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:locale-label="localeLabel"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +31,6 @@
 				: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,21 +1,16 @@
 <template>
 	<div class="pkpFormField pkpFormField--select">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:locale-label="localeLabel"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,7 +23,6 @@
 				: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,19 +1,14 @@
 <template>
 	<div class="pkpFormField pkpFormField--select pkpFormField--selectIssue">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -26,7 +21,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div