[@mantine/core] Spoiler: remove margin-bottom when "Show more" is hid…

…den (#4928) * [@mantine/core] Spoiler: removed extra margin bottom when "Show more" is hidden * [docs] Added spoiler modifier * [core] fix test issues * [core] applied PR review changes * [core] applied PR review changes
mantinedev · Oct 2, 2023 · 8e0a370 · 8e0a370
1 parent 8894708
commit 8e0a370
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.module.css b/src/mantine-core/src/components/Spoiler/Spoiler.module.css
@@ -1,6 +1,10 @@
 .root {
   position: relative;
-  margin-bottom: rem(24px);
+  margin-bottom: var(--_spoiler-margin-bottom);
+
+  &[data-has-spoiler] {
+    --_spoiler-margin-bottom: rem(24px);
+  }
 }
 
 .content {

diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.tsx b/src/mantine-core/src/components/Spoiler/Spoiler.tsx
@@ -103,7 +103,13 @@ export const Spoiler = factory<SpoilerFactory>((_props, ref) => {
   const spoilerMoreContent = show ? hideLabel : showLabel;
 
   return (
-    <Box {...getStyles('root')} id={_id} ref={ref} {...others}>
+    <Box
+      {...getStyles('root')}
+      id={_id}
+      ref={ref}
+      data-has-spoiler={spoiler || undefined}
+      {...others}
+    >
       {spoiler && (
         <Anchor
           component="button"

diff --git a/src/mantine-styles-api/src/data/Spoiler.styles-api.ts b/src/mantine-styles-api/src/data/Spoiler.styles-api.ts
@@ -13,4 +13,12 @@ export const SpoilerStylesApi: StylesApiData<SpoilerFactory> = {
       '--spoiler-transition-duration': 'Controls transition duration',
     },
   },
+
+  modifiers: [
+    {
+      modifier: 'data-has-spoiler',
+      selector: 'root',
+      condition: 'Whether the control button is shown or not',
+    },
+  ],
 };