🤔 This should not be necessary because every field declares its layout, and all the 3 top-level fields that create a card have card as the layout. That should be enough to match any styles. I'll take a look.

Thank you.

In case it's not clear, this is about the spacing between the cards themselves (which should be 24px), not the fields within the cards (which should be 16px).

The wrapper layout depends on the form.layout.type. If not present, we normalize it to the regular layout that uses 4 as spacing setting, while the card layout uses 6 (ref).

This is fragile. 🤔

What if it was the individual fields (each card, each panel, each regular field) that set the spacing? Something along these lines:

  <div class="container">
    <div class="card">...</div>
    <div class="panel">...</div>
    <div class="regular">...</div>
  </div>

// DataForm CSS
  .container {
    display: flex;
    flex-direction: column;
  }

// The card layout's CSS
  .card + * {
    margin-top: 24px;
  }

// The panel layout's CSS
  .panel + * {
    margin-top: 16px;
  }

// The regular layout's CSS
  .regular + * {
    margin-top: 8px;
  }

Would there be any issue with this? We could remove all the wrappers from the existing layouts but the row one.

Yes I think something along those lines might work. I made a CodePen to explore. The rules are a bit more specific to account for specific order combos but I think this covers everything neatly.

Do you think there are any trade-offs to using margin vs gap?

@oandregal any thoughts on this?

I've approved this PR, but we can continue the conversation.

I thought about this, but I've noticed we mix panel and regular items in a few places (QuickEdit, for example). If the field themselves provide the spacing, and each layout has its own, wouldn't this create different spacing between fields in the same form?

Another thought is that we make it a card because we want the spacing of a card. The spacing applied between fields is overloaded with the layout type. A different approach could be 1) remove the top-level layout prop, it's the field responsibility to declare its own 2) and a top-level gap prop to configure the spacing between fields.

If we go this route, I suppose the best approach would be to connect this gap with the spacing from DS (e.g., "xs", "md").