fix(modal): slug without close-button

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

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/packages/carbon-web-components/src/components/modal/modal-close-button.ts b/packages/carbon-web-components/src/components/modal/modal-close-button.ts
@@ -31,6 +31,10 @@ class CDSModalCloseButton extends FocusMixin(LitElement) {
   @property({ attribute: 'close-button-label' })
   closeButtonLabel = 'Close';
 
+  updated() {
+    this.parentElement.setAttribute('close-button', '');
+  }
+
   render() {
     const { closeButtonLabel } = this;
     return html`

diff --git a/packages/carbon-web-components/src/components/modal/modal-footer.ts b/packages/carbon-web-components/src/components/modal/modal-footer.ts
@@ -32,14 +32,16 @@ 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;
+      .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')
+    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
@@ -44,7 +44,7 @@ class CDSModalHeader extends LitElement {
     this.requestUpdate();
   }
 
-  updated(){
+  updated() {
     if (this._hasSlug) {
       this.parentElement.setAttribute('slug', '');
     } else {
@@ -53,7 +53,8 @@ class CDSModalHeader extends LitElement {
   }
 
   render() {
-    return html` <slot></slot> <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>`;
+    return html` <slot></slot>
+      <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>`;
   }
 
   /**

diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -151,10 +151,12 @@
   background-color: $layer;
 }
 
-
-:host(#{$prefix}-modal-header) ::slotted(#{$prefix}-slug){
+:host(#{$prefix}-modal-header) ::slotted(#{$prefix}-slug) {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-end: 3rem;
+  inset-inline-end: 0;
 }
 
+:host(#{$prefix}-modal-header[close-button]) ::slotted(#{$prefix}-slug) {
+  inset-inline-end: $spacing-09;
+}
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
@@ -222,11 +222,12 @@ export const _Dropdown = () => {
 
 export const _Modal = () => {
   return html`
-    <style>${styles}</style>
+    <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>
@@ -270,8 +271,8 @@ export const _Modal = () => {
         <cds-modal-footer-button>Add</cds-modal-footer-button>
       </cds-modal-footer>
     </cds-modal>
-  `
-}
+  `;
+};
 
 export const _Multiselect = () => {
   return html` <style>