fix: collapsible toggle hover stacking issue (#7812)

Author: JarrodMFlesch

packages/ui/src/elements/Collapsible/index.scss

@@ -19,8 +19,8 @@
     border-top-left-radius: $style-radius-m;
     width: 100%;
 
-    & > * {
-      z-index: 1;
+    &:hover {
+      background: var(--theme-elevation-100);
     }
 
     &:has(.collapsible__drag) {
@@ -31,7 +31,6 @@
   &__drag {
     display: flex;
     opacity: 0.5;
-    z-index: 2;
     top: var(--toggle-pad-v);
     width: base(1.2);
     height: base(1.2);
@@ -56,7 +55,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 1;
 
     span {
       user-select: none;
@@ -74,9 +72,19 @@
         color: var(--theme-text);
       }
     }
-    &.collapsible--hovered {
-      > .collapsible__toggle-wrap .collapsible__toggle {
-        background: var(--theme-elevation-100);
+  }
+
+  &--style-error {
+    border: 1px solid var(--theme-error-400);
+    > .collapsible__toggle-wrap {
+      background-color: var(--theme-error-100);
+
+      &:hover {
+        background: var(--theme-error-150);
+      }
+
+      .row-label {
+        color: var(--theme-error-950);
       }
     }
   }
@@ -147,25 +155,4 @@
       padding: var(--gutter-h);
     }
   }
-
-  &--style-error {
-    border: 1px solid var(--theme-error-400);
-    &:hover {
-      border: 1px solid var(--theme-error-500);
-    }
-
-    > .collapsible__toggle-wrap {
-      .row-label {
-        color: var(--theme-error-950);
-      }
-      .collapsible__toggle {
-        background: var(--theme-error-100);
-      }
-    }
-    &.collapsible--hovered {
-      > .collapsible__toggle-wrap .collapsible__toggle {
-        background: var(--theme-error-150);
-      }
-    }
-  }
 }

packages/ui/src/elements/Collapsible/index.tsx

@@ -72,15 +72,6 @@ export const Collapsible: React.FC<Props> = ({
           onMouseEnter={() => setHoveringToggle(true)}
           onMouseLeave={() => setHoveringToggle(false)}
         >
-          {dragHandleProps && (
-            <div
-              className={`${baseClass}__drag`}
-              {...dragHandleProps.attributes}
-              {...dragHandleProps.listeners}
-            >
-              <DragHandleIcon />
-            </div>
-          )}
           <button
             className={[
               `${baseClass}__toggle`,
@@ -93,7 +84,16 @@ export const Collapsible: React.FC<Props> = ({
           >
             <span>{t('fields:toggleBlock')}</span>
           </button>
-          {header && (
+          {dragHandleProps && (
+            <div
+              className={`${baseClass}__drag`}
+              {...dragHandleProps.attributes}
+              {...dragHandleProps.listeners}
+            >
+              <DragHandleIcon />
+            </div>
+          )}
+          {header ? (
             <div
               className={[
                 `${baseClass}__header-wrap`,
@@ -102,11 +102,11 @@ export const Collapsible: React.FC<Props> = ({
                 .filter(Boolean)
                 .join(' ')}
             >
-              {header && header}
+              {header}
             </div>
-          )}
+          ) : null}
           <div className={`${baseClass}__actions-wrap`}>
-            {actions && <div className={`${baseClass}__actions`}>{actions}</div>}
+            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}
             <div className={`${baseClass}__indicator`}>
               <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />
             </div>