feat(Form + GridForm): Add actual required optional + required form text #2872

dreamwasp · 2024-04-30T19:58:49Z

Overview

Adds * Required to GridForm (and as a FormElement) + (optional) to labels of optional field. Also removed showRequired from GridForm because the accessibility text is mandatory

Theres also some reorganizing of form elements into folders

PR Checklist

Related to designs: here
Related to JIRA ticket: [gm-620]
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Check out GridForm page
See the form additions
Turn on screenreader
See that (optional) and * in form fields are not read

PR Links and Envs

Repository	PR Link	PR Env
Mono	Monolith PR	[Monolith Env]

…cass-gm-620

packages/gamut/src/GridForm/GridForm.tsx

…cass-gm-620

aresnik11

It works!! ✨

…cass-gm-620

LinKCoding

LGTM! Left some comments and questions :)
Tested the voiceover on required and optional text and they're not read :D

LinKCoding · 2024-05-24T13:05:06Z

packages/gamut/src/Form/elements/FormGroupLabel.tsx

-        {showRequired ? ' *' : ''}
+        {!isSoloField && (
+          <Text as="span" aria-hidden>
+            {required ? '*' : ' \u00A0(optional)'}


' \u00A0

is the space before the \u00A0 intentional?
When looking up \u00A0, I see it's a non-break space, so to me, this reads as two spaces. But then, it looks like the tests pass, and the stories look fine 🤔

i was having issues when not including the hardcoded space but I'll double check!

definitely one of those things where I'm more curious than anything lol

LinKCoding · 2024-05-24T13:29:15Z

packages/gamut/src/GridForm/GridForm.tsx


 export function GridForm<Values extends FormValues<Values>>({
  cancel,
  children,
  columnGap = defaultColumnGap,
  fields = [],
+  hasSoloField = false,
+  hideRequiredText,


can this be defaulted to false?

LinKCoding · 2024-05-24T13:30:38Z

packages/gamut/src/GridForm/GridFormSections/GridFormContent.tsx

@@ -24,6 +27,8 @@ export const GridFormContent: React.FC<GridFormContentProps> = ({
    field.validation?.required
  );

+  // console.log(isSoloField);


leftover comment

ty!! will fix!

LinKCoding · 2024-05-24T13:44:01Z

packages/styleguide/stories/Organisms/ConnectedForm/ConnectedForm.stories.mdx

@@ -34,6 +34,8 @@ The primary access pattern of `ConnectedForm` is the `useConnectedForm` hook whi

 Each of your fields' names must correspond with the appropriate `defaultValue` key. `validationRules` operates similarly - each key must correspond to a key in `defaultValue` and must follow [react-hook-form's](https://react-hook-form.com) [validation patterns](https://react-hook-form.com/v6/api#register).

+This hook also returns the `FormRequiredText` component - include this before your form unless all of your form fields are optional.


Is there a form where all fields are optional?

yupp! a good example is the job-readiness page -- all of the fields are optional (you do need one of them to submit the form but it can be any one of them)

LinKCoding · 2024-05-24T13:47:19Z

packages/styleguide/stories/Organisms/GridForm.stories.mdx

+
+## hideRequiredText
+
+ `hideRequiredText` will hide the ;\* Required' text that appears at the top of our forms. This should only be hidden if the form has no required fields.


;* Required'

typo, the semicolon should be a single quote

codecademydev · 2024-05-29T15:09:00Z

📬Published Alpha Packages:

eslint-plugin-gamut@2.1.1-alpha.4bbe1f.0
@codecademy/gamut@55.20.1-alpha.4bbe1f.0
@codecademy/gamut-icons@9.24.3-alpha.4bbe1f.0
@codecademy/gamut-illustrations@0.45.2-alpha.4bbe1f.0
@codecademy/gamut-kit@0.6.409-alpha.4bbe1f.0
@codecademy/gamut-patterns@0.9.13-alpha.4bbe1f.0
@codecademy/gamut-styles@16.2.2-alpha.4bbe1f.0
@codecademy/gamut-tests@5.0.11-alpha.4bbe1f.0
@codecademy/styleguide@66.20.1-alpha.4bbe1f.0

codecademydev · 2024-05-29T15:09:26Z

🚀 Styleguide deploy preview ready!

https://66574521a00be628a46251b1--gamut-preview.netlify.app

Deploy Logs

dreamwasp and others added 21 commits April 30, 2024 15:58

reorg form elements

e8e909c

start sharing types in fields

f1455da

more deduplicating

14738c9

start serious work on required

b7ab50f

Merge branch 'main' into cass-gm-620

cdaba56

more deduplicating

3a02080

Merge branch 'cass-gm-620' of ssh://github.com/Codecademy/gamut into …

f77013e

…cass-gm-620

better text and start connectedform

70d5faf

add formrequiredtext to hook, pending docs changes

ea93422

add stories + start fixing test failures

5d55673

lots of test fixing

86d0ecf

more test updates

e3ff897

fix stories

150645f

fix blanks

79614a8

Merge branch 'main' into cass-gm-620

4048d99

add wrapperProps to title

7361b50

Merge branch 'cass-gm-620' of ssh://github.com/Codecademy/gamut into …

2f958b7

…cass-gm-620

add wrapperProps to title

398475f

Merge branch 'main' into cass-gm-620

675c413

auto-import, smh

bee7c73

prettier issues, go figure

cad5409

dreamwasp changed the title ~~reorg form elements~~ feat(Form): Add actual required optional + required text May 7, 2024

remove confusing story

5a77ab8

dreamwasp marked this pull request as ready for review May 7, 2024 21:30

dreamwasp requested a review from a team as a code owner May 7, 2024 21:30

dreamwasp requested review from timjenkins and BandanaKM May 7, 2024 21:30

dreamwasp changed the title ~~feat(Form): Add actual required optional + required text~~ feat: Add actual required optional + required text May 8, 2024

dreamwasp changed the title ~~feat: Add actual required optional + required text~~ feat: Add actual required optional + required form text May 8, 2024

add more docs

95ce7db

dreamwasp and others added 2 commits May 10, 2024 17:12

remove asterisk

f563ee4

Merge branch 'main' into cass-gm-620

30e4ef2

aresnik11 reviewed May 14, 2024

View reviewed changes

packages/gamut/src/GridForm/GridForm.tsx Outdated Show resolved Hide resolved

dreamwasp added 2 commits May 14, 2024 10:21

fix stories

fabe667

Merge branch 'cass-gm-620' of ssh://github.com/Codecademy/gamut into …

7b92e36

…cass-gm-620

aresnik11 approved these changes May 14, 2024

View reviewed changes

dreamwasp and others added 13 commits May 15, 2024 14:43

fix more tests

d73c506

format :)

e17858d

try to jumpstart pkg cache

f5d3380

revert

eed9352

solofield kindof working

cd9461f

fix solo fields

57ae5c1

fix solo fields

a0871c4

require fields etc

787c71a

Merge branch 'main' into cass-gm-620

4e833b2

require fields etc

68d976f

fix labels + tests

f251689

Merge branch 'cass-gm-620' of ssh://github.com/Codecademy/gamut into …

3e8efcc

…cass-gm-620

heading

8e02040

LinKCoding reviewed May 24, 2024

View reviewed changes

dreamwasp added 4 commits May 28, 2024 10:01

kenny feedback

4454feb

format stories

19407e0

kill cache

409950d

kill cache?

4bbe1ff

dreamwasp added the Ship It Automerge this PR when possible label May 29, 2024

codecademydev merged commit e712b44 into main May 29, 2024
17 of 18 checks passed

codecademydev deleted the cass-gm-620 branch May 29, 2024 15:28

codecademydev removed the Ship It Automerge this PR when possible label May 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Form + GridForm): Add actual required optional + required form text #2872

feat(Form + GridForm): Add actual required optional + required form text #2872

dreamwasp commented Apr 30, 2024 •

edited

aresnik11 left a comment

LinKCoding left a comment

LinKCoding May 24, 2024

dreamwasp May 24, 2024

LinKCoding May 28, 2024

LinKCoding May 24, 2024

LinKCoding May 24, 2024

dreamwasp May 24, 2024

LinKCoding May 24, 2024

dreamwasp May 24, 2024

LinKCoding May 24, 2024

codecademydev commented May 29, 2024

codecademydev commented May 29, 2024

		@@ -34,6 +34,8 @@ The primary access pattern of `ConnectedForm` is the `useConnectedForm` hook whi

		Each of your fields' names must correspond with the appropriate `defaultValue` key. `validationRules` operates similarly - each key must correspond to a key in `defaultValue` and must follow [react-hook-form's](https://react-hook-form.com) [validation patterns](https://react-hook-form.com/v6/api#register).

		This hook also returns the `FormRequiredText` component - include this before your form unless all of your form fields are optional.


		## hideRequiredText

		`hideRequiredText` will hide the ;\* Required' text that appears at the top of our forms. This should only be hidden if the form has no required fields.

feat(Form + GridForm): Add actual required optional + required form text #2872

feat(Form + GridForm): Add actual required optional + required form text #2872

Conversation

dreamwasp commented Apr 30, 2024 • edited

Overview

PR Checklist

Testing Instructions

PR Links and Envs

aresnik11 left a comment

Choose a reason for hiding this comment

LinKCoding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecademydev commented May 29, 2024

📬Published Alpha Packages:

codecademydev commented May 29, 2024

dreamwasp commented Apr 30, 2024 •

edited