fix(collapse): apply margin only when open

abelflopes · Dec 11, 2024 · c5a7123 · c5a7123
1 parent e735899
commit c5a7123
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/packages/components/collapse/src/index.tsx b/packages/components/collapse/src/index.tsx
@@ -38,13 +38,13 @@ export const Collapse = ({
   return (
     <details
       {...otherProps}
-      className={classNames(className, internalOpen && styles[`spacing_${spacing}`])}
+      className={classNames(className, styles[`spacing_${spacing}`])}
       onToggle={(e) => {
         setInternalOpen(e.currentTarget.open);
         onOpenChange?.(e.currentTarget.open);
         onToggle?.(e);
       }}>
-      <summary className={styles.header}>
+      <summary className={classNames(styles.header, internalOpen && styles.header_open)}>
         <Icon>
           <IconChevronDown className={classNames(styles.icon, internalOpen && styles.icon_open)} />
         </Icon>

diff --git a/packages/components/collapse/src/styles/index.module.scss b/packages/components/collapse/src/styles/index.module.scss
@@ -9,12 +9,14 @@
   appearance: auto;
   cursor: pointer;
 
-  margin-bottom: scss-utils.get-css-var(collapse, spacing);
-
   &_content {
     flex-grow: 1;
     flex-shrink: 1;
   }
+
+  &_open {
+    margin-bottom: scss-utils.get-css-var(collapse, spacing);
+  }
 }
 
 .icon {