feat: hide array Add button when array is readOnly

measuredco · Mar 25, 2024 · 4e27c3f · 4e27c3f
1 parent e32fd3b
commit 4e27c3f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 39 deletions.
diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -104,6 +104,11 @@ export const ArrayField = ({
     return null;
   }
 
+  const addDisabled =
+    (field.max !== undefined &&
+      localState.arrayState.items.length >= field.max) ||
+    readOnly;
+
   return (
     <FieldLabelInternal
       label={label || name}
@@ -149,6 +154,7 @@ export const ArrayField = ({
                 className={getClassName({
                   isDraggingFrom: !!snapshot.draggingFromThisWith,
                   hasItems: Array.isArray(value) && value.length > 0,
+                  addDisabled,
                 })}
                 onMouseOver={(e) => {
                   e.stopPropagation();
@@ -292,28 +298,26 @@ export const ArrayField = ({
 
                 {provided.placeholder}
 
-                <button
-                  type="button"
-                  className={getClassName("addButton")}
-                  disabled={
-                    field.max !== undefined &&
-                    localState.arrayState.items.length >= field.max
-                  }
-                  onClick={() => {
-                    const existingValue = value || [];
-
-                    const newValue = [
-                      ...existingValue,
-                      field.defaultItemProps || {},
-                    ];
-
-                    const newArrayState = regenerateArrayState(newValue);
-
-                    onChange(newValue, mapArrayStateToUi(newArrayState));
-                  }}
-                >
-                  <Plus size={21} />
-                </button>
+                {!addDisabled && (
+                  <button
+                    type="button"
+                    className={getClassName("addButton")}
+                    onClick={() => {
+                      const existingValue = value || [];
+
+                      const newValue = [
+                        ...existingValue,
+                        field.defaultItemProps || {},
+                      ];
+
+                      const newArrayState = regenerateArrayState(newValue);
+
+                      onChange(newValue, mapArrayStateToUi(newArrayState));
+                    }}
+                  >
+                    <Plus size={21} />
+                  </button>
+                )}
               </div>
             );
           }}

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
@@ -12,24 +12,26 @@
 
 .ArrayField--isDraggingFrom {
   background-color: var(--puck-color-azure-11);
+  overflow: hidden;
 }
 
 .ArrayField-addButton {
   background-color: var(--puck-color-white);
   border: none;
-  border-radius: 4px;
+  border-radius: 3px;
   display: flex;
   color: var(--puck-color-azure-05);
   justify-content: center;
   cursor: pointer;
   width: 100%;
   margin: 0;
-  padding: 16px;
+  padding: 14px; /* Retain same height as other items */
   text-align: left;
   transition: background-color 50ms ease-in;
 }
 
 .ArrayField--hasItems > .ArrayField-addButton {
+  border-top: 1px solid var(--puck-color-grey-09);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -59,26 +61,37 @@
  */
 
 .ArrayFieldItem {
-  background: var(--puck-color-white);
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   display: block;
-  margin-bottom: 1px; /* Simulate border with margin so we can hide it whilst dragging */
+  position: relative;
+}
+
+/* Pseudo-border so we can remove border whilst dragging. Last item will be 1px larger, but it's imperceptible. */
+.ArrayFieldItem:not(.ArrayFieldItem--isDragging):not(:first-of-type)::before {
+  background-color: var(--puck-color-grey-09);
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  content: "";
+  z-index: 1;
+  top: -1px;
 }
 
-.ArrayField--isDraggingFrom > .ArrayFieldItem:not(.ArrayFieldItem--isDragging) {
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  margin-bottom: 0;
+.ArrayFieldItem--isExpanded::before {
+  display: none;
 }
 
 .ArrayFieldItem--isExpanded {
   border-bottom: 0;
   outline-offset: 0px !important; /* Important helps to override Nextra docs */
   outline: 1px solid var(--puck-color-azure-07) !important; /* Important helps to override Nextra docs */
+  z-index: 2;
 }
 
 .ArrayFieldItem--isDragging {
-  box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
+  box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0
+    3px 6px 0;
 }
 
 .ArrayFieldItem--isDragging .ArrayFieldItem-summary:active {
@@ -91,6 +104,7 @@
 }
 
 .ArrayFieldItem-summary {
+  background: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
   display: flex;
@@ -100,19 +114,27 @@
   font-size: var(--puck-font-size-xxs);
   list-style: none;
   padding: 12px 15px;
+  padding-bottom: 13px; /* Add one additional px to account for pseudo border */
   position: relative;
   overflow: hidden;
   transition: background-color 50ms ease-in;
 }
 
-.ArrayFieldItem--readOnly > .ArrayFieldItem-summary {
-  background-color: var(--puck-color-grey-12);
-  color: var(--puck-color-grey-06);
+.ArrayFieldItem:first-of-type > .ArrayFieldItem-summary {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.ArrayField--addDisabled
+  > .ArrayFieldItem:last-of-type:not(.ArrayFieldItem--isExpanded)
+  > .ArrayFieldItem-summary {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
-.ArrayFieldItem:first-of-type > .ArrayFieldItem-summary {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.ArrayField--addDisabled > .ArrayFieldItem--isExpanded:last-of-type {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 .ArrayFieldItem-summary:focus-visible {
@@ -140,6 +162,7 @@
 }
 
 .ArrayFieldItem-body {
+  background: var(--puck-color-white);
   display: none;
 }
 
@@ -167,7 +190,9 @@
   opacity: 0;
 }
 
-.ArrayFieldItem-summary:focus-within > .ArrayFieldItem-rhs > .ArrayFieldItem-actions,
+.ArrayFieldItem-summary:focus-within
+  > .ArrayFieldItem-rhs
+  > .ArrayFieldItem-actions,
 .ArrayFieldItem-summary:hover > .ArrayFieldItem-rhs > .ArrayFieldItem-actions {
   opacity: 1;
 }