fix(triangle): Triangles can inherit their color

fix styled-components#430
sgenoud · May 8, 2019 · a8780a1 · a8780a1
1 parent faac33f
commit a8780a1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/src/mixins/test/__snapshots__/triangle.test.js.snap b/src/mixins/test/__snapshots__/triangle.test.js.snap
@@ -2,7 +2,8 @@
 
 exports[`triangle should default to a transparent background when not passed a backgroundColor 1`] = `
 Object {
-  "borderColor": "transparent transparent transparent red",
+  "borderColor": "transparent",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -12,7 +13,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed all parameters 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5 0 5 20",
   "height": "0",
@@ -22,7 +24,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed all parameters with units on width/height 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5em 0 5em 20em",
   "height": "0",
@@ -32,7 +35,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed all parameters with units on width/height with float values 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5.25em 0 5.25em 20.5em",
   "height": "0",
@@ -42,7 +46,8 @@ Object {
 
 exports[`triangle should generate a proper triangle when passed string values for height and width 1`] = `
 Object {
-  "borderColor": "black black black red",
+  "borderColor": "black",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -53,7 +58,8 @@ Object {
 exports[`triangle should properly add rules when block has existing rules 1`] = `
 Object {
   "background": "red",
-  "borderColor": "transparent transparent transparent grey",
+  "borderColor": "transparent",
+  "borderLeftColor": "grey",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -63,8 +69,9 @@ Object {
 
 exports[`triangle should properly render bottom pointing arrow with red foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "red transparent transparent transparent",
+  "borderColor": "transparent",
   "borderStyle": "solid",
+  "borderTopColor": "red",
   "borderWidth": "20px 5px 0 5px",
   "height": "0",
   "width": "0",
@@ -73,7 +80,8 @@ Object {
 
 exports[`triangle should properly render bottomLeft pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent transparent transparent blue",
+  "borderColor": "transparent",
+  "borderLeftColor": "blue",
   "borderStyle": "solid",
   "borderWidth": "20px 0 0 20px",
   "height": "0",
@@ -83,7 +91,8 @@ Object {
 
 exports[`triangle should properly render bottomRight pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent transparent blue transparent",
+  "borderBottomColor": "blue",
+  "borderColor": "transparent",
   "borderStyle": "solid",
   "borderWidth": "0 0 20px 20px",
   "height": "0",
@@ -93,7 +102,8 @@ Object {
 
 exports[`triangle should properly render left pointing arrow with blue foregroundColor, width of 10px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent blue transparent transparent",
+  "borderColor": "transparent",
+  "borderRightColor": "blue",
   "borderStyle": "solid",
   "borderWidth": "10px 10px 10px 0",
   "height": "0",
@@ -103,7 +113,8 @@ Object {
 
 exports[`triangle should properly render right pointing arrow with width of 20px and height 10px 1`] = `
 Object {
-  "borderColor": "transparent transparent transparent red",
+  "borderColor": "transparent",
+  "borderLeftColor": "red",
   "borderStyle": "solid",
   "borderWidth": "5px 0 5px 20px",
   "height": "0",
@@ -113,7 +124,8 @@ Object {
 
 exports[`triangle should properly render top pointing arrow with green foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent transparent green transparent",
+  "borderBottomColor": "green",
+  "borderColor": "transparent",
   "borderStyle": "solid",
   "borderWidth": "0 10px 20px 10px",
   "height": "0",
@@ -123,8 +135,9 @@ Object {
 
 exports[`triangle should properly render topLeft pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "blue transparent transparent transparent",
+  "borderColor": "transparent",
   "borderStyle": "solid",
+  "borderTopColor": "blue",
   "borderWidth": "20px 20px 0 0",
   "height": "0",
   "width": "0",
@@ -133,7 +146,8 @@ Object {
 
 exports[`triangle should properly render topRight pointing arrow with blue foregroundColor, width of 20px and height 20px 1`] = `
 Object {
-  "borderColor": "transparent blue transparent transparent",
+  "borderColor": "transparent",
+  "borderRightColor": "blue",
   "borderStyle": "solid",
   "borderWidth": "0 20px 20px 0",
   "height": "0",

diff --git a/src/mixins/triangle.js b/src/mixins/triangle.js
@@ -40,21 +40,20 @@ const getBorderWidth = (
 const getBorderColor = (
   pointingDirection: SideKeyword,
   foregroundColor: string,
-  backgroundColor: string,
 ): string => {
   switch (pointingDirection) {
     case 'top':
     case 'bottomRight':
-      return `${backgroundColor} ${backgroundColor} ${foregroundColor} ${backgroundColor}`
+      return { borderBottomColor: foregroundColor }
     case 'right':
     case 'bottomLeft':
-      return `${backgroundColor} ${backgroundColor} ${backgroundColor} ${foregroundColor}`
+      return { borderLeftColor: foregroundColor }
     case 'bottom':
     case 'topLeft':
-      return `${foregroundColor} ${backgroundColor} ${backgroundColor} ${backgroundColor}`
+      return { borderTopColor: foregroundColor }
     case 'left':
     case 'topRight':
-      return `${backgroundColor} ${foregroundColor} ${backgroundColor} ${backgroundColor}`
+      return { borderRightColor: foregroundColor }
 
     default:
       throw new PolishedError(59)
@@ -104,11 +103,8 @@ export default function triangle({
   return {
     width: '0',
     height: '0',
-    borderColor: getBorderColor(
-      pointingDirection,
-      foregroundColor,
-      backgroundColor,
-    ),
+    borderColor: backgroundColor,
+    ...getBorderColor(pointingDirection, foregroundColor),
     borderStyle: 'solid',
     borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit),
   }