feat(component)!: change required behavior on form elements

[davelinke]

What?

Changing the behavior on form elements to render an asterisk when required instead of an optional label when optional

Why?

This pattern follows the most encountered pattern on the web. The most common scenario with forms is that there will be little required fields to complete a form and many optionals. Product Add/Edit follows the asterisk pattern due to this reason, and many other teams, B2B being the one whose user experience is looks flawed due to this factor have requested the change.

In terms of accessibility, screen readers announce to the user when a form field is required by making use of the native HTML required attribute.

Screenshots/Screen Recordings

Testing/Proof

dev.tsx code

import {
  FormControlLabel,
  Counter,
  FileUploader,
  Input,
  Select,
  Textarea,
  MultiSelect,
  H1,
  Grid,
  GridItem,
} from '@bigcommerce/big-design';
import React, { FunctionComponent, useState } from 'react';

const RequiredFormItems: FunctionComponent = () => {
  return (
    <Grid gridColumns="repeat(2,1fr)" gridGap="2rem" padding={'xxLarge'}>
      <GridItem gridColumn={'span 2'}>
        <H1>Form Items</H1>
      </GridItem>

      <FormControlLabel htmlFor="email" renderRequired={true}>
        Sole label required
      </FormControlLabel>
      <FormControlLabel htmlFor="email">Sole label not required</FormControlLabel>

      <Input required label={'Input required'} />
      <Input label={'Input not required'} />

      <Counter label="Counter required" required onCountChange={() => {}} value={0}></Counter>
      <Counter label="Counter not required" onCountChange={() => {}} value={0}></Counter>

      <FileUploader label="File uploader required" required files={[]} onFilesChange={() => {}} />
      <FileUploader label="File uploader not required" files={[]} onFilesChange={() => {}} />

      <Select
        label="Select required"
        required
        options={[{ value: '1', content: 'Option 1' }]}
        onOptionChange={() => {}}
        value={'1'}
      />
      <Select
        label="Select not required"
        options={[{ value: '1', content: 'Option 1' }]}
        onOptionChange={() => {}}
        value={'1'}
      />

      <Textarea label="Textarea required" required />
      <Textarea label="Textarea not required" />
      
      <MultiSelect
        label="MultiSelect required"
        required
        options={[
          { value: '1', content: 'Option 1' },
          { value: '2', content: 'Option 2' },
        ]}
        value={['1']}
        onOptionsChange={() => {}}
      />
      <MultiSelect
        label="MultiSelect not required"
        options={[
          { value: '1', content: 'Option 1' },
          { value: '2', content: 'Option 2' },
        ]}
        onOptionsChange={() => {}}
        value={['1']}
      />
    </Grid>
  );
};

export default RequiredFormItems;

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: de39dec83c0d88d73a29687a51f3d6feedaf01c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@bigcommerce/big-design	Major
@bigcommerce/docs	Minor
@bigcommerce/big-design-patterns	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[chanceaclark]

@davelinke for reference in commit messages, if there is a breaking change, we usually add a ! before the : to indicate such. If you can, make sure the title of the PR has it so when we squash and merge your commits that'll be the commit message:

feat(component)!: change required behavior on form elements