Expose padding as css variables for the ArcCard component

[dominicegginton]

The dev team on TDA would like to request comments for a change that the ArcCard component exposes its enforced padding (https://github.com/arup-group/arc-components/blob/dev/src/components/card/arc-card.styles.ts#L28-L32) as a CSS variable.

This will allow the ArcCard component to cover many more use cases when slotting elements into the header body and footer.

Changes proposed something along the lines of:

# arc-card.styles.ts
  :host {
    display: inline-block;
    width: auto;

+   --default-padding: var(--arc-spacing-normal);
+   --header-padding: var(--default-padding);
+   --image-padding: 0;
+   --body-padding: var(--default-padding);
+   --footer-padding: var(--default-padding);
  }


+ #header {
+   padding: var(--header-padding);
+  }

+ #image {
+   padding: var(--image-padding);
+ }

+ #body {
+   padding: var(--body-padding);
+ }

+ #footer {
+   padding: var(--footer-padding);
+  }

- #header,
- #body,
- #footer {
-   padding: var(--arc-spacing-normal);
- }

Resulting in:

<arc-card>
  <h1 slot="header">Header</h1>
  <img slot="image" src="https://picsum.photos/seed/picsum/500/300" alt="Random image">
  <p>Foo bar baz ...</p>
  <arc-button slot="footer">foo</arc-button>
</arc-card>

<arc-card style="--header-padding: 0;">
  <span slot="header" style="display: flex; justify-content: space-between; background: rgb(var(--arc-color-warning))">
     <arc-icon-button name="home"></arc-icon-button>
     <arc-icon-button name="settings"></arc-icon-button>
   </span>
   <img slot="image" src="https://picsum.photos/seed/picsum/500/300" alt="Random image">
   <p>Foo bar baz ...</p>
  <arc-button slot="footer">foo</arc-button>
</arc-card>

[dominicegginton]

I would support this change, as it would dramatically increase the use cases of the ArcCard component and reduce friction when using the header, body and footer slots with anything but basic text and buttons. We should consider that this may allow downstream developers to change the appearance dramatically of the ArcCard components, resulting in inconsistent UI interfaces across ARC-adopted Arup projects.

[JakeSchoermer]

Thanks for raising this @dominicegginton. I think this change would solve our issue and generally give flexibility to downstream developers.

[dominicegginton]

@JakeSchoermer

The ARC core team had a catch up yesterday where this was discussed. We feel that exposing the padding of the ArcCard component as seen above will dramatically allow too much deviation from the ARC design system's guidelines, standards and goals.

We believe that exposing a card background colour variable would be possible here however I understand this would not sure your use case of wanting to style just the background of the header. Daragh's suggestion for a solution is that the design should be adjusted to better represent the ARC design system, and perhaps an ArcChip with a custom background colour can be used within the ArcCard's header instead. A gap in the ARC design systems guidelines for designer usage of the ArcCard component has been identified here and will be addressed.