Merge pull request #8727 from IgniteUI/SIvanova/vertical-radio-group

feat(radio-group): add vertical alignment

Author: simeonoff

CHANGELOG.md

@@ -7,8 +7,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
 ### General
-    - `IgxCalendar`
-        - A new string enumeration `IgxCalendarView` is exported. Either the new one or the current `CalendarView` can be used. `CalendarView` will be deprecated in a future release.
+- `IgxCalendar`
+    - A new string enumeration `IgxCalendarView` is exported. Either the new one or the current `CalendarView` can be used. `CalendarView` will be deprecated in a future release.
+- `IgxRadioGroup`
+    - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`.
 
 ## 11.0.4
 

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss

@@ -121,4 +121,9 @@
 
 @include b(igx-radio-group) {
     display: block;
+
+    @include m(vertical) {
+        display: flex;
+        flex-flow: column;
+    }
 }

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -15,6 +15,16 @@ import { IgxRadioComponent, RadioLabelPosition, IChangeRadioEventArgs } from '..
 import { IgxRippleModule } from '../ripple/ripple.directive';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { mkenum } from '../../core/utils';
+
+/**
+ * Determines the Radio Group alignment
+ */
+export const RadioGroupAlignment = mkenum({
+    horizontal: 'horizontal',
+    vertical: 'vertical'
+});
+export type RadioGroupAlignment = (typeof RadioGroupAlignment)[keyof typeof RadioGroupAlignment];
 
 const noop = () => { };
 let nextId = 0;
@@ -189,6 +199,47 @@ export class IgxRadioGroupDirective implements AfterContentInit, ControlValueAcc
     @HostBinding('class.igx-radio-group')
     public cssClass = 'igx-radio-group';
 
+    /**
+     * Sets vertical alignment to the radio group, if `alignment` is set to `vertical`.
+     * By default the alignment is horizontal.
+     *
+     * @example
+     * ```html
+     * <igx-radio-group alignment="vertical"></igx-radio-group>
+     * ```
+     */
+    @HostBinding('class.igx-radio-group--vertical')
+    private vertical = false;
+
+    /**
+     * Returns the alignment of the `igx-radio-group`.
+     * ```typescript
+     * @ViewChild("MyRadioGroup")
+     * public radioGroup: IgxRadioGroupDirective;
+     * ngAfterViewInit(){
+     *    let radioAlignment = this.radioGroup.alignment;
+     * }
+     * ```
+     */
+    @Input()
+    get alignment(): RadioGroupAlignment {
+        return this.vertical ? RadioGroupAlignment.vertical : RadioGroupAlignment.horizontal;
+    }
+    /**
+     * Allows you to set the radio group alignment.
+     * Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`.
+     * ```typescript
+     * public alignment = RadioGroupAlignment.vertical;
+     * //..
+     * ```
+     * ```html
+     * <igx-radio-group [alignment]="alignment"></igx-radio-group>
+     * ```
+     */
+    set alignment (value: RadioGroupAlignment) {
+        this.vertical = value === RadioGroupAlignment.vertical;
+    }
+
     /**
      * @hidden
      * @internal

src/app/radio/radio.sample.html

@@ -31,8 +31,8 @@ <h6 igxCardHeaderTitle>Reserve your dream vacation at {{ opt }}</h6>
 </section>
 <section class="sample-content">
     <article class="sample-column">
-        <h4 class="sample-title">Radio group without data model</h4>
-        <igx-radio-group #radioGroupZZ name="radiogroupZZ" value="Bar" required="true" (change)="onRadioChange($event)">
+        <h4 class="sample-title">Radio group without data model (Vertical Alignment)</h4>
+        <igx-radio-group #radioGroupZZ name="radiogroupZZ" value="Bar" required="true" (change)="onRadioChange($event)" [alignment]="alignment">
             <igx-radio class="radio-sample" *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}">
                 {{item}}
             </igx-radio>

src/app/radio/radio.sample.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, AfterContentInit } from '@angular/core';
-import { IgxRadioGroupDirective } from 'igniteui-angular';
+import { IgxRadioGroupDirective, RadioGroupAlignment } from 'igniteui-angular';
 import { FormGroup, FormBuilder } from '@angular/forms';
 
 class Person {
@@ -38,6 +38,8 @@ export class RadioSampleComponent implements AfterContentInit {
     personKirk: Person = new Person('Kirk', this.seasons[1]);
     personKirkForm: FormGroup;
 
+    alignment = RadioGroupAlignment.vertical;
+
     constructor(private _formBuilder: FormBuilder) {
         this._createPersonKirkForm();
     }