Add explanation of asterisk for required fields to example forms and documentation #820

joshfarrant · 2024-11-15T14:31:28Z

Summary

Add explanation of asterisk (*) to both example forms and documentation.
Simplified FormControl validation docs example (commit).
Fixed bug where TextInput width would expand to length of validation message (commit).

Supporting resources (related issues, external links, etc):

Closes https://github.com/github/primer/issues/3779

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

github-actions · 2024-11-15T14:33:15Z

🟢 No design token changes found

Copilot reviewed 1 out of 2 changed files in this pull request and generated no suggestions.

Files not reviewed (1)

apps/docs/content/components/FormControl.mdx: Language not supported

Tip: If you use Visual Studio Code, you can request a review from Copilot before you push from the "Source Control" tab. Learn more

github-actions · 2024-11-15T14:41:55Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

changeset-bot · 2024-11-15T14:46:06Z

⚠️ No Changeset found

Latest commit: d2a3582

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

rezrah · 2024-11-15T16:28:29Z

apps/docs/content/components/FormControl.mdx

@@ -328,6 +328,8 @@ Pass the `fullWidth` prop to `FormControl` to provide additional behavior and st

 Pass the `required` prop to `FormControl` to provide additional behavior and state context to all `children`, rather than the input only.

+When marking a field as required, it is recommended to also provide a corresponding message at the start of the form informing the user that "_all fields marked with an asterisk (\*) are required_".


Nice!

Could we also update the form example further up the page please?

Ah good spot, thanks.

I'd searched for all <form> tags but looks like that was missing one. I've wrapped it in one now and made the required change 👍

Thanks @joshfarrant.

@simmonsjenna here's a sample of the required field statement we need Site to add to all form designs going forward. Let us know if you have any further guidance on spacing, positioning or colors. We can fix in a follow up.

Link

…ssage

Copilot reviewed 8 out of 10 changed files in this pull request and generated no suggestions.

Files not reviewed (2)

apps/docs/content/components/FormControl.mdx: Language not supported
packages/react/src/forms/TextInput/TextInput.module.css: Language not supported

Tip: Turn on automatic Copilot reviews for this repository to get quick feedback on every pull request. Learn more

rezrah · 2024-11-21T10:48:22Z

...monial.visual.spec.ts-snapshots/Visual-Comparison-Testimonial-Testimonial-Avatar-1-linux.png

Any idea what's going on with these? Presumably it's the avatar being switched to a local fixture?

Yea I'm not sure, that's all I can imagine but I don't understand why that would trigger an update 🤔

...pshots/Visual-Comparison-FormControl-FormControl-w-Error-Validation---Playground-1-linux.png

packages/react/src/forms/TextInput/TextInput.module.css

rezrah · 2024-11-21T11:06:05Z

apps/docs/content/components/FormControl.mdx

  }

+  const isInvalid = /\s/g.test(value)


FYI we've lost the animation here, presumably because we're not forcing a re-render? Out of interest, was this intentional or just a side-effect of cleaning this example up?

Previous (current) production with animation:

Screen.Recording.2024-11-21.at.11.03.17.mov

Now with this regex approach:

Screen.Recording.2024-11-21.at.11.03.39.mov

…ation message" This reverts commit 3bbd80c. This fix will be added in its own PR.

joshfarrant temporarily deployed to github-pages November 15, 2024 14:38 — with GitHub Actions Inactive

joshfarrant added the update snapshots label Nov 15, 2024

joshfarrant marked this pull request as ready for review November 15, 2024 14:39

joshfarrant requested review from Copilot, rezrah and danielguillan November 15, 2024 14:39

Copilot AI reviewed Nov 15, 2024

View reviewed changes

joshfarrant changed the title ~~Joshfarrant/formcontrol required label~~ Add explanation of asterisk for required fields to both example forms and documentation. Nov 15, 2024

joshfarrant changed the title ~~Add explanation of asterisk for required fields to both example forms and documentation.~~ Add explanation of asterisk for required fields to example forms and documentation Nov 15, 2024

rezrah reviewed Nov 15, 2024

View reviewed changes

joshfarrant added update snapshots and removed update snapshots labels Nov 18, 2024

