IssueRow
One issue on one line, as on the dashboard. Pick it for short lists such as "Assigned to me"; use IssueTable for long lists people sort.
- IssueRow
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, IssueRow
- SK-101Search suggestions skip words with accented letters
- search
- backend
BugTo doPriority UrgentDue OverdueAda Lovelace - SK-102Keyboard shortcut sheet for the editor
- frontend
- accessibility
FeatureIn progressPriority HighDue Grace Hopper - SK-103Move the export queue to a background worker so large projects no longer time out while the archive is being built
- backend
- performance
- docs
- search
- frontend
ImprovementIn reviewPriority MediumUnassigned
Dark theme, IssueRow
- SK-101Search suggestions skip words with accented letters
- search
- backend
BugTo doPriority UrgentDue OverdueAda Lovelace - SK-102Keyboard shortcut sheet for the editor
- frontend
- accessibility
FeatureIn progressPriority HighDue Grace Hopper - SK-103Move the export queue to a background worker so large projects no longer time out while the archive is being built
- backend
- performance
- docs
- search
- frontend
ImprovementIn reviewPriority MediumUnassigned
High contrast theme, IssueRow
- SK-101Search suggestions skip words with accented letters
- search
- backend
BugTo doPriority UrgentDue OverdueAda Lovelace - SK-102Keyboard shortcut sheet for the editor
- frontend
- accessibility
FeatureIn progressPriority HighDue Grace Hopper - SK-103Move the export queue to a background worker so large projects no longer time out while the archive is being built
- backend
- performance
- docs
- search
- frontend
ImprovementIn reviewPriority MediumUnassigned
UsageLink to the section Usage
import { IssueRow } from '@skribly/ui/tracker'<ul>{issues.map((issue) => (
<IssueRow key={issue.key} elementType="li" issue={issue} labelsLabel={t('fields.labels')} unassignedLabel={t('issue.unassigned')} />
))}</ul>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The title is a link whose hit area covers the row, and the row draws its focus ring. isCurrent sets aria-current and adds an accent rule.
- Overdue dates change their glyph and read overdueLabel.
- In a narrow container the facts wrap under the title, so nothing scrolls sideways at 320px or 400% zoom.
This demo runs through axe in all three themes on every test run. See what the tests check.