Adding form components

[rezrah]

Summary

Adds a FormControl, Select, Checkbox and TextInput component as part of https://github.com/github/primer/issues/1122

These components use a mixture of patterns from Primer React and Primer Rails equivalent components.

List of notable changes:

• added four components for early testing: FormControl, TextInput, Select, Checkbox
• added docs and storybook playgrounds for individual components
• added layout example for GitHub Enterprise sign up form to both docs and storybook

Out-of-scope in this pull request

• Smaller button sizes

What should reviewers focus on?

Documentation preview

Storybook preview

• Review proposed API for suitability
• Review component performance, which has been optimised for pure rendering with minimal internal state management
• Review accessibility through Storybook Axe plugin

Steps to test:

1. Review the docs and storybook playground to ensure the form control and inputs work as expected
2. Verify that FormControl and TextInput appears as expected in the Figma file.

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

• Primer React Components
• Primer CSS / Primer Rails

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
• New visual snapshots have been generated / updated for any UI changes
• 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

Screenshots:

New leading and trailing text props

[changeset-bot]

🦋 Changeset detected

Latest commit: 459ba5f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react-brand	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

🟢 No design token changes found

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[ashygee]

Design/styling updates along with the removal of inset prop from the component API

[ashygee]

This is referencing the 12px icon but is being rendered at 16px. We should make an icon request to add and alert-fill 16px icon here since we are intending for larger validation messages.

[rezrah]

Sorry @ashygee, not quite following on this one. Do you mean you want me to add a 16px SVG to Octicons and then pull it in here?

As it's a vector it will scale without distortion, so is that necessary? I've already bumped the validation text size in an earlier commit.

[mperrotti]

Love where this is headed. My main feedback is that there are some decorative borders that I think should use the default border color.

The border between the "leading text" and the input, which looks like a cursor:

The border around the "Contact me" checkbox looks too much like a text or select input:

[mperrotti]

A few more design notes:

The checkbox isn't keyboard accessible when it's in a borded box:
https://user-images.githubusercontent.com/2313998/189192462-0754997c-b319-45ce-80f2-e9bba4ecb668.mp4

The checkbox animation feels a little slow, and it feels strange that the checkmark turns blue (as opposed to just the border) during the transition from checked to unchecked:
https://user-images.githubusercontent.com/2313998/189193112-52ffe661-fc24-4889-ac11-e55510d9b9f5.mp4

The focus style on a text input with a leading visual feels a little "off":

• the blue border is smaller on the left side
• there is a double border created by the focus border and the separator between the leading text and the input
• I was expecting the whole input to have the blue focus border, but I can see why we might want to have the focus style on the part you type in
• I was expecting the input to get focus even when I clicked the leading text, but I also think it's valid that clicking that area doesn't give focus. For reference, here is what we do in Primer React (video)

[ashygee]

@rezrah all of this looks good to me and I really appreciate @mperrotti for sharing those insights as well. In regards to the focus state for the Checkbox input, this is the direction that we've agreed to go in:

[rezrah]

This PR is getting quite large and given it's been open for a while, I'm going to merge and iterate on it over the next week in future (smaller) pull requests.

Changes that will be carried forward:

• Updated Checkbox focus styles
• Focus style for TextInput covering entire control (including leading and trailing text)
• FormControl hasBorder prop to use brand-color-border-default
• TextInput leading and trailing text inner divider to use brand-color-border-default
• Check screen reader ordering with accessibility team

cc. @tobiasahlin @ashygee let me know if I've missed anything 🙏

[rezrah]

Latest update adds new focus styling to Checkbox, Select and TextInput controls.

Also fixed:

• FormControl hasBorder prop to use brand-color-border-default
• TextInput leading and trailing text inner divider to use brand-color-border-default

demo.for.new.focus.control.styles.mov