Merge remote-tracking branch 'refs/remotes/origin/main'

Author: JarrodMFlesch

packages/ui/src/elements/Button/index.css

@@ -207,6 +207,16 @@
       min-width: var(--spacer-4);
       min-height: var(--spacer-4);
     }
+
+    /* temp until icons setup */
+    .btn__icon {
+      width: var(--spacer-4);
+      height: var(--spacer-4);
+    }
+    .btn__icon svg {
+      min-width: var(--spacer-4);
+      min-height: var(--spacer-4);
+    }
   }
 
   .btn--style-subtle {

packages/ui/src/fields/Array/index.css

@@ -6,61 +6,65 @@
   }
 
   .array-field__header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2);
-  }
-
-  .array-field__header__header-content {
     display: flex;
     flex-direction: column;
     gap: var(--spacer-1);
   }
 
-  .array-field--has-no-error > .array-field__header .array-field__header-content {
-    color: var(--text-default);
-  }
-
-  .array-field--has-error > .array-field__header .array-field__header-content {
-    color: var(--text-danger-default);
-  }
-
-  .array-field__header-content {
+  .array-field__header-wrap {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    justify-content: space-between;
+    width: 100%;
+    gap: var(--spacer-2);
   }
 
-  .array-field__header-wrap {
+  .array-field__header-content {
     display: flex;
-    align-items: flex-end;
-    width: 100%;
-    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacer-2);
   }
 
   .array-field__header-actions {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
-    color: var(--text-default);
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--text-default-default);
+    gap: var(--spacer-1);
+
+    & > li:last-child .array-field__header-action {
+      padding: 0;
+    }
+
+    @media (max-width: 768px) {
+      & > li:not(:last-child) {
+        display: none;
+      }
+    }
   }
 
   .array-field__header-action {
     cursor: pointer;
-    margin-left: 0.625rem;
+    padding: var(--spacer-1) var(--spacer-2);
+    border-radius: var(--radius-medium);
 
     &:hover,
     &:focus-visible {
-      text-decoration: underline;
-      color: var(--text-secondary);
+      background: var(--bg-transparent-hover);
+    }
+
+    &:active {
+      background: var(--bg-transparent-pressed);
     }
   }
 
   .array-field__row-header {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: var(--spacer-2);
     pointer-events: none;
   }
 
@@ -76,23 +80,6 @@
 
   .array-field__add-row.btn {
     align-self: flex-start;
-    margin: 2px 0;
-    color: var(--text-tertiary);
-
-    &:hover:not(:disabled) {
-      color: var(--text-default);
-    }
-
-    &:disabled {
-      color: var(--text-disabled-default);
-    }
-
-    .btn__icon {
-      border-color: currentColor;
-
-      path {
-        stroke: currentColor;
-      }
-    }
+    margin: 0;
   }
 }

packages/ui/src/fields/Array/index.tsx

@@ -31,6 +31,7 @@ import { extractRowsAndCollapsedIDs, toggleAllRows } from '../../forms/Form/rowH
 import { NullifyLocaleField } from '../../forms/NullifyField/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
+import { CirclePlusIcon } from '../../icons/CirclePlus/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
@@ -475,9 +476,8 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
           buttonStyle="icon-label"
           className={`${baseClass}__add-row`}
           disabled={disabled}
-          icon="plus"
+          icon={<CirclePlusIcon />}
           iconPosition="left"
-          iconStyle="with-border"
           onClick={() => {
             void addRow(value || 0)
           }}

test/v4/collections/Array/index.ts

@@ -6,31 +6,30 @@ const ArrayFields: CollectionConfig = {
   slug: arrayFieldsSlug,
   fields: [
     {
-      name: 'rows',
+      name: 'arrayField',
       type: 'array',
-      label: 'Rows',
       fields: [
         {
-          name: 'nestedTextField',
+          name: 'name',
           type: 'text',
-          label: 'Nested Text Field',
         },
+      ],
+    },
+    {
+      name: 'arrayWithRequiredField',
+      type: 'array',
+      fields: [
         {
-          name: 'nestedSelect',
-          type: 'select',
-          label: 'Nested Select',
-          options: [
-            { label: 'Option 1', value: 'option-1' },
-            { label: 'Option 2', value: 'option-2' },
-            { label: 'Option 3', value: 'option-3' },
-          ],
+          name: 'name',
+          type: 'text',
+          required: true,
         },
       ],
     },
     {
-      name: 'teamMembers',
+      name: 'minRows',
       type: 'array',
-      label: 'Team Members',
+      label: 'With Min Rows',
       minRows: 2,
       fields: [
         {
@@ -40,6 +39,49 @@ const ArrayFields: CollectionConfig = {
         },
       ],
     },
+    {
+      name: 'nestedArray',
+      type: 'array',
+      label: 'Nested Array',
+      fields: [
+        {
+          name: 'nestedArrayField',
+          type: 'array',
+          label: 'Nested Array Field',
+          fields: [
+            {
+              name: 'name',
+              type: 'text',
+              required: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'arrayWithMaxRows',
+      type: 'array',
+      maxRows: 1,
+      fields: [
+        {
+          name: 'name',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      name: 'arrayWithDescription',
+      type: 'array',
+      admin: {
+        description: 'Add items to this array field.',
+      },
+      fields: [
+        {
+          name: 'name',
+          type: 'text',
+        },
+      ],
+    },
   ],
 }
 

test/v4/payload-types.ts

@@ -1151,6 +1151,6 @@ export interface Auth {
 
 
 declare module 'payload' {
-  // @ts-ignore 
+  // @ts-ignore
   export interface GeneratedTypes extends Config {}
-}
+}