{
  "id": "L01",
  "title": "Single-line list",
  "topic": "lists",
  "use": "A list in which every entry fits on one line. The identifier comes first, the label after it. The identifier is never cut — it is what users search for; the label is cut instead. All rows are the same height, also the ones that carry nothing extra.",
  "decisions": [
    "The identifier comes first and is never cut: it is what users search for, and in payroll the number is the name. The label after it is cut instead — a label can be explained, a number cannot.",
    "The identifier stands in tabular figures, so the numbers form one edge and the labels after them start on another.",
    "One line means no secondary line in any entry: as soon as a single entry needs two lines, the whole list is a two-line list (L02), not a one-line list with gaps.",
    "All rows are the same height, also the ones that carry nothing extra: a list whose rows jump in height reads as unfinished.",
    "A long label is cut with an ellipsis, not wrapped: a wrap makes two lines of one and takes the list its edge. The full text appears on hover, on exactly the labels that are cut."
  ],
  "try": [
    {
      "do": "Read the identifiers from top to bottom",
      "then": "they stand on one edge in tabular figures, and the labels after them start on one edge too"
    },
    {
      "do": "Make the window narrow",
      "then": "the long label is cut with an ellipsis, while every identifier stays whole"
    },
    {
      "do": "Point at the cut label",
      "then": "its full text appears; a label that fits shows nothing on hover"
    },
    {
      "do": "Compare the row heights",
      "then": "every row is the same height, the cut one included"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<div class=\"ed-stack ed-gap-4\">\n  <!-- Demo only, not part of the pattern. The screen's title, and whose wage types these are, come from the screen around the pattern; SC01 places them. -->\n\n  <ed-list id=\"l01-wage-types\" label=\"Wage types\">\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">1000</span> Monthly salary</div></ed-list-item>\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">1200</span> Overtime pay</div></ed-list-item>\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">2100</span> Company car benefit in kind</div></ed-list-item>\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">3400</span> Capital-forming benefits, employer contribution under the collective agreement</div></ed-list-item>\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">5200</span> Commuting allowance</div></ed-list-item>\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">6100</span> Vacation pay</div></ed-list-item>\n    <ed-list-item><div class=\"ed-text-truncate\"><span class=\"ed-text-tabular\">9000</span> Garnishment</div></ed-list-item>\n  </ed-list>\n</div>\n\n<script type=\"module\">\n  await customElements.whenDefined('ed-list-item');\n\n  // The full text goes on the labels the width actually cuts, and comes off again once they fit: a\n  // tooltip that repeats what is already there is noise.\n  const labels = document.querySelectorAll('#l01-wage-types .ed-text-truncate');\n  const markCut = entries => {\n    for (const { target } of entries) {\n      if (target.scrollWidth > target.clientWidth) target.title = target.textContent.replace(/\\s+/g, ' ').trim();\n      else target.removeAttribute('title');\n    }\n  };\n  const observer = new ResizeObserver(markCut);\n  for (const label of labels) observer.observe(label);\n</script>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l01-single-line-list/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}
