Merge pull request #841 from wyvl/technical/INT-13089-remove-label-suffix-on-form-field

[INT-13089] Remove label suffix on form field

Author: wyvl

src/domain/Forms/VerticalForm/VerticalForm.examples.md

@@ -317,68 +317,3 @@ initialState = { textInputValue: '' };
         </VerticalForm.RightAlignControls>
   </VerticalForm>
 ```
-
-Field with label suffix
-
-```jsx
-import { ButtonGroup, Button } from '@Domain/Buttons';
-import { SelectInput } from '@Domain/Inputs';
-
-initialState = { people: [], parentGoalId: '' };
-
-  <VerticalForm
-  >
-    <VerticalForm.Field
-      inputName='people'
-      label='Set Goal for'
-    >
-      <SelectInput
-        name='people'
-        value={state.people}
-        options={[
-          {
-            label: 'Lyanna Moreton',
-            value: 1
-          },
-          {
-            label: 'Donna Summer',
-            value: 2
-          }
-        ]}
-        onChange={value => { value.length > 1 ? setState({ people: value, parentGoalId:'' }) : setState({ people: value })  }}
-        isMultiSelect
-      />
-    </VerticalForm.Field>
-    <VerticalForm.Field
-      inputName='parentGoalId'
-      label='Parent Goal'
-      labelSuffix='individuals only'
-      tooltipMessage='Parent goals are related to an individual and cannot be selected for multiple people.'
-      tooltipProps={{width: 300}}
-    >
-      <SelectInput
-        isDisabled={state.people.length > 1}
-        name='parentGoalId'
-        value={state.parentGoalId}
-        options={[
-          {
-            label: 'Sale Goal',
-            value: 1
-          },
-          {
-            label: 'IT Goal',
-            value: 2
-          }
-        ]}
-        onChange={value => setState({ parentGoalId: value })}
-      />
-    </VerticalForm.Field>
-    <VerticalForm.RightAlignControls>
-      <Button
-         type='primary'
-      >
-        Submit me :)
-      </Button>
-    </VerticalForm.RightAlignControls>
-  </VerticalForm>
-```

src/domain/Forms/VerticalForm/subcomponents/Field.test.tsx

@@ -137,18 +137,4 @@ describe('<Field />', () => {
 
     expect(wrapper).toMatchSnapshot()
   })
-
-  it(`should render a vertical form field with label suffix`, () => {
-    const wrapper = shallow(
-      <Field
-        inputName='testInput'
-        label='This is a test input'
-        labelSuffix='only test'
-      >
-        Children
-      </Field>
-    )
-
-    expect(wrapper).toMatchSnapshot()
-  })
 })

src/domain/Forms/VerticalForm/subcomponents/Field.tsx

@@ -23,8 +23,6 @@ interface IVerticalFormFieldProps {
   isRequired?: boolean
   /** Text displayed above the input */
   label?: string
-  /** Arbitrary text displayed after the label, it will replace the required label when isRequired is true */
-  labelSuffix?: string
   /** Descriptive text displayed above the input */
   description?: string
   /** action text link displayed below the input */
@@ -86,16 +84,14 @@ class Field extends React.PureComponent<IVerticalFormFieldProps, never> {
     const {
       inputName,
       isRequired,
-      label,
-      labelSuffix
+      label
     } = this.props
 
     if (label) {
       return (
         <StyledInputLabel
           htmlFor={inputName}
           isRequired={isRequired!}
-          labelSuffix={labelSuffix}
         >
           {label}
           {this.tooltip}

src/domain/Forms/VerticalForm/subcomponents/__snapshots__/Field.test.tsx.snap

@@ -121,21 +121,6 @@ exports[`<Field /> should render a vertical form field with error messages 1`] =
 </styled.div>
 `;
 
-exports[`<Field /> should render a vertical form field with label suffix 1`] = `
-<styled.div>
-  <styled.div>
-    <styled.label
-      htmlFor="testInput"
-      isRequired={false}
-      labelSuffix="only test"
-    >
-      This is a test input
-    </styled.label>
-  </styled.div>
-  Children
-</styled.div>
-`;
-
 exports[`<Field /> should render a vertical form field with nothing 1`] = `<styled.div />`;
 
 exports[`<Field /> should render a vertical form field with regular props 1`] = `

src/domain/Forms/VerticalForm/subcomponents/style.ts

@@ -5,7 +5,6 @@ import { styleForMargins } from '../../../Spacers/services/margins'
 
 interface IStyledInputLabelProps {
   isRequired: boolean
-  labelSuffix?: string
 }
 
 interface IFieldWrapperProps {
@@ -53,16 +52,6 @@ const StyledInputLabel = styled.label`
       }
     `
   }}
-
-  ${(props: IStyledInputLabelProps) => props.labelSuffix && css`
-      &::after {
-        color: ${Variables.Color.n400};
-        content: " -  ${props.labelSuffix}";
-        font-size: ${Variables.FontSize.fzSmall}px;
-        font-style: italic;
-      }
-    `
-}}
 `
 
 const StyledDescription = styled.div`