feat: add vertical and horizontal orientation for radio-group (#3082)

* added vertical and horizontal orientation for radio-group
microsoft · May 11, 2020 · fd6ce2b · fd6ce2b
1 parent fa5630a
commit fd6ce2b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/packages/web-components/fast-components/src/radio-group/fixtures/base.html b/packages/web-components/fast-components/src/radio-group/fixtures/base.html
@@ -10,6 +10,16 @@ <h4>Defaults</h4>
         </fast-radio-group>
     </div>
 
+    <div>
+        <fast-radio-group orientation="vertical" name="trees">
+            <label slot="label">Trees</label>
+            <fast-radio value="fir">Fir</fast-radio>
+            <fast-radio value="juniper">Juniper</fast-radio>
+            <fast-radio value="hemlock">Hemlock</fast-radio>
+            <fast-radio value="pine">Pine</fast-radio>
+        </fast-radio-group>
+    </div>
+
     <div style="display: flex; flex-direction: column;margin-top: 12px;">
         <fast-radio-group name="players">
             <label slot="label">Best basketball players</label>

diff --git a/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts b/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts
@@ -7,9 +7,14 @@ export const RadioGroupStyles = css`
         margin: calc(var(--design-unit) * 1px) 0;
         flex-direction: column;
     }
-
     .positioning-region {
         display: flex;
         flex-wrap: wrap;
     }
+    .vertical {
+        flex-direction: column;
+    }
+    .horizontal {
+        flex-direction: row;
+    }
 `;
diff --git a/packages/web-components/fast-components/src/radio-group/radio-group.template.ts b/packages/web-components/fast-components/src/radio-group/radio-group.template.ts
@@ -1,4 +1,5 @@
 import { html, slotted } from "@microsoft/fast-element";
+import { Orientation } from "@microsoft/fast-web-utilities";
 import { RadioGroup } from "./radio-group";
 
 export const RadioGroupTemplate = html<RadioGroup>`
@@ -8,7 +9,11 @@ export const RadioGroupTemplate = html<RadioGroup>`
         aria-readonly="${x => x.readOnly}"
     >
         <slot name="label"></slot>
-        <div class="positioning-region" part="positioning-region">
+        <div
+            class="positioning-region ${x =>
+                x.orientation === Orientation.horizontal ? "horizontal" : "vertical"}"
+            part="positioning-region"
+        >
             <slot ${slotted("slottedRadioButtons")}> </slot>
         </div>
     </template>

diff --git a/packages/web-components/fast-components/src/radio-group/radio-group.ts b/packages/web-components/fast-components/src/radio-group/radio-group.ts
@@ -1,4 +1,5 @@
 import { attr, FASTElement, observable } from "@microsoft/fast-element";
+import { Orientation } from "@microsoft/fast-web-utilities";
 import {
     keyCodeArrowDown,
     keyCodeArrowLeft,
@@ -50,6 +51,9 @@ export class RadioGroup extends FASTElement {
     @attr
     public value: string;
 
+    @attr
+    public orientation: Orientation = Orientation.horizontal;
+
     @observable slottedRadioButtons: RadioControl[];
     private selectedRadio: RadioControl | null;
     private focusedRadio: RadioControl | null;