Repository: styled-system/styled-system
Pull request #670 (2019-08-07 04:34:21)

Support individual border styles
This adds support for individual border styles, now having experience using theme-ui I feel this makes sense over functional values and border shorthand. Plus, I think it fills an unexpected gap as borderWidth, borderStyle and borderColor are already supported.

Edit: Also added support for borderTop and borderBottom left and right radius

Issue: https://github.com/system-ui/theme-ui/issues/276


Patch:
diff --git a/packages/border/src/index.js b/packages/border/src/index.js
index 879712c..5cb0044 100644
--- a/packages/border/src/index.js
+++ b/packages/border/src/index.js
@@ -25,6 +25,14 @@ const config = {
     property: 'borderTop',
     scale: 'borders',
   },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii',
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii',
+  },
   borderRight: {
     property: 'borderRight',
     scale: 'borders',
@@ -33,6 +41,14 @@ const config = {
     property: 'borderBottom',
     scale: 'borders',
   },
+  borderBottomLeftRadius: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii',
+  },
+  borderBottomRightRadius: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii',
+  },
   borderLeft: {
     property: 'borderLeft',
     scale: 'borders',
@@ -45,6 +61,70 @@ const config = {
     properties: ['borderTop', 'borderBottom'],
     scale: 'borders',
   },
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'borderWidths',
+  },
+  borderTopColor: {
+    property: 'borderTopColor',
+    scale: 'colors',
+  },
+  borderTopStyle: {
+    property: 'borderTopStyle',
+    scale: 'borderStyles',
+  },
+  borderTopLeftRadius: {
+    property:'borderTopLeftRadius',
+    scale: 'radii',
+  },
+  borderTopRightRadius: {
+    property:'borderTopRightRadius',
+    scale: 'radii',
+  },
+  borderBottomWidth: {
+    property: 'borderBottomWidth',
+    scale: 'borderWidths',
+  },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors',
+  },
+  borderBottomStyle: {
+    property: 'borderBottomStyle',
+    scale: 'borderStyles',
+  },
+  borderBottomLeftRadius: {
+    property:'borderBottomLeftRadius',
+    scale: 'radii',
+  },
+  borderBottomRightRadius: {
+    property:'borderBottomRightRadius',
+    scale: 'radii',
+  },
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'borderWidths',
+  },
+  borderLeftColor: {
+    property: 'borderLeftColor',
+    scale: 'colors',
+  },
+  borderLeftStyle: {
+    property: 'borderLeftStyle',
+    scale: 'borderStyles',
+  },
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: 'borderWidths',
+  },
+  borderRightColor: {
+    property: 'borderRightColor',
+    scale: 'colors',
+  },
+  borderRightStyle: {
+    property: 'borderRightStyle',
+    scale: 'borderStyles',
+  },
 }
 
 export const border = system(config)


Test patch:
diff --git a/packages/border/test/index.js b/packages/border/test/index.js
index 79ef063..29cd396 100644
--- a/packages/border/test/index.js
+++ b/packages/border/test/index.js
@@ -4,3 +4,66 @@ test('returns border styles', () => {
   const style = border({ border: '1px solid gold' })
   expect(style).toEqual({ border: '1px solid gold' })
 })
+
+test('returns individual border styles', () => {
+  const style = border({
+    theme: {
+      borderWidths: { thin: 1 },
+      colors: { primary: 'red' },
+      borderStyles: { thick: 'solid' },
+      radii: { small: 5 },
+    },
+    borderTopWidth: 'thin',
+    borderTopColor: 'primary',
+    borderTopStyle: 'thick',
+    borderTopLeftRadius: 'small',
+    borderTopRightRadius: 'small',
+    borderBottomWidth: 'thin',
+    borderBottomColor: 'primary',
+    borderBottomStyle: 'thick',
+    borderBottomLeftRadius: 'small',
+    borderBottomRightRadius: 'small',
+    borderRightWidth: 'thin',
+    borderRightColor: 'primary',
+    borderRightStyle: 'thick',
+    borderLeftWidth: 'thin',
+    borderLeftColor: 'primary',
+    borderLeftStyle: 'thick',
+  })
+  expect(style).toEqual({
+    borderTopColor: 'red',
+    borderTopWidth: 1,
+    borderTopStyle: 'solid',
+    borderTopLeftRadius: 5,
+    borderTopRightRadius: 5,
+    borderBottomColor: 'red',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 5,
+    borderRightColor: 'red',
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    borderLeftColor: 'red',
+    borderLeftWidth: 1,
+    borderLeftStyle: 'solid',
+  })
+})
+
+test('returns border top and bottom radii', () => {
+  const style = border({
+    theme: {
+      radii: { small: 5 },
+    },
+    borderTopLeftRadius: 'small',
+    borderTopRightRadius: 'small',
+    borderBottomRightRadius: 'small',
+    borderBottomRightRadius: 'small',
+  })
+  expect(style).toEqual({
+    borderTopLeftRadius: 5,
+    borderTopRightRadius: 5,
+    borderBottomRightRadius: 5,
+    borderBottomRightRadius: 5,
+  })
+})