feat(ui): updates versions view to v4 design

packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx

@@ -6,7 +6,7 @@ import { Pill, useConfig, useLocale, useTranslation } from '@payloadcms/ui'
 import { formatDate } from '@payloadcms/ui/shared'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 import { getVersionLabel } from './getVersionLabel.js'
 
 const baseClass = 'version-pill-label'

packages/next/src/views/Version/VersionPillLabel/index.css

@@ -0,0 +1,23 @@
+@layer payload-default {
+  .version-pill-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .version-pill-label-text {
+    font-weight: var(--text-body-large-strong-font-weight);
+  }
+
+  .version-pill-label-date {
+    color: var(--color-text-secondary);
+  }
+
+  @media (max-width: 768px) {
+    .version-pill-label {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+    }
+  }
+}

packages/next/src/views/Versions/buildColumns.tsx

@@ -65,18 +65,6 @@ export const buildVersionColumns = ({
         )
       }),
     },
-    {
-      accessor: 'id',
-      active: true,
-      field: {
-        name: '',
-        type: 'text',
-      },
-      Heading: <SortColumn disable Label={t('version:versionID')} name="id" />,
-      renderedCells: docs.map((doc, i) => {
-        return <IDCell id={doc.id} key={i} />
-      }),
-    },
   ]
 
   if (hasDraftsEnabled(entityConfig)) {
@@ -87,7 +75,7 @@ export const buildVersionColumns = ({
         name: '',
         type: 'checkbox',
       },
-      Heading: <SortColumn disable Label={t('version:status')} name="status" />,
+      Heading: <SortColumn Label={t('version:status')} name="status" />,
       renderedCells: docs.map((doc, i) => {
         return (
           <AutosaveCell
@@ -101,5 +89,18 @@ export const buildVersionColumns = ({
     })
   }
 
+  columns.push({
+    accessor: 'id',
+    active: true,
+    field: {
+      name: '',
+      type: 'text',
+    },
+    Heading: <SortColumn Label={t('version:versionID')} name="id" />,
+    renderedCells: docs.map((doc, i) => {
+      return <IDCell id={doc.id} key={i} />
+    }),
+  })
+
   return columns
 }

packages/next/src/views/Versions/cells/AutosaveCell/index.css

@@ -0,0 +1,7 @@
+@layer payload-default {
+  .autosave-cell__items {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+}

packages/next/src/views/Versions/cells/AutosaveCell/index.tsx

@@ -5,7 +5,7 @@ import { Pill, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 import { VersionPillLabel } from '../../../Version/VersionPillLabel/VersionPillLabel.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'autosave-cell'
 

packages/next/src/views/Versions/index.css

@@ -0,0 +1,116 @@
+@layer payload-default {
+  .versions {
+    width: 100%;
+    margin-bottom: var(--spacer-6);
+  }
+
+  .versions__wrap {
+    padding: 0 var(--spacer-3);
+  }
+
+  .versions__header {
+    margin-bottom: var(--spacer-3);
+  }
+
+  .versions__no-versions {
+    margin-top: var(--spacer-4);
+  }
+
+  .versions__parent-doc {
+    .banner__content {
+      display: flex;
+    }
+  }
+
+  .versions__parent-doc-pills {
+    [dir='ltr'] & {
+      margin-left: auto;
+    }
+
+    [dir='rtl'] & {
+      margin-right: auto;
+    }
+  }
+
+  .versions .table {
+    margin: 0;
+
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+
+    th,
+    td {
+      padding: var(--spacer-3) var(--spacer-2-5);
+
+      &:first-child {
+        padding-inline-start: var(--spacer-2-5);
+      }
+    }
+
+    tbody tr {
+      border-top: var(--stroke-width-small) solid var(--color-border);
+
+      &:nth-child(odd) {
+        background: none;
+        border-radius: 0;
+      }
+    }
+  }
+
+  .versions__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-top: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2-5);
+    gap: var(--spacer-3);
+  }
+
+  .versions .paginator {
+    margin-bottom: 0;
+  }
+
+  .versions__page-info {
+    flex: 1 0 0;
+    text-align: end;
+    color: var(--color-text-primary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    white-space: nowrap;
+  }
+
+  @media (max-width: 1024px) {
+    .versions__wrap {
+      padding-top: 0;
+      margin-top: 0;
+    }
+
+    .versions .table {
+      display: flex;
+      width: calc(100% + calc(var(--gutter-h) * 2));
+      max-width: unset;
+      left: calc(var(--gutter-h) * -1);
+      position: relative;
+      padding-left: var(--gutter-h);
+
+      &::after {
+        content: '';
+        height: 1px;
+        padding-right: var(--gutter-h);
+      }
+    }
+
+    .versions__page-controls {
+      flex-wrap: wrap;
+    }
+
+    .versions .paginator {
+      width: 100%;
+      margin-bottom: var(--spacer-3);
+    }
+  }
+}

packages/next/src/views/Versions/index.tsx

@@ -8,7 +8,7 @@ import { fetchLatestVersion, fetchVersions } from '../Version/fetchVersions.js'
 import { VersionDrawerCreatedAtCell } from '../Version/SelectComparison/VersionDrawer/CreatedAtCell.js'
 import { buildVersionColumns } from './buildColumns.js'
 import { VersionsViewClient } from './index.client.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'versions'
 
@@ -176,7 +176,7 @@ export async function VersionsView(props: DocumentViewServerProps) {
         view={i18n.t('version:versions')}
       />
       <main className={baseClass}>
-        <GutterComponent className={`${baseClass}__wrap`}>
+        <div className={`${baseClass}__wrap`}>
           <ListQueryProvider
             data={versionsData}
             modifySearchParams
@@ -193,7 +193,7 @@ export async function VersionsView(props: DocumentViewServerProps) {
               paginationLimits={collectionConfig?.admin?.pagination?.limits}
             />
           </ListQueryProvider>
-        </GutterComponent>
+        </div>
       </main>
     </React.Fragment>
   )