Lists

Source component

Unordered lists using <ul> and <li> often relied on Tailwind spacing or fly-list classes.

Target component

Use PlumaList and PlumaListItem for structured lists.

Mapping

• replace <ul> with <PlumaList>
• replace <ol> with <PlumaList @type="ordered">
• replace <li> with <PlumaListItem> or PlumaList::Item (in .hbs files)
• list-disc becomes @styleType="disc"
• list-none and list-unstyled become @styleType="none"

Examples

Source:

<ul class="list-disc">
  <li>First</li>
  <li>Second</li>
</ul>

Target:

<PlumaList @styleType="disc">
  <PlumaListItem>First</PlumaListItem>
  <PlumaListItem>Second</PlumaListItem>
</PlumaList>

Source:

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

Target:

<PlumaList @type="ordered">
  <PlumaListItem>One</PlumaListItem>
  <PlumaListItem>Two</PlumaListItem>
</PlumaList>