diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1695faba8b1d8..fca489b2340b9 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ - `Tooltip`: Replace the existing tooltip to simplify the implementation and improve accessibility while maintaining the same behaviors and API ([#48440](https://github.com/WordPress/gutenberg/pull/48440)). - `Dropdown` and `DropdownMenu`: support controlled mode for the dropdown's open/closed state ([#54257](https://github.com/WordPress/gutenberg/pull/54257)). - `BorderControl`: Apply proper metrics and simpler text ([#53998](https://github.com/WordPress/gutenberg/pull/53998)). +- `FormTokenField`: Update styling for consistency and increased visibility ([#54402](https://github.com/WordPress/gutenberg/pull/54402)). - `Tooltip`: Add new `hideOnClick` prop ([#54406](https://github.com/WordPress/gutenberg/pull/54406)). ### Bug Fix diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 775999c1d0124..ba820f23c9d32 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -157,21 +157,21 @@ .components-form-token-field__suggestions-list { flex: 1 0 100%; min-width: 100%; - max-height: 9em; + max-height: $grid-unit-80 * 2; overflow-y: auto; transition: all 0.15s ease-in-out; @include reduce-motion("transition"); list-style: none; - border-top: $border-width solid $components-color-border; + box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input. margin: 0; - padding: 0; } .components-form-token-field__suggestion { - color: $gray-700; + color: $gray-900; display: block; font-size: $default-font-size; - padding: 4px 8px; + padding: $grid-unit-10 $grid-unit-15; + min-height: $button-size-compact; margin: 0; cursor: pointer; @@ -180,7 +180,3 @@ color: $white; } } - -.components-form-token-field__suggestion-match { - text-decoration: underline; -}