Fix errors on screenshots (#716)

* Commit screenshots

Run step if failure

Set working directory

Quote message

Debuggin

Check first, man

With name and email

Changed in CI
Please review changes in these files carefully, as they were
automatically generated during CI.

Revert "Changed in CI"

This reverts commit 1bf997c.

Add documentation and cleanups

Fix quoting

* Changed in CI
Please review the changes in the files in this commit
carefully, as they were automatically generated during CI.
Run `git pull` to bring the changes into your local branch.
Then, if you do not want the changes, run `git revert HEAD`.

* Revert "Changed in CI"

This reverts commit e4f9d01.

* Try to avoid double CI run when screenshots change

* [skip ci] Changed in CI
Please review the changes in the files in this commit
carefully, as they were automatically generated during CI.
Run `git pull` to bring the changes into your local branch.
Then, if you do not want the changes, run `git revert HEAD`.

* Be safe with CI

* Fix examples to show invalid-feedback

* Clarify workflow when screenshots change

---------

Co-authored-by: github-actions <[email protected]>

CONTRIBUTING.md

@@ -50,7 +50,7 @@ You may find the [demo application](#the-demo-application) useful for developmen
 - If your PR fixes an issues, be sure to put "Fixes #nnn" in the description of the PR (where `nnn` is the issue number). Github will automatically close the issue when the PR is merged.
 - When the PR is submitted, check if GitHub Actions ran all the tests successfully, and didn't raise any issues.
 
-When you create or update a pull request, GitHub automatically runs tests that generate the screenshots in the [`README.md`](/README.md). If any of the screenshots change, GitHub will add an additional commit with the updated screenshots.
+When you create or update a pull request, GitHub automatically runs tests that generate the screenshots in the [`README.md`](/README.md). If any of the screenshots change, GitHub will add an additional commit to your branch, with the updated screenshots.
 
 Normally, the screenshots should _not_ change. If the screenshots changed, please review them _carefully_. Some clear reasons why you would want to keep the changed screenshots:
 
@@ -73,7 +73,7 @@ You can run the tests that generate the screenshots locally, but unless your env
 
 ```bash
 cd demo
-bundle exec rails test:all
+bundle exec rails test:all # or test:system
 ```
 
 The [Docker development environment](#using-docker-compose) appears to generate screenshots that are the same as what GitHub generates.

README.md

@@ -1586,6 +1586,7 @@ If you want to display a custom inline error for a specific attribute not repres
 ![Example 50](demo/doc/screenshots/bootstrap/readme/50_example.png "Example 50")
 ```erb
 <%= bootstrap_form_for @user_with_error do |f| %>
+  <input class="is-invalid" autocomplete="off" disabled type="hidden">
   <%= f.errors_on :email %>
 <% end %>
 ```
@@ -1594,15 +1595,19 @@ Which outputs:
 
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
+  <input autocomplete="off" class="is-invalid" disabled type="hidden">
   <div class="invalid-feedback">Email is invalid</div>
 </form>
 ```
 
+Note that the `invalid-feedback` `div` is hidden unless there is a preceding element under the same parent that has class `is-invalid`. For the examples, we've artificially added a hidden input.
+
 You can hide the attribute name like this:
 
 ![Example 51](demo/doc/screenshots/bootstrap/readme/51_example.png "Example 51")
 ```erb
 <%= bootstrap_form_for @user_with_error do |f| %>
+  <input class="is-invalid" autocomplete="off" disabled type="hidden">
   <%= f.errors_on :email, hide_attribute_name: true %>
 <% end %>
 ```
@@ -1611,6 +1616,7 @@ Which outputs:
 
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
+  <input autocomplete="off" class="is-invalid" disabled type="hidden">
   <div class="invalid-feedback">is invalid</div>
 </form>
 ```
@@ -1620,6 +1626,7 @@ You can also use a custom class for the wrapping div, like this:
 ![Example 52](demo/doc/screenshots/bootstrap/readme/52_example.png "Example 52")
 ```erb
 <%= bootstrap_form_for @user_with_error do |f| %>
+  <input class="is-invalid" autocomplete="off" disabled type="hidden">
   <%= f.errors_on :email, custom_class: 'custom-error' %>
 <% end %>
 ```
@@ -1628,10 +1635,13 @@ Which outputs:
 
 ```html
 <form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
+  <input autocomplete="off" class="is-invalid" disabled type="hidden">
   <div class="custom-error">Email is invalid</div>
 </form>
 ```
 
+Note that adding the custom class removes the default `invalid-feedback` class. If you still want the default `invalid-feedback` formatting, add it to your `custom_class`es.
+
 ## Required Fields
 
 A label that is associated with a required field is automatically annotated with