added vertical and horizontal orientation for radio-group

microsoft · May 7, 2020 · 1bd354e · 1bd354e
1 parent a9a27de
commit 1bd354e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 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,15 @@ <h4>Defaults</h4>
         </fast-radio-group>
     </div>
 
+    <div>
+        <fast-radio-group orientation="vertical" name="Bourbon">
+            <label slot="label">Bourbon</label>
+            <fast-radio value="elijahcraig">Elijah Craig</fast-radio>
+            <fast-radio value="woodford">Woodford Reserve</fast-radio>
+            <fast-radio value="elmerlee">Elmer T Lee</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,5 +1,5 @@
 import { html, slotted } from "@microsoft/fast-element";
-import { RadioGroup } from "./radio-group";
+import { RadioGroup, RadioOrientation } from "./radio-group";
 
 export const RadioGroupTemplate = html<RadioGroup>`
     <template
@@ -8,7 +8,13 @@ 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 === RadioOrientation.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
@@ -8,6 +8,11 @@ import {
 } from "@microsoft/fast-web-utilities";
 import { RadioControl } from "../radio";
 
+export enum RadioOrientation {
+    horizontal = "horizontal",
+    vertical = "vertical",
+}
+
 export class RadioGroup extends FASTElement {
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
@@ -50,6 +55,9 @@ export class RadioGroup extends FASTElement {
     @attr
     public value: string;
 
+    @attr
+    public orientation: RadioOrientation = RadioOrientation.horizontal;
+
     @observable slottedRadioButtons: RadioControl[];
     private selectedRadio: RadioControl | null;
     private focusedRadio: RadioControl | null;