feat(netlify-cms-widget-relation): use react-select and add support for multiple entries (#1936)

packages/netlify-cms-ui-default/src/index.js

@@ -16,4 +16,5 @@ export {
   shadows,
   borders,
   transitions,
+  reactSelectStyles,
 } from './styles';

packages/netlify-cms-ui-default/src/styles.js

@@ -1,6 +1,17 @@
 import { css, injectGlobal } from 'react-emotion';
 
-export { fonts, colorsRaw, colors, lengths, components, buttons, shadows, borders, transitions };
+export {
+  fonts,
+  colorsRaw,
+  colors,
+  lengths,
+  components,
+  buttons,
+  shadows,
+  borders,
+  transitions,
+  reactSelectStyles,
+};
 
 /**
  * Font Stacks
@@ -297,6 +308,49 @@ const components = {
   `,
 };
 
+const reactSelectStyles = {
+  control: styles => ({
+    ...styles,
+    border: 0,
+    boxShadow: 'none',
+    padding: '9px 0 9px 12px',
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: state.isSelected
+      ? `${colors.active}`
+      : state.isFocused
+        ? `${colors.activeBackground}`
+        : 'transparent',
+    paddingLeft: '22px',
+  }),
+  menu: styles => ({ ...styles, right: 0, zIndex: 2 }),
+  container: styles => ({ ...styles, padding: '0 !important' }),
+  indicatorSeparator: (styles, state) =>
+    state.hasValue && state.selectProps.isClearable
+      ? { ...styles, backgroundColor: `${colors.textFieldBorder}` }
+      : { display: 'none' },
+  dropdownIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
+  clearIndicator: styles => ({ ...styles, color: `${colors.controlLabel}` }),
+  multiValue: styles => ({
+    ...styles,
+    backgroundColor: colors.background,
+  }),
+  multiValueLabel: styles => ({
+    ...styles,
+    color: colors.textLead,
+    fontWeight: 500,
+  }),
+  multiValueRemove: styles => ({
+    ...styles,
+    color: colors.controlLabel,
+    ':hover': {
+      color: colors.errorText,
+      backgroundColor: colors.errorBackground,
+    },
+  }),
+};
+
 injectGlobal`
   *, *:before, *:after {
     box-sizing: border-box;