From efda0a5ef962c00a5bdf43663183502120f8e8bb Mon Sep 17 00:00:00 2001 From: Corey Archer Date: Tue, 6 Feb 2024 16:42:24 -0500 Subject: [PATCH 1/3] feat(components/lists): improve keyboard navigation on sort picker --- .../lib/modules/sort/sort-item.component.html | 28 ++++++----- .../lib/modules/sort/sort-item.component.scss | 48 ------------------- .../lib/modules/sort/sort-item.component.ts | 5 ++ .../src/lib/modules/sort/sort.component.html | 6 ++- .../src/lib/modules/sort/sort.component.scss | 48 +++++++++++++++++++ .../src/lib/modules/sort/sort.component.ts | 6 +++ 6 files changed, 79 insertions(+), 62 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 index a64f97658a..641dad0351 100644 --- 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 @@ -
- -
+ + + 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 index 325cf5f315..e69de29bb2 100644 --- a/libs/components/lists/src/lib/modules/sort/sort-item.component.scss +++ b/libs/components/lists/src/lib/modules/sort/sort-item.component.scss @@ -1,48 +0,0 @@ -@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-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; - - & button { - padding: 0; - color: $sky-text-color-deemphasized; - } - } - - .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-item.component.ts b/libs/components/lists/src/lib/modules/sort/sort-item.component.ts index 8315e1b28b..5112b771e5 100644 --- 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'; @@ -42,6 +44,9 @@ export class SkySortItemComponent implements OnInit, OnChanges, OnDestroy { false, ); + @ViewChild(TemplateRef) + public itemTemplate?: TemplateRef | 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 index 796ab346d8..3057bae27d 100644 --- 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" >
- + + + + + diff --git a/libs/components/lists/src/lib/modules/sort/sort.component.scss b/libs/components/lists/src/lib/modules/sort/sort.component.scss index 881ad99e55..09b464c64f 100644 --- 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,49 @@ 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; + + & button { + padding: 0; + color: $sky-text-color-deemphasized; + } + } + + .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 index cb87a6ce2d..c597aac10b 100644 --- a/libs/components/lists/src/lib/modules/sort/sort.component.ts +++ b/libs/components/lists/src/lib/modules/sort/sort.component.ts @@ -1,7 +1,9 @@ import { ChangeDetectionStrategy, Component, + ContentChildren, Input, + QueryList, inject, } from '@angular/core'; import { SkyContentInfo, SkyContentInfoProvider } from '@skyux/core'; @@ -9,6 +11,7 @@ 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(); + @ContentChildren(SkySortItemComponent, { descendants: true }) + public sortItems!: QueryList; + protected contentInfoObs: Observable | undefined; #contentInfoProvider = inject(SkyContentInfoProvider, { optional: true }); From e29035e180ad1c23b2f3afb987e6434331dec9e4 Mon Sep 17 00:00:00 2001 From: Corey Archer Date: Wed, 7 Feb 2024 17:50:39 -0500 Subject: [PATCH 2/3] apply tab dropdown focus styles as focus parent, remove outline --- .../lists/src/lib/modules/sort/sort.component.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/libs/components/lists/src/lib/modules/sort/sort.component.scss b/libs/components/lists/src/lib/modules/sort/sort.component.scss index 09b464c64f..c02a5d7450 100644 --- a/libs/components/lists/src/lib/modules/sort/sort.component.scss +++ b/libs/components/lists/src/lib/modules/sort/sort.component.scss @@ -40,9 +40,20 @@ @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; + } } } From 46667191efd8807fd5d27c8d7f51869801cbfbee Mon Sep 17 00:00:00 2001 From: Corey Archer Date: Wed, 21 Feb 2024 14:59:27 -0500 Subject: [PATCH 3/3] remove empty stylesheet --- .../lists/src/lib/modules/sort/sort-item.component.scss | 0 .../components/lists/src/lib/modules/sort/sort-item.component.ts | 1 - 2 files changed, 1 deletion(-) delete mode 100644 libs/components/lists/src/lib/modules/sort/sort-item.component.scss 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 deleted file mode 100644 index e69de29bb2..0000000000 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 index 5112b771e5..ee64a3e925 100644 --- a/libs/components/lists/src/lib/modules/sort/sort-item.component.ts +++ b/libs/components/lists/src/lib/modules/sort/sort-item.component.ts @@ -23,7 +23,6 @@ let sortItemIdNumber = 0; @Component({ selector: 'sky-sort-item', - styleUrls: ['./sort-item.component.scss'], templateUrl: './sort-item.component.html', changeDetection: ChangeDetectionStrategy.OnPush, })