Re-style required fields in Wizard Options

src/components/molecules/Dropdown/story.jsx

@@ -54,6 +54,9 @@ storiesOf('Dropdown', module)
   .add('disabled', () => (
     <Wrapper disabled />
   ))
+  .add('required', () => (
+    <Wrapper required />
+  ))
   .add('long list', () => (
     <Wrapper
       items={[

src/components/molecules/WizardOptionsField/images/asterisk.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Info Copy 8</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="Wizard/05-Options/2-Search-Dropdown_Erorr" transform="translate(-621.000000, -586.000000)" stroke="#0044CA" stroke-width="1.5">
+            <g id="Forms/Items/Input-Copy" transform="translate(528.000000, 583.000000)">
+                <g id="Group">
+                    <g id="Icon/Question/16" transform="translate(91.000000, 1.000000)">
+                        <g id="Icon/Asterisk/Blue" transform="translate(2.000000, 2.000000)">
+                            <path d="M6,1 L6,11" id="Line"></path>
+                            <path d="M1.66987298,3.5 L10.330127,8.5" id="Line"></path>
+                            <path d="M1.66987298,3.5 L10.330127,8.5" id="Line" transform="translate(6.000000, 6.000000) scale(-1, 1) translate(-6.000000, -6.000000) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/molecules/WizardOptionsField/index.jsx

@@ -29,6 +29,8 @@ import LabelDictionary from '../../../utils/LabelDictionary'
 
 import type { Field } from '../../../types/Field'
 
+import asteriskImage from './images/asterisk.svg'
+
 const getDirection = props => {
   if (props.type === 'strict-boolean' || props.type === 'boolean') {
     return 'row'
@@ -48,6 +50,13 @@ const Label = styled.div`
 const LabelText = styled.span`
   margin-right: 24px;
 `
+const Asterisk = styled.div`
+  ${StyleProps.exactSize('16px')}
+  display: inline-block;
+  background: url('${asteriskImage}') center no-repeat;
+  margin-bottom: -3px;
+  margin-left: ${props => props.marginLeft || '0px'};
+`
 
 type Props = {
   type: 'replica' | 'migration',
@@ -83,7 +92,6 @@ class WizardOptionsField extends React.Component<Props> {
     return (
       <TextInput
         width={`${StyleProps.inputSizes.wizard.width}px`}
-        required={this.props.required}
         value={this.props.value}
         onChange={e => { this.props.onChange(e.target.value) }}
         placeholder={LabelDictionary.get(this.props.name)}
@@ -136,7 +144,6 @@ class WizardOptionsField extends React.Component<Props> {
         selectedItem={selectedItem}
         items={items}
         onChange={item => this.props.onChange(item.value)}
-        required={this.props.required}
       />
     )
   }
@@ -168,15 +175,13 @@ class WizardOptionsField extends React.Component<Props> {
 
   renderLabel() {
     let description = LabelDictionary.getDescription(this.props.name)
-    let infoIcon = null
-    if (description) {
-      infoIcon = <InfoIcon text={description} marginLeft={-20} />
-    }
-
     return (
       <Label>
-        <LabelText data-test-id="wOptionsField-label">{LabelDictionary.get(this.props.name)}</LabelText>
-        {infoIcon}
+        <LabelText data-test-id="wOptionsField-label">
+          {LabelDictionary.get(this.props.name)}
+        </LabelText>
+        {description ? <InfoIcon text={description} marginLeft={-20} /> : null}
+        {this.props.required ? <Asterisk marginLeft={description ? '4px' : '-16px'} /> : null}
       </Label>
     )
   }