fix(*-select-input): align indicator icons properly (#190)

fix(*-select-input): align indicator icons of clearable select-inputs

Author: dferber90

src/components/internals/clear-indicator/clear-indicator.js

@@ -2,12 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CloseIcon } from '../../icons';
 
-const ClearIndicator = props => (
-  <div className="react-select__clear-indicator" {...props.innerProps}>
-    {/* FIXME: add proper tone when tones are refactored */}
-    <CloseIcon theme={props.isDisabled && 'grey'} size="medium" />
-  </div>
-);
+const ClearIndicator = props => {
+  const {
+    getStyles,
+    innerProps: { ref, ...restInnerProps },
+  } = props;
+  return (
+    <div
+      {...restInnerProps}
+      ref={ref}
+      style={getStyles('clearIndicator', props)}
+    >
+      <div>
+        <CloseIcon theme={props.isDisabled && 'grey'} size="medium" />
+      </div>
+    </div>
+  );
+};
 
 ClearIndicator.displayName = 'ClearIndicator';
 

src/components/internals/create-select-styles.js

@@ -72,7 +72,6 @@ const indicatorSeparatorStyles = () => base => ({
 const dropdownIndicatorStyles = () => base => ({
   ...base,
   color: vars['--token-font-color-default'],
-  marginRight: vars['--spacing-8'],
   margin: '0',
   padding: '0',
   marginLeft: vars['--spacing-4'],
@@ -81,6 +80,7 @@ const dropdownIndicatorStyles = () => base => ({
 const clearIndicatorStyles = () => base => ({
   ...base,
   display: 'flex',
+  padding: 0,
 });
 
 const menuListStyles = () => base => ({
@@ -192,6 +192,8 @@ const containerStyles = () => (base, state) => ({
 
 const indicatorsContainerStyles = () => () => ({
   background: 'none',
+  display: 'flex',
+  alignItems: 'baseline',
 });
 
 export default props => ({

src/components/internals/dropdown-indicator/dropdown-indicator.js

@@ -6,7 +6,7 @@ import { CaretDownIcon } from '../../icons';
 const DropdownIndicator = props => (
   <components.DropdownIndicator {...props}>
     {/* FIXME: add proper tone when tones are refactored */}
-    <CaretDownIcon theme={props.isDisabled && 'grey'} size="small" />
+    <CaretDownIcon theme={props.isDisabled && 'grey'} size="medium" />
   </components.DropdownIndicator>
 );