joshfarrant temporarily deployed to github-pages November 18, 2024 11:39 — with GitHub Actions Inactive

joshfarrant temporarily deployed to github-pages November 18, 2024 12:14 — with GitHub Actions Inactive

danielguillan approved these changes Nov 18, 2024

View reviewed changes

joshfarrant and others added 9 commits November 19, 2024 11:55

add asterisk explanation to example forms

0e1cc4a

add asterisk recommendation to docs

8adbf3e

github-actions[bot] Regenerated snapshots

a8a1f43

simplified FormControl validation docs example

6aad5af

fix bug where TextInput width would expand to length of validation me…

3bbd80c

…ssage

add asterisk recommendation to docs

18140f5

github-actions[bot] Regenerated snapshots

3aef3cc

update variable name

2aed209

update snapshots

127844e

joshfarrant force-pushed the joshfarrant/formcontrol-required-label branch from e5cd4c2 to 127844e Compare November 19, 2024 11:59

joshfarrant added update snapshots and removed update snapshots labels Nov 19, 2024

joshfarrant requested a review from rezrah November 19, 2024 11:59

joshfarrant temporarily deployed to github-pages November 19, 2024 12:06 — with GitHub Actions Inactive

joshfarrant requested a review from Copilot November 20, 2024 13:54

Copilot AI reviewed Nov 20, 2024

View reviewed changes

rezrah reviewed Nov 21, 2024

View reviewed changes

...pshots/Visual-Comparison-FormControl-FormControl-w-Error-Validation---Playground-1-linux.png Outdated Show resolved Hide resolved

rezrah reviewed Nov 21, 2024

View reviewed changes

packages/react/src/forms/TextInput/TextInput.module.css Outdated Show resolved Hide resolved

rezrah reviewed Nov 21, 2024

View reviewed changes

joshfarrant added 2 commits November 21, 2024 11:31

Revert "fix bug where TextInput width would expand to length of valid…

5a6f749

…ation message" This reverts commit 3bbd80c. This fix will be added in its own PR.

update snapshots

d2a3582

joshfarrant deployed to github-pages November 21, 2024 11:40 — with GitHub Actions View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add explanation of asterisk for required fields to example forms and documentation #820

Add explanation of asterisk for required fields to example forms and documentation #820

joshfarrant commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading

changeset-bot bot commented Nov 15, 2024 •

edited

Loading

rezrah Nov 15, 2024

joshfarrant Nov 18, 2024

rezrah Nov 21, 2024

rezrah Nov 21, 2024

joshfarrant Nov 21, 2024

rezrah Nov 21, 2024

		@@ -328,6 +328,8 @@ Pass the `fullWidth` prop to `FormControl` to provide additional behavior and st

		Pass the `required` prop to `FormControl` to provide additional behavior and state context to all `children`, rather than the input only.

		When marking a field as required, it is recommended to also provide a corresponding message at the start of the form informing the user that "_all fields marked with an asterisk (\*) are required_".

Add explanation of asterisk for required fields to example forms and documentation #820

Are you sure you want to change the base?

Add explanation of asterisk for required fields to example forms and documentation #820

Conversation

joshfarrant commented Nov 15, 2024 • edited Loading

Summary

Supporting resources (related issues, external links, etc):

Contributor checklist:

Reviewer checklist:

github-actions bot commented Nov 15, 2024 • edited Loading

🟢 No design token changes found

Choose a reason for hiding this comment

github-actions bot commented Nov 15, 2024 • edited Loading

🟢 No visual differences found

changeset-bot bot commented Nov 15, 2024 • edited Loading

⚠️ No Changeset found

rezrah Nov 15, 2024

Choose a reason for hiding this comment

joshfarrant Nov 18, 2024

Choose a reason for hiding this comment

rezrah Nov 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rezrah Nov 21, 2024

Choose a reason for hiding this comment

joshfarrant Nov 21, 2024

Choose a reason for hiding this comment

rezrah Nov 21, 2024

Choose a reason for hiding this comment

joshfarrant commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading

changeset-bot bot commented Nov 15, 2024 •

edited

Loading