fix: (CXSPA-9034) UnitLevelOrderHistory Truncation on applying text s…

…pacing settings (#19707)
SAP · Dec 16, 2024 · 29ee49e · 29ee49e
1 parent 77138fa
commit 29ee49e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/...on/unit-order/components/unit-level-order-history/unit-level-order-history.component.html b/...on/unit-order/components/unit-level-order-history/unit-level-order-history.component.html
@@ -168,10 +168,19 @@
                     class="cx-unit-level-order-history-value"
                   >
                     {{ order?.orgCustomer?.name }}
-                    <span class="text-ellipsis">{{
-                      order?.orgCustomer?.email
-                    }}</span></a
-                  >
+                    <ng-container
+                      *cxFeature="'a11yTruncatedTextUnitLevelOrderHistory'"
+                    >
+                      <span>{{ order?.orgCustomer?.email }}</span>
+                    </ng-container>
+                    <ng-container
+                      *cxFeature="'!a11yTruncatedTextUnitLevelOrderHistory'"
+                    >
+                      <span class="text-ellipsis">{{
+                        order?.orgCustomer?.email
+                      }}</span>
+                    </ng-container>
+                  </a>
                 </td>
                 <td class="cx-unit-level-order-history-unit">
                   <div class="cx-unit-level-order-history-label">

diff --git a/...tion/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts b/...tion/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts
@@ -38,6 +38,7 @@ export class UnitLevelOrderHistoryComponent implements OnDestroy {
     protected translation: TranslationService
   ) {
     useFeatureStyles('a11yTruncatedTextForResponsiveView');
+    useFeatureStyles('a11yTruncatedTextUnitLevelOrderHistory');
   }
 
   orders$: Observable<OrderHistoryList | undefined> = this.unitOrdersFacade

diff --git a/...tion/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss b/...tion/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss
@@ -23,6 +23,9 @@
 
   .cx-unit-level-order-history-filter-label-wrapper {
     width: 200px;
+    @include forFeature('a11yTruncatedTextUnitLevelOrderHistory') {
+      width: unset;
+    }
     border: 1px solid var(--cx-color-secondary);
     border-radius: 3px;
   }
@@ -106,7 +109,7 @@
           padding-bottom: 1.25rem;
         }
       }
-
+      // TODO: Remove following .text-ellipsis block once 'a11yTruncatedTextUnitLevelOrderHistory' feature flag is removed
       .text-ellipsis {
         @include media-breakpoint-up(md) {
           overflow: hidden;

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -405,6 +405,12 @@ export interface FeatureTogglesInterface {
    */
   a11yTruncatedTextStoreFinder?: boolean;
 
+  /**
+   * `UnitLevelOrderHistoryComponent` filter input label and table email address
+   * are not truncated
+   */
+  a11yTruncatedTextUnitLevelOrderHistory?: boolean;
+
   /**
    * When enabled focus outline on the close button inside `ProductImageZoomDialogComponent`
    * will be fully visible
@@ -942,6 +948,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yVisibleFocusOverflows: true,
   a11yTruncatedTextForResponsiveView: true,
   a11yTruncatedTextStoreFinder: false,
+  a11yTruncatedTextUnitLevelOrderHistory: false,
   a11ySemanticPaginationLabel: true,
   a11yPreventCartItemsFormRedundantRecreation: false,
   a11yPreventSRFocusOnHiddenElements: true,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -350,6 +350,7 @@ if (environment.cpq) {
         a11yVisibleFocusOverflows: true,
         a11yTruncatedTextForResponsiveView: true,
         a11yTruncatedTextStoreFinder: true,
+        a11yTruncatedTextUnitLevelOrderHistory: true,
         a11ySemanticPaginationLabel: true,
         a11yPreventCartItemsFormRedundantRecreation: true,
         a11yMyAccountLinkOutline: true,