bug(Forms): Different amount of spacing between Field components.

[langz]

To me, when browsing the docs on iPhone in Safari, it seems like there’s different spacing between the Field components in a card demo/example here https://eufemia.dnb.no/uilib/layout/#flex-usage-in-forms

To me, it seems like the spacing is different between the fields e-post and landskode, compared to spacing between all other fields.

[tariknh]

Could this be because landskode is correlated to the mobilnummer input, as in the law of proximity ? https://lawsofux.com/law-of-proximity/

[snorrekim]

This just seems to be a media query rule for the all our basic input components. But it only works if the <label> is below the base class for the component, and in <Forms> regular inputs with the class .dnb-input have the <label> before the base class. So the margin is only added to widgets like .dnb-autocomplete, .dnb-date-picker etc.

Expected structure:

<span class="dnb-autocomplete">
  <label>Label</label>
  <span class="dnb-autocomplete__inner">
    ...
  </span>
</span>

<span class="dnb-input">
  <label>Label</label>
  <span class="dnb-input__inner">
    ...
  </span>
</span>

<Form> structure:

<span class="dnb-autocomplete">
  <label>Label</label>
  <span class="dnb-autocomplete__inner">
    ...
  </span>
</span>

<div class="dnb-forms-field-block">
  <div class="dnb-forms-field-block__grid">
    <label>Label</label>
    <div class="dnb-forms-field-block__contents">
      <span class="dnb-input">
        <span class="dnb-input__inner">
          ...
        </span>
      </span>
    </div>
  </div>
</div>

[snorrekim]

To put it on other words: If the label is set on the <FieldBlock> component instead of the input component, then the media query will not work. This happens in the <StringComponent> and <NumberComponent> (maybe others?).

[snorrekim]

But the question is, do we want that extra margin on small screens or not?

[tariknh]

I think it’s supposed to happen, as a "block" has children/siblings that is correlated, therefore less margin

[tujoworker]

🎉 This issue has been resolved in version 10.17.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