PullRequestCard
The pull request of the current branch, or the next step towards one: install the tool, sign in, then create. Each state has its own icon, a colour and a word. Walk through the steps in the demo.
- PullRequestCard
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, PullRequestCard
Setup neededOpen pull requests from here with the GitHub CLI.
No pull requestKeep the sidebar open on wide screens after a reload
Draft#97 Keep the sidebar open on wide screens after a reload
Open#97 Keep the sidebar open on wide screens after a reload
Merged#97 Keep the sidebar open on wide screens after a reload
Closed#97 Keep the sidebar open on wide screens after a reload
Dark theme, PullRequestCard
Setup neededOpen pull requests from here with the GitHub CLI.
No pull requestKeep the sidebar open on wide screens after a reload
Draft#97 Keep the sidebar open on wide screens after a reload
Open#97 Keep the sidebar open on wide screens after a reload
Merged#97 Keep the sidebar open on wide screens after a reload
Closed#97 Keep the sidebar open on wide screens after a reload
High contrast theme, PullRequestCard
Setup neededOpen pull requests from here with the GitHub CLI.
No pull requestKeep the sidebar open on wide screens after a reload
Draft#97 Keep the sidebar open on wide screens after a reload
Open#97 Keep the sidebar open on wide screens after a reload
Merged#97 Keep the sidebar open on wide screens after a reload
Closed#97 Keep the sidebar open on wide screens after a reload
UsageLink to the section Usage
import { PullRequestCard } from '@skribly/ui/code'<PullRequestCard state="open" stateLabel={t('pr.open')} number="#128"
title={pr.title} description={`${branch} → ${base}`} href={pr.url} />
<PullRequestCard state="none" stateLabel={t('pr.none')} title={t('pr.pushed', { base })}
action={<Button size="sm" onPress={create} isPending={creating}>{t('pr.create')}</Button>} />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 state is a word in a badge, never only the icon colour.
- The title is a link when href is set and wraps instead of being cut.
- While an action runs the card sets aria-busy and its button says it is pending.
- Pass openInNewTab only when the text says the link opens a new tab.
This demo runs through axe in all three themes on every test run. See what the tests check.