Merge pull request #933 from MichaelDevenish/patch/add-margin-support-to-select-input

Add margin support to select input.

Author: xley

src/common/types/props.ts

@@ -115,6 +115,7 @@ namespace Props {
     ScrollingTabGroup = 'scrolling_tab_group',
     Section = 'section',
     SectionList = 'section_list',
+    SelectInput = 'select_input',
     SmartList = 'smart_list',
     SmartListColumn = 'smart_list_column',
     Statistic = 'statistic',

src/domain/Inputs/SelectInput/SelectInput.examples.md

@@ -222,3 +222,32 @@ initialState = { options: backendOptions, isFetching: false, value: '' };
   onChange={value => setState({ value })}
 />
 ```
+
+#### Select Input with margins
+
+```jsx
+const { Variables } = require('@Common');
+
+initialState = { value: '' };
+
+<SelectInput
+  placeholder='Select an option!'
+  name='testInput'
+  value={state.value}
+  margins={{
+    top: Variables.Spacing.sSmall,
+    bottom: Variables.Spacing.s2XSmall
+  }}
+  options={[
+    {
+      label: 'Hello World',
+      value: 20
+    },
+    {
+      label: 'Try selecting me',
+      value: 40
+    }
+  ]}
+  onChange={value => setState({ value })}
+/>
+```

src/domain/Inputs/SelectInput/SelectInput.tsx

@@ -14,6 +14,9 @@ import Select, {
   ReactSelectProps
 } from 'react-select'
 
+import { Props } from '../../../common'
+import { TabGroupContainer } from '../../Tabs/ScrollingTabGroup/style'
+import { StyledSelectInputWrapper } from './style'
 import style from './style.scss'
 
 export interface ISelectInputProps {
@@ -74,6 +77,11 @@ export interface ISelectInputProps {
   filterOptions?: FilterOptionsHandler
   /** Label for accessibility */
   'aria-label'?: string
+
+  /** The margins around the component */
+  margins?: Props.IMargins
+  /** The data-component-context */
+  componentContext?: string
 }
 
 export class SelectInput extends React.PureComponent<ISelectInputProps> {
@@ -98,23 +106,37 @@ export class SelectInput extends React.PureComponent<ISelectInputProps> {
 
   public render (): JSX.Element {
     const {
-      onNewOptionCreated
+      onNewOptionCreated,
+      margins,
+      componentContext
     } = this.props
 
     if (onNewOptionCreated) {
       return (
-        <Creatable<OptionValues>
-          {...this.reactSelectProps}
-          onNewOptionClick={onNewOptionCreated}
-          showNewOptionAtTop={false}
-        />
+        <StyledSelectInputWrapper
+          margins={margins}
+          data-component-context={componentContext}
+          data-component-type={Props.ComponentType.SelectInput}
+        >
+          <Creatable<OptionValues>
+            {...this.reactSelectProps}
+            onNewOptionClick={onNewOptionCreated}
+            showNewOptionAtTop={false}
+          />
+        </StyledSelectInputWrapper>
       )
     }
 
     return (
-      <Select<OptionValues>
-        {...this.reactSelectProps}
-      />
+      <StyledSelectInputWrapper
+        margins={margins}
+        data-component-context={componentContext}
+        data-component-type={Props.ComponentType.SelectInput}
+      >
+        <Select<OptionValues>
+          {...this.reactSelectProps}
+        />
+      </StyledSelectInputWrapper>
     )
   }