GitHub Grid Integration Block for React

Edit CHECKS at the top of the file: each check has an id, a name, a detail sentence and a fixed result (passed, running or failed) on the sample pull request. START_ON lists the ones switched on at the start, and PULL holds the sample's title, number and branches. The button's words, the "Waiting on 2 checks" count and the status sentence are all worked out from those lists, so adding a check needs no other edit.

No. A switch changes this page's state, and the status line under the drawing says so from the first paint: "The switches change this page only. Nothing is sent to GitHub." In a real product, save the chosen checks with your own settings and have Mergequill hold a pull request until the checks it names have passed. GitHub itself decides what blocks a merge through your branch protection rules; the drawn merge button only shows what your tool would wait for.

It names what is holding the pull request: "2 checks holding the pull request: Preview build is still running and Changelog entry failed." Switch both off and it says every check you switched on has passed, so the pull request can merge and joins the notes. Switch everything off and it says no check is waiting, so every merged pull request is added. Screen readers hear each change politely.

Each switch is named by its check ("Wait for Lint") and each row has a real h3. A result is a dot and a word, never colour alone, and only the failed check uses the status colour. The drawn pull request box is decorative and hidden from assistive technology. The status sentence beside it describes the same state.

On a phone the checks come first and the framed pull request sits under them, with a rule between. Branch names keep their left-to-right order in a right-to-left layout while the rows themselves flip. The header fades up once on load and the merge button changes tone with a short transition; reduced motion turns both off.