@iress-oss/ids-mcp-server 0.0.1-dev.0

package/generated/docs/components-modal-docs.md

@@ -0,0 +1,587 @@
+[](#modal)Modal
+===============
+
+Overview
+--------
+
+Modals gather information, complete a subtask, or provide additional information without losing the context of an underlying page.
+
+Read more
+
+[](#use-a-modal-when)Use a modal when
+-------------------------------------
+
+*   Providing supplemental tasks required by the underlying page
+*   Providing non-essential information related to the underlying page
+*   Content require full attention
+
+[](#avoid-using-a-modal-when)Avoid using a modal when
+-----------------------------------------------------
+
+*   Conveying brief messages about background processes or status changes. Instead use IressAlert or IressToast.
+*   The modal content can be incorporated into the page without complicating the page's intent
+
+Show modal
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <\>
+  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
+    Show modal  </IressButton\>
+  <IressModal
+    footer\="Footer slot"
+    id\="storybook-modal"
+  \>
+    Modal content  </IressModal\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+Copy
+
+[](#controlling-the-modal)Controlling the modal
+-----------------------------------------------
+
+### [](#using-the-show-property)Using the `show` property
+
+You can use state to control the modal by setting the `show` property to `true` or `false`. To sync your state with the modal, you can use the `onShowChange` prop, which is normally passed the set function from `useState`.
+
+Show modal using state
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+import { IressButton, IressModal, IressModalProps } from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const ModalUsingState \= () \=> {
+  const \[show, setShow\] \= useState(false);
+  return (
+    <\>
+      <IressButton onClick\={() \=> setShow(true)}\>
+        Show modal using state      </IressButton\>
+      <IressModal
+        {...{
+  children: 'This modal was opened via state',
+}}
+        show\={show}
+        onShowChange\={setShow}
+        footer\={<IressButton onClick\={() \=> setShow(false)}\>Close</IressButton\>}
+      />
+    </\>
+  );
+};
+
+Copy
+
+### [](#using-the-iressmodalprovider)Using the `IressModalProvider`
+
+You can use the `IressModalProvider` to open and close modals from anywhere in your application, as long as the modal has a unique `id`. In this case you would use the `useModal` hook to open and close the modal.
+
+To use, wrap your `<App/>` or the component that you want to use the `useModal` hook with `<IressModalProvider />`.
+
+Show modal using provider
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+import {
+  IressButton,
+  IressModal,
+  IressModalProps,
+  IressModalProvider,
+  useModal,
+} from '@iress-oss/ids-components';
+const MODAL\_ID \= 'storybook-modal';
+export const App \= (modalProps: IressModalProps) \=> (
+  <IressModalProvider\>
+    <ModalWithTrigger {...modalProps} />
+  </IressModalProvider\>
+);
+const ModalWithTrigger \= ({
+  id \= MODAL\_ID,
+  ...modalProps
+}: IressModalProps) \=> {
+  const { showModal } \= useModal();
+  return (
+    <\>
+      <IressButton onClick\={() \=> showModal(id)}\>
+        Show modal using provider      </IressButton\>
+      <IressModal
+        {...modalProps}
+        id\={id}
+        footer\={
+          <IressButton onClick\={() \=> showModal(id, false)}\>Close</IressButton\>
+        }
+      \>
+        {modalProps.children ?? 'Modal content'}
+      </IressModal\>
+    </\>
+  );
+};
+
+Copy
+
+[](#behaviour)Behaviour
+-----------------------
+
+*   No other interaction on the main page can be accessed while a modal is active. A backdrop covers the content beneath so that the content beneath cannot be interacted with.
+*   Clicking on the the backdrop closes the modal and returns the focus to the triggering element.
+*   When the modal is active the body is set to overflow: hidden to stop any scrolling of the underlying page. Scrolling should then only be possible on the modal wrapper.
+*   By default there are 3 ways to dismiss the modal; click X in the header; press ESC on a keyboard; click anywhere on the backdrop. It is also recommended that consumers add a Cancel or Close button to the modal's footer slot if required.
+
+[](#examples)Examples
+---------------------
+
+### [](#footer-slot)Footer slot
+
+Content to appear underneath the main content. Usually used for extra controls like buttons etc.
+
+Footer slot modal
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <\>
+  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
+    Footer slot modal  </IressButton\>
+  <IressModal
+    footer\={<IressButton\>Button in footer</IressButton\>}
+    id\="storybook-modal"
+  \>
+    Normal modal content  </IressModal\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+Copy
+
+### [](#fixed-footer)Fixed footer
+
+The `fixedFooter` prop can be used to set the footer to be fixed to the bottom of the modal. This is often useful when there is a lot of content in the main area that you would like to scroll underneath the footer content.
+
+**Note:** Also works without footer content.
+
+Using with popovers and tooltips
+--------------------------------
+
+The fixed footer variant of IressModal prevents content from overflowing the modal. This can cause layout issues when using with components that use popovers (for example IressCombobox), especially when these components sit at the end of the modal's content. If you encounter these issues, try using a modal without a fixed footer. Normal modals allow content to overflow, which should fix the issue.
+
+Fixed footer modal
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <\>
+  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
+    Fixed footer modal  </IressButton\>
+  <IressModal
+    fixedFooter
+    footer\={<IressButton\>Button in footer</IressButton\>}
+    id\="storybook-modal"
+  \>
+    <React.Fragment key\=".0"\>
+      <IressText element\="h2"\>
+        Next Saturday night, we're sending you back to the future      </IressText\>
+      <IressText\>
+        <p\>
+          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
+        <p\>
+          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
+        <p\>
+          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
+        <h3\>
+          I just don't think I can take that kind of rejection        </h3\>
+        <p\>
+          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
+        <p\>
+          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
+        <p\>
+          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
+        <p\>
+          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
+        <p\>
+          Go. Yeah, it's in the back. The future, it's where you're going? Mother, with Marty's parents out of town, don't you think he oughta spend the night, after all, Dad almost killed him with the car. What's going on? Where have you been all week?        </p\>
+        <p\>
+          But I can't go to the dance, I'll miss my favorite television program, Science Fiction Theater. Well uh, good, fine. Ahh. Ahh. Right, okay, so right around 9:00 she's gonna get very angry with me. That's right.        </p\>
+        <p\>
+          I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Alright, okay Jennifer. What if I send in the tape and they don't like it. I mean, what if they say I'm no good. What if they say, 'Get out of here, kid, you got no future.' I mean, I just don't think I can take that kind of rejection. Jesus, I'm beginning to sound like my old man. Ahh. Alright, take it up, go. Doc. This is it. This is the answer. It says here that a bolt of lightning is gonna strike the clock tower precisely at 10:04 p.m. next Saturday night. If we could somehow harness this bolt of lightning, channel it into the flux capacitor, it just might work. Next Saturday night, we're sending you back to the future.        </p\>
+      </IressText\>
+    </React.Fragment\>
+  </IressModal\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+Copy
+
+### [](#size)Size
+
+The `size` prop can be set to `sm`, `md`, `lg` or `fullpage`. It defaults to `md`.
+
+smmdlgfullpage
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const ModalWithTrigger \= () \=> {
+  const { showModal } \= useModal();
+  return (
+    <IressInline gutter\="md"\>
+      {MODAL\_SIZES.map((size) \=> (
+        <\>
+          <IressButton onClick\={() \=> showModal(size)}\>{size}</IressButton\>
+          <IressModal id\={size} size\={size}\>
+            {size} modal          </IressModal\>
+        </\>
+      ))}
+    </IressInline\>
+  );
+};
+export const ModalSizes \= () \=> (
+  <IressModalProvider\>
+    <ModalWithTrigger />
+  </IressModalProvider\>
+);
+
+Copy
+
+### [](#responsive-size)Responsive size
+
+The `size` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+If you set a responsive `size`, the modal becomes full width on screens smaller than the value you specified. For example, if you want to create a large modal on medium screens and above:
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+<IressModal size\={{ md: IressModal.Size.Lg }}\>
+
+Copy
+
+The modal will be full width on extra-small and small screens, and large width on medium, large and extra-large screens. This is the same as setting:
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+<IressModal size\={{ xs: IressModal.Size.Fullpage, md: IressModal.Size.Lg }}\>
+
+Copy
+
+You can override this behaviour by specifying a value for `xs` in your size object:
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+<IressModal size\={{ xs: IressModal.Size.Sm, md: IressModal.Size.Lg }}\>
+
+Copy
+
+Responsive modal
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <\>
+  <IressButton onClick\={() \=> showModal(MODAL\_ID)}\>
+    Responsive modal  </IressButton\>
+  <IressModal
+    footer\=""
+    id\="storybook-modal"
+    size\={{
+      lg: 'md',
+      md: 'sm',
+      xl: 'lg'
+    }}
+  \>
+    <CurrentBreakpoint />
+  </IressModal\>
+</\>
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+Copy
+
+### [](#padding)Padding
+
+The `padding` prop can be set to either `none`, `sm`, `md` or `lg`. It defaults to `md`.
+
+none paddingsm paddingmd paddinglg padding
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const ModalWithTrigger \= () \=> {
+  const { showModal } \= useModal();
+  return (
+    <IressInline gutter\="md"\>
+      {PADDING\_SIZES.map((size) \=> (
+        <\>
+          <IressButton onClick\={() \=> showModal(size)}\>
+            {size} padding          </IressButton\>
+          <IressModal id\={size} padding\={size}\>
+            {size} padded modal          </IressModal\>
+        </\>
+      ))}
+    </IressInline\>
+  );
+};
+export const ModalPaddings \= () \=> (
+  <IressModalProvider\>
+    <ModalWithTrigger />
+  </IressModalProvider\>
+);
+
+Copy
+
+### [](#disable-closing)Disable closing
+
+For instances where you require the user's full attention and you want to ensure they continue the current task before closing the modal, you can disable the backdrop and escape key using `disableBackdropClick` and/or hide the close button using `noCloseButton`.
+
+**Note:** As these options remove the default handling of the closing the modal, please ensure you provide a clear way for the user to close the modal.
+
+Disable backdrop clickNo close button (please provide one, if you decide to hide the close button)Both (If you hide the close button, ensure you provide another way to close the modal)
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+const Story \= () \=> {
+  const { showModal } \= useModal();
+const MODAL\_ID \= 'storybook-modal';
+return (
+  <IressStack gutter\="md"\>
+  <IressButton
+    fluid
+    onClick\={() \=> showModal("disable-backdrop-click")}
+  \>
+    Disable backdrop click  </IressButton\>
+  <IressModal
+    disableBackdropClick
+    footer\="Footer slot"
+    id\="disable-backdrop-click"
+  \>
+    Modal content  </IressModal\>
+  <IressButton
+    fluid
+    onClick\={() \=> showModal("no-close-button")}
+  \>
+    No close button (please provide one, if you decide to hide the close button)  </IressButton\>
+  <IressModal
+    footer\={<IressButton onClick\={() \=> showModal("no-close-button", false)}\>Close</IressButton\>}
+    id\="no-close-button"
+    noCloseButton
+  \>
+    Modal content  </IressModal\>
+  <IressButton
+    fluid
+    onClick\={() \=> showModal("both")}
+  \>
+    Both (If you hide the close button, ensure you provide another way to close the modal)  </IressButton\>
+  <IressModal
+    disableBackdropClick
+    footer\={<IressButton onClick\={() \=> showModal("both", false)}\>Close</IressButton\>}
+    id\="both"
+    noCloseButton
+  \>
+    Modal content  </IressModal\>
+</IressStack\>
+);
+};
+  
+export const App \= () \=> (
+  <IressModalProvider\>
+        <Story />
+      </IressModalProvider\>
+);
+
+Copy
+
+[](#migrating-to-version-5)Migrating to version 5
+-------------------------------------------------
+
+### [](#adding-the-provider)Adding the provider
+
+For your components to work as previously, you will need to set up the `IressModalProvider` at the root of your application. This will allow you to use the `useModal` hook to open and close modals from anywhere in your application using the ID of the modal.
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+const App \= () \=> <IressModalProvider\>Rest of app here</IressModalProvider\>;
+
+Copy
+
+### [](#testing)Testing
+
+In version 5, modals are rendered conditionally, meaning they will not be available in the DOM until they are shown. This means that you will need to update your tests to account for this, as you cannot interact with its contents until it is shown, unlike in version 4.
+
+See below for an example in version 4 and version 5.
+
+Mode
+
+DiffOldNew
+
+<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { render, waitFor, screen } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { userEvent } from '@testing-library/user-event';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">test('opening and closing a modal', async () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await componentLoad([</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByRole('button', { name: /open modal/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'modal-trigger',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'modal',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // activate modal</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  ]);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const modal = await screen.findByRole('dialog');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByTestId('modal-trigger');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const modal = screen.getByTestId('modal');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // In version 5, you can only interact with the modal once it has been loaded here.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // In version 4, you can already interact with the modal here as its in the DOM at this stage.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // activate modal</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(modal).toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  // close modal</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByTestId('modal__close-button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByRole('button', { name: /close/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(modal).not.toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await waitForElementToBeRemoved(modal);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">});</pre></td></tr></tbody></table>
+
+### [](#speed-up-tests)Speed up tests
+
+You can speed up tests by wrapping your tests in a provider that overrides the theme tokens for animations.
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+const themeOverrides: Record<string, string\> \= {
+  '--iress-backdrop-transition-duration': '0s',
+};
+export const TestAppProvider \= ({ children }: PropsWithChildren) \=> {
+  const containerRef \= useRef<HTMLDivElement\>(null);
+  return (
+    <IressModalProvider container\={containerRef}\>
+      <div style\={themeOverrides} ref\={containerRef}\>
+        {children}
+      </div\>
+    </IressModalProvider\>
+  );
+};
+
+Copy
+
+On this page
+
+*   [Overview](#overview)
+*   [Use a modal when](#use-a-modal-when)
+*   [Avoid using a modal when](#avoid-using-a-modal-when)
+*   [Props](#props)
+*   [Controlling the modal](#controlling-the-modal)
+    *   [Using the show property](#using-the-show-property)
+    *   [Using the IressModalProvider](#using-the-iressmodalprovider)
+*   [Behaviour](#behaviour)
+*   [Examples](#examples)
+    *   [Footer slot](#footer-slot)
+    *   [Fixed footer](#fixed-footer)
+    *   [Size](#size)
+    *   [Responsive size](#responsive-size)
+    *   [Padding](#padding)
+    *   [Disable closing](#disable-closing)
+*   [Migrating to version 5](#migrating-to-version-5)
+    *   [Adding the provider](#adding-the-provider)
+    *   [Testing](#testing)
+    *   [Speed up tests](#speed-up-tests)