refactor(modal): handle modal when content gets too large

index.html

@@ -1156,7 +1156,7 @@ <h2>Close Button</h2>
     <div class="container">
       <h2>Modal</h2>
       <sgds-button id="modalShowButton">Open Modal</sgds-button>
-      <sgds-modal>
+      <sgds-modal size="fullscreen">
         <h2 slot="title">Modal title</h2>
         <p slot="description">Modal description</p>
         <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum est vitae erat molestie blandit. Pellentesque at nunc at mi auctor imperdiet eu at leo. Integer aliquam, turpis vel ultricies ornare, sem massa commodo velit, pretium dictum quam nibh et ex. Suspendisse eu dignissim libero. Donec aliquam, lacus eu pellentesque interdum, arcu nisl blandit turpis, at tincidunt purus orci ut dolor. Morbi malesuada faucibus lorem, ornare accumsan sapien lacinia vel. In enim justo, hendrerit eu mi vitae, viverra fringilla nunc. Proin semper nunc a mollis faucibus. Nam at arcu non justo congue tincidunt. Donec vehicula felis risus, et lobortis lacus fringilla eu. Proin faucibus, nisi non semper elementum, sapien nisi viverra urna, id tempus augue felis ac nibh. Nullam pulvinar magna eros. Vestibulum at orci elit. Sed convallis fermentum gravida.

src/components/Dropdown/sgds-dropdown-item.ts

@@ -38,7 +38,7 @@ export class SgdsDropdownItem extends LinkElement {
       >
         <slot></slot>
 
-<!-- //TODO: Remove active icon for dropdown as navigational dropdowns do not need active icon. Active icon is specific to combobox only.
+        <!-- //TODO: Remove active icon for dropdown as navigational dropdowns do not need active icon. Active icon is specific to combobox only.
 // When working on combobox please refactor to segregate combobox item from dropdown item -->
         ${this.active
           ? html`<div class="active-icon">
@@ -51,4 +51,3 @@ export class SgdsDropdownItem extends LinkElement {
 }
 
 export default SgdsDropdownItem;
-

src/components/Modal/modal.css

@@ -20,8 +20,8 @@
 
 .modal {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: start;
   position: fixed;
   top: 0;
   right: 0;
@@ -35,8 +35,12 @@
   width: 100%;
   max-width: 640px;
   border-radius: var(--sgds-border-radius-md);
-  margin: var(--sgds-spacer-9) var(--sgds-spacer-6);
+  margin: var(--sgds-spacer-9) auto;
   position: relative;
+  display:flex;
+  flex-direction: column;
+  max-height: calc(100% - var(--sgds-spacer-9) - var(--sgds-spacer-9))
+
 }
 
 .modal-panel:focus {
@@ -46,7 +50,8 @@
 /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
 @media screen and (max-width: 420px) {
   .modal-panel {
-    max-height: 80vh;
+    margin: var(--sgds-spacer-8) auto;
+    max-height: calc(100% - var(--sgds-spacer-8) - var(--sgds-spacer-8));
   }
 }
 
@@ -56,10 +61,16 @@
 }
 
 .modal-header {
+  flex: 0 0 auto;
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: var(--sgds-padding-xl);
+}
+.modal-header__title-description {
+  display: flex; 
   flex-direction: column;
   gap: var(--sgds-gap-xs);
-  padding: var(--sgds-padding-xl);
 }
 
 slot[name="title"]::slotted(*) {
@@ -82,12 +93,6 @@ slot[name="description"]::slotted(*) {
   line-height: var(--sgds-line-height-body);
 }
 
-.modal-close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
 .modal-body {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -100,6 +105,7 @@ slot[name="description"]::slotted(*) {
 }
 
 .modal-footer {
+  flex: 0 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;

src/components/Modal/sgds-modal.ts

@@ -274,20 +274,22 @@ export class SgdsModal extends SgdsElement {
           tabindex="-1"
         >
           <div class="modal-header">
-            <slot class="modal-title" id="title" name="title"></slot>
-            <slot name="description"></slot>
+            <div class="modal-header__title-description">
+              <slot class="modal-title" id="title" name="title"></slot>
+              <slot name="description"></slot>
+            </div>
+            <sgds-close-button
+              class="modal-header__close"
+              @click="${() => this.requestClose("close-button")}"
+              ariaLabel="close modal"
+            ></sgds-close-button>
           </div>
           <div class="modal-body">
             <slot></slot>
           </div>
           <div class="modal-footer">
             <slot name="footer"></slot>
           </div>
-          <sgds-close-button
-            class="modal-close"
-            @click="${() => this.requestClose("close-button")}"
-            ariaLabel="close modal"
-          ></sgds-close-button>
         </div>
       </div>
     `;

test/modal.test.ts

@@ -24,11 +24,17 @@ describe("<sgds-modal>", () => {
           aria-labelledby="title"
           tabindex="-1"
         >
-          <div class="modal-header">
-            <slot class="modal-title" id="title" name="title">
-            </slot>
-            <slot name="description">
-            </slot>
+         <div class="modal-header">
+            <div class="modal-header__title-description">
+              <slot class="modal-title" id="title" name="title"></slot>
+              <slot name="description"></slot>
+            </div>
+            <sgds-close-button
+            class="modal-header__close"
+            ariaLabel="close modal"
+            size="md" 
+            variant="default"
+          ></sgds-close-button>
           </div>
           <div class="modal-body">
             <slot>
@@ -38,13 +44,6 @@ describe("<sgds-modal>", () => {
             <slot name="footer">
             </slot>
           </div>
-          <sgds-close-button
-              arialabel="close modal"
-              class="modal-close"
-              size="md" 
-              variant="default"
-            >
-            </sgds-close-button>
         </div>
       </div>
     `