feat(modal): ai updates

packages/carbon-web-components/src/components/modal/modal-footer.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,17 +31,14 @@ class CDSModalFooter extends LitElement {
    */
   private _handleSlotChange(event: Event) {
     const { selectorButtons } = this.constructor as typeof CDSModalFooter;
-    const length = (event.target as HTMLSlotElement)
-      .assignedNodes()
-      .filter(
-        (node) =>
-          node.nodeType === Node.ELEMENT_NODE &&
-          (node as Element).matches(selectorButtons)
-      ).length;
-    this.hasThreeButtons = length > 2;
-    length === 2
-      ? this.parentElement?.setAttribute('has-two-buttons', '')
-      : this.parentElement?.removeAttribute('has-two-buttons');
+    this.hasThreeButtons =
+      (event.target as HTMLSlotElement)
+        .assignedNodes()
+        .filter(
+          (node) =>
+            node.nodeType === Node.ELEMENT_NODE &&
+            (node as Element).matches(selectorButtons)
+        ).length > 2;
     this.requestUpdate();
   }
 

packages/carbon-web-components/src/components/modal/modal.scss

@@ -46,6 +46,11 @@
   }
 }
 
+:host(#{$prefix}-modal[has-scrolling-content])
+  ::slotted(#{$prefix}-modal-body) {
+  @extend .#{$prefix}--modal-scroll-content;
+}
+
 :host(#{$prefix}-modal-header) {
   @extend .#{$prefix}--modal-header;
 }
@@ -140,16 +145,44 @@
 
 // Slug
 
+:host(#{$prefix}-modal[slug]) {
+  background-color: $ai-overlay;
+}
+
 :host(#{$prefix}-modal[slug]) .#{$prefix}--modal-container {
-  @include callout-gradient('');
+  @include callout-gradient('default', 0, 'layer');
 
+  border: 1px solid transparent;
   background-color: $layer;
+  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    0 4px 10px 2px $ai-drop-shadow;
 }
 
-:host(#{$prefix}-modal[slug][has-two-buttons]) .#{$prefix}--modal-container {
-  @include callout-gradient('default', 64px);
+:host(#{$prefix}-modal[slug][has-footer]) .#{$prefix}--modal-container {
+  @include callout-gradient('default', 64px, 'layer');
 
-  background-color: $layer;
+  box-shadow: inset 0 -80px 0 -16px $layer,
+    inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;
+}
+
+:host(#{$prefix}-modal[slug][has-scrolling-content]) {
+  ::slotted(#{$prefix}-modal-body) {
+    mask-image: linear-gradient(
+        to bottom,
+        $layer calc(100% - 80px),
+        transparent calc(100% - 48px),
+        transparent 100%
+      ),
+      linear-gradient(to left, $layer 0, 16px, transparent 16px),
+      linear-gradient(to right, $layer 0, 2px, transparent 2px),
+      linear-gradient(to top, $layer 0, 2px, transparent 2px);
+  }
+}
+
+:host(#{$prefix}-modal[slug])
+  .#{$prefix}--modal-content--overflow-indicator::before,
+:host(#{$prefix}-modal[slug]) .#{$prefix}--modal-content--overflow-indicator {
+  display: none;
 }
 
 :host(#{$prefix}-modal-header) ::slotted(#{$prefix}-slug) {

packages/carbon-web-components/src/components/modal/modal.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -216,6 +216,15 @@ class CDSModal extends HostListenerMixin(LitElement) {
     }
   }
 
+  /**
+   * Handles `slotchange` event.
+   */
+  private _handleSlotChange() {
+    this.querySelector(`${prefix}-modal-footer`)
+      ? this.setAttribute('has-footer', '')
+      : this.removeAttribute('has-footer');
+  }
+
   /**
    * Specify whether the Modal is displaying an alert, error or warning.
    * Should go hand in hand with the danger prop.
@@ -312,7 +321,7 @@ class CDSModal extends HostListenerMixin(LitElement) {
         role="${alert ? 'alert' : 'dialog'}"
         tabindex="-1"
         @click=${this._handleClickContainer}>
-        <slot></slot>
+        <slot @slotchange="${this._handleSlotChange}"></slot>
         ${hasScrollingContent
           ? html` <div class="cds--modal-content--overflow-indicator"></div> `
           : ``}

packages/carbon-web-components/src/components/slug/slug-example-story.ts

@@ -225,12 +225,13 @@ export const _Dropdown = () => {
     </div>`;
 };
 
-export const _Modal = () => {
+export const _Modal = (args) => {
+  const { hasScrollingContent, showButtons } = args?.['cds-modal'] ?? {};
   return html`
     <style>
       ${styles}
     </style>
-    <cds-modal open prevent-close>
+    <cds-modal open prevent-close ?has-scrolling-content="${hasScrollingContent}">
       <cds-modal-header>
         <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
         <cds-modal-close-button></cds-modal-close-button>
@@ -239,9 +240,25 @@ export const _Modal = () => {
       </cds-modal-header>
       <cds-modal-body>
         <cds-modal-body-content description>
-          Custom domains direct requests for your apps in this Cloud Foundry
-          organization to a URL that you own. A custom domain can be a shared
-          domain, a shared subdomain, or a shared domain and host.
+        <p style="margin-bottom: 1rem">
+        Custom domains direct requests for your apps in this Cloud Foundry
+        organization to a URL that you own. A custom domain can be a shared
+        domain, a shared subdomain, or a shared domain and host.
+      </p>
+      <p style="margin-bottom: 1rem">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+        eu nibh odio. Nunc a consequat est, id porttitor sapien. Proin vitae
+        leo vitae orci tincidunt auctor eget eget libero. Ut tincidunt
+        ultricies fringilla. Aliquam erat volutpat. Aenean arcu odio,
+        elementum vel vehicula vitae, porttitor ac lorem. Sed viverra elit
+        ac risus tincidunt fermentum. Ut sollicitudin nibh id risus ornare
+        ornare. Etiam gravida orci ut lectus dictum, quis ultricies felis
+        mollis. Mauris nec commodo est, nec faucibus nibh. Nunc commodo ante
+        quis pretium consectetur. Ut ac nisl vitae mi mattis vulputate a at
+        elit. Nullam porttitor ex eget mi feugiat mattis. Nunc non sodales
+        magna. Proin ornare tellus quis hendrerit egestas. Donec pharetra
+        leo nec molestie sollicitudin.
+      </p>
         </cds-modal-body-content>
         <cds-form-item>
           <cds-text-input placeholder="e.g. github.com" label="Domain name">
@@ -254,31 +271,40 @@ export const _Modal = () => {
             <cds-select-item value="us-east">US East</cds-select-item>
           </cds-select>
         </cds-form-item>
-
-        <cds-dropdown label="Dropdown" title-text="Dropdown">
-          <cds-dropdown-item value="one">One</cds-dropdown-item>
-          <cds-dropdown-item value="two">Two</cds-dropdown-item>
-        </cds-dropdown>
-
-        <cds-multi-select label="Multiselect" title-text="Multiselect">
-          <cds-multi-select-item value="option-1"
-            >Option 1</cds-multi-select-item
-          >
-          <cds-multi-select-item value="option-2"
-            >Option 2</cds-multi-select-item
-          >
-        </cds-multi-select>
+        <cds-form-item>
+        <cds-textarea label="Comments" >
+        </cds-form-item>
+      </cds-textarea>
       </cds-modal-body>
-      <cds-modal-footer>
-        <cds-modal-footer-button kind="secondary"
-          >Cancel</cds-modal-footer-button
-        >
-        <cds-modal-footer-button>Add</cds-modal-footer-button>
-      </cds-modal-footer>
+      ${
+        showButtons
+          ? html`
+              <cds-modal-footer>
+                <cds-modal-footer-button kind="secondary"
+                  >Cancel</cds-modal-footer-button
+                >
+                <cds-modal-footer-button>Add</cds-modal-footer-button>
+              </cds-modal-footer>
+            `
+          : ``
+      }
+
     </cds-modal>
   `;
 };
 
+_Modal.parameters = {
+  knobs: {
+    [`${prefix}-modal`]: () => ({
+      hasScrollingContent: boolean(
+        'hasScrollingContent (has-scrolling-content)',
+        true
+      ),
+      showButtons: boolean('Show or hide the modal buttons', true),
+    }),
+  },
+};
+
 export const _Multiselect = () => {
   return html` <style>
       ${styles}

packages/web-components/src/components/leaving-ibm/leaving-ibm-modal.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -40,7 +40,7 @@ class C4DLeavingIbmModal extends StableSelectorMixin(CDSModal) {
    */
   @HostListener('shadowRoot:slotchange')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleSlotChange = (event: Event) => {
+  private _handleShadowRootSlotChange = (event: Event) => {
     const { selectorHeading } = this.constructor as typeof C4DLeavingIbmModal;
     if (!this.hasAttribute('aria-labelledby')) {
       const headingNode = (event.target as HTMLSlotElement)