Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input field components - text, checkbox, radio #1611

Merged
merged 74 commits into from
Dec 17, 2021
Merged

Conversation

mperrotti
Copy link
Contributor

@mperrotti mperrotti commented Nov 16, 2021

This component renders input along with its label, validation content, and hint content. It will correctly associate labels and other related content with the input.

Screenshots

Value input
Screen Shot 2021-11-15 at 8 04 37 PM

Toggle (radio/checkbox) input
Screen Shot 2021-11-15 at 8 10 53 PM

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

Closes Primer issue #480

@mperrotti mperrotti requested review from a team and pksjce November 16, 2021 01:18
@changeset-bot
Copy link

changeset-bot bot commented Nov 16, 2021

🦋 Changeset detected

Latest commit: ad9e954

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 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

@mperrotti mperrotti marked this pull request as draft November 16, 2021 01:23
src/InputLabel.tsx Outdated Show resolved Hide resolved
@mperrotti mperrotti mentioned this pull request Nov 16, 2021
6 tasks
Note: I intentionally excluded this animation for the ChoiceFieldset because it has nowhere to animate in from

<!--
TODO: add `validationStatus` examples when we have the validation styling done
-->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this? ☝️

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we could get rid of it

import {ChoiceInputField, Checkbox, Radio} from '@primer/react'
import {MarkGithubIcon} from '@primer/octicons-react'
import {ComponentChecklist} from '../src/component-checklist'
import {PropsTable} from '../src/props-table'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of these imports may not be needed anymore

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll see what I can get rid of. When I excluded the PropsTable import, it caused a deployment error in Vercel.

Co-authored-by: Rez <rezrah@github.com>
)
const results = await axe(container)
expect(results).toHaveNoViolations()
cleanup()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be worth running cleanup and jest.clearAllMocks(); on an afterEach block at the top of the test suite, as you're using spy a fair bit here

Copy link
Contributor

@rezrah rezrah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💥 nice one @mperrotti

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants