From ccd8dac274b13f8e887727b6251ba56184322d70 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 7 Aug 2024 20:07:41 +0900 Subject: [PATCH] Autocompleter UI: Fix text color when hovering selected item (#64294) * Autocompleter UI: Fix text color when hovering selected item * Update changelog * Restore `is-selected` CSS class Co-authored-by: t-hamano Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jasmussen --- packages/components/CHANGELOG.md | 1 + packages/components/src/autocomplete/autocompleter-ui.tsx | 2 ++ packages/components/src/autocomplete/style.scss | 6 ------ 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8ecbf1528d6f0..3c4a5b679791f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ - `CustomSelectControl`: Restore `describedBy` functionality ([#63957](https://github.com/WordPress/gutenberg/pull/63957)). - `Button`: Improve the aria-disabled focus style ([#62480](https://github.com/WordPress/gutenberg/pull/62480)). - `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)). +- `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)). ### Enhancements diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx index 1a5aacf1438ab..c6c1b94deb577 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.tsx +++ b/packages/components/src/autocomplete/autocompleter-ui.tsx @@ -64,9 +64,11 @@ function ListBox( { 'components-autocomplete__result', className, { + // Unused, for backwards compatibility. 'is-selected': index === selectedIndex, } ) } + variant={ index === selectedIndex ? 'primary' : undefined } onClick={ () => onSelect( option ) } > { option.label } diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss index fdb29fe577f20..75b219210f42e 100644 --- a/packages/components/src/autocomplete/style.scss +++ b/packages/components/src/autocomplete/style.scss @@ -13,10 +13,4 @@ &:focus:not(:disabled) { @include block-toolbar-button-style__focus(); } - - &.is-selected, - &:not(:disabled,[aria-disabled="true"]):active { - background: $components-color-accent; - color: $white; - } }