Fix web component radio group orientation (microsoft#15953)

* fix: radio group orientation vertical broken * Change files
SethDonohue · Nov 23, 2020 · fbdceb4 · fbdceb4
1 parent 009e066
commit fbdceb4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-2020-11-16-13-06-32-users-jes-radiogroup-orientation.json b/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"
+}
diff --git a/packages/web-components/src/radio-group/fixtures/radio-group.html b/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>

diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/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;
+  }
 `;