feat(modal): with slug

ariellalgilmore · Dec 14, 2023 · fdcde3a · fdcde3a
1 parent 8ac2562
commit fdcde3a
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 9 deletions.
diff --git a/packages/carbon-web-components/src/components/modal/modal-footer.ts b/packages/carbon-web-components/src/components/modal/modal-footer.ts
@@ -31,14 +31,15 @@ class CDSModalFooter extends LitElement {
    */
   private _handleSlotChange(event: Event) {
     const { selectorButtons } = this.constructor as typeof CDSModalFooter;
-    this.hasThreeButtons =
-      (event.target as HTMLSlotElement)
-        .assignedNodes()
-        .filter(
-          (node) =>
-            node.nodeType === Node.ELEMENT_NODE &&
-            (node as Element).matches(selectorButtons)
-        ).length > 2;
+    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.requestUpdate();
   }
 

diff --git a/packages/carbon-web-components/src/components/modal/modal-header.ts b/packages/carbon-web-components/src/components/modal/modal-header.ts
@@ -19,8 +19,48 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-modal-header`)
 class CDSModalHeader extends LitElement {
+  /**
+   * `true` if there is a slug.
+   */
+  protected _hasSlug = false;
+
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSModalHeader).slugItem
+            )
+          : false
+      );
+    if (hasContent.length > 0) {
+      this._hasSlug = Boolean(hasContent);
+      (hasContent[0] as HTMLElement).setAttribute('size', 'lg');
+    }
+    this.requestUpdate();
+  }
+
+  updated(){
+    if (this._hasSlug) {
+      this.parentElement.setAttribute('slug', '');
+    } else {
+      this.parentElement!.removeAttribute('slug');
+    }
+  }
+
   render() {
-    return html` <slot></slot> `;
+    return html` <slot></slot> <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>`;
+  }
+
+  /**
+   * A selector that will return the slug item.
+   */
+  static get slugItem() {
+    return `${prefix}-slug`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader

diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/layer' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 @use '@carbon/styles/scss/components/button' as *;
 
@@ -135,3 +136,25 @@
   height: $spacing-10;
   margin: 0;
 }
+
+// Slug
+
+:host(#{$prefix}-modal) .#{$prefix}--modal-container {
+  @include callout-gradient('default');
+
+  background-color: $layer;
+}
+
+:host(#{$prefix}-modal[has-two-buttons]) .#{$prefix}--modal-container {
+  // @include callout-gradient('default', 64px);
+
+  background-color: $layer;
+}
+
+
+:host(#{$prefix}-modal-header) ::slotted(#{$prefix}-slug){
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 3rem;
+}
+
diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts
@@ -220,6 +220,59 @@ export const _Dropdown = () => {
     </div>`;
 };
 
+export const _Modal = () => {
+  return html`
+    <style>${styles}</style>
+    <cds-modal open prevent-close>
+      <cds-modal-header>
+        <cds-slug alignment="bottom-left"> ${content}${actions}</cds-slug>
+
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-label>Account resources</cds-modal-label>
+        <cds-modal-heading>Add a custom domain</cds-modal-heading>
+      </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.
+        </cds-modal-body-content>
+        <cds-form-item>
+          <cds-text-input placeholder="e.g. github.com" label="Domain name">
+          </cds-text-input>
+        </cds-form-item>
+
+        <cds-form-item>
+          <cds-select placeholder="US South" label-text="Region">
+            <cds-select-item value="us-south">US South</cds-select-item>
+            <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-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>
+    </cds-modal>
+  `
+}
+
 export const _Multiselect = () => {
   return html` <style>
       ${styles}