feat(radio-group): group label styles

Author: SisIvanova

src/components/radio-group/radio-group.fluent.scss

@@ -1,14 +1,13 @@
 import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
-
 import { themes } from '../../theming/theming-decorator.js';
+import { createMutationController } from '../common/controllers/mutation-observer.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcRadioComponent from '../radio/radio.js';
 import type { ContentOrientation } from '../types.js';
-import { styles } from './radio-group.base.css.js';
-import { styles as fluent } from './radio-group.fluent.css.js';
-import { styles as indigo } from './radio-group.indigo.css.js';
-import { styles as material } from './radio-group.material.css.js';
+import { styles } from './themes/radio-group.base.css.js';
+import { styles as shared } from './themes/shared/radio-group.common.css.js';
+import { all } from './themes/themes.js';
 
 /**
  * The igc-radio-group component unifies one or more igc-radio buttons.
@@ -17,13 +16,10 @@ import { styles as material } from './radio-group.material.css.js';
  *
  * @slot - Default slot
  */
-@themes({
-  light: { material, fluent, indigo },
-  dark: { material, fluent, indigo },
-})
+@themes(all)
 export default class IgcRadioGroupComponent extends LitElement {
   public static readonly tagName = 'igc-radio-group';
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {
@@ -35,6 +31,12 @@ export default class IgcRadioGroupComponent extends LitElement {
   private _name!: string;
   private _value!: string;
 
+  @property({ type: Boolean, reflect: true })
+  private disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  private labelBefore = false;
+
   @queryAssignedElements({ flatten: true })
   private _radios!: NodeListOf<IgcRadioComponent>;
 
@@ -90,11 +92,29 @@ export default class IgcRadioGroupComponent extends LitElement {
     return this._value;
   }
 
+  private _observerCallback() {
+    const radios = Array.from(this._radios as unknown as Element[]).filter(
+      (el) => el.tagName.toLowerCase() === 'igc-radio'
+    ) as IgcRadioComponent[];
+    this.disabled = radios.every((radio) => radio.disabled);
+    this.labelBefore =
+      radios.some((radio) => radio.labelPosition === 'before') ?? false;
+  }
+
   constructor() {
     super();
 
     this._internals = this.attachInternals();
     this._internals.role = 'radiogroup';
+
+    createMutationController(this, {
+      callback: this._observerCallback,
+      filter: [IgcRadioComponent.tagName],
+      config: {
+        attributeFilter: ['disabled', 'label-position'],
+        subtree: true,
+      },
+    });
   }
 
   protected override createRenderRoot() {

src/components/radio-group/radio-group.indigo.scss

@@ -0,0 +1,7 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/label' as *;
+
+$material: digest-schema($dark-material-label);
+$bootstrap: digest-schema($dark-bootstrap-label);
+$fluent: digest-schema($dark-fluent-label);
+$indigo: digest-schema($dark-indigo-label);

src/components/radio-group/radio-group.ts

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+}

src/components/radio-group/themes/dark/_themes.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+}

src/components/radio-group/themes/dark/radio-group.bootstrap.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+}

src/components/radio-group/themes/dark/radio-group.fluent.scss

@@ -0,0 +1,9 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+@use '../light/themes' as light;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+}

src/components/radio-group/themes/dark/radio-group.indigo.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/label' as *;
+
+$base: digest-schema($light-label);
+$material: digest-schema($material-label);
+$bootstrap: digest-schema($bootstrap-label);
+$fluent: digest-schema($fluent-label);
+$indigo: digest-schema($indigo-label);

src/components/radio-group/themes/dark/radio-group.material.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+}