@indico-data/design-system 2.47.0 → 2.47.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.47.0",
+  "version": "2.47.2",
   "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',
@@ -172,8 +183,8 @@ export const Default: Story = {
         <Row>
           <Col sm={4}>
             <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
-              <h2>The Legend of Zelda</h2>
-              <p>
+              <h2 className="mb-4">The Legend of Zelda</h2>
+              <p className="mb-4">
                 In the mystical realm of Hyrule, where ancient magic flows through verdant fields
                 and towering mountains, a timeless tale unfolds across countless generations. The
                 legendary hero Link, eternally reborn when darkness threatens the land, stands as
@@ -181,7 +192,7 @@ export const Default: Story = {
                 Through the ages, he has faced the malevolent forces of Ganon, whose insatiable
                 desire for power has brought destruction and chaos to this peaceful kingdom.
               </p>
-              <p>
+              <p className="mb-4">
                 Princess Zelda, blessed with the wisdom of the goddesses and keeper of the royal
                 bloodline, serves as both ruler and guardian of Hyrule's most sacred treasures.
                 Together with Link, she maintains the delicate balance between light and shadow,
@@ -233,8 +244,8 @@ export const ConfirmationModal: Story = {
         <Row>
           <Col sm={4}>
             <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
-              <h2>Would you like to continue?</h2>
-              <p>
+              <h2 className="mb-4">Would you like to continue?</h2>
+              <p className="mb-4">
                 If you would like to proceed, please click the confirm button. Otherwise, click the
                 cancel button.
               </p>

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/styles/Modal.scss

@@ -72,19 +72,6 @@
         font-size: var(--pf-font-size-h1);
       }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        margin-bottom: var(--pf-margin-4);
-      }
-
-      p {
-        margin-bottom: var(--pf-margin-4);
-      }
-
       // We should build a divider component for this
       hr {
         margin-top: var(--pf-margin-8);

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;
 }