Add verticalSpacing prop

[majapw]

This prop allows for greater customization of the space in between the picker and the inputs. Additionally, if that value is less than the height of the fang then we hide the fang. To accomplish this, I ended up revamping the fang so that it would use an svg instead of pseudo-selectors. The reasoning for this is that because I had to dynamically position the fang relative to the inputs (based on a prop), I had to leverage inline styles to do so. Unfortunately, the ::before and ::after selectors don't allow for that.

I also renamed caret to fang everywhere... which is like ¯\_(ツ)_/¯ but consistency?

This does not, however, solve #538... so maybe expanding the prop to allow for em values as well would be useful. However, this would maybe make the fang show/hide logic a bit more complicated (and have to be manual???). What are your thoughts? Maybe that belongs in a follow-up PR?

to: @airbnb/webinfra @ljharb @noratarano @ethanresnick @gabergg @erin-doyle

[coveralls]

Coverage increased (+0.1%) to 86.671% when pulling 09b71d7 on maja-add-vertical-spacing-prop into d0e03d5 on master.

[ljharb]

It might be better to keep the name showCaret, just so as to avoid the breaking change and get this out?

[ljharb]

this logic is duplicated; can it be shared?

[ljharb]

this logic is duplicated; can it be shared?

[ljharb]

this logic is triplicated, can it be shared?

[ljharb]

please surround multiline jsx with parens

[coveralls]

Coverage increased (+0.1%) to 86.707% when pulling 8a558c9 on maja-add-vertical-spacing-prop into d0e03d5 on master.

[kashifshamaz21]

@majapw I'm trying to use verticalSpacing prop in DateRangePicker.jsx, but for some reason I'm seeing that the prop's value is being received as 0 inside the render function of DateRangePicker.

<DateRangePicker
          displayFormat="DD/MM/YYYY"
          startDate={this.props.startDate} // momentPropTypes.momentObj or null,
          startDateId="startDate" // PropTypes.string.isRequired,
          endDate={this.props.endDate} // momentPropTypes.momentObj or null,
          endDateId="endDate" // PropTypes.string.isRequired,
          onDatesChange={this.props.dateRangeUpdated}
          focusedInput={this.props.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
          onFocusChange={this.props.onFocusChange} // PropTypes.func.isRequired,
          hideKeyboardShortcutsPanel={true}
          isOutsideRange={this.isOutsideRange.bind(this)}
          verticalSpacing={10}
        />

Any pointers on what could be causing this issue? I looked at the code in DateRangePicker.jsx related to verticalSpacing, and i didn't find anything obvious which could lead to above behaviour.