ENH Use li for multi links

silverstripe · Apr 2, 2024 · 5864546 · 5864546
1 parent fc56c05
commit 5864546
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/LinkField/LinkField.js b/client/src/components/LinkField/LinkField.js
@@ -396,12 +396,14 @@ const LinkField = ({
           onDragStart={handleDragStart}
           onDragEnd={handleDragEnd}
         >
-          <SortableContext
-            items={linkIDs}
-            strategy={verticalListSortingStrategy}
-          >
-            {links}
-          </SortableContext>
+          <ol className="link-picker__list">
+            <SortableContext
+              items={linkIDs}
+              strategy={verticalListSortingStrategy}
+            >
+              {links}
+            </SortableContext>
+          </ol>
         </DndContext>
       </div>
     }
@@ -483,6 +485,7 @@ const LinkField = ({
           isKeyboardEditing={isKeyboardEditing}
         /> }
       {sortableLinks()}
+      { /* This <LinkModalContainer> is only used for editing EXISTING links */ }
       { renderModal && <LinkModalContainer
           types={types}
           typeKey={data[editingID]?.typeKey}

diff --git a/client/src/components/LinkField/LinkField.scss b/client/src/components/LinkField/LinkField.scss
@@ -31,3 +31,4 @@
     box-shadow: none;
   }
 }
+
diff --git a/client/src/components/LinkPicker/LinkPicker.js b/client/src/components/LinkPicker/LinkPicker.js
@@ -69,6 +69,7 @@ const LinkPicker = ({
         onSelect={handleSelect}
         onKeyDownEdit={onKeyDownEdit}
       />
+      { /* This <LinkModalContainer> is only used for editing NEW links */ }
       { shouldOpenModal && <LinkModalContainer
           types={types}
           typeKey={typeKey}

diff --git a/client/src/components/LinkPicker/LinkPicker.scss b/client/src/components/LinkPicker/LinkPicker.scss
@@ -140,6 +140,10 @@
   }
 }
 
+.link-picker__list {
+  padding-left: 0;
+}
+
 .link-picker__drag-handle {
   left: 5px;
   position: absolute;

diff --git a/client/src/components/LinkPicker/LinkPickerTitle.js b/client/src/components/LinkPicker/LinkPickerTitle.js
@@ -120,7 +120,8 @@ const LinkPickerTitle = ({
   // add this to the drag handle instead
   delete attributes.tabIndex;
   const idAttr = `link-picker__link-${id}`;
-  return <div
+  const Tag = isMulti ? 'li' : 'div';
+  return <Tag
     className={className}
     ref={setNodeRef}
     style={style}
@@ -176,7 +177,7 @@ const LinkPickerTitle = ({
         >{deleteText}</span>
       }
     </Button>
-  </div>
+  </Tag>
 };
 
 LinkPickerTitle.propTypes = {