Fix web component radio group orientation

change/@fluentui-web-components-2020-11-16-13-06-32-users-jes-radiogroup-orientation.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "fix: radio group orientation vertical broken",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-11-16T21:06:32.783Z"
+}

packages/web-components/src/radio-group/fixtures/radio-group.html

@@ -25,7 +25,7 @@ <h4>Single radio</h4>
   <h4>With label outside group</h4>
   <div style="display: flex; flex-direction: column; margin-top: 12px;">
     <label id="label1">Outside label</label>
-    <fluent-radio-group required="true" aria-labelledby="label1" name="fruits">
+    <fluent-radio-group required="true" aria-labelledby="label1" name="fruits" orientation="vertical">
       <fluent-radio value="apples">Apples</fluent-radio>
       <fluent-radio value="oranges">Oranges</fluent-radio>
       <fluent-radio value="bananas">Bananas</fluent-radio>

packages/web-components/src/radio-group/radio-group.styles.ts

@@ -12,4 +12,12 @@ export const RadioGroupStyles = css`
     display: flex;
     flex-wrap: wrap;
   }
+
+  :host([orientation='vertical']) .positioning-region {
+    flex-direction: column;
+  }
+
+  :host([orientation='horizontal']) .positioning-region {
+    flex-direction: row;
+  }
 `;