Issue

Problem/work item requiring attention.

ISSUE-142 bug

Login form throws on empty password

Assigned to R. Okafor

Open

html

<article class="issue" aria-label="Issue ISSUE-142: Login form throws on empty password">
  <span class="issue__id">ISSUE-142</span>
  <span class="issue__type issue__type--bug">
    <span class="issue__icon issue__icon--bug" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="9" r="4"></circle><path d="M8 5V3M5 4 4 3M11 4l1-1M4 9H2M14 9h-2M5 13l-1 1M11 13l1 1"></path></svg></span>
    <span class="issue__icon issue__icon--task" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="2" width="12" height="12" rx="2"></rect><path d="M5 8.5 7 10.5 11 6"></path></svg></span>
    <span class="issue__icon issue__icon--improvement" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M2 12l4-4 3 3 5-6"></path><path d="M11 4h3v3"></path></svg></span>
    <span class="issue__type-label">bug</span>
  </span>
  <h3 class="issue__title">Login form throws on empty password</h3>
  <p class="issue__assignee">Assigned to R. Okafor</p>
  
  <span class="issue__status issue__status--open"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="8" r="6.3"></circle><path d="M8 4.5v4.2M8 11.5v.1"></path></svg>Open</span>
</article>
<style>
.issue { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: 540px; padding: 16px 18px; border-radius: 12px; background: #FAF7F2; border: 1px solid #24143022; font: 14px/1.4 system-ui, sans-serif; color: #241430; box-sizing: border-box; }
.issue__id { font: 700 12px/1 ui-monospace, monospace; color: #241430; background: #24143012; padding: 4px 8px; border-radius: 6px; }
.issue__type { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 600 12px/1 system-ui, sans-serif; text-transform: capitalize; }
.issue__type--bug { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }
.issue__type--task { background: color-mix(in srgb, #BFD9F2 45%, #FAF7F2); color: #1f4266; }
.issue__type--improvement { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
.issue__icon { display: none; }
.issue__type--bug .issue__icon--bug, .issue__type--task .issue__icon--task, .issue__type--improvement .issue__icon--improvement { display: inline-flex; }
.issue__title { flex-basis: 100%; margin: 0; font-weight: 600; font-size: 15px; }
.issue__assignee { margin: 0; font-size: 13px; color: #241430b3; }
.issue__status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 12px/1 system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; }
.issue__status--open { background: color-mix(in srgb, #D9C8F0 45%, #FAF7F2); color: #4a3a68; }
.issue__status--resolved { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
</style>

tailwind

<article aria-label="Issue ISSUE-142: Login form throws on empty password" class="issue-tw flex flex-wrap items-center gap-x-4 gap-y-2.5 max-w-[540px] p-4 rounded-xl bg-[#FAF7F2] border border-[#24143022] font-sans text-sm text-[#241430] box-border">
  <span class="font-mono text-[12px] font-bold bg-[#24143012] px-2 py-1 rounded-md">ISSUE-142</span>
  <span class="issue-tw__type issue-tw__type--bug inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold capitalize">
    <span class="issue-tw__icon issue-tw__icon--bug" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="9" r="4"></circle><path d="M8 5V3M5 4 4 3M11 4l1-1M4 9H2M14 9h-2M5 13l-1 1M11 13l1 1"></path></svg></span>
    <span class="issue-tw__icon issue-tw__icon--task" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="2" width="12" height="12" rx="2"></rect><path d="M5 8.5 7 10.5 11 6"></path></svg></span>
    <span class="issue-tw__icon issue-tw__icon--improvement" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M2 12l4-4 3 3 5-6"></path><path d="M11 4h3v3"></path></svg></span>
    <span>bug</span>
  </span>
  <h3 class="basis-full m-0 font-semibold text-[15px]">Login form throws on empty password</h3>
  <p class="m-0 text-[13px] text-[#241430]/70">Assigned to R. Okafor</p>
  
  <span class="ml-auto inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full bg-[#D9C8F0]/45 text-[#4a3a68]"><svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="8" r="6.3"></circle><path d="M8 4.5v4.2M8 11.5v.1"></path></svg>Open</span>
</article>
<style>
.issue-tw__icon { display: none; }
.issue-tw__type--bug { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #7a5410; }
.issue-tw__type--task { background: color-mix(in srgb, #BFD9F2 45%, #FAF7F2); color: #1f4266; }
.issue-tw__type--improvement { background: color-mix(in srgb, #A8E6C1 45%, #FAF7F2); color: #205c37; }
.issue-tw__type--bug .issue-tw__icon--bug, .issue-tw__type--task .issue-tw__icon--task, .issue-tw__type--improvement .issue-tw__icon--improvement { display: inline-flex; }
</style>

react

export function Issue({
  id = "ISSUE-142",
  title = "Login form throws on empty password",
  type = "bug",
  assignee = "R. Okafor",
  resolved = false,
}) {
  const palette = {
    bug: { background: "color-mix(in srgb, #E8A020 25%, #FAF7F2)", color: "#7a5410", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="8" cy="9" r="4" /><path d="M8 5V3M5 4 4 3M11 4l1-1M4 9H2M14 9h-2M5 13l-1 1M11 13l1 1" /></svg> },
    task: { background: "color-mix(in srgb, #BFD9F2 45%, #FAF7F2)", color: "#1f4266", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="2" y="2" width="12" height="12" rx="2" /><path d="M5 8.5 7 10.5 11 6" /></svg> },
    improvement: { background: "color-mix(in srgb, #A8E6C1 45%, #FAF7F2)", color: "#205c37", icon: <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 12l4-4 3 3 5-6" /><path d="M11 4h3v3" /></svg> },
  }[type] ?? {};
  return (
    <article aria-label={"Issue " + id + ": " + title} style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "10px 16px", maxWidth: 540, padding: "16px 18px", borderRadius: 12, background: "#FAF7F2", border: "1px solid #24143022", font: "14px/1.4 system-ui, sans-serif", color: "#241430", boxSizing: "border-box" }}>
      <span style={{ font: "700 12px/1 ui-monospace, monospace", background: "#24143012", padding: "4px 8px", borderRadius: 6 }}>{id}</span>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 9px", borderRadius: 999, font: "600 12px/1 system-ui, sans-serif", textTransform: "capitalize", background: palette.background, color: palette.color }}>
        {palette.icon}
        <span>{type}</span>
      </span>
      <h3 style={{ flexBasis: "100%", margin: 0, fontWeight: 600, fontSize: 15 }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 13, color: "#241430b3" }}>Assigned to {assignee}</p>
      {resolved ? (
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontWeight: 600, padding: "4px 9px", borderRadius: 999, background: "color-mix(in srgb, #A8E6C1 45%, #FAF7F2)", color: "#205c37" }}>
          <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="8" cy="8" r="6.3" /><path d="M5.3 8.2 7 9.9l3.6-4" /></svg>
          Resolved
        </span>
      ) : (
        <span style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12, fontWeight: 600, padding: "4px 9px", borderRadius: 999, background: "color-mix(in srgb, #D9C8F0 45%, #FAF7F2)", color: "#4a3a68" }}>
          <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="8" cy="8" r="6.3" /><path d="M8 4.5v4.2M8 11.5v.1" /></svg>
          Open
        </span>
      )}
    </article>
  );
}