From 8e0a370e12694f6404a3f8bd05ef3a25964ec156 Mon Sep 17 00:00:00 2001
From: Arnaud Touillet <49291068+Jacouille@users.noreply.github.com>
Date: Mon, 2 Oct 2023 01:44:47 -0400
Subject: [PATCH] [@mantine/core] Spoiler: remove margin-bottom when "Show
 more" is hidden (#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
---
 .../src/components/Spoiler/Spoiler.module.css             | 6 +++++-
 src/mantine-core/src/components/Spoiler/Spoiler.tsx       | 8 +++++++-
 src/mantine-styles-api/src/data/Spoiler.styles-api.ts     | 8 ++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.module.css b/src/mantine-core/src/components/Spoiler/Spoiler.module.css
index 5c547e024ea..83d16f03c40 100644
--- 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
index 4be2f006558..ec95e780fb7 100644
--- 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
index 76bed5a3785..55d50bbcba2 100644
--- 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',
+    },
+  ],
 };