✨ (expandable) reduce bottom padding

owid · Nov 23, 2023 · 3a1d026 · 3a1d026
1 parent f137ad8
commit 3a1d026
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss
@@ -34,6 +34,11 @@
     }
 }
 
+.ExpandableToggle--teaser .ExpandableToggle__button,
+.ExpandableToggle--open .ExpandableToggle__button {
+    padding-bottom: 8px;
+}
+
 .ExpandableToggle__title {
     @include h4-semibold;
     margin: 0;
@@ -75,12 +80,12 @@
     }
 }
 
-.ExpandableToggle__content--teaser {
+.ExpandableToggle--teaser .ExpandableToggle__content {
     height: 96px;
     -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent);
 }
 
-.ExpandableToggle__content--open {
+.ExpandableToggle--open .ExpandableToggle__content {
     padding-bottom: 16px;
     height: auto;
     -webkit-mask-image: none;

diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx
@@ -27,6 +27,8 @@ export const ExpandableToggle = ({
         <div
             className={cx("ExpandableToggle", {
                 "ExpandableToggle--stacked": isStacked,
+                "ExpandableToggle--open": isOpen,
+                "ExpandableToggle--teaser": hasTeaser,
             })}
         >
             <button className="ExpandableToggle__button" onClick={toggle}>
@@ -36,14 +38,7 @@ export const ExpandableToggle = ({
                     icon={!isOpen ? faPlus : faMinus}
                 />
             </button>
-            <div
-                className={cx("ExpandableToggle__content", {
-                    "ExpandableToggle__content--open": isOpen,
-                    "ExpandableToggle__content--teaser": hasTeaser,
-                })}
-            >
-                {content}
-            </div>
+            <div className="ExpandableToggle__content">{content}</div>
         </div>
     )
 }