feat(components/lists): improve keyboard navigation on sort picker (#…

…2005) (#2040)
blackbaud · Feb 21, 2024 · 2c13741 · 2c13741
1 parent c3f5c12
commit 2c13741
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 63 deletions.
diff --git a/libs/components/lists/src/lib/modules/sort/sort-item.component.html b/libs/components/lists/src/lib/modules/sort/sort-item.component.html
@@ -1,14 +1,16 @@
-<div
-  class="sky-sort-item"
-  role="menuitemradio"
-  [attr.aria-checked]="isSelected | async"
-  [ngClass]="{ 'sky-sort-item-selected': (isSelected | async) }"
->
-  <button
-    type="button"
-    [ngClass]="{ 'sky-font-emphasized': (isSelected | async) }"
-    (click)="itemClicked()"
+<ng-template #itemTemplate>
+  <div
+    class="sky-sort-item"
+    role="menuitemradio"
+    [attr.aria-checked]="isSelected | async"
+    [ngClass]="{ 'sky-sort-item-selected': (isSelected | async) }"
   >
-    <ng-content />
-  </button>
-</div>
+    <button
+      type="button"
+      [ngClass]="{ 'sky-font-emphasized': (isSelected | async) }"
+      (click)="itemClicked()"
+    >
+      <ng-content />
+    </button>
+  </div>
+</ng-template>
diff --git a/libs/components/lists/src/lib/modules/sort/sort-item.component.scss b/libs/components/lists/src/lib/modules/sort/sort-item.component.scss
diff --git a/libs/components/lists/src/lib/modules/sort/sort-item.component.ts b/libs/components/lists/src/lib/modules/sort/sort-item.component.ts
@@ -9,6 +9,8 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  TemplateRef,
+  ViewChild,
 } from '@angular/core';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
@@ -21,7 +23,6 @@ let sortItemIdNumber = 0;
 
 @Component({
   selector: 'sky-sort-item',
-  styleUrls: ['./sort-item.component.scss'],
   templateUrl: './sort-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -42,6 +43,9 @@ export class SkySortItemComponent implements OnInit, OnChanges, OnDestroy {
     false,
   );
 
+  @ViewChild(TemplateRef<any>)
+  public itemTemplate?: TemplateRef<any> | null;
+
   #subscription: Subscription | undefined;
 
   #sortItemId: string | undefined;

diff --git a/libs/components/lists/src/lib/modules/sort/sort.component.html b/libs/components/lists/src/lib/modules/sort/sort.component.html
@@ -27,7 +27,11 @@
         #sortMenuHeading="skyId"
       ></sky-sort-menu-heading>
       <div *skyThemeIf="'default'" class="sky-sort-heading-divider"></div>
-      <ng-content />
+      <ng-container *ngFor="let item of sortItems">
+        <sky-dropdown-item>
+          <ng-container [ngTemplateOutlet]="item.itemTemplate!"></ng-container>
+        </sky-dropdown-item>
+      </ng-container>
     </sky-dropdown-menu>
   </sky-dropdown>
 </div>
diff --git a/libs/components/lists/src/lib/modules/sort/sort.component.scss b/libs/components/lists/src/lib/modules/sort/sort.component.scss
@@ -1,5 +1,7 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
+  as modernMixins;
 
 .sky-sort-heading-divider {
   margin: 0;
@@ -19,3 +21,60 @@
     display: inline;
   }
 }
+
+::ng-deep {
+  .sky-sort-item {
+    @include mixins.sky-dropdown-item();
+  }
+
+  .sky-sort-item-selected {
+    background-color: $sky-background-color-selected;
+    padding: 4px;
+    margin: 0;
+  }
+
+  @include mixins.sky-theme-modern {
+    .sky-sort-item {
+      margin: 0;
+      @include modernMixins.sky-theme-modern-btn-tab;
+      @include modernMixins.sky-theme-modern-btn-tab-dropdown-item;
+      padding: $sky-theme-modern-space-sm $sky-theme-modern-space-lg;
+
+      &:focus-within {
+        background-color: transparent;
+        box-shadow: $sky-theme-modern-elevation-3-shadow-size
+          $sky-theme-modern-elevation-3-shadow-color;
+        outline: solid 2px var(--sky-background-color-primary-dark);
+        outline-offset: -2px;
+      }
+
+      & button {
+        padding: 0;
+        color: $sky-text-color-deemphasized;
+        &:focus-visible {
+          outline: none;
+        }
+      }
+    }
+
+    .sky-sort-item-selected {
+      @include modernMixins.sky-theme-modern-btn-tab-selected-dropdown-item;
+      padding-left: calc(#{$sky-theme-modern-space-lg} - 3px);
+      background-color: inherit;
+
+      & button {
+        font-weight: $sky-theme-modern-text-weight-regular-value;
+        color: $sky-text-color-default;
+      }
+    }
+  }
+
+  @include mixins.sky-theme-modern-dark {
+    .sky-sort-item button {
+      color: $sky-theme-modern-mode-dark-font-deemphasized-color;
+    }
+    .sky-sort-item-selected button {
+      color: $sky-theme-modern-mode-dark-font-body-default-color;
+    }
+  }
+}
diff --git a/libs/components/lists/src/lib/modules/sort/sort.component.ts b/libs/components/lists/src/lib/modules/sort/sort.component.ts
@@ -1,14 +1,17 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ContentChildren,
   Input,
+  QueryList,
   inject,
 } from '@angular/core';
 import { SkyContentInfo, SkyContentInfoProvider } from '@skyux/core';
 import { SkyDropdownMessage, SkyDropdownMessageType } from '@skyux/popovers';
 
 import { Observable, Subject } from 'rxjs';
 
+import { SkySortItemComponent } from './sort-item.component';
 import { SkySortService } from './sort.service';
 
 @Component({
@@ -38,6 +41,9 @@ export class SkySortComponent {
 
   public dropdownController = new Subject<SkyDropdownMessage>();
 
+  @ContentChildren(SkySortItemComponent, { descendants: true })
+  public sortItems!: QueryList<SkySortItemComponent>;
+
   protected contentInfoObs: Observable<SkyContentInfo> | undefined;
 
   #contentInfoProvider = inject(SkyContentInfoProvider, { optional: true });