From dd8e8e6046ab105af06f12fd4f23bde4e3115fa0 Mon Sep 17 00:00:00 2001
From: Arnaud Touillet <49291068+Jacouille@users.noreply.github.com>
Date: Sat, 30 Sep 2023 22:22:44 +0000
Subject: [PATCH] [core] applied PR review changes

---
 .../src/components/Spoiler/Spoiler.module.css |  3 +-
 .../src/components/Spoiler/Spoiler.tsx        | 31 ++++++++++++++-----
 .../src/data/Spoiler.styles-api.ts            |  8 ++++-
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.module.css b/src/mantine-core/src/components/Spoiler/Spoiler.module.css
index b2fef3aff5a..c1aaa2c9374 100644
--- a/src/mantine-core/src/components/Spoiler/Spoiler.module.css
+++ b/src/mantine-core/src/components/Spoiler/Spoiler.module.css
@@ -1,7 +1,8 @@
 .root {
   position: relative;
+
   &[data-has-spoiler] {
-    margin-bottom: rem(24px);
+    margin-bottom: var(--spoiler-margin-bottom, rem(24px));
   }
 }
 
diff --git a/src/mantine-core/src/components/Spoiler/Spoiler.tsx b/src/mantine-core/src/components/Spoiler/Spoiler.tsx
index 74125c2f544..19a28127768 100644
--- a/src/mantine-core/src/components/Spoiler/Spoiler.tsx
+++ b/src/mantine-core/src/components/Spoiler/Spoiler.tsx
@@ -11,13 +11,15 @@ import {
   createVarsResolver,
   Factory,
   rem,
+  getSpacing,
+  MantineSpacing,
 } from '../../core';
 import { Anchor } from '../Anchor';
 import classes from './Spoiler.module.css';
 
 export type SpoilerStylesNames = 'root' | 'control' | 'content';
 export type SpoilerCssVariables = {
-  root: '--spoiler-transition-duration';
+  root: '--spoiler-transition-duration' | '--spoiler-margin-bottom';
 };
 
 export interface SpoilerProps
@@ -41,6 +43,9 @@ export interface SpoilerProps
 
   /** Spoiler reveal transition duration in ms, set 0 or null to turn off animation, `200` by default */
   transitionDuration?: number;
+
+  /** Margin bottom applied when the control button is shown, `rem(24px)` by default */
+  activeSpoilerMarginBottom?: MantineSpacing;
 }
 
 export type SpoilerFactory = Factory<{
@@ -55,12 +60,16 @@ const defaultProps: Partial<SpoilerProps> = {
   initialState: false,
 };
 
-const varsResolver = createVarsResolver<SpoilerFactory>((_, { transitionDuration }) => ({
-  root: {
-    '--spoiler-transition-duration':
-      transitionDuration !== undefined ? `${transitionDuration}ms` : undefined,
-  },
-}));
+const varsResolver = createVarsResolver<SpoilerFactory>(
+  (_, { transitionDuration, activeSpoilerMarginBottom }) => ({
+    root: {
+      '--spoiler-transition-duration':
+        transitionDuration !== undefined ? `${transitionDuration}ms` : undefined,
+      '--spoiler-margin-bottom':
+        activeSpoilerMarginBottom !== undefined ? getSpacing(activeSpoilerMarginBottom) : undefined,
+    },
+  })
+);
 
 export const Spoiler = factory<SpoilerFactory>((_props, ref) => {
   const props = useProps('Spoiler', defaultProps, _props);
@@ -103,7 +112,13 @@ export const Spoiler = factory<SpoilerFactory>((_props, ref) => {
   const spoilerMoreContent = show ? hideLabel : showLabel;
 
   return (
-    <Box {...getStyles('root')} id={_id} ref={ref} data-has-spoiler={spoiler || undefined} {...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 5bddae7178d..6cbe53544b9 100644
--- a/src/mantine-styles-api/src/data/Spoiler.styles-api.ts
+++ b/src/mantine-styles-api/src/data/Spoiler.styles-api.ts
@@ -11,10 +11,16 @@ export const SpoilerStylesApi: StylesApiData<SpoilerFactory> = {
   vars: {
     root: {
       '--spoiler-transition-duration': 'Controls transition duration',
+      '--spoiler-margin-bottom':
+        'Controls the margin bottom applied when the control button is shown',
     },
   },
 
   modifiers: [
-    { modifier: 'data-has-spoiler', selector: 'root', value: 'Whether the control button is shown or not' },
+    {
+      modifier: 'data-has-spoiler',
+      selector: 'root',
+      condition: 'Whether the control button is shown or not',
+    },
   ],
 };