refactor: ensure empty DropZones highlighting works in FF and Safari

measuredco · Sep 22, 2023 · 85b14d2 · 85b14d2
1 parent b5b72f0
commit 85b14d2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
@@ -143,6 +143,7 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
         isDestination: draggedDestinationId === zoneCompound,
         isDisabled: !isEnabled,
         isAreaSelected,
+        hasChildren: content.length > 0,
       })}
     >
       <DroppableStrictMode

diff --git a/packages/core/components/DropZone/styles.module.css b/packages/core/components/DropZone/styles.module.css
@@ -28,8 +28,12 @@
 .DropZone--draggingOverArea:not(:has(.DropZone--hoveringOverArea)),
 .DropZone--hoveringOverArea:not(.DropZone--isDisabled):not(
     .DropZone--isRootZone
-  ),
-.DropZone:not(:has(.DropZone-item)) {
+  ) {
+  background: var(--puck-color-azure-9);
+  outline: 2px dashed var(--puck-color-azure-7);
+}
+
+.DropZone:not(.DropZone--hasChildren) {
   background: var(--puck-color-azure-9);
   outline: 2px dashed var(--puck-color-azure-7);
 }