[@mantine/core] Change Modal and Drawer to use native scrollbars by d…

…efault, remove excessive markup (mantinedev#3854)
milhamm · Mar 28, 2023 · f585c32 · f585c32
1 parent 93687fa
commit f585c32
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 36 deletions.
diff --git a/docs/src/docs/core/Drawer.mdx b/docs/src/docs/core/Drawer.mdx
@@ -59,12 +59,9 @@ By default, [ScrollArea.Autosize](/core/scroll-area/) component is used as scrol
 
 <Demo data={DrawerDemos.overflow} />
 
-## Native scrollbars
+## Usage with ScrollArea
 
-To use native scrollbars instead of [ScrollArea](/core/scroll-area/) component,
-set `scrollAreaComponent={Drawer.NativeScrollArea}`:
-
-<Demo data={DrawerDemos.nativeScroll} />
+<Demo data={DrawerDemos.scrollarea} />
 
 ## Change transition
 

diff --git a/docs/src/docs/core/Modal.mdx b/docs/src/docs/core/Modal.mdx
@@ -77,12 +77,9 @@ it will not scroll with the rest of the content.
 
 <Demo data={ModalDemos.overflow} />
 
-## Native scrollbars
+## Usage with ScrollArea
 
-To use native scrollbars instead of [ScrollArea](/core/scroll-area/) component,
-set `scrollAreaComponent={Modal.NativeScrollArea}`:
-
-<Demo data={ModalDemos.nativeScroll} />
+<Demo data={ModalDemos.scrollarea} />
 
 ## Change offsets
 

diff --git a/src/mantine-core/src/Drawer/Drawer.context.ts b/src/mantine-core/src/Drawer/Drawer.context.ts
@@ -1,9 +1,6 @@
 import { createSafeContext } from '@mantine/utils';
 
-export type ScrollAreaComponent = React.FC<{
-  mah: React.CSSProperties['maxHeight'];
-  children: React.ReactNode;
-}>;
+export type ScrollAreaComponent = React.FC<any>;
 
 interface DrawerContext {
   scrollAreaComponent: ScrollAreaComponent;

diff --git a/src/mantine-core/src/Drawer/DrawerContent/DrawerContent.tsx b/src/mantine-core/src/Drawer/DrawerContent/DrawerContent.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { useComponentDefaultProps } from '@mantine/styles';
-import { ScrollArea } from '../../ScrollArea';
 import { ModalBase, ModalBaseContentProps } from '../../ModalBase';
 import { useDrawerContext, ScrollAreaComponent } from '../Drawer.context';
 
@@ -22,11 +21,12 @@ export const DrawerContent = forwardRef<HTMLElement, DrawerContentProps>((props,
 
   const ctx = useDrawerContext();
 
-  const Scroll = scrollAreaComponent || ctx.scrollAreaComponent || ScrollArea.Autosize;
+  const Scroll: React.FC<any> =
+    scrollAreaComponent || ctx.scrollAreaComponent || ModalBase.NativeScrollArea;
 
   return (
     <ModalBase.Content ref={ref} radius={0} {...others}>
-      <Scroll mah="100vh">{children}</Scroll>
+      <Scroll style={{ height: '100vh' }}>{children}</Scroll>
     </ModalBase.Content>
   );
 });
diff --git a/src/mantine-core/src/Modal/Modal.context.ts b/src/mantine-core/src/Modal/Modal.context.ts
@@ -1,10 +1,7 @@
 import { MantineNumberSize } from '@mantine/styles';
 import { createSafeContext } from '@mantine/utils';
 
-export type ScrollAreaComponent = React.FC<{
-  mah: React.CSSProperties['maxHeight'];
-  children: React.ReactNode;
-}>;
+export type ScrollAreaComponent = React.FC<any>;
 
 interface ModalContext {
   yOffset: string | number;

diff --git a/src/mantine-core/src/Modal/ModalContent/ModalContent.tsx b/src/mantine-core/src/Modal/ModalContent/ModalContent.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { useComponentDefaultProps, rem } from '@mantine/styles';
-import { ScrollArea } from '../../ScrollArea';
 import { ModalBase, ModalBaseContentProps } from '../../ModalBase';
 import { useModalContext, ScrollAreaComponent } from '../Modal.context';
 
@@ -21,11 +20,12 @@ export const ModalContent = forwardRef<HTMLElement, ModalContentProps>((props, r
   );
 
   const ctx = useModalContext();
-  const Scroll = scrollAreaComponent || ctx.scrollAreaComponent || ScrollArea.Autosize;
+  const Scroll: React.FC<any> =
+    scrollAreaComponent || ctx.scrollAreaComponent || ModalBase.NativeScrollArea;
 
   return (
     <ModalBase.Content ref={ref} radius={ctx.radius} {...others}>
-      <Scroll mah={`calc(100vh - (${rem(ctx.yOffset)} * 2))`}>{children}</Scroll>
+      <Scroll style={{ maxHeight: `calc(100vh - (${rem(ctx.yOffset)} * 2))` }}>{children}</Scroll>
     </ModalBase.Content>
   );
 });
diff --git a/src/mantine-core/src/ModalBase/NativeScrollArea/NativeScrollArea.tsx b/src/mantine-core/src/ModalBase/NativeScrollArea/NativeScrollArea.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export function NativeScrollArea({ children }) {
-  return <div>{children}</div>;
+  return <>{children}</>;
 }
diff --git a/.../core/Drawer/Drawer.demo.nativeScroll.tsx → ...os/core/Drawer/Drawer.demo.scrollarea.tsx b/.../core/Drawer/Drawer.demo.nativeScroll.tsx → ...os/core/Drawer/Drawer.demo.scrollarea.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDisclosure } from '@mantine/hooks';
-import { Drawer, Group, Button } from '@mantine/core';
+import { Drawer, Group, Button, ScrollArea } from '@mantine/core';
 import { MantineDemo } from '@mantine/ds';
 
 const code = `
@@ -20,7 +20,7 @@ function Demo() {
         opened={opened}
         onClose={close}
         title="Header is sticky"
-        scrollAreaComponent={Drawer.NativeScrollArea}
+        scrollAreaComponent={ScrollArea.Autosize}
       >
         {content}
       </Drawer>
@@ -46,7 +46,7 @@ function Demo() {
         opened={opened}
         onClose={close}
         title="Header is sticky"
-        scrollAreaComponent={Drawer.NativeScrollArea}
+        scrollAreaComponent={ScrollArea.Autosize}
       >
         {content}
       </Drawer>
@@ -58,7 +58,7 @@ function Demo() {
   );
 }
 
-export const nativeScroll: MantineDemo = {
+export const scrollarea: MantineDemo = {
   type: 'demo',
   code,
   component: Demo,

diff --git a/src/mantine-demos/src/demos/core/Drawer/index.ts b/src/mantine-demos/src/demos/core/Drawer/index.ts
@@ -6,5 +6,5 @@ export { overlay } from './Drawer.demo.overlay';
 export { composition } from './Drawer.demo.composition';
 export { header } from './Drawer.demo.header';
 export { initialFocus } from './Drawer.demo.initialFocus';
-export { nativeScroll } from './Drawer.demo.nativeScroll';
+export { scrollarea } from './Drawer.demo.scrollarea';
 export { overflow } from './Drawer.demo.overflow';
diff --git a/...os/core/Modal/Modal.demo.nativeScroll.tsx → ...emos/core/Modal/Modal.demo.scrollarea.tsx b/...os/core/Modal/Modal.demo.nativeScroll.tsx → ...emos/core/Modal/Modal.demo.scrollarea.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useDisclosure } from '@mantine/hooks';
-import { Modal, Group, Button } from '@mantine/core';
+import { Modal, Group, Button, ScrollArea } from '@mantine/core';
 import { MantineDemo } from '@mantine/ds';
 
 const code = `
 import { useDisclosure } from '@mantine/hooks';
-import { Modal, Group, Button } from '@mantine/core';
+import { Modal, Group, Button, ScrollArea } from '@mantine/core';
 
 function Demo() {
   const [opened, { open, close }] = useDisclosure(false);
@@ -20,7 +20,7 @@ function Demo() {
         opened={opened}
         onClose={close}
         title="Header is sticky"
-        scrollAreaComponent={Modal.NativeScrollArea}
+        scrollAreaComponent={ScrollArea.Autosize}
       >
         {content}
       </Modal>
@@ -46,7 +46,7 @@ function Demo() {
         opened={opened}
         onClose={close}
         title="Header is sticky"
-        scrollAreaComponent={Modal.NativeScrollArea}
+        scrollAreaComponent={ScrollArea.Autosize}
       >
         {content}
       </Modal>
@@ -58,7 +58,7 @@ function Demo() {
   );
 }
 
-export const nativeScroll: MantineDemo = {
+export const scrollarea: MantineDemo = {
   type: 'demo',
   code,
   component: Demo,

diff --git a/src/mantine-demos/src/demos/core/Modal/index.ts b/src/mantine-demos/src/demos/core/Modal/index.ts
@@ -7,7 +7,7 @@ export { transitions } from './Modal.demo.transitions';
 export { centered } from './Modal.demo.centered';
 export { fullScreen } from './Modal.demo.fullScreen';
 export { sizeAuto } from './Modal.demo.sizeAuto';
-export { nativeScroll } from './Modal.demo.nativeScroll';
+export { scrollarea } from './Modal.demo.scrollarea';
 export { composition } from './Modal.demo.composition';
 export { offset } from './Modal.demo.offset';
 export { initialFocus } from './Modal.demo.initialFocus';