pkp/pkp-lib#9626 Use align-middle for inline-block containers when di…

…splaying icons
blesildaramirez · Nov 8, 2024 · ca1358e · ca1358e
1 parent 86ae6aa
commit ca1358e
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 107 deletions.
diff --git a/src/components/DateRange/DateRange.vue b/src/components/DateRange/DateRange.vue
@@ -65,12 +65,9 @@
 					</label>
 				</fieldset>
 				<PkpButton @click="applyCustomRange">{{ applyLabel }}</PkpButton>
-				<div
-					v-if="errorMessage"
-					class="flex items-center pt-2 text-base-normal"
-				>
+				<div v-if="errorMessage" class="pt-2 text-base-normal">
 					<Icon icon="Error" class="me-1 h-5 w-5" :inline="true" />
-					<span v-html="errorMessage" />
+					<span class="align-middle" v-html="errorMessage" />
 				</div>
 			</form>
 		</div>

diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
@@ -59,10 +59,10 @@
 			<div
 				v-if="pattern && !canGenerateId && !currentValue"
 				:id="describedByDescriptionId"
-				class="mt-1 flex items-center text-base-normal"
+				class="mt-1 text-base-normal"
 			>
 				<Icon icon="Error" class="h-4 w-4" :inline="true" />
-				{{ missingPartsLabel }}
+				<span class="align-middle">{{ missingPartsLabel }}</span>
 			</div>
 			<FieldError
 				v-if="errors && errors.length"

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -40,23 +40,6 @@ export const InlineIcon = {
 	args: {icon: 'Search', class: 'h-5 w-5', inline: true},
 };
 
