Merge pull request #836 from intellihr/release/375

Release 375

Author: intellibot-access[bot]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@intellihr/ui-components",
   "description": "A common React components library that is used in our company",
-  "version": "48.0.0",
+  "version": "48.0.1",
   "main": "./dist/",
   "types": "./types/index.d.ts",
   "files": [

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

@@ -317,3 +317,68 @@ 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,4 +137,18 @@ 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,6 +23,8 @@ 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 */
@@ -84,14 +86,16 @@ class Field extends React.PureComponent<IVerticalFormFieldProps, never> {
     const {
       inputName,
       isRequired,
-      label
+      label,
+      labelSuffix
     } = 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,6 +121,21 @@ 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,6 +5,7 @@ import { styleForMargins } from '../../../Spacers/services/margins'
 
 interface IStyledInputLabelProps {
   isRequired: boolean
+  labelSuffix?: string
 }
 
 interface IFieldWrapperProps {
@@ -52,6 +53,16 @@ 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`