feat(label, Form): ensure all inputs support isOptional and required props

[DobroTora]

Proposed behaviour

Ensure that all form inputs support required and isOptional prop (no longer legacy). Add stories and unit tests for all inputs Add a Form story with some required inputs and RequiredFieldsIndicator (new component) Any input not required has been made optional in our docs

Small updates to spacing of * and colour of (option) content appended to label to match DS design

Current behaviour

Some inputs do not support required or isOptional props No Form story for required etc

Checklist

• [x] Commits follow our style guide
• [x] Related issues linked in commit messages if required
• [ ] Screenshots are included in the PR if useful
• [x] Unit tests added or updated if required
• [x] Storybook added or updated if required
• [x] Typescript d.ts file added or updated if required

QA

• [x] Tested in CodeSandbox/storybook
• [ ] Add new Cypress test coverage if required
• [x] Carbon implementation matches Design System/designs
• [ ] UI Tests GitHub check reviewed if required

Additional context

Testing instructions

The following CodeSandbox is an example of the broken behaviour. You can see the new behaviour by looking at the version in the comment by codesandbox[bot].

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ef71caf88ce77748fc2b3250b843e38ed178f9ae:

Sandbox	Source
carbon-quickstart	Configuration
carbon-quickstart-typescript	Configuration
carbon-quickstart	PR

[Parsium]

The approach with InlineInputs looks good to me @DobroTora 👍🏼 Just a few things from me to add that I think we should address:

1. ~NumeralDate and Select are currently missing the isOptional prop~
2. Docs examples showcasing optional form fields
3. ~The isOptional prop of FormField is incorrectly marked as legacy~

~For 1. this is because of the way the components use the FormField component, so the isOptional prop of FormField unfortunately doesn't cascade to either component. We'll need to add a isOptional to the prop interfaces for both NumeralDate and Select and make sure it is passed to the underlying Textbox.~

If you need anything, don't hesitate to get in touch 😄

[Parsium]

Just a few comments from me @DobroTora. If we could also add some stories demoing the isOptional prop for the components that support it, that would be fab so we have it documented for consumers 👍🏼

[DobroTora]

2. Docs examples showcasing optional form fields

I really like the neat and clear format of your review @Parsium . It is a really a good guide to follow for me.

[edleeks87]

Nothing much from me that @Parsium hasn't raised already. It might also be worth adding a Form story with some of these inputs in with required/ isOptional set

[harpalsingh]

@DobroTora Just to check, is the "Optional" text Black 90% on purpose, as its different in the designs, but from an accessbility pov the only token is the Yin 90 so it works against the app background, but we are missing the 74 value (or we can make it 75). For now I am happy to pass the as built and we can review the color of that text with DS team if we need to add another token value, because it has to handle app background color.

[harpalsingh]

Also to add the following acceptance was not included and there not part of this review and will be moved into another ticket.

• Add the required field key to the top of every form example: 'fill in all fields marked with *'

[harpalsingh]

@DobroTora Should Checkbox / Radio (Maybe switch also) not include the required/optional work?

[harpalsingh]

As discussed with several developers all the outstanding tasks related to this work will be added to a new ticket and so we will approve this PR to be merged to get this work started.

[harpalsingh]

@edleeks87 We should not have IsOptional on ALL inputs by default, that prop should still be something a dev/designer add themselves and by default no optional/required is displayed, as that could be very confusing in layouts to see that everywhere all the time in particular right away. Spoken with @ljemmo from DS on this and confirmed that it should not be on by default in this release as we do more testing/demos.

[carbonci]

:tada: This PR is included in version 128.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: