Add scale to popover.

[Elijbet]

Actual Behavior

Follow up on PR #4627.

Add scale on popover so it's consistent with all other visual components that have a scale and to coordinate with the nested dismissible x icon scale (to ensure visual height consistency for when the icon is collapsed).

Expected Behavior

popover should have a scale prop.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/popover/

Reproduction Steps

Refer to docs to see that popover does not provide a scale prop like other components do.

Reproduction Version

1.0.0-next.478

Relevant Info

No response

Regression?

No response

[github-actions]

More information is required to proceed with this issue:

• Provide a codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible.

This issue will be automatically closed in five days if the information is not provided. Thanks for your understanding.

[driskull]

Currently, only scale relationships have existed for components that have a child component. For example, components like dropdown & dropdown-item.

If we want to start having scale relationships with components that are not related in a parent/child sense, then we should probably move scale to a CSS custom property. I don't think we should have unrelated components rely on each other for scale.

I think this might direct us back to this issue: #2868

[Elijbet]

Currently, only scale relationships have existed for components that have a child component. For example, components like dropdown & dropdown-item.

If we want to start having scale relationships with components that are not related in a parent/child sense, then we should probably move scale to a CSS custom property. I don't think we should have unrelated components rely on each other for scale.

I think this might direct us back to this issue: #2868

Thanks for pointing to the cascading scale discussion, that's very helpful.

I edited the issue to leave out the part where I suggest that adding scale would help "accommodate nested items that also have scale, such as an action slot with an icon" as it's a separate issue, even though related.

I was thinking that if all visual components have a scale (this one is missing it by omission rather than by design), whatever is nested within would take the default or user-defined scale of the parent. I’ll read up more on the existing trail of related issues to catch up on the background.

[jcfranco]

@Elijbet please correct me if I'm wrong, but this issue stemmed from the popover not having a scale prop to adjust its dismissible button icon accordingly (like we do for other icon-owning components).

I think this might direct us back to this issue: #2868

Agreed. We'll pick up that discussion soon.

[jcfranco]

I think this might direct us back to this issue: #2868

Agreed. We'll pick up that discussion soon.

We've decided to not support inheriting scale, but we still have the question whether popover needs a scale prop to enable users to set the scale of the dismissible button icon as stated above. Adding @macandcheese @ashetland @SkyeSeitz for their UXpertise™.

[macandcheese]

I'd expect the heading string to also be affected by a scale change, in addition to the close button.

[driskull]

Agreed ^

[ashetland]

I'd expect the heading string to also be affected by a scale change, in addition to the close button.

Yep, also agree

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified scale in the component's heading and close button.

scale='s':

scale='m':

scale='l':