Merge remote-tracking branch 'origin/main' into mayank/monorepo

packages/iTwinUI-react/src/core/Modal/Modal.test.tsx

@@ -46,6 +46,15 @@ it('should render in basic form', () => {
   assertBaseElement(overlay);
 });
 
+it('should render in full page form', () => {
+  renderComponent({ styleType: 'fullPage' });
+
+  const overlay = document.querySelector(
+    '.iui-modal.iui-modal-full-page.iui-modal-visible',
+  ) as HTMLElement;
+  assertBaseElement(overlay);
+});
+
 it('should not render modal when closed', () => {
   renderComponent({ isOpen: false });
 

packages/iTwinUI-react/src/core/Modal/Modal.tsx

@@ -15,6 +15,7 @@ import {
 } from '../utils';
 import '@itwin/itwinui-css/css/modal.css';
 import { IconButton } from '../Buttons/IconButton';
+import { CSSTransition } from 'react-transition-group';
 
 export type ModalProps = {
   /**
@@ -60,6 +61,11 @@ export type ModalProps = {
    * @default document
    */
   ownerDocument?: Document;
+  /**
+   * Type of the modal.
+   * @default 'default'
+   */
+  styleType?: 'default' | 'fullPage';
   /**
    * Content of the modal.
    */
@@ -100,6 +106,7 @@ export const Modal = (props: ModalProps) => {
     className,
     style,
     children,
+    styleType = 'default',
     modalRootId = 'iui-react-portal-container',
     ownerDocument = getDocument(),
     ...rest
@@ -170,10 +177,20 @@ export const Modal = (props: ModalProps) => {
 
   return !!container ? (
     ReactDOM.createPortal(
-      isOpen && (
+      <CSSTransition
+        in={isOpen}
+        classNames='iui-modal-animation'
+        timeout={{ exit: 600 }}
+        unmountOnExit={true}
+      >
         <FocusTrap>
           <div
-            className={cx('iui-modal', 'iui-modal-visible', className)}
+            className={cx(
+              'iui-modal',
+              { 'iui-modal-full-page': styleType === 'fullPage' },
+              { 'iui-modal-visible': isOpen },
+              className,
+            )}
             tabIndex={-1}
             onKeyDown={handleKeyDown}
             ref={overlayRef}
@@ -204,7 +221,7 @@ export const Modal = (props: ModalProps) => {
             </div>
           </div>
         </FocusTrap>
-      ),
+      </CSSTransition>,
       container,
     )
   ) : (

packages/iTwinUI-react/src/core/Modal/ModalContent.test.tsx

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ModalContent } from './ModalContent';
+
+it('should render in its most basic state', () => {
+  const { container } = render(
+    <ModalContent>
+      <div>Lorem ipsum dolor sit amet.</div>
+    </ModalContent>,
+  );
+  expect(container.querySelector('.iui-modal-content')).toBeTruthy();
+  screen.getByText('Lorem ipsum dolor sit amet.');
+});
+
+it('should propagate miscellaneous props', () => {
+  const { container } = render(
+    <ModalContent
+      className='test-class'
+      id='test-id'
+      style={{ fontSize: 'x-large' }}
+    >
+      <div>Lorem ipsum dolor sit amet.</div>
+    </ModalContent>,
+  );
+
+  const content = container.querySelector('.iui-modal-content') as HTMLElement;
+  expect(content).toHaveClass('test-class');
+  expect(content).toHaveStyle('fontSize: x-large');
+  expect(content.id).toEqual('test-id');
+});

packages/iTwinUI-react/src/core/Modal/ModalContent.tsx

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import { CommonProps, useTheme } from '../utils';
+import '@itwin/itwinui-css/css/modal.css';
+
+export type ModalContentProps = {
+  /**
+   * Main content in the `Modal`.
+   */
+  children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+
+/**
+ * Container for content in `Modal`.
+ */
+export const ModalContent = (props: ModalContentProps) => {
+  const { children, className, ...rest } = props;
+
+  useTheme();
+  return (
+    <div className={cx('iui-modal-content', className)} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export default ModalContent;

packages/iTwinUI-react/src/core/Modal/index.ts

@@ -6,4 +6,6 @@ export { Modal } from './Modal';
 export type { ModalProps } from './Modal';
 export { ModalButtonBar } from './ModalButtonBar';
 export type { ModalButtonBarProps } from './ModalButtonBar';
+export { ModalContent } from './ModalContent';
+export type { ModalContentProps } from './ModalContent';
 export default './Modal';

packages/iTwinUI-react/src/core/index.ts

@@ -135,8 +135,12 @@ export type {
   MenuExtraContentProps,
 } from './Menu';
 
-export { Modal, ModalButtonBar } from './Modal';
-export type { ModalProps, ModalButtonBarProps } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
+export type {
+  ModalProps,
+  ModalButtonBarProps,
+  ModalContentProps,
+} from './Modal';
 
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type {