feat: refactors z index methodology

src/admin/components/elements/Eyebrow/index.scss

@@ -4,7 +4,7 @@
   @include blur-bg;
   position: sticky;
   top: 0;
-  z-index: $z-nav;
+  z-index: var(--z-nav);
   padding: base(1.5) 0;
 
   &__wrap {

src/admin/components/elements/Nav/index.scss

@@ -133,7 +133,7 @@
     position: fixed;
     width: 100%;
     height: base(3);
-    z-index: $z-modal;
+    z-index: var(--z-modal);
 
     &__scroll {
       padding: 0;

src/admin/components/elements/Popup/index.scss

@@ -7,7 +7,7 @@
     position: absolute;
     background: var(--theme-input-bg);
     display: none;
-    z-index: $z-modal;
+    z-index: var(--z-popup);
     max-width: calc(100vw - #{$baseline});
 
     &:after {

src/admin/components/forms/field-types/RichText/elements/link/index.scss

@@ -30,12 +30,11 @@
   letter-spacing: inherit;
   line-height: inherit;
   position: relative;
-  z-index: 2;
   text-decoration: underline;
   cursor: text;
 
   &--open {
-    z-index: $z-modal + 1;
+    z-index: var(--z-popup);
   }
 }
 

src/admin/components/forms/field-types/RichText/index.scss

@@ -9,7 +9,7 @@
     margin-bottom: $baseline;
     border: $style-stroke-width-s solid var(--theme-elevation-150);
     position: sticky;
-    z-index: 2;
+    z-index: 1;
     top: base(4);
   }
 

src/admin/components/modals/LeaveWithoutSaving/index.scss

@@ -3,7 +3,7 @@
 .leave-without-saving {
   @include blur-bg;
   position: fixed;
-  z-index: $z-modal;
+  z-index: var(--z-modal);
   top: 0;
   right: 0;
   bottom: 0;

src/admin/components/views/collections/Edit/index.scss

@@ -74,7 +74,7 @@
     padding-right: $baseline;
     position: sticky;
     top: 0;
-    z-index: $z-nav;
+    z-index: var(--z-nav);
 
     >* {
       position: relative;
@@ -189,7 +189,7 @@
       left: 0;
       right: 0;
       top: auto;
-      z-index: $z-nav;
+      z-index: var(--z-nav);
     }
 
     &__document-actions,

src/admin/scss/app.scss

@@ -8,7 +8,6 @@
   --breakpoint-s-width : #{$breakpoint-s-width};
   --breakpoint-m-width : #{$breakpoint-m-width};
   --breakpoint-l-width : #{$breakpoint-l-width};
-  --z-modal: #{$z-modal};
   --scrollbar-width: 17px;
 
   --theme-bg: var(--theme-elevation-0);
@@ -18,6 +17,11 @@
   --font-mono: monospace;
   --font-serif: 'Merriweather', serif;
 
+  --z-popup: 10;
+  --z-nav: 20;
+  --z-modal: 30;
+  --z-status: 40;
+
   --gutter-h: #{base(5)};
 
   @include large-break {
@@ -164,7 +168,7 @@ dialog {
 
 .payload__modal-item--enter,
 .payload__modal-item--enterDone {
-  z-index: $z-modal;
+  z-index: var(--z-modal);
 }
 
 @import '~payload-user-css';

src/admin/scss/fonts.scss

@@ -51,17 +51,17 @@
 @font-face {
   font-family: 'Merriweather';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 900;
   src: local(''),
-    url('../assets/fonts/merriweather-v30-latin-700.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900.woff2') format('woff2'),
-    url('../assets/fonts/merriweather-v30-latin-700.woff') format('woff');
+    url('../assets/fonts/merriweather-v30-latin-900.woff') format('woff');
 }
 
 @font-face {
   font-family: 'Merriweather';
   font-style: italic;
-  font-weight: 700;
+  font-weight: 900;
   src: local(''),
-    url('../assets/fonts/merriweather-v30-latin-700italic.woff2') format('woff2'),
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff2') format('woff2'),
-    url('../assets/fonts/merriweather-v30-latin-700italic.woff') format('woff');
+    url('../assets/fonts/merriweather-v30-latin-900italic.woff') format('woff');
 }

src/admin/scss/styles.scss

@@ -1,5 +1,4 @@
 @import 'vars';
-@import 'z-index';
 
 //////////////////////////////
 // IMPORT OVERRIDES

src/admin/scss/z-index.scss

@@ -1,9 +0,0 @@
-/////////////////////////////
-// Z-INDEX CHART
-/////////////////////////////
-
-$z-page: 20;
-$z-page-content: 30;
-$z-nav: 40;
-$z-modal: 50;
-$z-status: 60;

test/fields/collections/RichText/index.ts

@@ -3,6 +3,37 @@ import type { CollectionConfig } from '../../../../src/collections/config/types'
 const RichTextFields: CollectionConfig = {
   slug: 'rich-text-fields',
   fields: [
+    {
+      name: 'selectHasMany',
+      hasMany: true,
+      type: 'select',
+      options: [
+        {
+          label: 'Value One',
+          value: 'one',
+        },
+        {
+          label: 'Value Two',
+          value: 'two',
+        },
+        {
+          label: 'Value Three',
+          value: 'three',
+        },
+        {
+          label: 'Value Four',
+          value: 'four',
+        },
+        {
+          label: 'Value Five',
+          value: 'five',
+        },
+        {
+          label: 'Value Six',
+          value: 'six',
+        },
+      ],
+    },
     {
       name: 'richText',
       type: 'richText',
@@ -12,6 +43,7 @@ const RichTextFields: CollectionConfig = {
 };
 
 export const richTextDoc = {
+  select: ['one', 'five'],
   richText: [
     {
       children: [
@@ -96,6 +128,41 @@ export const richTextDoc = {
         },
       ],
     },
+    {
+      children: [
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+        },
+      ],
+    },
+    {
+      children: [
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+        },
+      ],
+    },
+    {
+      children: [
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+        },
+      ],
+    },
+    {
+      children: [
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+        },
+      ],
+    },
+    {
+      children: [
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.',
+        },
+      ],
+    },
   ],
 };