Refine table styling, update new components to use Table, not TableNext

src/components/Table/Table.vue

@@ -1,30 +1,45 @@
 <template>
-	<div
-		v-if="slots.label || slots.description || slots['top-controls']"
-		class="flex justify-between bg-default p-4"
-	>
-		<div v-if="slots.label || slots.description">
-			<span v-if="slots.label" :id="labelId" class="text-xl-bold">
-				<slot name="label" />
-			</span>
-			<div v-if="slots.description" :id="descriptionId">
-				<slot name="description" />
+	<div>
+		<div
+			v-if="slots.label || slots.description || slots['top-controls']"
+			class="flex justify-between border-x border-t border-light bg-secondary p-4"
+		>
+			<div v-if="slots.label || slots.description">
+				<span
+					v-if="slots.label"
+					:id="labelId"
+					class="text-lg-bold text-heading"
+				>
+					<slot name="label" />
+				</span>
+				<div
+					v-if="slots.description"
+					:id="descriptionId"
+					class="text-sm-normal"
+				>
+					<slot name="description" />
+				</div>
+			</div>
+			<div v-if="slots['top-controls']" class="flex-shrink-0">
+				<slot name="top-controls" />
 			</div>
 		</div>
-		<div v-if="slots['top-controls']">
-			<slot name="top-controls" />
+		<table
+			class="pkpTable w-full max-w-full border-separate border-spacing-0"
+			:aria-labelledby="labelledBy ?? (slots.label ? labelId : null)"
+			:aria-describedby="
+				describedBy ?? (slots.description ? descriptionId : null)
+			"
+		>
+			<slot />
+		</table>
+		<div
+			v-if="slots['bottom-controls']"
+			class="flex justify-between border-x border-b border-light px-3 py-2"
+		>
+			<slot name="bottom-controls" />
 		</div>
 	</div>
-	<table
-		class="w-full max-w-full border-separate border-spacing-0"
-		:aria-labelledby="labelId"
-		:aria-describedby="descriptionId"
-	>
-		<slot />
-	</table>
-	<div v-if="slots['bottom-controls']" class="flex justify-between py-4">
-		<slot name="bottom-controls" />
-	</div>
 </template>
 
 <script setup>
@@ -68,8 +83,8 @@ const tableContext = {
 const slots = useSlots();
 
 const {generateId} = useId();
-const labelId = slots.label ? generateId() : props.labelledBy;
-const descriptionId = slots.description ? generateId() : props.describedBy;
+const labelId = slots.label ? generateId() : null;
+const descriptionId = slots.description ? generateId() : null;
 
 provide('tableContext', tableContext);
 </script>

src/components/Table/TableCell.vue

@@ -2,7 +2,7 @@
 	<component
 		:is="isRowHeader ? 'th' : 'td'"
 		:scope="isRowHeader ? 'row' : false"
-		class="border-b border-t border-light px-2 py-2 text-start first:border-s first:ps-3 last:border-e last:pe-3"
+		class="border-b border-light px-2 py-2 text-start first:border-s first:ps-3 last:border-e last:pe-3"
 		:class="classes"
 	>
 		<slot />
@@ -28,6 +28,13 @@ const props = defineProps({
 			return false;
 		},
 	},
+	/** Take only width as the content needs */
+	fitContent: {
+		type: Boolean,
+		default() {
+			return false;
+		},
+	},
 });
 
 const classes = computed(() => {
@@ -39,6 +46,10 @@ const classes = computed(() => {
 	if (props.fullWidthTruncated) {
 		list.push('w-full max-w-0 truncate');
 	}
+
+	if (props.fitContent) {
+		list.push('whitespace-nowrap w-1');
+	}
 	return list;
 });
 </script>

src/components/Table/TableColumn.vue

@@ -2,7 +2,7 @@
 	<th
 		scope="col"
 		:aria-sort="props.allowsSorting ? tableContext.sortDirection : undefined"
-		class="border-table-heading whitespace-nowrap border-b border-t px-2 py-4 text-start text-base-normal uppercase first:border-s first:ps-3 last:border-e last:pe-3"
+		class="whitespace-nowrap border-b border-t border-light px-2 py-4 text-start text-base-normal uppercase text-heading first:border-s first:ps-3 last:border-e last:pe-3"
 	>
 		<template v-if="props.allowsSorting">
 			<button class="flex items-center" @click="tableContext.onSort(id)">

src/components/Table/TableHeader.vue

@@ -1,5 +1,7 @@
 <template>
 	<thead>
-		<tr class="border-table-heading border"><slot></slot></tr>
+		<tr class="bg bg-default">
+			<slot></slot>
+		</tr>
 	</thead>
 </template>

src/managers/GalleyManager/GalleyManager.vue

@@ -46,11 +46,11 @@
 <script setup>
 import {useLocalize} from '@/composables/useLocalize';
 import {useGalleyManagerStore} from './galleyManagerStore';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 
 import GalleyManagerActionButton from './GalleyManagerActionButton.vue';
 import GalleyManagerCellName from './GalleyManagerCellName.vue';

src/managers/GalleyManager/GalleyManagerCellActions.vue

@@ -22,7 +22,7 @@ defineProps({
 	galley: {type: Object, required: true},
 });
 
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
 
 const galleyManagerStore = useGalleyManagerStore();

src/managers/GalleyManager/GalleyManagerCellLanguage.vue

@@ -8,7 +8,7 @@
 
 <script setup>
 import {computed} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 import {useGalleyManagerStore} from './galleyManagerStore';
 

src/managers/GalleyManager/GalleyManagerCellName.vue

@@ -20,7 +20,7 @@
 
 <script setup>
 import {computed} from 'vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import Icon from '@/components/Icon/Icon.vue';
 
 const props = defineProps({galley: {type: Object, required: true}});

src/managers/ReviewerManager/ReviewerManagerCellActions.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
 import {useReviewerManagerStore} from './reviewerManagerStore';
 import {computed} from 'vue';

src/managers/ReviewerManager/ReviewerManagerCellPrimaryActions.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import TableCell from '@/components/TableNext/TableCell.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import {useReviewerManagerStore} from './reviewerManagerStore';
 import {computed} from 'vue';

src/pages/dashboard/SubmissionSummaryModal/primaryItems/SubmissionStatus.vue

@@ -22,17 +22,17 @@ const texts = computed(() => {
 				heading: t('editor.submission.workflowDecision.submission.underReview'),
 			};
 		case pkp.const.WORKFLOW_STAGE_ID_EDITING:
-			return {heading: 'a'};
+			return {heading: 'todo'};
 		case pkp.const.WORKFLOW_STAGE_ID_PRODUCTION:
 			switch (props.submission.status) {
 				case pkp.const.STATUS_QUEUED:
-					return {heading: 'a'};
+					return {heading: 'todo'};
 				case pkp.const.STATUS_SCHEDULED:
-					return {heading: 'a'};
+					return {heading: 'todo'};
 				case pkp.const.STATUS_PUBLISHED:
-					return {heading: 'a'};
+					return {heading: 'todo'};
 				case pkp.const.STATUS_DECLINED:
-					return {heading: 'a'};
+					return {heading: 'todo'};
 			}
 	}
 	return '';