-export const VerticallyAligned = {
-	render: (args) => ({
-		components: {Icon},
-		setup() {
-			return {args};
-		},
-		template: `
-			<div class="flex items-center space-x-1">
-				<span>Add files</span>
-				<Icon v-bind="args" />
-			</div>
-		`,
-	}),
-
-	args: {icon: 'Add', class: 'h-4 w-4', inline: true},
-};
-
 export const IconGallery = {
 	render: (args) => ({
 		components: {Icon},

diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
@@ -42,11 +42,11 @@
 				</div>
 			</div>
 			<div v-if="!item.genreId" class="listPanel--submissionFiles__setGenre">
-				<span role="alert" class="flex items-center">
+				<span role="alert">
 					<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
 					<span
 						:id="genrePromptId"
-						class="listPanel--submissionFiles__setGenreLabel"
+						class="listPanel--submissionFiles__setGenreLabel align-middle"
 					>
 						{{ genrePromptLabel }}
 					</span>

diff --git a/src/components/ListPanel/submissions/SubmissionsListItem.vue b/src/components/ListPanel/submissions/SubmissionsListItem.vue
@@ -57,18 +57,19 @@
 				>
 					<span v-html="reviewerWorkflowLink" />
 				</div>
-				<div v-else-if="notice" class="listPanel__item--submission__notice">
-					<div class="flex items-center space-x-1">
-						<Icon icon="Error" class="h-4 w-4" :inline="true" />
-						<span>{{ notice }}</span>
-						<button
-							v-if="shouldAssignEditor"
-							class="-linkButton"
-							@click.stop.prevent="openAssignParticipant"
-						>
-							{{ t('submission.list.assignEditor') }}
-						</button>
-					</div>
+				<div
+					v-else-if="notice"
+					class="listPanel__item--submission__notice space-x-1"
+				>
+					<Icon icon="Error" class="h-4 w-4" :inline="true" />
+					<span class="align-middle">{{ notice }}</span>
+					<button
+						v-if="shouldAssignEditor"
+						class="-linkButton"
+						@click.stop.prevent="openAssignParticipant"
+					>
+						{{ t('submission.list.assignEditor') }}
+					</button>
 				</div>
 			</div>
 
@@ -128,21 +129,22 @@
 				<template v-else>
 					<div
 						v-if="currentUserLatestReviewAssignment.reviewCancelled"
-						class="listPanel__item--submission__reviewCancelled flex items-center"
+						class="listPanel__item--submission__reviewCancelled"
 					>
 						<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
-						{{ t('submission.list.reviewCancelled') }}
+						<span class="align-middle">
+							{{ t('submission.list.reviewCancelled') }}
+						</span>
 					</div>
-					<div
-						v-if="currentUserLatestReviewAssignment.reviewComplete"
-						class="flex items-center"
-					>
+					<div v-if="currentUserLatestReviewAssignment.reviewComplete">
 						<Icon
 							icon="Complete"
 							class="me-1 h-4 w-4 text-success"
 							:inline="true"
 						/>
-						{{ t('submission.list.reviewComplete') }}
+						<span class="align-middle">
+							{{ t('submission.list.reviewComplete') }}
+						</span>
 					</div>
 				</template>
 

diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -51,26 +51,23 @@
 					</div>
 				</div>
 
-				<div
-					v-if="currentlyAssigned"
-					class="listPanel__item--reviewer__notice flex items-center"
-				>
+				<div v-if="currentlyAssigned" class="listPanel__item--reviewer__notice">
 					<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
-					{{ currentlyAssignedLabel }}
+					<span class="align-middle">{{ currentlyAssignedLabel }}</span>
 				</div>
 				<div
 					v-else-if="assignedToLastRound"
-					class="listPanel__item--reviewer__notice flex items-center"
+					class="listPanel__item--reviewer__notice"
 				>
 					<Icon icon="Pin" class="me-1 h-3 w-3" :inline="true" />
-					{{ assignedToLastRoundLabel }}
+					<span class="align-middle">{{ assignedToLastRoundLabel }}</span>
 				</div>
 				<div
 					v-else-if="warnOnAssignment && !isWarningBypassed"
-					class="listPanel__item--reviewer__notice flex items-center space-x-1"
+					class="listPanel__item--reviewer__notice space-x-1"
 				>
 					<Icon icon="Lock" class="me-1 h-3 w-3" :inline="true" />
-					{{ warnOnAssignmentLabel }}
+					<span class="align-middle">{{ warnOnAssignmentLabel }}</span>
 					<button
 						class="listPanel__item--reviewer__noticeAction"
 						@click.prevent="unlockAssignment"
@@ -87,37 +84,21 @@
 					aria-hidden="true"
 				>
 					<span class="listPanel__item--reviewer__complete">
-						<div class="flex items-center">
-							<Icon
-								icon="Complete"
-								class="me-1 h-4 w-4 text-default"
-								:inline="true"
-							/>
-							{{ item.reviewsCompleted }}
-						</div>
+						<Icon icon="Complete" class="h-4 w-4 text-default" :inline="true" />
+						<span class="align-middle">{{ item.reviewsCompleted }}</span>
 					</span>
 					<span class="listPanel__item--reviewer__last">
-						<div class="flex items-center">
-							<Icon
-								icon="History"
-								class="me-1 h-4 w-4 text-default"
-								:inline="true"
-							/>
+						<Icon icon="History" class="h-4 w-4 text-default" :inline="true" />
+						<span class="align-middle">
 							{{ daysSinceLastAssignmentLabelCompiled }}
-						</div>
+						</span>
 					</span>
 					<span
 						v-if="item.interests.length"
 						class="listPanel__item--reviewer__interests"
 					>
-						<div class="flex items-center">
-							<Icon
-								icon="Book"
-								class="me-1 h-4 w-4 text-default"
-								:inline="true"
-							/>
-							{{ interestsString }}
-						</div>
+						<Icon icon="Book" class="h-4 w-4 text-default" :inline="true" />
+						<span class="align-middle">{{ interestsString }}</span>
 					</span>
 					<span
 						v-if="affiliationMatch(item.affiliation)"

diff --git a/src/components/Notification/Notification.stories.js b/src/components/Notification/Notification.stories.js
@@ -47,11 +47,11 @@ export const Warning = {
 		},
 		template: `
 			<Notification v-bind="args" >
-				<div class="flex items-center">
-					<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+				<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+				<span class="align-middle">
 					This submission does not have any contributors. At least one contributor
 					must be provided.
-				</div>
+				</span>
 			</Notification>
 		`,
 	}),

diff --git a/src/components/Panel/Panel.stories.js b/src/components/Panel/Panel.stories.js
@@ -40,12 +40,14 @@ export const Default = {
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem class="flex items-center">
+						<ListItem>
 							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 		</PanelSection>
@@ -86,12 +88,14 @@ export const ManySections = {
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem class="flex items-center">
+						<ListItem>
 							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
@@ -118,12 +122,14 @@ export const ManySections = {
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem class="flex items-center">
+						<ListItem>
 							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
@@ -164,12 +170,14 @@ export const StackHeader = {
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem class="flex items-center">
+						<ListItem>
 							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
@@ -196,12 +204,14 @@ export const StackHeader = {
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem class="flex items-center">
+						<ListItem>
 							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>

diff --git a/src/managers/UserInvitationManager/UserInvitationManager.vue b/src/managers/UserInvitationManager/UserInvitationManager.vue
@@ -27,8 +27,8 @@
 		<TableBody>
 			<TableRow v-for="(invitation, index) in store.invitations" :key="index">
 				<TableCell>
-					<span class="flex items-center space-x-1">
-						<span class="text-lg-normal">
+					<span class="space-x-1">
+						<span class="align-middle text-lg-normal">
 							{{
 								invitation.userId
 									? invitation.existingUser.fullName