@indico-data/design-system 2.47.0 → 2.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.47.0",
+  "version": "2.47.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/modal/Modal.mdx

@@ -14,6 +14,20 @@ The Modal component provides us with a way to display content in a modal window.
 ## Usage
 We have designed this modal with the intention for it to be used as a wrapper for content as you will see below. The recommended way to best use this component is to create your own wrapper in your application for specific modal needs. For example, you may create a wrapper component that displays a confirmation modal. You may also wish to create one for a stepper modal. The idea is that you wrap this modal in a component and build the body of your modal in that wrapped component so that you can reuse the modal component for different modal needs.
 
+### Parent Selector
+You may have an issue with styling and require the modal to be displayed in a specific part of your application. You can use the `parentSelector` prop to pass in a function that returns the element you want to use as the parent element for the modal. In insights we have the following example.
+
+```tsx
+  const parentSelector = () =>
+    document.getElementById('theme-root') || document.getElementById('root');
+
+  return (
+    <Modal parentSelector={parentSelector}>
+      {children}
+    </Modal>
+  );
+```
+
 ### Opening The Modal
 To open the modal, you can use the following as an example. You create a state variable to control the modal's open/close state and then pass that state variable to the modal component.
 
@@ -104,8 +118,4 @@ If you are looking for a confirmation modal, you can use the following as an exa
     </Col>
   </Row>
 </Modal>
-```
-
-### Title vs Content
-The title prop is optional for the modal. If you do not provide a title, the modal will only display the content. If you do provide a title, the modal will display the title and content.
-  
+```

package/src/components/modal/Modal.stories.tsx

@@ -93,6 +93,17 @@ const meta: Meta = {
         },
       },
     },
+    parentSelector: {
+      control: false,
+      description:
+        'The element to use as the parent element for the modal. If you have issues with styling, make sure you pass the correct root element here.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'HTMLElement',
+        },
+      },
+    },
     shouldCloseOnEsc: {
       control: 'boolean',
       description: 'Whether the modal should close when the escape key is pressed',

package/src/components/modal/Modal.tsx

@@ -18,6 +18,7 @@ export const Modal = ({
   contentElement,
   overlayElement,
   position = 'center',
+  parentSelector,
   ...rest
 }: ModalProps) => {
   const modalClasses = classNames('modal', `modal--${position}`, className);
@@ -33,6 +34,7 @@ export const Modal = ({
       onRequestClose={onRequestClose}
       portalClassName={portalClassName}
       appElement={appElement}
+      parentSelector={parentSelector}
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       shouldCloseOnEsc={shouldCloseOnEsc}
       contentElement={contentElement}

package/src/components/modal/types.ts

@@ -12,4 +12,5 @@ export interface ModalProps {
   contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
   overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
   position?: 'top' | 'center';
+  parentSelector?: () => HTMLElement;
 }