diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index fbe8ae2bc1e0b..ac9164b055185 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -76,6 +76,7 @@ - `TextControl`: Add typings for `date`, `time` and `datetime-local` ([#59666](https://github.com/WordPress/gutenberg/pull/59666)). - `Text`, `Heading`, `ItemGroup` : Update the line height from 1.2 to 1.4 ([#60041](https://github.com/WordPress/gutenberg/pull/60041)). +- `Autocomplete` : match the autocomplete styling to that of List View and Command Palette([#60131](https://github.com/WordPress/gutenberg/pull/60131)). ### Deprecation diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss index 4d04b3b8b52cf..fdb29fe577f20 100644 --- a/packages/components/src/autocomplete/style.scss +++ b/packages/components/src/autocomplete/style.scss @@ -1,6 +1,6 @@ .components-autocomplete__popover .components-popover__content { - padding: $grid-unit-20; - min-width: 220px; + padding: $grid-unit-10; + min-width: 200px; } .components-autocomplete__result.components-button { @@ -10,7 +10,13 @@ text-align: left; width: 100%; - &.is-selected { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent; + &:focus:not(:disabled) { + @include block-toolbar-button-style__focus(); + } + + &.is-selected, + &:not(:disabled,[aria-disabled="true"]):active { + background: $components-color-accent; + color: $white; } }