fix: (CXSPA-1051) - Stop sorting dropdown from truncating options (#1…

…8423) Co-authored-by: Piotr Bartkowiak <[email protected]>
SAP · Mar 27, 2024 · bc7f0ce · bc7f0ce
1 parent 07506bb
commit bc7f0ce
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts
@@ -97,6 +97,7 @@ if (!environment.production) {
         a11yNavigationUiKeyboardControls: true,
         a11yOrderConfirmationHeadingOrder: true,
         a11yStarRating: true,
+        a11ySortingOptionsTruncation: true,
         a11yExpandedFocusIndicator: true,
         a11yCheckoutDeliveryFocus: true,
       },

diff --git a/...cts/storefrontlib/cms-components/product/product-list/container/product-list.component.ts b/...cts/storefrontlib/cms-components/product/product-list/container/product-list.component.ts
@@ -9,8 +9,9 @@ import {
   GlobalMessageService,
   GlobalMessageType,
   ProductSearchPage,
+  useFeatureStyles,
 } from '@spartacus/core';
-import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription, combineLatest } from 'rxjs';
 import { filter, skip, take } from 'rxjs/operators';
 import { PageLayoutService } from '../../../../cms-structure/page/index';
 import { ViewConfig } from '../../../../shared/config/view-config';
@@ -37,7 +38,9 @@ export class ProductListComponent implements OnInit, OnDestroy {
     private productListComponentService: ProductListComponentService,
     private globalMessageService: GlobalMessageService,
     public scrollConfig: ViewConfig
-  ) {}
+  ) {
+    useFeatureStyles('a11ySortingOptionsTruncation');
+  }
 
   ngOnInit(): void {
     this.isInfiniteScroll = this.scrollConfig.view?.infiniteScroll?.active;

diff --git a/projects/storefrontstyles/scss/components/product/list/_product-list.scss b/projects/storefrontstyles/scss/components/product/list/_product-list.scss
@@ -36,6 +36,15 @@
       border-width: 1px 0 0 0;
       padding: 25px 0 0px 0;
     }
+
+    // TODO: (CXSPA-5926) Remove feaure flag next major release
+    @include forFeature('a11ySortingOptionsTruncation') {
+      & ng-select {
+        @include media-breakpoint-up(lg) {
+          width: 14rem;
+        }
+      }
+    }
   }
 
   .cx-pagination {