add modal footer component

Author: Spichkenss

packages/@mantine/core/src/components/Modal/Modal.module.css

@@ -36,6 +36,11 @@
   border-start-end-radius: var(--modal-radius, var(--mantine-radius-default));
 }
 
+.footer {
+  border-end-start-radius: var(--modal-radius, var(--mantine-radius-default));
+  border-end-end-radius: var(--modal-radius, var(--mantine-radius-default));
+}
+
 .content {
   flex: var(--modal-content-flex, 0 0 var(--modal-size));
   max-width: 100%;

packages/@mantine/core/src/components/Modal/Modal.story.tsx

@@ -1,6 +1,7 @@
 import { useDisclosure } from '@mantine/hooks';
 import { Button } from '../Button';
 import { Card } from '../Card';
+import { Group } from '../Group';
 import { Menu } from '../Menu';
 import { ScrollArea } from '../ScrollArea';
 import { Select } from '../Select';
@@ -323,3 +324,32 @@ export function WithScrollArea() {
     </>
   );
 }
+
+export const Compound = () => {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  return (
+    <>
+      <Button onClick={open}>Open modal</Button>
+
+      <Modal.Root opened={opened} onClose={close}>
+        <Modal.Overlay />
+        <Modal.Content>
+          <Modal.Header>
+            <Modal.Title>Modal title</Modal.Title>
+            <Modal.CloseButton />
+          </Modal.Header>
+          <Modal.Body>{content}</Modal.Body>
+          <Modal.Footer>
+            <Group>
+              <Button variant="transparent" onClick={close}>
+                Close
+              </Button>
+              <Button>Button</Button>
+            </Group>
+          </Modal.Footer>
+        </Modal.Content>
+      </Modal.Root>
+    </>
+  );
+};

packages/@mantine/core/src/components/Modal/Modal.tsx

@@ -4,6 +4,7 @@ import { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';
 import { ModalBody } from './ModalBody';
 import { ModalCloseButton } from './ModalCloseButton';
 import { ModalContent } from './ModalContent';
+import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalOverlay } from './ModalOverlay';
 import {
@@ -55,6 +56,7 @@ export type ModalFactory = Factory<{
     Content: typeof ModalContent;
     Body: typeof ModalBody;
     Header: typeof ModalHeader;
+    Footer: typeof ModalFooter;
     Title: typeof ModalTitle;
     CloseButton: typeof ModalCloseButton;
     Stack: typeof ModalStack;
@@ -151,6 +153,7 @@ Modal.Overlay = ModalOverlay;
 Modal.Content = ModalContent;
 Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
 Modal.Title = ModalTitle;
 Modal.CloseButton = ModalCloseButton;
 Modal.Stack = ModalStack;

packages/@mantine/core/src/components/Modal/ModalFooter.tsx

@@ -0,0 +1,35 @@
+import { CompoundStylesApiProps, factory, Factory, useProps } from '../../core';
+import { ModalBaseFooter, ModalBaseFooterProps } from '../ModalBase';
+import { useModalContext } from './Modal.context';
+import classes from './Modal.module.css';
+
+export type ModalFooterStylesNames = 'footer';
+
+export interface ModalFooterProps
+  extends ModalBaseFooterProps,
+    CompoundStylesApiProps<ModalFooterFactory> {}
+
+export type ModalFooterFactory = Factory<{
+  props: ModalFooterProps;
+  ref: HTMLElement;
+  stylesNames: ModalFooterStylesNames;
+  compound: true;
+}>;
+
+export const ModalFooter = factory<ModalFooterFactory>((_props, ref) => {
+  const props = useProps('ModalFooter', null, _props);
+  const { classNames, className, style, styles, vars, ...others } = props;
+
+  const ctx = useModalContext();
+
+  return (
+    <ModalBaseFooter
+      ref={ref}
+      {...ctx.getStyles('footer', { classNames, style, styles, className })}
+      {...others}
+    />
+  );
+});
+
+ModalFooter.classes = classes;
+ModalFooter.displayName = '@mantine/core/ModalFooter';

packages/@mantine/core/src/components/ModalBase/ModalBase.module.css

@@ -20,6 +20,20 @@
   transition: padding-inline-end 100ms;
 }
 
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--mb-padding, var(--mantine-spacing-md));
+  padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) - rem(5px));
+  position: sticky;
+  bottom: 0;
+  background-color: var(--mantine-color-body);
+  z-index: 1000;
+  min-height: 60px;
+  transition: padding-inline-end 100ms;
+}
+
 .inner {
   position: fixed;
   width: 100%;

packages/@mantine/core/src/components/ModalBase/ModalBaseFooter.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import cx from 'clsx';
+import { Box, BoxProps, ElementProps } from '../../core';
+import { useModalBaseContext } from './ModalBase.context';
+import classes from './ModalBase.module.css';
+
+export interface ModalBaseFooterProps extends BoxProps, ElementProps<'footer'> {}
+
+export const ModalBaseFooter = forwardRef<HTMLElement, ModalBaseFooterProps>(
+  ({ className, ...others }, ref) => {
+    const ctx = useModalBaseContext();
+    return (
+      <Box
+        component="footer"
+        ref={ref}
+        className={cx({ [classes.footer]: !ctx.unstyled }, className)}
+        {...others}
+      />
+    );
+  }
+);
+
+ModalBaseFooter.displayName = '@mantine/core/ModalBaseFooter';

packages/@mantine/core/src/components/ModalBase/index.ts

@@ -5,6 +5,7 @@ export { ModalBaseContent } from './ModalBaseContent';
 export { ModalBaseHeader } from './ModalBaseHeader';
 export { ModalBaseOverlay } from './ModalBaseOverlay';
 export { ModalBaseTitle } from './ModalBaseTitle';
+export { ModalBaseFooter } from './ModalBaseFooter';
 export { NativeScrollArea } from './NativeScrollArea';
 
 export type { ModalBaseProps } from './ModalBase';
@@ -14,6 +15,7 @@ export type { ModalBaseContentProps } from './ModalBaseContent';
 export type { ModalBaseHeaderProps } from './ModalBaseHeader';
 export type { ModalBaseOverlayProps } from './ModalBaseOverlay';
 export type { ModalBaseTitleProps } from './ModalBaseTitle';
+export type { ModalBaseFooterProps } from './ModalBaseFooter.tsx';
 
 export type ModalBaseStylesNames =
   | 'body'
@@ -23,4 +25,5 @@ export type ModalBaseStylesNames =
   | 'root'
   | 'content'
   | 'close'
-  | 'inner';
+  | 'inner'
+  | 'footer';