feat(radio-group): group label styles

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss

@@ -11,9 +11,11 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $color [null] - The text color.
+/// @param {Map} $disabled-color [null] - The disabled text color.
 @function label-theme(
     $schema: $light-material-schema,
-    $color: null
+    $color: null,
+    $disabled-color: null,
 ) {
     $name: 'igx-label';
     $selector: '[igxLabel]';
@@ -31,6 +33,7 @@
         name: $name,
         selector: $selector,
         color: $color,
+        disabled-color: $disabled-color,
         theme: map.get($schema, '_meta', 'theme'),
         variant: map.get($schema, '_meta', 'theme'),
     ));

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

@@ -115,6 +115,10 @@
             @include e(label) {
                 @extend %radio-label--disabled !optional;
             }
+
+            @include e(label, $m: before) {
+                @extend %radio-label--disabled !optional;
+            }
         }
 
         @include m(invalid) {
@@ -217,5 +221,13 @@
         @include m(vertical) {
             @extend %radio-group-display--vertical !optional;
         }
+
+        @include m(before) {
+            @extend %radio-group-display--before !optional;
+        }
+
+        @include m(disabled) {
+            @extend %radio-group-display--disabled !optional;
+        }
     }
 }

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

@@ -601,6 +601,11 @@
         %radio-display:not(:last-of-type) {
             margin-inline-end: $horizontal-group-margin;
         }
+
+        [igxLabel] {
+            display: block;
+            margin-block-end: rem(16px);
+        }
     }
 
     %radio-group-display--vertical {
@@ -611,6 +616,18 @@
             margin-block-end: $vertical-group-margin;
         }
     }
+
+    %radio-group-display--disabled {
+        [igxLabel] {
+            color: var-get($theme, 'disabled-color');
+        }
+    }
+
+    %radio-group-display--before {
+        [igxLabel] {
+            text-align: end;
+        }
+    }
 }
 
 /// Adds typography styles for the igx-radio component.

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

@@ -2,7 +2,7 @@ import {
     AfterContentInit,
     AfterViewInit,
     ChangeDetectorRef,
-    ContentChildren, Directive, DoCheck, EventEmitter, HostBinding, HostListener, Input, OnDestroy, Optional, Output, QueryList, Self, booleanAttribute
+    ContentChildren, Directive, DoCheck, EventEmitter, HostBinding, HostListener, Input, OnDestroy, Optional, Output, QueryList, Self, booleanAttribute, AfterViewChecked
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { fromEvent, noop, Subject } from 'rxjs';
@@ -51,7 +51,7 @@ let nextId = 0;
     selector: 'igx-radio-group, [igxRadioGroup]',
     standalone: true
 })
-export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy, DoCheck {
+export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy, DoCheck, AfterViewChecked {
     /**
      * Returns reference to the child radio buttons.
      *
@@ -195,6 +195,26 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
     @HostBinding('class.igx-radio-group--vertical')
     private vertical = false;
 
+    /**
+     * A css class applied to the component if any of the 
+     * child radio buttons labelPosition is set to `before`.
+     *
+     * @hidden
+     * @internal
+     */
+    @HostBinding('class.igx-radio-group--before')
+    private _labelBefore = false;
+
+    /**
+     * A css class applied to the component if all 
+     * child radio buttons are disabled.
+     *
+     * @hidden
+     * @internal
+     */
+    @HostBinding('class.igx-radio-group--disabled')
+    private _disabled = false;
+
     @HostListener('click', ['$event'])
     protected handleClick(event: MouseEvent) {
         event.stopPropagation();
@@ -325,6 +345,11 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
      * @internal
      */
     private queryChange$ = new Subject<void>();
+    /**
+     * @hidden
+     * @internal
+     */
+    private _lastDisabledState = false;
 
     /**
      * @hidden
@@ -348,6 +373,17 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
                 }
             });
         }
+
+        this.updateDisabled();
+        this.getLabelPosition();
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public ngAfterViewChecked() {
+        this.updateDisabled();
     }
 
     /**
@@ -382,6 +418,37 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    private getDisabled(): boolean {
+        return this.radioButtons?.toArray().every(button => button.disabled);
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    private updateDisabled() {
+        const allDisabled = this.getDisabled();
+
+        if (this._lastDisabledState !== allDisabled) {
+            this._lastDisabledState = allDisabled;
+            setTimeout(() => {
+                this._disabled = allDisabled;
+            });
+        }
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    private getLabelPosition() {
+        this._labelBefore = this.radioButtons?.some(button => button.labelPosition === 'before') ?? false;
+    }
+
     /**
      * @hidden
      * @internal
@@ -414,6 +481,7 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
 
     public ngDoCheck(): void {
         this._updateTabIndex();
+        this.getLabelPosition();
     }
 
     private _updateTabIndex() {

src/app/input-controls/input-controls.sample.html

@@ -49,6 +49,28 @@ <h4 class="sample-title">Angular Inputs</h4>
                 [value]="properties.value? properties.value : 'Bar'">Bar</igx-radio>
             </igx-radio-group>
         </article>
+
+
+        <article>
+            <strong>Angular Radio Group with Label</strong>
+            <i>* When any of the buttons label position is "before",
+                <br> the group label should be right-aligned.</i>
+
+            <igx-radio-group [alignment]="alignment">
+                <label igxLabel>Radio Group Label</label>
+                <igx-radio
+                [checked]="properties.checked"
+                [disabled]="properties.disabled"
+                [invalid]="properties.invalid"
+                >Radio Button 1</igx-radio>
+
+                <igx-radio
+                [disabled]="properties.disabled"
+                [invalid]="properties.invalid"
+                [labelPosition]="properties.labelPosition"
+                >Radio Button 2</igx-radio>
+            </igx-radio-group>
+        </article>
     </div>
 
     <div class="wc-inputs">