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.

Sign up for GitHub

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

Jump to bottom

Create a FormFieldGroup component #2820

Closed
mannycarrera4 opened this issue Jul 8, 2024 · 0 comments · Fixed by #2865
Closed

Create a FormFieldGroup component #2820

mannycarrera4 opened this issue Jul 8, 2024 · 0 comments · Fixed by #2865
Assignees
@mannycarrera4
Milestone
12.0.0

Comments

@mannycarrera4
Copy link
Contributor

🚀 Feature Proposal

Create a FormFieldGroup component that handles the correct accessibility for grouping inputs. Common use cases are billing address inputs that are groups by a field set, or credit card inputs. Our current Form Field does't handle grouped inputs very well.

  • The API and styling would be the same as FormField in Preivew
  • Default element is FieldSet
  • Default Label is Legend
  • Make sure inputs like checkbox group are styled correctly
  • Add examples like billing and shipping with multiple inputs that are grouped
@jaclynjessup jaclynjessup moved this to 🆕 New in Canvas Kit Jul 8, 2024
@jaclynjessup jaclynjessup moved this from 🆕 New to 🏗 In progress in Canvas Kit Aug 5, 2024
@jaclynjessup jaclynjessup added this to the 12.0.0 milestone Aug 5, 2024
@mannycarrera4 mannycarrera4 mentioned this issue Aug 9, 2024
Merged
10 tasks
@jaclynjessup jaclynjessup linked a pull request Aug 22, 2024 that will close this issue
chore: Add FormFieldGroup component and density example #2865
Merged
10 tasks
alanbsmith pushed a commit that referenced this issue Sep 20, 2024
@mannycarrera4 @josh-bagwell @RayRedGoose
chore: Add FormFieldGroup component and density example (#2865)
87dbe31 
Fixes: #2805, #2806, #2820, [#2807](#2807)

[category:Components]

Release Note:
- We've added a new `FormFieldGroup` component to use when grouping inputs like checkboxes and radio inputs that need to be associated to one another. Its API matches the `FormField` API where you have `error` prop as well as `id` `isRequired` and `orienation`.

- `orientation` has been added back to `useFormFieldModel` to better support sub component styling.

- Styles have been cleaned up to use `gap` for proper spacing between labels, inputs and hint text.

- Added a new `FormField.Field` component to ensure proper alignment between label and inputs regardless of orientation and hint text. Ensure to wrap your inputs and hint text in this component.

Co-authored-by: manuel.carrera <[email protected]>
Co-authored-by: @josh-bagwell <[email protected]>
Co-authored-by: @RayRedGoose <[email protected]>
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in Canvas Kit Sep 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mannycarrera4 mannycarrera4

Labels
None yet
Projects
Canvas Kit
Status: ✅ Done
Milestone
12.0.0
Development

Successfully merging a pull request may close this issue.

chore: Add FormFieldGroup component and density example mannycarrera4/canvas-kit
2 participants
@mannycarrera4 @jaclynjessup