fix(renderer): properly expand colors in "border-color" shorthand

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Prevent text highlight on icon consecutive clicks in `Checkbox` @silviuavram ([#2154](https://github.com/microsoft/fluent-ui-react/pull/2154))
 - Always handle provided onKeyDown event be propagated in inner zone @kolaps33 ([#2140](https://github.com/microsoft/fluent-ui-react/pull/2140))
+- Fix colors expand for `border-color` shorthand @layershifter ([#2160](https://github.com/microsoft/fluent-ui-react/pull/2160))
 
 ### Features
 - Add a new experimental @fluentui/react-theming package that includes a `compose()` @kenotron ([#2152](https://github.com/microsoft/fluent-ui-react/pull/2152))

packages/react/src/lib/cssExpandShorthand.ts

@@ -507,11 +507,16 @@ function repeat(ele, num) {
 
 function directional(value) {
   let values = value.split(/\s+/)
-  if (values.length === 1) values = repeat(values[0], 4)
-  else if (values.length === 2) values = values.concat(values)
-  else if (values.length === 3) values.push(values[1])
-  // @ts-ignore
-  else if (values.length > 4) return
+  if (values.length === 1) {
+    values = repeat(values[0], 4)
+  } else if (values.length === 2) {
+    values = values.concat(values)
+  } else if (values.length === 3) {
+    values.push(values[1])
+  } else if (values.length > 4) {
+    return null
+  }
+
   return ['top', 'right', 'bottom', 'left'].reduce(function(acc, direction, i) {
     acc[direction] = values[i]
     return acc
@@ -566,9 +571,11 @@ let WIDTH = /^(thin|medium|thick)$/
 let STYLE = /^(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)$/i
 let KEYWORD = /^(inherit|initial)$/i
 
-let suffix = function suffix(_suffix) {
+let borderSuffix = function borderSuffix(_suffix, shouldNormalizeColor = false) {
   return function(value) {
-    let longhand = directional(value)
+    const normalizedValue = shouldNormalizeColor ? normalize(value) : value
+    const longhand = directional(normalizedValue)
+
     return (
       longhand &&
       mapObj(longhand, function(key, value) {
@@ -646,11 +653,11 @@ let border = function border(value) {
 }
 
 // @ts-ignore
-border.width = suffix('width')
+border.width = borderSuffix('width')
 // @ts-ignore
-border.style = suffix('style')
+border.style = borderSuffix('style')
 // @ts-ignore
-border.color = suffix('color')
+border.color = borderSuffix('color', true)
 // @ts-ignore
 border.top = direction('top')
 // @ts-ignore

packages/react/test/specs/lib/__snapshots__/felaRenderer-test.tsx.snap

@@ -130,3 +130,34 @@ exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = `
 </div>;
 "
 `;
+
+exports[`felaRenderer styles are expanded to longhand values 1`] = `
+".a {
+  border-top-style: solid;
+}
+.b {
+  border-right-style: solid;
+}
+.c {
+  border-bottom-style: solid;
+}
+.d {
+  border-left-style: solid;
+}
+.e {
+  border-top-color: rgba(51, 204, 51, 1);
+}
+.f {
+  border-right-color: rgba(51, 0, 204, 1);
+}
+.g {
+  border-bottom-color: rgba(51, 204, 51, 1);
+}
+.h {
+  border-left-color: rgba(51, 0, 204, 1);
+}
+
+
+<div className=ui-box a b c d e f g h />;
+"
+`;

packages/react/test/specs/lib/felaRenderer-test.tsx

@@ -114,4 +114,21 @@ describe('felaRenderer', () => {
     )
     expect(snapshot).toMatchSnapshot()
   })
+
+  test('styles are expanded to longhand values', () => {
+    const snapshot = createSnapshot(
+      <EmptyThemeProvider>
+        <Box
+          styles={{
+            borderStyle: 'solid',
+            // spaces in color value are important
+            borderColor: 'rgba(51,204, 51, 1) rgba(51,0,204, 1)',
+          }}
+        />
+      </EmptyThemeProvider>,
+      {},
+      felaRenderer,
+    )
+    expect(snapshot).toMatchSnapshot()
+  })
 })