From c0110c6123b170eced89c6c04b3fe8be3c82d2fd Mon Sep 17 00:00:00 2001 From: Jessica Rynkar Date: Wed, 20 May 2026 17:44:40 +0100 Subject: [PATCH 1/2] chore: updates elements for versions view --- .../VersionPillLabel/VersionPillLabel.tsx | 2 +- .../views/Version/VersionPillLabel/index.css | 23 +++ .../views/Version/VersionPillLabel/index.scss | 26 ---- .../next/src/views/Versions/buildColumns.tsx | 27 ++-- .../Versions/cells/AutosaveCell/index.css | 7 + .../Versions/cells/AutosaveCell/index.scss | 9 -- .../Versions/cells/AutosaveCell/index.tsx | 2 +- packages/next/src/views/Versions/index.css | 116 +++++++++++++++ packages/next/src/views/Versions/index.scss | 110 -------------- packages/next/src/views/Versions/index.tsx | 6 +- packages/ui/src/elements/Loading/index.css | 136 +++++++++++++++++ packages/ui/src/elements/Loading/index.scss | 138 ------------------ packages/ui/src/elements/Loading/index.tsx | 2 +- packages/ui/src/elements/Pill/index.css | 45 +++--- packages/ui/src/elements/SortColumn/index.css | 24 ++- 15 files changed, 349 insertions(+), 324 deletions(-) create mode 100644 packages/next/src/views/Version/VersionPillLabel/index.css delete mode 100644 packages/next/src/views/Version/VersionPillLabel/index.scss create mode 100644 packages/next/src/views/Versions/cells/AutosaveCell/index.css delete mode 100644 packages/next/src/views/Versions/cells/AutosaveCell/index.scss create mode 100644 packages/next/src/views/Versions/index.css delete mode 100644 packages/next/src/views/Versions/index.scss create mode 100644 packages/ui/src/elements/Loading/index.css delete mode 100644 packages/ui/src/elements/Loading/index.scss diff --git a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx index 50674b82aae..2a8f1015998 100644 --- a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx +++ b/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' diff --git a/packages/next/src/views/Version/VersionPillLabel/index.css b/packages/next/src/views/Version/VersionPillLabel/index.css new file mode 100644 index 00000000000..05bc5a38060 --- /dev/null +++ b/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; + } + } +} diff --git a/packages/next/src/views/Version/VersionPillLabel/index.scss b/packages/next/src/views/Version/VersionPillLabel/index.scss deleted file mode 100644 index fb6a15c6b39..00000000000 --- a/packages/next/src/views/Version/VersionPillLabel/index.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import '~@payloadcms/ui/scss'; - -@layer payload-default { - .version-pill-label { - display: flex; - align-items: center; - gap: calc(var(--base) / 2); - - &-text { - font-weight: 500; - } - - &-date { - color: var(--theme-elevation-500); - } - } - - @include small-break { - .version-pill-label { - // Column - flex-direction: column; - align-items: flex-start; - gap: 0; - } - } -} diff --git a/packages/next/src/views/Versions/buildColumns.tsx b/packages/next/src/views/Versions/buildColumns.tsx index 28eccead80a..f1ad407d4ce 100644 --- a/packages/next/src/views/Versions/buildColumns.tsx +++ b/packages/next/src/views/Versions/buildColumns.tsx @@ -65,18 +65,6 @@ export const buildVersionColumns = ({ ) }), }, - { - accessor: 'id', - active: true, - field: { - name: '', - type: 'text', - }, - Heading: , - renderedCells: docs.map((doc, i) => { - return - }), - }, ] if (hasDraftsEnabled(entityConfig)) { @@ -87,7 +75,7 @@ export const buildVersionColumns = ({ name: '', type: 'checkbox', }, - Heading: , + Heading: , renderedCells: docs.map((doc, i) => { return ( , + renderedCells: docs.map((doc, i) => { + return + }), + }) + return columns } diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.css b/packages/next/src/views/Versions/cells/AutosaveCell/index.css new file mode 100644 index 00000000000..e89b62d636c --- /dev/null +++ b/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); + } +} diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.scss b/packages/next/src/views/Versions/cells/AutosaveCell/index.scss deleted file mode 100644 index b4d1d7099c5..00000000000 --- a/packages/next/src/views/Versions/cells/AutosaveCell/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -@layer payload-default { - .autosave-cell { - &__items { - display: flex; - align-items: center; - gap: calc(var(--base) * 0.5); - } - } -} diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx index e9486595b20..217b5f82491 100644 --- a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx +++ b/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' diff --git a/packages/next/src/views/Versions/index.css b/packages/next/src/views/Versions/index.css new file mode 100644 index 00000000000..5067695f5de --- /dev/null +++ b/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-secondary); + 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); + } + } +} diff --git a/packages/next/src/views/Versions/index.scss b/packages/next/src/views/Versions/index.scss deleted file mode 100644 index 28ef41464e5..00000000000 --- a/packages/next/src/views/Versions/index.scss +++ /dev/null @@ -1,110 +0,0 @@ -@import '~@payloadcms/ui/scss'; - -@layer payload-default { - .versions { - width: 100%; - margin-bottom: calc(var(--base) * 2); - - &__wrap { - padding-top: 0; - padding-bottom: var(--spacing-view-bottom); - margin-top: calc(var(--base) * 0.75); - } - - &__header { - margin-bottom: var(--base); - } - - &__no-versions { - margin-top: calc(var(--base) * 1.5); - } - - &__parent-doc { - .banner__content { - display: flex; - } - } - - &__parent-doc-pills { - [dir='ltr'] & { - margin-left: auto; - } - - [dir='rtl'] & { - margin-right: auto; - } - } - - .table { - table { - width: 100%; - overflow: auto; - } - } - - &__page-controls { - width: 100%; - display: flex; - align-items: center; - } - - .paginator { - margin-bottom: 0; - } - - &__page-info { - [dir='ltr'] & { - margin-right: var(--base); - margin-left: auto; - } - - [dir='rtl'] & { - margin-left: var(--base); - margin-right: auto; - } - } - - @include mid-break { - &__wrap { - padding-top: 0; - margin-top: 0; - } - - // on mobile, extend the table all the way to the viewport edges - // this is to visually indicate overflowing content - .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); - } - } - - &__page-controls { - flex-wrap: wrap; - } - - &__page-info { - [dir='ltr'] & { - margin-left: 0; - } - - [dir='rtl'] & { - margin-right: 0; - } - } - - .paginator { - width: 100%; - margin-bottom: var(--base); - } - } - } -} diff --git a/packages/next/src/views/Versions/index.tsx b/packages/next/src/views/Versions/index.tsx index 6457373129b..d43258da834 100644 --- a/packages/next/src/views/Versions/index.tsx +++ b/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')} />
- +
- +
) diff --git a/packages/ui/src/elements/Loading/index.css b/packages/ui/src/elements/Loading/index.css new file mode 100644 index 00000000000..aef02fb34c7 --- /dev/null +++ b/packages/ui/src/elements/Loading/index.css @@ -0,0 +1,136 @@ +@layer payload-default { + .loading-overlay { + isolation: isolate; + height: 100%; + width: 100%; + left: 0; + top: 0; + bottom: 0; + position: fixed; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + pointer-events: none; + z-index: calc(var(--z-status) + 1); + transition-property: left, width; + transition: 250ms ease; + } + + .loading-overlay--entering { + opacity: 1; + animation: fade-in ease; + pointer-events: all; + } + + .loading-overlay--exiting { + opacity: 0; + animation: fade-out ease; + } + + .loading-overlay::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--color-bg); + opacity: 0.85; + z-index: -1; + } + + .loading-overlay__bars { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: 7px; + align-items: center; + } + + .loading-overlay__bar { + width: 2px; + background-color: currentColor; + height: 15px; + + &:nth-child(1) { + transform: translateY(0); + animation: animate-bar--odd 1.25s infinite; + } + + &:nth-child(2) { + transform: translateY(-2px); + animation: animate-bar--even 1.25s infinite; + } + + &:nth-child(3) { + transform: translateY(0); + animation: animate-bar--odd 1.25s infinite; + } + + &:nth-child(4) { + transform: translateY(-2px); + animation: animate-bar--even 1.25s infinite; + } + + &:nth-child(5) { + transform: translateY(0); + animation: animate-bar--odd 1.25s infinite; + } + } + + .loading-overlay__text { + margin-top: var(--spacer-3); + text-transform: uppercase; + font-family: var(--text-body-medium-font-family); + font-size: var(--text-body-medium-font-size); + letter-spacing: 3px; + } + + @keyframes animate-bar--even { + 0% { + transform: translateY(2px); + } + + 50% { + transform: translateY(-2px); + } + + 100% { + transform: translateY(2px); + } + } + + @keyframes animate-bar--odd { + 0% { + transform: translateY(-2px); + } + + 50% { + transform: translateY(2px); + } + + 100% { + transform: translateY(-2px); + } + } + + @keyframes fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } + } + + @keyframes fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + } +} diff --git a/packages/ui/src/elements/Loading/index.scss b/packages/ui/src/elements/Loading/index.scss deleted file mode 100644 index be90a3bdce0..00000000000 --- a/packages/ui/src/elements/Loading/index.scss +++ /dev/null @@ -1,138 +0,0 @@ -@import '../../scss/styles'; - -@layer payload-default { - .loading-overlay { - isolation: isolate; - height: 100%; - width: 100%; - left: 0; - top: 0; - bottom: 0; - position: fixed; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - pointer-events: none; - z-index: calc(var(--z-status) + 1); - transition-property: left, width; - transition: 250ms ease; - - &.loading-overlay--entering { - opacity: 1; - animation: fade-in ease; - pointer-events: all; - } - - &.loading-overlay--exiting { - opacity: 0; - animation: fade-out ease; - } - - &:after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--theme-elevation-0); - opacity: 0.85; - z-index: -1; - } - - &__bars { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - gap: 7px; - align-items: center; - } - - &__bar { - width: 2px; - background-color: currentColor; - height: 15px; - - &:nth-child(1) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; - } - - &:nth-child(2) { - transform: translateY(-2px); - animation: animate-bar--even 1.25s infinite; - } - - &:nth-child(3) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; - } - - &:nth-child(4) { - transform: translateY(-2px); - animation: animate-bar--even 1.25s infinite; - } - - &:nth-child(5) { - transform: translateY(0); - animation: animate-bar--odd 1.25s infinite; - } - } - - &__text { - margin-top: base(0.75); - text-transform: uppercase; - font-family: var(--font-body); - font-size: base(0.65); - letter-spacing: 3px; - } - } - - @keyframes animate-bar--even { - 0% { - transform: translateY(2px); - } - - 50% { - transform: translateY(-2px); - } - - 100% { - transform: translateY(2px); - } - } - - @keyframes animate-bar--odd { - 0% { - transform: translateY(-2px); - } - - 50% { - transform: translateY(2px); - } - - 100% { - transform: translateY(-2px); - } - } - - @keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } - } - - @keyframes fade-out { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } - } -} diff --git a/packages/ui/src/elements/Loading/index.tsx b/packages/ui/src/elements/Loading/index.tsx index 5d2dcaeb5ca..464c81c50dd 100644 --- a/packages/ui/src/elements/Loading/index.tsx +++ b/packages/ui/src/elements/Loading/index.tsx @@ -7,7 +7,7 @@ import type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js' import { useFormProcessing } from '../../forms/Form/context.js' import { useTranslation } from '../../providers/Translation/index.js' -import './index.scss' +import './index.css' const baseClass = 'loading-overlay' diff --git a/packages/ui/src/elements/Pill/index.css b/packages/ui/src/elements/Pill/index.css index b308c9ec780..45d58ff24f7 100644 --- a/packages/ui/src/elements/Pill/index.css +++ b/packages/ui/src/elements/Pill/index.css @@ -1,8 +1,8 @@ @layer payload-default { .pill { - --pill-padding-block: 0px; - --pill-padding-inline-start: 0px; - --pill-padding-inline-end: 0px; + --pill-padding-block: 0; + --pill-padding-inline-start: 0; + --pill-padding-inline-end: 0; --pill-icon-size: var(--spacer-4); padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block) var(--pill-padding-inline-start); @@ -14,7 +14,7 @@ letter-spacing: var(--text-body-medium-letter-spacing); display: inline-flex; background: var(--color-black-200); - color: var(--text-default); + color: var(--color-text); border-radius: var(--radius-medium); cursor: inherit; border: 0; @@ -56,7 +56,7 @@ .pill--has-icon { gap: 0; --pill-padding-inline-start: var(--spacer-2); - --pill-padding-inline-end: calc(var(--base) * 0.1); + --pill-padding-inline-end: var(--spacer-1); } .pill--has-icon svg { @@ -65,33 +65,38 @@ .pill--align-icon-left { flex-direction: row-reverse; - --pill-padding-inline-start: calc(var(--base) * 0.1); + --pill-padding-inline-start: var(--spacer-1); --pill-padding-inline-end: var(--spacer-2); } .pill--style-always-white { - background: var(--bg-inverse-default); - color: var(--text-inverse-oninverse); + background: var(--color-bg-inverse); + color: var(--color-text-oninverse); } .pill--style-light-gray { - background: var(--bg-default-secondary); - color: var(--text-default); + background: var(--color-bg-secondary); + color: var(--color-text); + } + + .pill--style-light { + background: var(--color-bg-secondary); + color: var(--color-text); } .pill--style-warning { - background: var(--bg-warning-tertiary); - color: var(--text-warning-default); + background: var(--color-bg-warning-tertiary); + color: var(--color-text-warning); } .pill--style-success { - background: var(--bg-success-tertiary); - color: var(--text-success-default); + background: var(--color-bg-selected); + color: var(--color-text-brand); } .pill--style-error { - background: var(--bg-danger-tertiary); - color: var(--text-danger-default); + background: var(--color-bg-danger-tertiary); + color: var(--color-text-danger); } .pill--style-dark { @@ -115,15 +120,15 @@ } .pill--size-small { - --pill-icon-size: calc(var(--base) * 0.9); + --pill-icon-size: var(--spacer-3); --pill-padding-block: 0; --pill-padding-inline-start: var(--spacer-1); --pill-padding-inline-end: var(--spacer-1); } html[data-theme='light'] .pill--style-always-white { - background: var(--bg-default); - color: var(--text-default); - border: 1px solid var(--border-default); + background: var(--color-bg); + color: var(--color-text); + border: var(--stroke-width-small) solid var(--color-border); } } diff --git a/packages/ui/src/elements/SortColumn/index.css b/packages/ui/src/elements/SortColumn/index.css index 877d8a6d27b..64e926c8e91 100644 --- a/packages/ui/src/elements/SortColumn/index.css +++ b/packages/ui/src/elements/SortColumn/index.css @@ -10,6 +10,12 @@ text-overflow: ellipsis; white-space: nowrap; cursor: default; + color: var(--color-text-secondary); + 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); + letter-spacing: var(--text-body-medium-letter-spacing); } .sort-column__label, @@ -18,6 +24,11 @@ display: inline-block; } + /* Hover: label turns primary color */ + .sort-column:hover .sort-column__label { + color: var(--color-text); + } + /* Sorted column label styling */ .sort-column--sorted .sort-column__label { color: var(--color-text); @@ -40,10 +51,10 @@ cursor: pointer; border-radius: var(--radius-medium); color: var(--color-icon-tertiary); + padding: var(--spacer-1); &.sort-column--active { color: var(--color-icon); - visibility: visible; } &:hover { @@ -51,12 +62,21 @@ } &:focus-visible { - outline: var(--accessibility-outline); + outline: var(--stroke-width-small) solid var(--accessibility-focus-color); outline-offset: var(--accessibility-outline-offset); + border-radius: var(--radius-medium); color: var(--color-icon); } } + .sort-column:hover .sort-column__button { + color: var(--color-icon-secondary); + } + + .sort-column:hover .sort-column__button.sort-column--active { + color: var(--color-icon); + } + .sort-column:hover .btn { visibility: visible; } From cc7cc34ebdcebb83e07076cf622004a27222b1a8 Mon Sep 17 00:00:00 2001 From: Jessica Rynkar Date: Thu, 21 May 2026 10:10:52 +0100 Subject: [PATCH 2/2] chore: update page info color --- packages/next/src/views/Versions/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/src/views/Versions/index.css b/packages/next/src/views/Versions/index.css index 5067695f5de..072d0b22c2a 100644 --- a/packages/next/src/views/Versions/index.css +++ b/packages/next/src/views/Versions/index.css @@ -75,7 +75,7 @@ .versions__page-info { flex: 1 0 0; text-align: end; - color: var(--color-text-secondary); + 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);