chore: Add FormFieldGroup component and density example #2865

mannycarrera4 · 2024-08-09T21:36:18Z

Summary

Fixes: #2805, #2806, #2820, #2807

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

Checklist

MDX documentation adheres to Canvas Kit's Documentation Guidelines
Label ready for review has been added to PR

For the Reviewer

PR title is short and descriptive
PR summary describes the change (Fixes/Resolves linked correctly)
PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

Code
Documentation
Testing
Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

cypress · 2024-08-09T21:46:46Z

Workday/canvas-kit Run #7776

Run Properties: Passed #7776 • 4c2dc6dc7b ℹ️: Merge a11e36dd1c7c556b2bc54acc69455290d4b14c6a into 442af058736ce712c0033c941e71...

Project	`Workday/canvas-kit`
Branch Review	`mc-ff-example`
Run status	`Passed #7776`
Run duration	`03m 21s`
Commit	`4c2dc6dc7b ℹ️: Merge a11e36dd1c7c556b2bc54acc69455290d4b14c6a into 442af058736ce712c0033c941e71...`
Committer	`Manuel Carrera`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`14`
Pending	`16`
Skipped	`0`
Passing	`854`
View all changes introduced in this branch ↗︎

UI Coverage `21.79%`
Untested elements	`1768`
Tested elements	`490`

Accessibility `99.21%`
Failed rules	`5 critical` `5 serious` `0 moderate` `2 minor`
Failed elements	`228`

…as-kit into mc-ff-example

modules/preview-react/form-field/lib/FormFieldGroup.tsx

modules/preview-react/form-field/stories/examples/AllFields.tsx

modules/preview-react/form-field/stories/examples/GroupedInputs.tsx

…as-kit into mc-ff-example

Co-authored-by: Josh <44883293+josh-bagwell@users.noreply.github.com>

…as-kit into mc-ff-example

cypress.config.ts

mannycarrera4 · 2024-09-20T14:20:09Z

modules/preview-react/radio/lib/RadioGroup.tsx

@@ -24,7 +24,7 @@ const radioGroupStencil = createStencil({
    borderRadius: system.shape.x1,
    gap: system.space.x2,
    padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
-    margin: `${calc.negate(system.space.x1)} ${calc.negate(system.space.x3)}`,


Instead of using margin, we're using gap for spacing

mannycarrera4 · 2024-09-20T14:24:39Z

Note: Accepted build: https://www.chromatic.com/build?appId=5d854c26ba934e0020f5e98a&number=9419 on chromatic.

The visual difference in height it due to the removal of margin on the radio group container. When used with formfield, the gap should handle proper spacing. When a radio group is rendered by itself it will show the visual difference.

cypress/component/ActionBar.spec.tsx

modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

mannycarrera4 · 2024-09-20T14:29:45Z

modules/preview-react/form-field/lib/FormFieldGroupList.tsx

+    borderRadius: system.shape.x1,
+    gap: system.space.x2,
+    padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
+    margin: `0 ${calc.negate(system.space.x3)}`,


removed margin bottom/top, we should accomplish this with gap

modules/preview-react/form-field/lib/FormFieldLabel.tsx

mannycarrera4 · 2024-09-20T14:34:54Z

modules/react/radio/lib/RadioGroup.tsx

@@ -39,7 +39,7 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
    boxSizing: 'border-box',
    borderRadius: borderRadius.m,
    padding: `${space.xxxs} ${space.xs}`,
-    margin: `-${space.xxxs} -${space.xs}`,
+    margin: `0 -${space.xs}`,


using gap for spacing

mannycarrera4 · 2024-09-20T14:35:40Z

modules/react/select/lib/Select.tsx

@@ -148,7 +145,7 @@ export const SelectCard = createSubcomponent('div')({
  );
 });

-export interface SelectProps extends Themeable, ExtractProps<typeof Combobox> {}


removal of themable

modules/react/select/stories/Select.mdx

modules/react/switch/stories/examples/LabelPosition.tsx

Co-authored-by: Josh <44883293+josh-bagwell@users.noreply.github.com>

manuel.carrera added 9 commits August 1, 2024 10:05

fix: Add density example

5705d9d

fix: Add formfield group

adb7ef3

fix: Clean formfield group

392774a

fix: Add horixontal support

a7a59af

fix: Clean up example

028a60a

fix: Refactor select styles

909fb81

fix: Add docs

421a1d9

fix: Update radio usage

911a3da

fix: Remove onchange

c909633

mannycarrera4 and others added 12 commits August 9, 2024 16:01

Merge branch 'prerelease/major' into mc-ff-example

f9826e8

fix: Remove id from input

22ff4b4

Merge branch 'mc-ff-example' of https://github.com/mannycarrera4/canv…

30056ef

…as-kit into mc-ff-example

fix: Handle errors better

d1744dc

fix: Update form validation

5c4978c

fix: Add timeout

8ddb470

fix: Clean up jsdocs

d34641f

fix: Update jsdocs

f39b3b8

fix: Remove unused stencil

0e7cb0e

fix: Update density example

2b35b03

fix: Clean up examples

0af112e

fix: Update upgrade guide

a8b1813

mannycarrera4 marked this pull request as ready for review August 15, 2024 22:36

docs: Add info to upgrade guide

e6af5ad

mannycarrera4 added the ready for review Code is ready for review label Aug 19, 2024

github-actions bot requested a review from NicholasBoll August 19, 2024 20:56

fix: Update cc example

6060aed

josh-bagwell reviewed Aug 22, 2024

View reviewed changes

modules/preview-react/form-field/lib/FormFieldGroup.tsx Outdated Show resolved Hide resolved

josh-bagwell reviewed Aug 22, 2024

View reviewed changes

modules/preview-react/form-field/stories/examples/AllFields.tsx Outdated Show resolved Hide resolved

josh-bagwell reviewed Aug 22, 2024

View reviewed changes

modules/preview-react/form-field/stories/examples/GroupedInputs.tsx Outdated Show resolved Hide resolved

manuel.carrera added 3 commits September 18, 2024 12:07

Merge branch 'mc-ff-example' of https://github.com/mannycarrera4/canv…

a73eaf0

…as-kit into mc-ff-example

fix: Clean up styles

23e2f63

fix: Clean up styles

521f102

mannycarrera4 added approved Code has been reviewed and approved (ship it) on hold PR is on hold until further notice 12.x and removed ready for review Code is ready for review labels Sep 19, 2024

manuel.carrera and others added 8 commits September 19, 2024 12:19

fix: Remove use of parentModifier

435c858

fix: Clean up radios

63fc6c5

fix: Deprecate parentModifier

a0c55e3

fix: Clean up docs

255829a

Update modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

9b3ac40

Co-authored-by: Josh <44883293+josh-bagwell@users.noreply.github.com>

Merge branch 'prerelease/major' into mc-ff-example

67d90e5

fix: Export the things from index

f3ba40d

Merge branch 'mc-ff-example' of https://github.com/mannycarrera4/canv…

af922d1

…as-kit into mc-ff-example