From 040deea3478e9fc2ae319ed0e25e549ee8cc8024 Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Fri, 13 Oct 2023 10:15:53 +0200 Subject: [PATCH 1/8] fix(dropdown,listbox,listbox-multi): fixing issues with clicking options and focus ring with mouse --- .../src/components/stable/gux-dropdown/gux-dropdown.scss | 4 ++-- .../gux-listbox-multi/gux-option-multi/gux-option-multi.scss | 5 +++-- .../src/components/stable/gux-listbox/gux-listbox.scss | 2 +- .../stable/gux-listbox/options/option-defaults.scss | 5 +++-- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss index ea781c453..14da87895 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss @@ -147,7 +147,7 @@ border-radius: var(--gse-ui-formControl-input-borderRadius); &:focus-visible, - &:focus-within { + &:focus-within:has(:focus-visible) { @include gux-input-focus-border; } @@ -186,7 +186,7 @@ border-radius: var(--gse-ui-formControl-input-borderRadius); &:focus-visible, - &:focus-within { + &:focus-within:has(:focus-visible) { @include gux-input-focus-border; } } diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss index bb76a7e45..f46073670 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss @@ -38,7 +38,8 @@ @include mixins.gux-disabled-pointer; } - &:host(.gux-selected) { + &:host(.gux-selected), + &:host(:active) { font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); font-size: var(--gse-ui-menu-option-label-active-text-fontSize); font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); @@ -52,7 +53,7 @@ &:host(.gux-active) { border-radius: var(--gse-semantic-focusRing-cornerRadius); - outline: var(--gse-ui-menu-option-focus-border-width) + border: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color); } diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss index 0376bcc17..0d2369e3d 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss @@ -15,7 +15,7 @@ var(--gse-ui-menu-boxShadow-color); } -:host(:focus) { +:host(:focus-visible) { outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus); outline-offset: var(--gse-semantic-focusRing-offset); diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss index 48936819f..44c0c9517 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss @@ -31,7 +31,8 @@ opacity: var(--gse-ui-menu-option-disabled-opacity); } - :host(.gux-selected) { + :host(.gux-selected), + :host(:active) { font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); font-size: var(--gse-ui-menu-option-label-active-text-fontSize); font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); @@ -41,7 +42,7 @@ :host(.gux-active) { border-radius: var(--gse-semantic-focusRing-cornerRadius); - outline: var(--gse-ui-menu-option-focus-border-width) + border: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color); } From 30a4bb283af4e3fc6e6ff526642ae02a96d4abea Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Fri, 13 Oct 2023 15:30:30 +0200 Subject: [PATCH 2/8] chore(dropdown,listbox,listbox-multi): showing focus ring only on keyboard navigation --- .../gux-option-multi/gux-option-multi.scss | 8 +++++- .../stable/gux-listbox/gux-listbox.service.ts | 15 ++--------- .../stable/gux-listbox/gux-listbox.tsx | 12 +++++---- .../options/gux-option/gux-option.tsx | 25 +------------------ .../gux-listbox/options/gux-option/readme.md | 1 - .../gux-listbox/options/option-defaults.scss | 12 ++++++--- 6 files changed, 26 insertions(+), 47 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss index f46073670..9775b1bca 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss @@ -38,12 +38,18 @@ @include mixins.gux-disabled-pointer; } - &:host(.gux-selected), &:host(:active) { font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); font-size: var(--gse-ui-menu-option-label-active-text-fontSize); font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); line-height: var(--gse-ui-menu-option-label-active-text-lineHeight); + } + + &:host(.gux-selected) { + font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); + font-size: var(--gse-ui-menu-option-label-active-text-fontSize); + font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); + line-height: var(--gse-ui-menu-option-label-active-text-lineHeight); background-color: var(--gse-ui-menu-option-selected-backgroundColor); .gux-checkbox-container > path { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.service.ts b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.service.ts index fcb848859..6c8f2b7f6 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.service.ts +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.service.ts @@ -8,12 +8,6 @@ export function getListOptions( }); } -function getHoveredOption(list: HTMLGuxListboxElement): ListboxOptionElement { - return getListOptions(list).find( - option => option.hovered && !option.disabled && !option.filtered - ); -} - function getFirstSelectedOption( list: HTMLGuxListboxElement ): ListboxOptionElement { @@ -100,7 +94,7 @@ function getLastOption(list: HTMLGuxListboxElement): ListboxOptionElement { return lastOption; } -function hasActiveOption(list: HTMLGuxListboxElement): boolean { +export function hasActiveOption(list: HTMLGuxListboxElement): boolean { return Boolean(getActiveOption(list)); } @@ -134,12 +128,7 @@ export function clearActiveOptions(list: HTMLGuxListboxElement): void { } export function setInitialActiveOption(list: HTMLGuxListboxElement) { - setActiveOption( - list, - getHoveredOption(list) || - getFirstSelectedOption(list) || - getFirstOption(list) - ); + setActiveOption(list, getFirstSelectedOption(list) || getFirstOption(list)); } export function hasPreviousOption(list: HTMLGuxListboxElement): boolean { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.tsx index 981154763..8cb9ee8d6 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.tsx @@ -16,6 +16,7 @@ import { actOnActiveOption, clearActiveOptions, goToOption, + hasActiveOption, hasPreviousOption, hasNextOption, onClickedOption, @@ -83,11 +84,6 @@ export class GuxListbox { @Event() internallistboxoptionsupdated: EventEmitter; - @Listen('focus') - onFocus(): void { - setInitialActiveOption(this.root); - } - @Listen('blur') onBlur(): void { clearActiveOptions(this.root); @@ -95,6 +91,12 @@ export class GuxListbox { @Listen('keydown') onKeydown(event: KeyboardEvent): void { + if (!hasActiveOption(this.root)) { + event.preventDefault(); + setInitialActiveOption(this.root); + return; + } + switch (event.key) { case 'Enter': event.preventDefault(); diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx index 273385826..e7c676997 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/gux-option.tsx @@ -1,13 +1,4 @@ -import { - Component, - Element, - h, - Host, - JSX, - Listen, - Prop, - Watch -} from '@stencil/core'; +import { Component, Element, h, Host, JSX, Prop, Watch } from '@stencil/core'; import { randomHTMLId } from '@utils/dom/random-html-id'; @@ -40,19 +31,6 @@ export class GuxOption { @Prop() filtered: boolean = false; - @Prop({ mutable: true }) - hovered: boolean = false; - - @Listen('mouseenter') - onmouseenter() { - this.hovered = true; - } - - @Listen('mouseleave') - onMouseleave() { - this.hovered = false; - } - @Watch('active') handleActive(active: boolean) { if (active) { @@ -82,7 +60,6 @@ export class GuxOption { 'gux-active': this.active, 'gux-disabled': this.disabled, 'gux-filtered': this.filtered, - 'gux-hovered': this.hovered, 'gux-selected': this.selected }} aria-selected={this.getAriaSelected()} diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/readme.md b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/readme.md index ccabdc189..444170ce7 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/readme.md +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/gux-option/readme.md @@ -10,7 +10,6 @@ | `active` | `active` | | `boolean` | `false` | | `disabled` | `disabled` | | `boolean` | `false` | | `filtered` | `filtered` | | `boolean` | `false` | -| `hovered` | `hovered` | | `boolean` | `false` | | `selected` | `selected` | | `boolean` | `false` | | `value` | `value` | | `string` | `undefined` | diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss index 44c0c9517..dd8a108af 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss @@ -31,8 +31,7 @@ opacity: var(--gse-ui-menu-option-disabled-opacity); } - :host(.gux-selected), - :host(:active) { + :host(.gux-selected) { font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); font-size: var(--gse-ui-menu-option-label-active-text-fontSize); font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); @@ -40,6 +39,13 @@ background: var(--gse-ui-menu-option-selected-backgroundColor); } + :host(:active:not(:disabled)) { + font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); + font-size: var(--gse-ui-menu-option-label-active-text-fontSize); + font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); + line-height: var(--gse-ui-menu-option-label-active-text-lineHeight); + } + :host(.gux-active) { border-radius: var(--gse-semantic-focusRing-cornerRadius); border: var(--gse-ui-menu-option-focus-border-width) @@ -47,7 +53,7 @@ var(--gse-ui-menu-option-focus-border-color); } - :host(.gux-hovered:not(:disabled)) { + :host(:hover:not(:disabled)) { background: var(--gse-ui-menu-option-hover-backgroundColor); } From 56e0978026547a3c7db57ae82846bd3ece586d8d Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Mon, 16 Oct 2023 11:15:45 +0200 Subject: [PATCH 3/8] chore(dropdown-multi): showing focus ring only on keyboard navigation --- .../stable/gux-dropdown-multi/gux-dropdown-multi.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss index f2123a5b2..719136298 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss @@ -148,7 +148,7 @@ border-radius: var(--gse-ui-formControl-input-borderRadius); &:focus-visible, - &:focus-within { + &:focus-within:has(:focus-visible) { @include focus.gux-focus-ring; } @@ -187,7 +187,7 @@ border-radius: var(--gse-ui-formControl-input-borderRadius); &:focus-visible, - &:focus-within { + &:focus-within:has(:focus-visible) { @include focus.gux-focus-ring; } } From db414e50f278d58ddbc998bbfbe86164ae71ac67 Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Mon, 16 Oct 2023 11:18:32 +0200 Subject: [PATCH 4/8] chore(dropdown-multi): showing focus ring only on keyboard navigation --- .../stable/gux-dropdown-multi/gux-dropdown-multi.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss index 719136298..4517fb0a2 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss @@ -147,8 +147,7 @@ var(--gse-ui-formControl-input-active-border-color); border-radius: var(--gse-ui-formControl-input-borderRadius); - &:focus-visible, - &:focus-within:has(:focus-visible) { + &:focus-visible { @include focus.gux-focus-ring; } @@ -186,8 +185,7 @@ var(--gse-ui-formControl-input-default-border-color); border-radius: var(--gse-ui-formControl-input-borderRadius); - &:focus-visible, - &:focus-within:has(:focus-visible) { + &:focus-visible { @include focus.gux-focus-ring; } } From f6ba96c2fd507239b15ce26872e9f98aabfbcfce Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Mon, 16 Oct 2023 11:45:06 +0200 Subject: [PATCH 5/8] chore(dropdown-multi): showing focus ring only on keyboard navigation --- .../gux-dropdown-multi/gux-dropdown-multi.scss | 6 ++++-- .../gux-listbox-multi/gux-listbox-multi.tsx | 15 ++++++++------- .../gux-option-multi/gux-option-multi.scss | 4 ++-- .../gux-option-multi/gux-option-multi.tsx | 15 --------------- .../gux-listbox-multi/gux-option-multi/readme.md | 1 - .../stable/gux-listbox/options/option-types.ts | 1 - 6 files changed, 14 insertions(+), 28 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss index 4517fb0a2..719136298 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss @@ -147,7 +147,8 @@ var(--gse-ui-formControl-input-active-border-color); border-radius: var(--gse-ui-formControl-input-borderRadius); - &:focus-visible { + &:focus-visible, + &:focus-within:has(:focus-visible) { @include focus.gux-focus-ring; } @@ -185,7 +186,8 @@ var(--gse-ui-formControl-input-default-border-color); border-radius: var(--gse-ui-formControl-input-borderRadius); - &:focus-visible { + &:focus-visible, + &:focus-within:has(:focus-visible) { @include focus.gux-focus-ring; } } diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.tsx index 518ba6eff..44d066f9a 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.tsx @@ -24,7 +24,8 @@ import { setInitialActiveOption, setLastOptionActive, setNextOptionActive, - setPreviousOptionActive + setPreviousOptionActive, + hasActiveOption } from '../gux-listbox/gux-listbox.service'; import { buildI18nForComponent, GetI18nValue } from '../../../i18n'; @@ -81,11 +82,6 @@ export class GuxListboxMulti { @Prop({ mutable: true }) hasExactMatch: boolean = false; - @Listen('focus') - onFocus(): void { - setInitialActiveOption(this.root); - } - @Listen('blur') onBlur(): void { clearActiveOptions(this.root); @@ -98,6 +94,12 @@ export class GuxListboxMulti { @Listen('keydown') onKeydown(event: KeyboardEvent): void { + if (!hasActiveOption(this.root)) { + event.preventDefault(); + setInitialActiveOption(this.root); + return; + } + switch (event.key) { case 'Enter': event.preventDefault(); @@ -230,7 +232,6 @@ export class GuxListboxMulti { private updateOnSlotChange(): void { this.setListboxOptions(); this.updateListboxOptions(); - setInitialActiveOption(this.root); } private getOptionCreateElement(): void { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss index 9775b1bca..768f9e607 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss @@ -38,7 +38,7 @@ @include mixins.gux-disabled-pointer; } - &:host(:active) { + &:host(:active:not(:disabled)) { font-family: var(--gse-ui-menu-option-label-active-text-fontFamily); font-size: var(--gse-ui-menu-option-label-active-text-fontSize); font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight); @@ -64,7 +64,7 @@ var(--gse-ui-menu-option-focus-border-color); } - &:host(.gux-hovered:not([disabled])) { + &:host(:hover:not([disabled])) { background-color: var(--gse-ui-menu-option-hover-backgroundColor); &:host(.gux-selected) { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx index a81de9b95..364d8904c 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.tsx @@ -6,7 +6,6 @@ import { h, Host, JSX, - Listen, Prop, Watch } from '@stencil/core'; @@ -46,22 +45,9 @@ export class GuxOptionMulti { @Prop() filtered: boolean = false; - @Prop({ mutable: true }) - hovered: boolean = false; - @Prop() custom: boolean = false; - @Listen('mouseenter') - onmouseenter() { - this.hovered = true; - } - - @Listen('mouseleave') - onMouseleave() { - this.hovered = false; - } - @Event() guxremovecustomoption: EventEmitter; @@ -140,7 +126,6 @@ export class GuxOptionMulti { 'gux-active': this.active, 'gux-disabled': this.disabled, 'gux-filtered': this.filtered, - 'gux-hovered': this.hovered, 'gux-selected': this.selected }} aria-selected={this.selected.toString()} diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/readme.md b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/readme.md index e1b08303e..bce8a6fa0 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/readme.md +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/readme.md @@ -11,7 +11,6 @@ | `custom` | `custom` | | `boolean` | `false` | | `disabled` | `disabled` | | `boolean` | `false` | | `filtered` | `filtered` | | `boolean` | `false` | -| `hovered` | `hovered` | | `boolean` | `false` | | `selected` | `selected` | | `boolean` | `false` | | `value` | `value` | | `string` | `undefined` | diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-types.ts b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-types.ts index 19dcc647e..142418d1b 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-types.ts +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-types.ts @@ -28,7 +28,6 @@ export interface ListboxOptionElement extends HTMLElement { active: boolean; disabled: boolean; filtered: boolean; - hovered: boolean; selected: boolean; value: string; } From 5e7d9d2553ead49ea22e06be068fed302f992a07 Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Mon, 16 Oct 2023 11:56:00 +0200 Subject: [PATCH 6/8] chore(dropdown-multi-tag): adding missing tag disable token --- .../gux-dropdown-multi-tag/gux-dropdown-multi-tag.scss | 2 +- .../src/components/stable/gux-tag/gux-tag.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.scss b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.scss index fd81cc82a..d66e33040 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.scss @@ -51,6 +51,6 @@ } &.gux-disabled { - opacity: 0.5; // missing token ticket: COMUI-2287 + opacity: var(--gse-ui-tag-disabled-opacity); } } diff --git a/packages/genesys-spark-components/src/components/stable/gux-tag/gux-tag.scss b/packages/genesys-spark-components/src/components/stable/gux-tag/gux-tag.scss index 9a63e7046..6d91c48f8 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-tag/gux-tag.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-tag/gux-tag.scss @@ -74,7 +74,7 @@ $missing-gse-ui-tag-focusRing-cornerRadius: 4px; content: ''; background-color: #fff; border-radius: $error-gse-ui-tag-borderRadius; - opacity: 0.5; + opacity: var(--gse-ui-tag-disabled-opacity); } } From 7dba19669713d69d3334675ada052c44ebb4a14b Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Tue, 17 Oct 2023 17:09:51 +0200 Subject: [PATCH 7/8] chore(dropdown-multi,dropdown): fixing random pixel on each corner of popup listbox --- .../src/components/stable/gux-dropdown/gux-dropdown.scss | 5 ++--- .../src/components/stable/gux-dropdown/gux-dropdown.tsx | 6 +----- .../gux-create-option/gux-create-option.scss | 1 + .../stable/gux-listbox-multi/gux-listbox-multi.scss | 6 ------ .../gux-option-multi/gux-option-multi.scss | 3 ++- .../src/components/stable/gux-listbox/gux-listbox.scss | 3 ++- .../stable/gux-listbox/options/option-defaults.scss | 3 ++- 7 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss index 14da87895..c1f78eb41 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss @@ -191,9 +191,8 @@ } } -.gux-listbox-container { - box-sizing: border-box; - margin: 0; +::slotted(gux-listbox) { + outline: none; } // Selected option styles diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx index 2d8c34763..ca683f82a 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx @@ -469,11 +469,7 @@ export class GuxDropdown { } private renderPopup(): JSX.Element { - return ( -
- -
- ) as JSX.Element; + return () as JSX.Element; } private renderTarget(): JSX.Element { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.scss index 15c037a82..9e088ad4d 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.scss @@ -28,6 +28,7 @@ outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color); + outline-offset: -2px; } &:host(.gux-hovered:not([disabled])) { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.scss index 30375d6ca..cd6445d8a 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-listbox-multi.scss @@ -15,12 +15,6 @@ scrollbar-color: var(--gse-ui-menu-scrollbar-foregroundColor); } -:host(:focus-visible) { - outline: var(--gse-semantic-focusRing-width) solid - var(--gse-semantic-color-focus); - outline-offset: var(--gse-semantic-focusRing-offset); -} - .gux-message-container { display: flex; flex-direction: column; diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss index 768f9e607..19529f951 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.scss @@ -59,9 +59,10 @@ &:host(.gux-active) { border-radius: var(--gse-semantic-focusRing-cornerRadius); - border: var(--gse-ui-menu-option-focus-border-width) + outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color); + outline-offset: -2px; } &:host(:hover:not([disabled])) { diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss index 0d2369e3d..2194d7f9e 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/gux-listbox.scss @@ -5,6 +5,7 @@ padding: var(--gse-ui-menu-padding); margin: 0; overflow-y: auto; + overflow-x: visible; background: var(--gse-ui-menu-backgroundColor); border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color); @@ -15,7 +16,7 @@ var(--gse-ui-menu-boxShadow-color); } -:host(:focus-visible) { +:host(:focus-visible:not(:host-context(gux-dropdown))) { outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus); outline-offset: var(--gse-semantic-focusRing-offset); diff --git a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss index dd8a108af..2f97cb0f5 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss +++ b/packages/genesys-spark-components/src/components/stable/gux-listbox/options/option-defaults.scss @@ -48,9 +48,10 @@ :host(.gux-active) { border-radius: var(--gse-semantic-focusRing-cornerRadius); - border: var(--gse-ui-menu-option-focus-border-width) + outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color); + outline-offset: -2px; } :host(:hover:not(:disabled)) { From 10364ab410be470abd83dd977c9a24995ce06e86 Mon Sep 17 00:00:00 2001 From: Jordan Stith Date: Wed, 18 Oct 2023 11:18:24 +0200 Subject: [PATCH 8/8] chore(dropdown-multi,dropdown): fixing e2e tests --- ...gux-pagination-items-per-page.spec.ts.snap | 16 ++----- .../__snapshots__/gux-pagination.spec.ts.snap | 48 +++++-------------- .../gux-dropdown-multi/gux-dropdown-multi.tsx | 6 ++- .../stable/gux-dropdown/gux-dropdown.tsx | 4 +- .../__snapshots__/gux-dropdown.spec.ts.snap | 8 +--- .../gux-form-field-dropdown.e2e.ts.snap | 14 +++--- .../gux-form-field-dropdown.spec.ts.snap | 32 ++++--------- ...gux-pagination-items-per-page.spec.ts.snap | 16 ++----- 8 files changed, 45 insertions(+), 99 deletions(-) diff --git a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap index bc450336d..5f451dec9 100644 --- a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap @@ -19,9 +19,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected -
- -
+ @@ -89,9 +87,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected -
- -
+ @@ -159,9 +155,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected -
- -
+ @@ -229,9 +223,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected -
- -
+ diff --git a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap index ed84a5291..ae648af3a 100644 --- a/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap @@ -33,9 +33,7 @@ exports[`gux-pagination-legacy #render should render as expected (1) 1`] = ` -
- -
+ @@ -167,9 +165,7 @@ exports[`gux-pagination-legacy #render should render as expected (2) 1`] = ` -
- -
+ @@ -301,9 +297,7 @@ exports[`gux-pagination-legacy #render should render as expected (3) 1`] = ` -
- -
+ @@ -435,9 +429,7 @@ exports[`gux-pagination-legacy #render should render as expected (4) 1`] = ` -
- -
+ @@ -569,9 +561,7 @@ exports[`gux-pagination-legacy #render should render as expected (5) 1`] = ` -
- -
+ @@ -703,9 +693,7 @@ exports[`gux-pagination-legacy #render should render as expected (6) 1`] = ` -
- -
+ @@ -837,9 +825,7 @@ exports[`gux-pagination-legacy #render should render as expected (7) 1`] = ` -
- -
+ @@ -971,9 +957,7 @@ exports[`gux-pagination-legacy #render should render as expected (8) 1`] = ` -
- -
+ @@ -1105,9 +1089,7 @@ exports[`gux-pagination-legacy #render should render as expected (9) 1`] = ` -
- -
+ @@ -1291,9 +1273,7 @@ exports[`gux-pagination-legacy #render should render as expected (11) 1`] = ` -
- -
+ @@ -1425,9 +1405,7 @@ exports[`gux-pagination-legacy #render should render as expected (12) 1`] = ` -
- -
+ @@ -1559,9 +1537,7 @@ exports[`gux-pagination-legacy #render should render current page as 1 when tota -
- -
+ diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.tsx b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.tsx index e31d06a67..5761fe5c7 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.tsx @@ -22,7 +22,10 @@ import { trackComponent } from '@utils/tracking/usage'; import translationResources from './i18n/en.json'; -import { getSearchOption } from '../gux-listbox/gux-listbox.service'; +import { + getSearchOption, + setInitialActiveOption +} from '../gux-listbox/gux-listbox.service'; import { GuxFilterTypes } from '../gux-dropdown/gux-dropdown.types'; import { OnMutation } from '@utils/decorator/on-mutation'; /** @@ -185,6 +188,7 @@ export class GuxDropdownMulti { if (this.activeElementNotListbox()) { event.preventDefault(); this.expanded = true; + setInitialActiveOption(this.listboxElement); } return; case 'Enter': diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx index ca683f82a..b9b0b7e13 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx @@ -25,7 +25,8 @@ import translationResources from './i18n/en.json'; import { getSearchOption, - getListOptions + getListOptions, + setInitialActiveOption } from '../gux-listbox/gux-listbox.service'; import { ListboxOptionElement, @@ -126,6 +127,7 @@ export class GuxDropdown { if (this.activeElementNotListbox()) { event.preventDefault(); this.expanded = true; + setInitialActiveOption(this.listboxElement); } return; } diff --git a/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap index 24233c94d..9dac0578b 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap @@ -14,9 +14,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = ` -
- -
+ @@ -113,9 +111,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-icon 1`] -
- -
+ diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.e2e.ts.snap index 3e5bb6aff..896e96615 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.e2e.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.e2e.ts.snap @@ -29,7 +29,7 @@ exports[`gux-form-field-dropdown #render help should render component as expecte `; -exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (1) 1`] = `" Ant Bat Cat This is an error message "`; +exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (1) 1`] = `" Ant Bat Cat This is an error message "`; exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (1) 2`] = `
@@ -58,7 +58,7 @@ exports[`gux-form-field-dropdown #render multi select dropdown label-position sh
`; -exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (2) 1`] = `" Ant Bat Cat This is an error message "`; +exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (2) 1`] = `" Ant Bat Cat This is an error message "`; exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (2) 2`] = `
@@ -87,7 +87,7 @@ exports[`gux-form-field-dropdown #render multi select dropdown label-position sh
`; -exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (3) 1`] = `" Ant Bat Cat This is an error message "`; +exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (3) 1`] = `" Ant Bat Cat This is an error message "`; exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (3) 2`] = `
@@ -116,7 +116,7 @@ exports[`gux-form-field-dropdown #render multi select dropdown label-position sh
`; -exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (4) 1`] = `" Ant Bat Cat This is an error message "`; +exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (4) 1`] = `" Ant Bat Cat This is an error message "`; exports[`gux-form-field-dropdown #render multi select dropdown label-position should render component as expected (4) 2`] = `
@@ -145,7 +145,7 @@ exports[`gux-form-field-dropdown #render multi select dropdown label-position sh
`; -exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (1) 1`] = `" Ant Bat Cat "`; +exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (1) 1`] = `" Ant Bat Cat "`; exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (1) 2`] = `
@@ -171,7 +171,7 @@ exports[`gux-form-field-dropdown #render multi select dropdown should render com
`; -exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (2) 1`] = `" Ant Bat Cat "`; +exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (2) 1`] = `" Ant Bat Cat "`; exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (2) 2`] = `
@@ -197,7 +197,7 @@ exports[`gux-form-field-dropdown #render multi select dropdown should render com
`; -exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (3) 1`] = `" Ant Bat Cat "`; +exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (3) 1`] = `" Ant Bat Cat "`; exports[`gux-form-field-dropdown #render multi select dropdown should render component as expected (3) 2`] = `
diff --git a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap index f9833aa3d..6abb8b22f 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-form-field/components/gux-form-field-dropdown/tests/__snapshots__/gux-form-field-dropdown.spec.ts.snap @@ -138,9 +138,7 @@ exports[`gux-form-field-select multi select dropdown #render help should render -
- -
+ @@ -860,9 +858,7 @@ exports[`gux-form-field-select single select dropdown #render input attributes s -
- -
+ @@ -939,9 +935,7 @@ exports[`gux-form-field-select single select dropdown #render input attributes s -
- -
+ @@ -1021,9 +1015,7 @@ exports[`gux-form-field-select single select dropdown #render input attributes s -
- -
+ @@ -1100,9 +1092,7 @@ exports[`gux-form-field-select single select dropdown #render label-position sho -
- -
+ @@ -1179,9 +1169,7 @@ exports[`gux-form-field-select single select dropdown #render label-position sho -
- -
+ @@ -1258,9 +1246,7 @@ exports[`gux-form-field-select single select dropdown #render label-position sho -
- -
+ @@ -1337,9 +1323,7 @@ exports[`gux-form-field-select single select dropdown #render label-position sho -
- -
+ diff --git a/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap index aa3c2f757..6bcea720e 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-pagination/gux-pagination-items-per-page/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap @@ -19,9 +19,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (1) 1`] -
- -
+ @@ -89,9 +87,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (2) 1`] -
- -
+ @@ -159,9 +155,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (3) 1`] -
- -
+ @@ -229,9 +223,7 @@ exports[`gux-pagination-items-per-page #render should render as expected (4) 1`] -
- -
+