Recent searches popover improvement

[fcoveram]

Problem

The current recent searches box (VRecentSearches) does not follow the spacing system we defined some time ago. Because of that, the popover looks inconsistent and takes a significant portion of the screen.

Issues related

• Each search item is based on the new popover item requested in New popover and popover item #2839

Proposal

Description

On xs / sm / md breakpoints

• Popover box has a padding of 12px for left, right, and bottom.
• All rows are 40px height, including where title and storing description are.
• The clear action of an item is always visible.

On lg and beyond

• Popover box has a padding of 8px for all sides.
• All rows are 40px height, including where title and storing description are.
• The clear action of an item shows up during hover state.

The designs include a component state mockup to make more clear how it behaves.

Figma file: Recent searches popover improvement

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.