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 index 54183dbca86..dcccc7470ad 100644 --- 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 @@

Defaults

+
+ + + Elijah Craig + Woodford Reserve + Elmer T Lee + +
+
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 index f66757800da..ded543a8267 100644 --- 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 index 4e2a21914cc..6811e105676 100644 --- 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` 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 index 3e73b466b99..94aaa1df87c 100644 --- 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;