[@mantine/core] Box: Add display system props (#2943)

* [@mantine/core] Box: Add display system props * [@mantine/core] Loader: add exclude display props
mantinedev · Nov 12, 2022 · 4f46576 · 4f46576
1 parent fdc0786
commit 4f46576
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 1 deletion.
diff --git a/scripts/docgen/docgen-parser.ts b/scripts/docgen/docgen-parser.ts
@@ -32,6 +32,7 @@ const EXCLUDE_PROPS = [
   'bgsz',
   'bottom',
   'c',
+  'display',
   'ff',
   'fs',
   'fw',

diff --git a/src/mantine-core/src/Box/Box.story.tsx b/src/mantine-core/src/Box/Box.story.tsx
@@ -16,6 +16,7 @@ export function SystemProps() {
         pt="xl"
         w={400}
         h={560}
+        display="flex"
       >
         Some box
       </Box>

diff --git a/src/mantine-core/src/Box/style-system-props/extract-system-styles/extract-system-styles.ts b/src/mantine-core/src/Box/style-system-props/extract-system-styles/extract-system-styles.ts
@@ -46,6 +46,7 @@ export function extractSystemStyles<T extends Record<string, any>>(
     bottom,
     right,
     inset,
+    display,
     ...rest
   } = others;
   const systemStyles = filterProps({
@@ -91,6 +92,7 @@ export function extractSystemStyles<T extends Record<string, any>>(
     bottom,
     right,
     inset,
+    display,
   });
 
   return { systemStyles, rest: rest as unknown as T };

diff --git a/src/mantine-core/src/Box/style-system-props/system-props/system-props.ts b/src/mantine-core/src/Box/style-system-props/system-props/system-props.ts
@@ -55,4 +55,6 @@ export const SYSTEM_PROPS: Record<string, SystemPropData> = {
   bottom: { type: 'default', property: 'bottom' },
   right: { type: 'default', property: 'right' },
   inset: { type: 'default', property: 'inset' },
+
+  display: { type: 'default', property: 'display' },
 };
diff --git a/src/mantine-core/src/Loader/Loader.tsx b/src/mantine-core/src/Loader/Loader.tsx
@@ -28,7 +28,7 @@ const sizes = {
 
 export interface LoaderProps
   extends DefaultProps,
-    Omit<React.ComponentPropsWithoutRef<'svg'>, 'opacity'> {
+    Omit<React.ComponentPropsWithoutRef<'svg'>, 'display' | 'opacity'> {
   /** Defines width of loader */
   size?: MantineNumberSize;
 

diff --git a/src/mantine-styles/src/theme/types/MantineStyleSystem.ts b/src/mantine-styles/src/theme/types/MantineStyleSystem.ts
@@ -55,6 +55,8 @@ export interface MantineStyleSystemProps {
   bottom?: SystemProp<CSSProperties['bottom']>;
   right?: SystemProp<CSSProperties['right']>;
   inset?: SystemProp<CSSProperties['inset']>;
+
+  display?: SystemProp<CSSProperties['display']>;
 }
 
 export type MantineStyleSystemSize = keyof MantineStyleSystemProps;