Badge as two elements - again?

[eirikbacker]

Une: Eg opplever det også som litt rart at {…rest} props blir lagt på det indre span-elementet, når eg setter props på wrapperen. Føler det bryt principle of least surprise (edited)

Eirik: Ser poenget :thinking_face: Det burde heller vært på selve formen? ser den, hm, den er litt tricky, for spanen er egentlig kun for posisjonering, men i ren HTML så er det veldig fint å kunne gjøre

<span class="ds-badge" data-count="2">
  <svg>…</svg>
</span>

Men det er kanskje slik at Badge skulle bestått av 2 elementer? <Badge> og <Badge.Position> Så man i React kan skrive:

<Link href="#">Epost <Badge count="4" /></Link>

// Eller
<Badge.Position placement="top-right">
  <Badge />
  <Icon />
</Badge.Position>

Og i HTML kan skrive:

<a href="#">Epost <span class="ds-badge" count="4" /></a>

// Eller
<span class="ds-bage-position" data-placement="top-right">
  <span class="ds-badge" />
  <svg>…</svg>
</span>

eller ka du tru? ☺

Tenker det er fint at alle elementer er eksponert, mot hvordan det før oppsto en wapper <span> som man ikke kunne nå med styling/attributter?

Une: Eg liker det forslaget