remove mixins and fix input alignment

JedWatson · Feb 8, 2018 · 07bba99 · 07bba99
1 parent f3cdfc4
commit 07bba99
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 38 deletions.
diff --git a/src/components/Group.js b/src/components/Group.js
@@ -2,7 +2,6 @@
 import React, { type Node } from 'react';
 
 import { className } from '../utils';
-import { paddingHorizontal, paddingVertical } from '../mixins';
 import { Div } from '../primitives';
 import { spacing } from '../theme';
 import { type PropsWithStyles } from '../types';
@@ -22,7 +21,10 @@ type GroupProps = {
 };
 type Props = PropsWithStyles & GroupProps;
 
-export const groupCSS = () => paddingVertical(spacing.baseUnit * 2);
+export const groupCSS = () => ({
+  paddingBottom: spacing.baseUnit * 2,
+  paddingTop: spacing.baseUnit * 2,
+});
 
 const Group = (props: Props) => {
   const {
@@ -54,7 +56,8 @@ export const groupHeadingCSS = () => ({
   fontSize: '75%',
   fontWeight: '500',
   marginBottom: '0.25em',
-  ...paddingHorizontal(spacing.baseUnit * 3),
+  paddingLeft: spacing.baseUnit * 3,
+  paddingRight: spacing.baseUnit * 3,
   textTransform: 'uppercase',
 });
 

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -5,7 +5,6 @@ import AutosizeInput from 'react-input-autosize';
 import { className } from '../utils';
 import { spacing } from '../theme';
 import { Div } from '../primitives';
-import { marginHorizontal } from '../mixins';
 
 import type { PropsWithStyles } from '../types';
 
@@ -14,7 +13,11 @@ type Props = PropsWithStyles & {
   isHidden: boolean,
 };
 
-export const css = () => marginHorizontal(spacing.baseUnit / 2);
+export const css = () => ({
+  margin: spacing.baseUnit / 2,
+  paddingBottom: spacing.baseUnit / 2,
+  paddingTop: spacing.baseUnit / 2,
+});
 const inputStyle = isHidden => ({
   background: 0,
   border: 0,

diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -4,7 +4,6 @@ import React, { type Node } from 'react';
 import { className } from '../utils';
 import { Div } from '../primitives';
 import { borderRadius, colors, spacing } from '../theme';
-import { marginVertical, paddingHorizontal, paddingVertical } from '../mixins';
 import { type PropsWithStyles, type InnerRef } from '../types';
 
 // ==============================
@@ -17,7 +16,8 @@ export const menuCSS = () => ({
   backgroundColor: colors.neutral0,
   boxShadow: `0 0 0 1px ${colors.neutral10a}, 0 4px 11px ${colors.neutral10a}`,
   borderRadius: borderRadius,
-  ...marginVertical(spacing.baseUnit * 2),
+  marginBottom: spacing.baseUnit * 2,
+  marginTop: spacing.baseUnit * 2,
   position: 'absolute',
   top: '100%',
   width: '100%',
@@ -61,7 +61,8 @@ type Props = PropsWithStyles & MenuListProps & MenuListState;
 export const menuListCSS = ({ maxHeight }: MenuListState) => ({
   maxHeight,
   overflowY: 'auto',
-  ...paddingVertical(spacing.baseUnit),
+  paddingBottom: spacing.baseUnit,
+  paddingTop: spacing.baseUnit,
   position: 'relative', // required for offset[Height, Top] > keyboard scroll
 });
 export const MenuList = (props: Props) => {
@@ -83,8 +84,7 @@ export const MenuList = (props: Props) => {
 
 const noticeCSS = () => ({
   color: colors.neutral40,
-  ...paddingHorizontal(spacing.baseUnit * 3),
-  ...paddingVertical(spacing.baseUnit * 2),
+  padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
   textAlign: 'center',
 });
 export const noOptionsMessageCSS = noticeCSS;

diff --git a/src/components/MultiValue.js b/src/components/MultiValue.js
@@ -5,7 +5,6 @@ import { borderRadius, colors, spacing } from '../theme';
 import { className } from '../utils';
 import { CrossIcon } from './indicators';
 import { Div } from '../primitives';
-import { paddingHorizontal } from '../mixins';
 import { type PropsWithStyles } from '../types';
 
 export type ValueProps = {
@@ -34,14 +33,15 @@ export const multiValueLabelCSS = () => ({
   padding: 3,
   paddingLeft: 6,
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
 });
 export const multiValueRemoveCSS = () => ({
   alignItems: 'center',
   borderRadius: borderRadius / 2,
   color: colors.textLight,
   display: 'flex ',
-  ...paddingHorizontal(spacing.baseUnit),
+  paddingLeft: spacing.baseUnit,
+  paddingRight: spacing.baseUnit,
 
   ':hover': {
     backgroundColor: colors.dangerLight,

diff --git a/src/components/Option.js b/src/components/Option.js
@@ -4,7 +4,6 @@ import React, { type Node } from 'react';
 import { className } from '../utils';
 import { colors, spacing } from '../theme';
 import { Div } from '../primitives';
-import { paddingHorizontal, paddingVertical } from '../mixins';
 import { type PropsWithStyles, type InnerRef } from '../types';
 
 type State = {
@@ -40,8 +39,7 @@ export const css = ({ isDisabled, isFocused, isSelected }: State) => ({
   cursor: 'default',
   display: 'block',
   fontSize: 'inherit',
-  ...paddingHorizontal(spacing.baseUnit * 3),
-  ...paddingVertical(spacing.baseUnit * 2),
+  padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
   width: '100%',
 });
 

diff --git a/src/components/Placeholder.js b/src/components/Placeholder.js
@@ -4,7 +4,6 @@ import React, { type Node } from 'react';
 import { className } from '../utils';
 import { colors, spacing } from '../theme';
 import { Div } from '../primitives';
-import { marginHorizontal } from '../mixins';
 import { type PropsWithStyles } from '../types';
 
 type Props = PropsWithStyles & {
@@ -13,8 +12,9 @@ type Props = PropsWithStyles & {
 };
 
 export const css = () => ({
-  ...marginHorizontal(spacing.baseUnit / 2),
   color: colors.neutral60,
+  marginLeft: spacing.baseUnit / 2,
+  marginRight: spacing.baseUnit / 2,
   position: 'absolute',
 });
 

diff --git a/src/components/SingleValue.js b/src/components/SingleValue.js
@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 
-import { marginHorizontal } from '../mixins';
 import { Div } from '../primitives';
 import { colors, spacing } from '../theme';
 import { className } from '../utils';
@@ -16,8 +15,9 @@ type ValueProps = {
 type Props = PropsWithStyles & ValueProps & State;
 
 export const css = ({ isDisabled }: State) => ({
-  ...marginHorizontal(spacing.baseUnit / 2),
   color: isDisabled ? colors.neutral40 : colors.text,
+  marginLeft: spacing.baseUnit / 2,
+  marginRight: spacing.baseUnit / 2,
   maxWidth: '100%',
   overflow: 'hidden',
   position: 'absolute',

diff --git a/src/components/containers.js b/src/components/containers.js
@@ -3,7 +3,6 @@ import React, { Component, type Node, type ElementRef } from 'react';
 
 import { className } from '../utils';
 import { Div } from '../primitives';
-import { paddingHorizontal, paddingVertical } from '../mixins';
 import { spacing } from '../theme';
 import { type PropsWithStyles, type KeyboardEventHandler } from '../types';
 
@@ -45,14 +44,13 @@ type ValueContainerProps = PropsWithStyles & {
   children: Node,
 };
 export const valueContainerCSS = ({ maxHeight }: ValueContainerProps) => ({
-  alignItems: 'baseline',
+  alignItems: 'center',
   display: 'flex ',
   flex: 1,
   flexWrap: 'wrap',
   maxHeight: maxHeight, // max-height allows scroll when multi
   overflowY: 'auto',
-  ...paddingHorizontal(spacing.baseUnit * 2),
-  ...paddingVertical(spacing.baseUnit / 2),
+  padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
   position: 'relative',
 });
 export class ValueContainer extends Component<ValueContainerProps> {

diff --git a/src/mixins.js b/src/mixins.js