Visual review

Once a Pull/Merge request has been captured, Backlight will run two steps: pre-check & visual review. This is to help you review the Pull/Merge request.

Github build window showing steps of build succeed and visual check failed

Pre-check

Backlight will do a dry-run publish, ensuring your design system can still be published with those modification on your repository.

Our Git integration will also add a build status/check and a comment inside the Pull/Merge request, indicating that the next step of the review is ready.

comment inside pull request view in github with a link to backlight authored by the backlight application with the backlight icon

Visual review

Backlight will compute screenshots of all your stories for all your components, and even for your documentation pages.

Backlight will compare those screenshots to the baseline of your default branch.

Once this comparison is done, if the visual diff detects an error in pixels above 2% then this screenshot will be labeled with the status error, otherwise it will be considered a success.

With these statuses, Backlight will publish a summary status/check in your Pull/Merge request, within your favorite Git provider.

In the meantime, Backlight calculates a Review Page for you, where you can comment and approve the Pull/Merge request manually if any of errors have been detected.

view presenting different accordions with 3 buttons before and after

Review UI

Backlight also leverages the API of your Git provider so you can interact directly with the Pull/Merge request UI Backlight built for you.

You can navigate through all components that have been detected with errors in the left panel.

All visual errors are highlighted with a red beam.

You can also choose to inspect the whole processing of the Pull/Merge request with Backlight by deactivating the filter on errors.

dropdown with the option to deactivate the filter on changes

In the right panel, Backlight will present N panels corresponding to all files inside a component. If there is any diff, it will allow you to inspect with live representation of the before and after of you stories or documentation. You can also access the snapshots by clicking on the ellipsis and selecting the display of screenshots instead of the live view.

You can mark each accordion (representing either a file or a snapshot) by clicking on the checkbox Viewed. This will collapse and reduce the visuals to review (highly inspired by Github's diff view).

dropdown menu showing 2 options visual screenshots and a debug link

Add comment to a Pull/Merge request

On each visual (story or documentation page), you can add a comment. This comment will go through the Git integration and the comment will be added to your Pull/Merge request.

input text and a preview comment presented below 2 visual representation of 3 buttons

Backlight will forge a message with the two screenshots to keep track of the visuals when the comment has been made.

Validate a Pull/Merge request

Once your review for a particular Pull/Merge request is done, you can either accept or deny, or simply add a general comment to the Pull/Merge request.

Backlight will add this status or comment to your Pull/Merge request, directly inside your favorite Git provider.

dropdown with an empty text aread and with 3 radios for options (approve, request for changes and comment) and submit button