Skip to content

Commit

Permalink
Merge pull request #11 from MyPureCloud/feature/COMUI-2342
Browse files Browse the repository at this point in the history 
fix(dropdown,listbox,listbox-multi): fixing issues with clicking options and focus ring with mouse
  • Loading branch information
@jordanstith15
jordanstith15 authored Oct 24, 2023
2 parents 81b354d + 10364ab commit f077205
Show file tree
Hide file tree
Showing 25 changed files with 93 additions and 189 deletions.
16 changes: 4 additions & 12 deletions ...tion-items-per-page-legacy/tests/__snapshots__/gux-pagination-items-per-page.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -89,9 +87,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -159,9 +155,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -229,9 +223,7 @@ exports[`gux-pagination-items-per-page-legacy #render should render as expected
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down
48 changes: 12 additions & 36 deletions ...c/components/legacy/gux-pagination-legacy/tests/__snapshots__/gux-pagination.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ exports[`gux-pagination-legacy #render should render as expected (1) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -167,9 +165,7 @@ exports[`gux-pagination-legacy #render should render as expected (2) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -301,9 +297,7 @@ exports[`gux-pagination-legacy #render should render as expected (3) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -435,9 +429,7 @@ exports[`gux-pagination-legacy #render should render as expected (4) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -569,9 +561,7 @@ exports[`gux-pagination-legacy #render should render as expected (5) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -703,9 +693,7 @@ exports[`gux-pagination-legacy #render should render as expected (6) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -837,9 +825,7 @@ exports[`gux-pagination-legacy #render should render as expected (7) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -971,9 +957,7 @@ exports[`gux-pagination-legacy #render should render as expected (8) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -1105,9 +1089,7 @@ exports[`gux-pagination-legacy #render should render as expected (9) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -1291,9 +1273,7 @@ exports[`gux-pagination-legacy #render should render as expected (11) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -1425,9 +1405,7 @@ exports[`gux-pagination-legacy #render should render as expected (12) 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down Expand Up @@ -1559,9 +1537,7 @@ exports[`gux-pagination-legacy #render should render current page as 1 when tota
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Items per page" role="listbox" tabindex="0">
Expand Down
2 changes: 1 addition & 1 deletion ...c/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,6 @@
}

&.gux-disabled {
opacity: 0.5; // missing token ticket: COMUI-2287
opacity: var(--gse-ui-tag-disabled-opacity);
}
}
4 changes: 2 additions & 2 deletions ...genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
}
Expand Down
6 changes: 5 additions & 1 deletion .../genesys-spark-components/src/components/stable/gux-dropdown-multi/gux-dropdown-multi.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
/**
Expand Down Expand Up @@ -185,6 +188,7 @@ export class GuxDropdownMulti {
if (this.activeElementNotListbox()) {
event.preventDefault();
this.expanded = true;
setInitialActiveOption(this.listboxElement);
}
return;
case 'Enter':
Expand Down
9 changes: 4 additions & 5 deletions packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -186,14 +186,13 @@
border-radius: var(--gse-ui-formControl-input-borderRadius);

&:focus-visible,
&:focus-within {
&:focus-within:has(:focus-visible) {
@include gux-input-focus-border;
}
}

.gux-listbox-container {
box-sizing: border-box;
margin: 0;
::slotted(gux-listbox) {
outline: none;
}

// Selected option styles
Expand Down
10 changes: 4 additions & 6 deletions packages/genesys-spark-components/src/components/stable/gux-dropdown/gux-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ import translationResources from './i18n/en.json';

import {
getSearchOption,
getListOptions
getListOptions,
setInitialActiveOption
} from '../gux-listbox/gux-listbox.service';
import {
ListboxOptionElement,
Expand Down Expand Up @@ -126,6 +127,7 @@ export class GuxDropdown {
if (this.activeElementNotListbox()) {
event.preventDefault();
this.expanded = true;
setInitialActiveOption(this.listboxElement);
}
return;
}
Expand Down Expand Up @@ -469,11 +471,7 @@ export class GuxDropdown {
}

private renderPopup(): JSX.Element {
return (
<div slot="popup" class="gux-listbox-container">
<slot></slot>
</div>
) as JSX.Element;
return (<slot slot="popup"></slot>) as JSX.Element;
}

private renderTarget(): JSX.Element {
Expand Down
8 changes: 2 additions & 6 deletions ...mponents/src/components/stable/gux-dropdown/tests/__snapshots__/gux-dropdown.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ exports[`gux-dropdown #render should render as expected with gux-option 1`] = `
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Animals" role="listbox" tabindex="0">
Expand Down Expand Up @@ -113,9 +111,7 @@ exports[`gux-dropdown #render should render as expected with gux-option-icon 1`]
<gux-icon class="gux-expand-icon" iconname="chevron-small-down" screenreader-text="Dropdown"></gux-icon>
</button>
</div>
<div class="gux-listbox-container" slot="popup">
<slot></slot>
</div>
<slot slot="popup"></slot>
</gux-popup>
</mock:shadow-root>
<gux-listbox aria-label="Animals" role="listbox" tabindex="0">
Expand Down
Loading

0 comments on commit f077205

Please sign in to comment.