Merge branch 'master' of https://github.com/Jacouille/mantine

mantinedev · Oct 1, 2023 · bbb68d6 · bbb68d6
2 parents 0ccc852 + dd8e8e6
commit bbb68d6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git 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
@@ -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);

diff --git a/src/mantine-styles-api/src/data/Spoiler.styles-api.ts b/src/mantine-styles-api/src/data/Spoiler.styles-api.ts
@@ -11,14 +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',
+      condition: 'Whether the control button is shown or not',
     },
   ],
 };