code reader design

Choose a code reader treatment

Compare a scrolling code reader with a wrapping one. Adjust their spacing and shared width, then choose the treatment to keep.

Which code-reader treatment should the agent keep?

A · compact · scroll

Measuring…

export function releaseLabel(service, checks) {
  const detail = `${checks.passed} passed · ${checks.pending} pending · ${checks.failed} failed`;
  const state = checks.failed > 0 ? "blocked" : checks.pending > 0 ? "rolling" : "ready";
  return `${service} (${state}): ${detail}`;
}

export function releaseLabels(releases) {
  return releases
    .filter((release) => release.checks.total > 0)
    .map((release) => releaseLabel(release.service, release.checks));
}

B · comfortable · wrap

Measuring…

export function releaseLabel(service, checks) {
  const detail = `${checks.passed} passed · ${checks.pending} pending · ${checks.failed} failed`;
  const state = checks.failed > 0 ? "blocked" : checks.pending > 0 ? "rolling" : "ready";
  return `${service} (${state}): ${detail}`;
}

export function releaseLabels(releases) {
  return releases
    .filter((release) => release.checks.total > 0)
    .map((release) => releaseLabel(release.service, release.checks));
}

Update the built Leaf code reader and show the focused browser measurement test.

Point at the reader element you want changed

Turn on Design mode with l or the More menu, then press the heading or code reader below. For a keyboard choice, press s, browse targets with Tab, and choose with Enter. Your comment stays beside that element as its treatment changes. Describe a shared change in the comment when both readers should inherit it.

Reader sample

export const summarize = checks =>
  `${checks.passed} passed · ${checks.pending} pending · ${checks.failed} failed`;