Follow-up to #41937, #41900

What?

Adds a <DropdownContentWrapper> subcomponent for managing different padding values in the Dropdown content.

Why/How?

We have encountered many ad hoc overrides of the Dropdown content padding, which involve reaching into internal CSS classes (.components-popover__content).

Size scale

A survey of all the padding overrides in the codebase showed that almost all these instances wanted either a padding value of 16px or 0 (default is 8px). The only two exceptions were rather arbitrary values, not adhering to the 4px grid system.

This suggests that we can abstract this to some padding presets. There is an existing padding size scale used in Card, but I'm hesitant to adopt the same scale because the context is different. I'm leaning toward a scale that is specific to Dropdown usage, but this is up for discussion.

My tentative proposal is small=8px (default), medium=16px, and none=0.

Prop or subcomponent

The other main decision we need to make is whether to add a root-level contentPaddingSize prop, or to add a wrapper subcomponent.

// Root-level prop
<Dropdown contentPaddingSize="medium" renderContent={ () => "My content" } />

// Wrapper subcomponent
<Dropdown renderContent={ () => (
    <DropdownContentWrapper paddingSize="medium">
      My content
    </DropdownContentWrapper>
  ) }
/>

Root-level props are seemingly simpler, but always come with the slippery slope risk of cluttering up the root component with increasingly niche props. Subcomponents are safer in that regard, as it will be a good vessel to add more content-related props in the future.

That said, the main reason I'm leaning toward a subcomponent in this case because we are seeing a high number of anti-patterns where the consumer is setting dimension styles (e.g. min-width) directly on .components-popover__content. This is easily avoidable by using their own wrapper div on the dropdown content. By providing an "official" wrapper component, maybe we can further encourage consumers to set styles on wrappers instead of reaching into internal CSS classes.

Testing Instructions

1.npm run storybook:dev and see the stories for Dropdown.