New popover and popover item

[fcoveram]

Description

As part of the design changes agreed upon in #460, we need to update the styles of Popover and Popover item.

Popover

(description from #460)

The popover follows the Modal implemented in Gutenberg.

• Popover is divided into three sections to make it reusable: Header, description, and content.
• Header area has the popover title and close action.
• Close button follows Icon component in size: small, style: transparent, color: gray.
• The container has a border radius of 4px in all breakpoints.
• In XS and SM, the container has a padding of 16px and a margin of 32px.
• In MD and beyond, the container has a padding of 24px and a max-width (TBD).

You can find the popover structure in the Design Library, and the Metasearch case in its respective design file.

Popover item

In line with the improvements made in #415, this component inherits the fixed height and has three variants for different interaction cases. In #460 designs, the variant used is Label.

You can find the Popover item component in the Design Library. You will also see a Popover header component in the same section that is not part of #460 changes and will be requested in a different ticket.

Additional context

Since popover item is also used in VRecentSearches component, I will create a new issue requesting its implementation.

[fcoveram]

Adding the priority: medium label as it's part of #460

[obulat]

@fcoveram, we have a VItemGroup component that is a list of VItems (can be vertical or horizontal). It is used for page links and search types. Should they also use the popover item styles?

[fcoveram]

…It is used for page links and search types…

I don't understand this part. Do you mean for the following?

Page links	Search types

If so, then no.

Popover item is for the recent searches popover (when you click on the search bar in search results page) and for popovers in modal. Its variants (Icon, Selection, and Label) are for content interactions that go beyond the content links and switcher popover.

[obulat]

I don't understand this part. Do you mean for the following?
Search types - yes, and page links is for the md to lg on the content header:

[fcoveram]

Thanks for the response. Now I understand.

The content switcher popover doesn't need any change. But the content header's menu does need to be updated. I guess that is for a new PR.

I put the site menu mockup and the popover in context in the Design Library, and below a screenshot of the same element. The active state has Label bold style in the label, same as the current active state.

[fcoveram]

Closing this issue as both popover components were integrated successfully.