Support for alternative 'required' patterns

[mkernohanbc]

In our existing input components (eg. Select, TextField, etc.), we communicate an input's required/optional state by displaying a "(required)" appendage to the input label.

We should consider how to provide support for alternative conventions in our components, for example:

• Showing a red asterisk rather than a text label to indicate a required field
• Indicating optional fields, rather than required ones

I've done some initial POC work on a solution for this, using a new requiredConvention prop to toggle between text and asterisk formats:

In this example, I used a switch statement and RAC's isRequired prop:

<Label className="bcds-react-aria-TextArea--Label">
       {label} {isRequired && getRequiredIndicator(requiredConvention)}
</Label>

@ty2k suggested that a more generalised solution that can be implemented across all of our input components would be to break this functionality out into a RequiredIndicator utility component.

Some things to consider for this new component:

• What are the common patterns that we want to support
• What is the default behaviour
• How do we provide a method for the user to apply their own styling/convention
• Can/should we also support the inverse ("optional" rather than "required" labelling)

Putting this on the backlog to revisit in a future sprint. @Philip-Cheung I'd like to get your take on these questions, so please give it some thought!