feat(FormLabel): FX-1229 Remove asterisk, add (optional)

- FormLabel: asterisk will not be present for required form labels
- FormLabel: (optional) will be displayed for labels that have required property explicitly set to false
- FormLabel: no prefix/suffix will be displayed for FormLabels with property required not set

packages/picasso-forms/src/Radio/__snapshots__/test.tsx.snap

@@ -13,11 +13,6 @@ exports[`FormRadio default render 1`] = `
           class="FormLabel-root"
           for="color"
         >
-          <span
-            class="FormLabel-asterisk"
-          >
-            *
-          </span>
           <span
             class="FormLabel-text"
           >

packages/picasso/src/Checkbox/story/Optional.example.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Checkbox, Grid } from '@toptal/picasso'
+
+const Example = () => (
+  <Grid>
+    <Grid.Item large={3}>
+      <Checkbox label='I would like to receive newsletters.' required={false} />
+    </Grid.Item>
+  </Grid>
+)
+
+export default Example

packages/picasso/src/Checkbox/story/index.jsx

@@ -50,4 +50,5 @@ page
     title: 'Indeterminate'
   })
   .addExample('Checkbox/story/Required.example.jsx', 'Required')
+  .addExample('Checkbox/story/Optional.example.jsx', 'Optional')
   .addExample('Checkbox/story/CustomLabel.example.tsx', 'Custom label')

packages/picasso/src/FormField/story/FormField.example.jsx

@@ -6,7 +6,7 @@ const Example = () => (
     <Grid.Item small={5}>
       <Form>
         <Form.Field>
-          <Form.Label>Country</Form.Label>
+          <Form.Label required={false}>Country</Form.Label>
           <Select placeholder='e.g., Spain' options={OPTIONS} />
         </Form.Field>
 
@@ -34,7 +34,9 @@ const Example = () => (
         </Form.Field>
 
         <Form.Field>
-          <Form.Label required>Choose one of the following skills</Form.Label>
+          <Form.Label required={false}>
+            Choose one of the following skills
+          </Form.Label>
           <Radio.Group name='skills'>
             <Radio label='Front-End' value='front-end' />
             <Radio label='Back-End' value='back-end' />

packages/picasso/src/FormLabel/FormLabel.tsx

@@ -18,7 +18,7 @@ export interface Props
     HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
   /** Content of the label */
   children: ReactNode
-  /** Adds asterisk if true */
+  /** Adds (optional) suffix if explicitly false */
   required?: boolean
   /** Is this label for disabled input or not */
   disabled?: boolean
@@ -66,9 +66,9 @@ export const FormLabel = forwardRef<HTMLLabelElement, Props>(function FormLabel(
       )}
       style={style}
     >
-      {required && <span className={classes.asterisk}>*</span>}
       <span className={classes.text}>
         {titleCase ? toTitleCase(children) : children}
+        {required === false && ' (optional)'}
       </span>
     </Component>
   )

packages/picasso/src/FormLabel/__snapshots__/test.tsx.snap

@@ -1,53 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormLabel default render 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form>
-      <div
-        class="FormField-root"
-      >
-        <label
-          class="FormLabel-root"
-        >
-          <span
-            class="FormLabel-text"
-          >
-            Label
-          </span>
-        </label>
-        <div
-          class="MuiInputBase-root MuiOutlinedInput-root OutlinedInput-root PicassoInput-root OutlinedInput-rootAuto OutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-        >
-          <input
-            autocomplete="none"
-            class="MuiInputBase-input MuiOutlinedInput-input OutlinedInput-input OutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-            type="text"
-            value=""
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline OutlinedInput-notchedOutline"
-            style="padding-left: 8px;"
-          >
-            <legend
-              class="PrivateNotchedOutline-legend"
-              style="width: 0.01px;"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
 exports[`FormLabel disabled 1`] = `
 <div>
   <div
@@ -96,59 +48,6 @@ exports[`FormLabel disabled 1`] = `
 </div>
 `;
 
-exports[`FormLabel required 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <form>
-      <div
-        class="FormField-root"
-      >
-        <label
-          class="FormLabel-root"
-        >
-          <span
-            class="FormLabel-asterisk"
-          >
-            *
-          </span>
-          <span
-            class="FormLabel-text"
-          >
-            Label
-          </span>
-        </label>
-        <div
-          class="MuiInputBase-root MuiOutlinedInput-root OutlinedInput-root PicassoInput-root OutlinedInput-rootAuto OutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-        >
-          <input
-            autocomplete="none"
-            class="MuiInputBase-input MuiOutlinedInput-input OutlinedInput-input OutlinedInput-inputMedium MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd"
-            type="text"
-            value=""
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline OutlinedInput-notchedOutline"
-            style="padding-left: 8px;"
-          >
-            <legend
-              class="PrivateNotchedOutline-legend"
-              style="width: 0.01px;"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
 exports[`FormLabel required and disabled 1`] = `
 <div>
   <div
@@ -161,11 +60,6 @@ exports[`FormLabel required and disabled 1`] = `
         <label
           class="FormLabel-root FormLabel-disabled"
         >
-          <span
-            class="FormLabel-asterisk"
-          >
-            *
-          </span>
           <span
             class="FormLabel-text"
           >

packages/picasso/src/FormLabel/styles.ts

@@ -18,24 +18,13 @@ export default ({ palette }: Theme) =>
       fontSize: '0.875em'
     },
 
-    asterisk: {
-      marginRight: '0.3125em',
-      color: palette.error.main,
-      fontSize: '0.875em'
-    },
-
     inline: {
       display: 'inline-block',
       marginBottom: 0,
 
       '& $text': {
         fontSize: '0.8125rem',
         verticalAlign: 'top'
-      },
-
-      '& $asterisk': {
-        fontSize: '0.8125em',
-        verticalAlign: 'top'
       }
     }
   })

packages/picasso/src/FormLabel/test.tsx

@@ -44,9 +44,10 @@ afterEach(() => {
 
 describe('FormLabel', () => {
   test('default render', () => {
-    const { container } = render(<TestFormLabel>Label</TestFormLabel>)
+    const { queryByText } = render(<TestFormLabel>Label</TestFormLabel>)
 
-    expect(container).toMatchSnapshot()
+    expect(queryByText('Label')).toBeInTheDocument()
+    expect(queryByText('Label (optional)')).not.toBeInTheDocument()
   })
 
   test('disabled', () => {
@@ -56,9 +57,20 @@ describe('FormLabel', () => {
   })
 
   test('required', () => {
-    const { container } = render(<TestFormLabel required>Label</TestFormLabel>)
+    const { queryByText } = render(
+      <TestFormLabel required>Label</TestFormLabel>
+    )
 
-    expect(container).toMatchSnapshot()
+    expect(queryByText('Label')).toBeInTheDocument()
+    expect(queryByText('Label (optional)')).not.toBeInTheDocument()
+  })
+
+  test('optional is displayed', () => {
+    const { queryByText } = render(
+      <TestFormLabel required={false}>Label</TestFormLabel>
+    )
+
+    expect(queryByText('Label (optional)')).toBeInTheDocument()
   })
 
   test('required and disabled', () => {