Merge pull request #19 from smooth-code/border-width-utility

fix: add border-width utility
styled-components · Jun 3, 2019 · 5a4a213 · 5a4a213
2 parents 5688b79 + df4c47f
commit 5a4a213
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/packages/styled-components/src/propGetters.js b/packages/styled-components/src/propGetters.js
@@ -3,6 +3,7 @@ import {
   getColor,
   getRadius,
   getBorder,
+  getBorderWidth,
   getBorderStyle,
   getShadow,
   getSize,
@@ -28,9 +29,16 @@ const getMultiValues = transform => value => {
 
 const getNumberSpace = getNumber(getSpace)
 const getMultiNumberSpace = getMultiValues(getNumberSpace)
+
 const getNumberBorder = getNumber(getBorder)
+
+const getNumberBorderWidth = getNumber(getBorderWidth)
+const getMultiNumberBorderWidth = getMultiValues(getNumberBorderWidth)
+
 const getNumberSize = getNumber(getSize)
 
+const getMultiBorderStyle = getMultiValues(getBorderStyle)
+
 export const propGetters = {
   // getSpace
   margin: getMultiNumberSpace,
@@ -65,8 +73,19 @@ export const propGetters = {
   'border-bottom': getNumberBorder,
   'border-left': getNumberBorder,
 
+  // getBorderWidth
+  'border-width': getMultiNumberBorderWidth,
+  'boder-top-width': getNumberBorderWidth,
+  'boder-right-width': getNumberBorderWidth,
+  'boder-bottom-width': getNumberBorderWidth,
+  'boder-left-width': getNumberBorderWidth,
+
   // getBorderStyle
-  'border-style': getBorderStyle,
+  'border-style': getMultiBorderStyle,
+  'boder-top-style': getBorderStyle,
+  'boder-right-style': getBorderStyle,
+  'boder-bottom-style': getBorderStyle,
+  'boder-left-style': getBorderStyle,
 
   // getShadow
   'box-shadow': getShadow,

diff --git a/packages/system/src/styles/borders.js b/packages/system/src/styles/borders.js
@@ -58,7 +58,7 @@ export const borderColor = style({
   themeGet: getColor,
 })
 
-const getBorderWidth = themeGetter({
+export const getBorderWidth = themeGetter({
   key: 'borderWidths',
   transform: px,
 })

diff --git a/packages/system/src/th.js b/packages/system/src/th.js
@@ -5,6 +5,7 @@ import {
   getPercent,
   getRadius,
   getBorder,
+  getBorderWidth,
   getBorderStyle,
   getShadow,
   getSize,
@@ -29,6 +30,7 @@ th.px = getPx
 th.percent = getPercent
 th.radius = getRadius
 th.border = getBorder
+th.borderWidth = getBorderWidth
 th.borderStyle = getBorderStyle
 th.shadow = getShadow
 th.size = getSize

diff --git a/packages/system/tests/styled-components/th.test.js b/packages/system/tests/styled-components/th.test.js
@@ -56,6 +56,14 @@ describe('#th', () => {
         theme: { borders: { red: '1px solid red' } },
       },
     ],
+    [
+      'borderWidth',
+      {
+        cssProp: 'borderWidth',
+        expectations: [[0, 0], [1, '1px'], ['sm', '2px']],
+        theme: { borderWidths: { sm: 2 } },
+      },
+    ],
     [
       'borderStyle',
       {