Action: deprecate "compact" property

[asangma]

Description

Deprecate the compact property.

Acceptance Criteria

Include updates to screener and and e2e tests.

Relevant Info

Which Component

CalciteAction

Example Use Case

[asangma]

cc @AdelheidF @kevindoshier Do you know if this property is being used?

[AdelheidF]

Yes, it's used in filter and layer-override.

[AdelheidF]

used e.g. here:

without it:

[driskull]

This property might be ok to have as it just adjusts internal width.

[macandcheese]

I think this should be internal if needed at all. In the examples above, using "compact" isn't aligning the x with the carets above or below it anyway.

[AdelheidF]

At least it shows at the end of its 'row'. If we take compact away the x just appears somewhere in the middle of the 'row'.

[geospatialem]

Similar to tile's embed property. If the above proposal is adopted, we should revisit the change to both action and tile props.

[brittneytewks]

Design has confirmed this is good to go, makes sense to proceed forward

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍡 Verified

[AdelheidF]

So compact goes away and is not being replaced with anything else?

with compact:

without compact:

[driskull]

I think we will likely have a CSS variable added to adjust padding. Is that correct @alisonailea?

[macandcheese]

You could use a transparent calcite-button there, which renders as a square without text present.

[alisonailea]

I think we will likely have a CSS variable added to adjust padding. Is that correct @alisonailea?

We aren't currently making spacing variables unless it's needed. @AdelheidF would you please create a ticket?

[AdelheidF]

I guess arcgis-button works. To me action would make more sense though (with some spacing variables).

[macandcheese]

I think we want to see button used more when it is a standalone element not contained within a parent and positioned to the extent (in a bar, panel area, etc.). You could use margin-inline-start: auto on the above (or, some other css) to achieve the spacing you had previously. The Card Group also has some built in selection that could be explored by your designers.

cc @ashetland @SkyeSeitz for design 👀