test and fix dialogs affected by the removal of extended bootstrap cl…

…ases (#19803) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: kpawelczak <42094017+kpawelczak@users.noreply.github.com> Co-authored-by: Roman <129765378+rmch91@users.noreply.github.com>
SAP · Jan 7, 2025 · 010afb9 · 010afb9
1 parent dcf31e6
commit 010afb9
Show file tree

Hide file tree

Showing 23 changed files with 27 additions and 138 deletions.
diff --git a/feature-libs/cart/base/styles/components/_clear-cart-dialog.scss b/feature-libs/cart/base/styles/components/_clear-cart-dialog.scss
@@ -2,12 +2,7 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-clear-cart-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-clear-cart-container {
-      // @extend .modal-content;
-
       .cx-clear-cart-header {
         .cx-clear-cart-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@
       }
 
       .cx-clear-cart-body {
-        // @extend .modal-body;
-
         .clear-cart-msg {
           margin-bottom: 1.5rem;
         }

diff --git a/feature-libs/cart/import-export/styles/_import-entries-dialog.scss b/feature-libs/cart/import-export/styles/_import-entries-dialog.scss
@@ -2,11 +2,7 @@ cx-import-entries-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-import-entries-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-import-entries-container {
-      // @extend .modal-content;
       pointer-events: none;
 
       button,
@@ -32,7 +28,6 @@ cx-import-entries-dialog {
 
       cx-import-entries-form,
       cx-import-to-new-saved-cart-form {
-        // @extend .modal-body;
         background-color: var(--cx-color-inverse);
         .cx-import-entries-subtitle {
           font-weight: var(--cx-font-weight-bold);
@@ -95,8 +90,6 @@ cx-import-entries-dialog {
       }
 
       cx-import-entries-summary {
-        // @extend .modal-body;
-
         ul {
           margin: -0.75rem 0 1.5rem;
           overflow: auto;

diff --git a/feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss b/feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss
@@ -2,12 +2,7 @@ cx-saved-cart-form-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-saved-cart-form-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-saved-cart-form-container {
-      // @extend .modal-content;
-
       .cx-saved-cart-form-header {
         .cx-saved-cart-form-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@ cx-saved-cart-form-dialog {
       }
 
       .cx-saved-cart-form-body {
-        // @extend .modal-body;
-
         .cx-saved-cart-form-row {
           margin-bottom: 1.5rem;
 

diff --git a/feature-libs/customer-ticketing/styles/components/_customer-ticketing-dialog.scss b/feature-libs/customer-ticketing/styles/components/_customer-ticketing-dialog.scss
@@ -4,12 +4,7 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-customer-ticket-form-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-customer-ticket-form-container {
-      // @extend .modal-content;
-
       .cx-customer-ticket-form-header {
         .cx-customer-ticket-form-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -19,7 +14,6 @@
       }
 
       .cx-customer-ticket-form-body {
-        // @extend .modal-body;
         display: flex;
         flex-direction: column;
         gap: 1rem;

diff --git a/...ls/order-detail-items/consignment-tracking/tracking-events/tracking-events.component.html b/...ls/order-detail-items/consignment-tracking/tracking-events/tracking-events.component.html
@@ -1,5 +1,5 @@
 <div
-  class="modal-dialog modal-dialog-centered modal-lgcx-consignment-tracking-dialog"
+  class="modal-dialog modal-dialog-centered modal-lg cx-consignment-tracking-dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
 >
@@ -8,7 +8,7 @@
       *ngIf="tracking$ | async as consignmentTracking; else loading"
     >
       <!-- Modal Header -->
-      <div class="cx-modal-header">
+      <div class="modal-header cx-modal-header">
         <div class="modal-title cx-consignment-tracking-title">
           {{ 'orderDetails.consignmentTracking.dialog.header' | cxTranslate }}
         </div>

diff --git a/...nishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html b/...nishment-order-cancellation-dialog/replenishment-order-cancellation-dialog.component.html
@@ -1,12 +1,12 @@
 <div
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
-  class="modal-dialog modal-dialog-centered modal-sm cx-cancel-replenishment-dialog-foreground"
+  class="modal-dialog modal-dialog-centered modal-sm"
   role="dialog"
   aria-labelledby="dialogTitle"
 >
-  <div class="modal-content cx-cancel-replenishment-dialog-content">
-    <div class="modal-header cx-cancel-replenishment-dialog-header">
+  <div class="modal-content">
+    <div class="modal-header">
       <h3 id="dialogTitle">
         {{ 'orderDetails.cancelReplenishment.title' | cxTranslate }}
       </h3>
@@ -26,7 +26,7 @@ <h3 id="dialogTitle">
       {{ 'orderDetails.cancelReplenishment.description' | cxTranslate }}
     </div>
 
-    <div class="modal-body cx-cancel-replenishment-dialog-body">
+    <div class="modal-body">
       <div class="cx-cancel-replenishment-btns row">
         <div class="col-md-6">
           <button

diff --git a/feature-libs/order/styles/components/order-history/_consignment-tracking.scss b/feature-libs/order/styles/components/order-history/_consignment-tracking.scss
@@ -6,13 +6,7 @@
 
 %cx-tracking-events {
   .cx-consignment-tracking-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-lg;
-
     .cx-consignment-tracking-container {
-      // @extend .modal-content;
-
       .cx-consignment-tracking-title {
         @include type('3');
       }

diff --git a/...e-libs/order/styles/components/replenishment-order/_replenishment-order-cancellation.scss b/...e-libs/order/styles/components/replenishment-order/_replenishment-order-cancellation.scss
@@ -22,30 +22,10 @@
   color: var(--cx-color-text);
   background-color: rgba(0, 0, 0, 0.5);
 
-  .cx-cancel-replenishment-dialog-foreground {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-sm;
-
-    .cx-cancel-replenishment-dialog-content {
-      // @extend .modal-content;
-
-      .cx-cancel-replenishment-dialog {
-        &-header {
-          // @extend .modal-header;
-        }
-
-        &-description {
-          padding-top: 10px;
-          padding-inline-start: 25px;
-          padding-inline-end: 25px;
-          padding-bottom: 0;
-        }
-
-        &-body {
-          // @extend .modal-body;
-        }
-      }
-    }
+  .cx-cancel-replenishment-dialog-description {
+    padding-top: 10px;
+    padding-inline-start: 25px;
+    padding-inline-end: 25px;
+    padding-bottom: 0;
   }
 }
diff --git a/feature-libs/pickup-in-store/styles/_pickup-option-dialog.scss b/feature-libs/pickup-in-store/styles/_pickup-option-dialog.scss
@@ -4,8 +4,6 @@
   .cx-pickup-option-dialog {
     align-items: normal;
 
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
     @include media-breakpoint-down(md) {
       height: 100%;
     }
@@ -15,7 +13,6 @@
         height: 100%;
       }
 
-      // @extend .modal-content;
       .cx-dialog-header {
         margin-bottom: 0;
         padding-bottom: 0;

diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss
@@ -5,10 +5,6 @@ cx-product-image-zoom-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-image-zoom-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-lg;
-
     @include media-breakpoint-up(md) {
       // !important is required to override bootstrap
       max-width: 90vw !important;
@@ -25,11 +21,9 @@ cx-product-image-zoom-dialog {
     }
 
     .cx-dialog-content {
-      // @extend .modal-content;
       height: 100%;
 
       .cx-dialog-header {
-        // @extend .modal-header;
         padding: 1.5rem 1.75rem 0.85rem;
         border-bottom: none;
         max-height: 76px;
@@ -53,7 +47,6 @@ cx-product-image-zoom-dialog {
         }
       }
       .cx-dialog-body {
-        // @extend .modal-body;
         background-color: var(--cx-color-inverse);
         height: calc(100% - 76px);
 

diff --git a/...ss-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html b/...ss-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.html
@@ -7,7 +7,7 @@
 >
   <div
     *ngIf="data$ | async as data"
-    class="modal-contentcx-suggested-addresses-container"
+    class="modal-content cx-suggested-addresses-container"
   >
     <div class="cx-suggested-addresses-header cx-modal-header">
       <h3
@@ -36,7 +36,7 @@
         </span>
       </button>
     </div>
-    <div class="modal-body cx-suggested-addresses-body" ngForm>
+    <div class="modal-body" ngForm>
       <div class="cx-dialog-info">
         <p>
           {{ 'addressSuggestion.ensureAccuracySuggestChange' | cxTranslate }}

diff --git a/...omponents/close-account/components/close-account-modal/close-account-modal.component.html b/...omponents/close-account/components/close-account-modal/close-account-modal.component.html
@@ -29,7 +29,7 @@ <h3 class="cx-close-account-modal-title">
       </div>
 
       <ng-template #loaded>
-        <div class="modal-body cx-close-account-modal-body">
+        <div class="modal-body">
           <p class="cx-confirmation">
             {{ 'closeAccount.confirmAccountClosureMessage' | cxTranslate }}
           </p>

diff --git a/feature-libs/user/profile/styles/_close-account-modal.scss b/feature-libs/user/profile/styles/_close-account-modal.scss
@@ -1,11 +1,6 @@
 %cx-close-account-modal {
   .cx-close-account-modal {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-close-account-modal-container {
-      // @extend .modal-content;
-
       .cx-close-account-modal-header {
         display: flex;
         justify-content: space-between;
@@ -14,10 +9,6 @@
         }
       }
 
-      .cx-close-account-modal-body {
-        // @extend .modal-body;
-      }
-
       .cx-confirmation {
         margin-bottom: 0px;
       }

diff --git a/feature-libs/user/profile/styles/_suggested-addresses-dialog.scss b/feature-libs/user/profile/styles/_suggested-addresses-dialog.scss
@@ -1,12 +1,6 @@
 %cx-suggested-addresses-dialog {
   .cx-suggested-addresses-dialog {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-    // @extend .modal-lg;
-
     .cx-suggested-addresses-container {
-      // @extend .modal-content;
-
       .cx-suggested-addresses-header {
         display: flex;
         justify-content: space-between;
@@ -16,10 +10,6 @@
         }
       }
 
-      .cx-suggested-addresses-body {
-        // @extend .modal-body;
-      }
-
       .cx-suggested-addresses-footer {
         .cx-dialog-buttons {
           &:focus {

diff --git a/integration-libs/opf/base/components/opf-error-modal/opf-error-modal.component.html b/integration-libs/opf/base/components/opf-error-modal/opf-error-modal.component.html
@@ -8,7 +8,7 @@
       class="modal-content cx-opf-error-modal-container"
       *ngIf="opfErrorDialogOptions$ | async as opfErrorDialogOptions"
     >
-      <div class="modal-body cx-opf-error-modal-body">
+      <div class="modal-body">
         <p class="cx-confirmation">
           {{ opfErrorDialogOptions?.message }}
         </p>

diff --git a/integration-libs/opf/base/styles/components/_opf-error-modal.scss b/integration-libs/opf/base/styles/components/_opf-error-modal.scss
@@ -2,12 +2,7 @@
 
 %cx-opf-error-modal {
   .cx-opf-error-modal {
-    // @extend .modal-dialog;
-    // @extend .modal-dialog-centered;
-
     .cx-opf-error-modal-container {
-      // @extend .modal-content;
-
       .cx-opf-error-modal-header {
         display: flex;
         justify-content: space-between;
@@ -16,10 +11,6 @@
         }
       }
 
-      .cx-opf-error-modal-body {
-        // @extend .modal-body;
-      }
-
       .cx-confirmation {
         margin-bottom: 0px;
       }

diff --git a/...ms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html b/...ms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.html
@@ -1,11 +1,11 @@
 <div
-  class="cx-coupon-dialog"
+  class="modal-dialog modal-dialog-centered cx-coupon-dialog"
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-coupon-container">
+  <div class="modal-content cx-coupon-container">
     <!-- Modal Header -->
 
     <div class="cx-dialog-header modal-header">

diff --git a/...uct/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html b/...uct/stock-notification/stock-notification-dialog/stock-notification-dialog.component.html
@@ -1,11 +1,11 @@
 <div
-  class="cx-stock-notification-dialog"
+  class="modal-dialog modal-dialog-centered modal-lg"
   role="dialog"
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-stock-notification-container">
+  <div class="modal-content">
     <div class="cx-dialog-header cx-modal-header">
       <h3
         *cxFeature="'a11yDialogsHeading'"