fix: fix Row behaviour

Author: gregberge

packages/shared/core/Row.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import { mr, ml } from '@smooth-ui/system'
 import { css } from './styled-engine'
 import { gridGutter } from './theming/index'
+import { negative } from './utils/unit'
 import { getSystemPropTypes } from './utils/propTypes'
 import createComponent from './createComponent'
 
@@ -10,13 +11,14 @@ const Row = createComponent(() => ({
   omitProps: ['gutter'],
   style: p => {
     const { gutter = gridGutter(p) } = p
+    const negativeGutter = negative(gutter)
     return css`
       box-sizing: border-box;
       flex-grow: 1;
       flex-wrap: wrap;
       display: flex;
-      ${ml({ ml: gutter })(p)}
-      ${mr({ mr: gutter })(p)}
+      ${ml({ ml: negativeGutter })(p)}
+      ${mr({ mr: negativeGutter })(p)}
     `
   },
   propTypes: {

packages/shared/core/utils/unit.js

@@ -1,6 +1,7 @@
 import { num } from './misc'
 
 export const unit = unit => value => (num(value) ? `${value}${unit}` : value)
+export const negative = value => (num(value) ? -value : `-${value}`)
 
 export const px = unit('px')