feat(radio): update radio samples

live-editing/configs/RadioConfigGenerator.ts

@@ -11,32 +11,67 @@ export class RadioConfigGenerator implements IConfigGenerator {
         const configs = new Array<Config>();
 
         configs.push(new Config({
-            component: 'RadioSample1Component',
+            component: 'RadioOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/radio/"
         }));
 
         configs.push(new Config({
-            component: 'RadioSample2Component',
+            component: 'RadioLayoutComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/radio/"
         }));
 
         configs.push(new Config({
-            component: 'RadioGroupSampleComponent',
+            component: 'RadioOrientationComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/radio/"
         }));
 
         configs.push(new Config({
-            component: 'RadioGroupVerticalComponent',
+            component: 'RadioInteractionStateComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/radio/"
+        }));
+
+        configs.push(new Config({
+            component: 'RadioDisabledComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/radio/"
+        }));
+
+        configs.push(new Config({
+            component: 'RadioOnOffStateComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/radio/"
+        }));
+
+        configs.push(new Config({
+            component: 'RadioStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/radio/"
         }));
 
         configs.push(new Config({
-            component: 'RadioStylingSampleComponent',
-            additionalFiles: ["/src/app/data-entries/radio/radio-styling-sample/layout.scss"],
+            component: 'RadioSample1Component',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/radio/"
+        }));
+
+        configs.push(new Config({
+            component: 'RadioSample2Component',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/radio/"
+        }));
+
+        configs.push(new Config({
+            component: 'RadioGroupSampleComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/radio/"
+        }));
+
+        configs.push(new Config({
+            component: 'RadioGroupVerticalComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/radio/"
         }));

src/app/data-entries/data-entries-routes-data.ts

@@ -70,13 +70,19 @@ export const dataEntriesRoutesData = {
     "input-group-style": { displayName: "Input Group Style", parentName: "Input Group" },
     "input-group-tailwind-style": { displayName: "Input Group Tailwind Style", parentName: "Input Group" },
     "reactive-forms": { displayName: "Reactive Forms Overview", parentName: "Angular Reactive Forms" },
+    "radio-overview": { displayName: "Overview", parentName: "Radio" },
+    "radio-layout": { displayName: "Radio Layout", parentName: "Radio" },
+    "radio-orientation": { displayName: "Radio Orientation", parentName: "Radio" },
+    "radio-interaction-state": { displayName: "Radio Interaction State", parentName: "Radio" },
+    "radio-disabled": { displayName: "Radio Disabled", parentName: "Radio" },
+    "radio-on-off-state": { displayName: "Radio On Off State", parentName: "Radio" },
+    "radio-styling": { displayName: "Radio Styling", parentName: "Radio" },
+    "radio-tailwind-styling": { displayName: "Radio Tailwind Styling", parentName: "Radio" },
     "radio-sample-1": { displayName: "Simple Radio Buttons", parentName: "Radio" },
     "radio-sample-2": { displayName: "Radio Button Binding", parentName: "Radio" },
     "radio-sample-3": { displayName: "Radio Label Position", parentName: "Radio" },
     "radio-group-sample": { displayName: "Radio Group", parentName: "Radio" },
     "radio-group-vertical": { displayName: "Vertical Radio Group", parentName: "Radio" },
-    "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
-    "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
     "switch-overview": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-enabled": { displayName: "Enabled Switches", parentName: "Switch" },

src/app/data-entries/data-entries.routes.ts

@@ -68,8 +68,14 @@ import { RadioGroupSampleComponent } from './radio/radio-group-sample/radio-grou
 import { RadioSample1Component } from './radio/radio-sample-1/radio-sample-1.component';
 import { RadioSample2Component } from './radio/radio-sample-2/radio-sample-2.component';
 import { RadioSample3Component } from './radio/radio-sample-3/radio-sample-3.component';
-import { RadioStylingSampleComponent } from './radio/radio-styling-sample/radio-styling-sample.component';
-import { RadioTailwindStylingSampleComponent } from './radio/radio-tailwind-styling-sample/radio-tailwind-styling-sample.component';
+import { RadioOverviewComponent } from './radio/radio-overview/radio-overview.component';
+import { RadioLayoutComponent } from './radio/radio-layout/radio-layout.component';
+import { RadioOrientationComponent } from './radio/radio-orientation/radio-orientation.component';
+import { RadioInteractionStateComponent } from './radio/radio-interaction-state/radio-interaction-state.component';
+import { RadioDisabledComponent } from './radio/radio-disabled/radio-disabled.component';
+import { RadioOnOffStateComponent } from './radio/radio-on-off-state/radio-on-off-state.component';
+import { RadioStylingComponent } from './radio/radio-styling/radio-styling.component';
+import { RadioTailwindStylingComponent } from './radio/radio-tailwind-styling/radio-tailwind-styling.component';
 import { SelectHeaderFooterComponent } from './select/select-header-footer/select-header-footer.component';
 import { SelectInputDirectivesComponent } from './select/select-input-directives/select-input-directives';
 import { SelectSample1Component } from './select/select-sample-1/select-sample-1.component';
@@ -449,6 +455,46 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['reactive-forms'],
         path: 'reactive-forms'
     },
+    {
+        component: RadioOverviewComponent,
+        data: dataEntriesRoutesData['radio-overview'],
+        path: 'radio-overview'
+    },
+    {
+        component: RadioLayoutComponent,
+        data: dataEntriesRoutesData['radio-layout'],
+        path: 'radio-layout'
+    },
+    {
+        component: RadioOrientationComponent,
+        data: dataEntriesRoutesData['radio-orientation'],
+        path: 'radio-orientation'
+    },
+    {
+        component: RadioInteractionStateComponent,
+        data: dataEntriesRoutesData['radio-interaction-state'],
+        path: 'radio-interaction-state'
+    },
+    {
+        component: RadioDisabledComponent,
+        data: dataEntriesRoutesData['radio-disabled'],
+        path: 'radio-disabled'
+    },
+    {
+        component: RadioOnOffStateComponent,
+        data: dataEntriesRoutesData['radio-on-off-state'],
+        path: 'radio-on-off-state'
+    },
+    {
+        component: RadioStylingComponent,
+        data: dataEntriesRoutesData['radio-styling'],
+        path: 'radio-styling'
+    },
+    {
+        component: RadioTailwindStylingComponent,
+        data: dataEntriesRoutesData['radio-tailwind-styling'],
+        path: 'radio-tailwind-styling'
+    },
     {
         component: RadioSample1Component,
         data: dataEntriesRoutesData['radio-sample-1'],
@@ -474,16 +520,6 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['radio-group-vertical'],
         path: 'radio-group-vertical'
     },
-    {
-        component: RadioStylingSampleComponent,
-        data: dataEntriesRoutesData['radio-styling-sample'],
-        path: 'radio-styling-sample'
-    },
-    {
-        component: RadioTailwindStylingSampleComponent,
-        data: dataEntriesRoutesData['radio-tailwind-styling-sample'],
-        path: 'radio-tailwind-styling-sample'
-    },
     {
         component: RatingInFormComponent,
         data: dataEntriesRoutesData['rating-in-form'],

src/app/data-entries/radio/radio-disabled/radio-disabled.component.html

@@ -0,0 +1,8 @@
+<div class="age-question">
+    <span id="age-title" class="age-title">What is your age?</span>
+    <igx-radio-group name="age" alignment="vertical" value="18-27" aria-labelledby="age-title">
+        <igx-radio value="18-27">18-27</igx-radio>
+        <igx-radio value="28-39">28-39</igx-radio>
+        <igx-radio value="40-55" [disabled]="true">40-55</igx-radio>
+    </igx-radio-group>
+</div>

src/app/data-entries/radio/radio-disabled/radio-disabled.component.scss

@@ -0,0 +1,28 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.age-question {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    /* The card of the design, in the surface color of the theme. */
+    box-sizing: border-box;
+    width: 13.9375rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background: var(--ig-surface-500);
+}
+
+.age-title {
+    color: var(--ig-gray-900);
+    font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));
+    font-size: var(--ig-subtitle-1-font-size);
+    font-weight: var(--ig-subtitle-1-font-weight);
+    line-height: var(--ig-subtitle-1-line-height);
+    letter-spacing: var(--ig-subtitle-1-letter-spacing);
+}

src/app/data-entries/radio/radio-disabled/radio-disabled.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio';
+
+@Component({
+    selector: 'app-radio-disabled',
+    templateUrl: './radio-disabled.component.html',
+    styleUrls: ['./radio-disabled.component.scss'],
+    imports: [IgxRadioComponent, IgxRadioGroupDirective]
+})
+export class RadioDisabledComponent { }

src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.html

@@ -0,0 +1,27 @@
+<!-- The radios only show their states, so they take no pointer or keyboard input. -->
+<div class="radio-states-grid" inert>
+    <span></span>
+    <span class="column-caption">Hover</span>
+    <span class="column-caption">Focused</span>
+    <span class="column-caption">Focused &amp; Hover</span>
+    <div class="radio-states-group">
+        <span class="row-caption">Enabled / On</span>
+        <igx-radio class="hover" [checked]="true">Daily Updates</igx-radio>
+        <igx-radio class="focused" [checked]="true">Weekly Updates</igx-radio>
+        <igx-radio class="focused-hover" [checked]="true">Monthly Updates</igx-radio>
+        <span class="row-caption">Enabled / Off</span>
+        <igx-radio class="hover off">Daily Updates</igx-radio>
+        <igx-radio class="focused off">Weekly Updates</igx-radio>
+        <igx-radio class="focused-hover off">Monthly Updates</igx-radio>
+    </div>
+    <div class="radio-states-group">
+        <span class="row-caption">Invalid / On</span>
+        <igx-radio class="hover" [checked]="true" [invalid]="true">Daily Updates</igx-radio>
+        <igx-radio class="focused" [checked]="true" [invalid]="true">Weekly Updates</igx-radio>
+        <igx-radio class="focused-hover" [checked]="true" [invalid]="true">Monthly Updates</igx-radio>
+        <span class="row-caption">Invalid / Off</span>
+        <igx-radio class="hover off" [invalid]="true">Daily Updates</igx-radio>
+        <igx-radio class="focused off" [invalid]="true">Weekly Updates</igx-radio>
+        <igx-radio class="focused-hover off" [invalid]="true">Monthly Updates</igx-radio>
+    </div>
+</div>

src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.scss

@@ -0,0 +1,112 @@
+/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */
+@import url("https://use.typekit.net/bng2zgw.css");
+
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.radio-states-grid {
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    align-items: center;
+    gap: 1.875rem 3.25rem;
+}
+
+/* The enabled and the invalid rows each share the columns of the whole grid. */
+.radio-states-group {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+    row-gap: 1.875rem;
+}
+
+.radio-states-group + .radio-states-group {
+    margin-top: 1.25rem;
+}
+
+.radio-states-grid span {
+    color: var(--ig-gray-600);
+    font-family: aktiv-grotesk, sans-serif;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    letter-spacing: 0.3px;
+}
+
+.column-caption {
+    text-align: center;
+}
+
+/* The row captions sit closer to the radios than the columns sit to each other. */
+.row-caption {
+    margin-inline-end: -1.3125rem;
+}
+
+/* Hover can't be turned on from code, so the hover columns take the theme's hover
+   colors, and the Hover column also shows the ripple of the Material theme. */
+.hover,
+.focused-hover {
+    --fill-color: var(--fill-color-hover);
+    --label-color: var(--label-color-hover);
+    --error-color: var(--error-color-hover);
+}
+
+.hover ::ng-deep .igx-radio__ripple {
+    background: var(--empty-color);
+    opacity: 0.06;
+}
+
+.hover.igx-radio--checked ::ng-deep .igx-radio__ripple {
+    background: var(--fill-color);
+}
+
+.hover.igx-radio--invalid ::ng-deep .igx-radio__ripple {
+    background: var(--error-color);
+}
+
+/* Fluent also draws a dot in an off radio on hover, which no color can show. The docs
+   set data-ig-theme on the page, so the hover columns draw the dot in the Fluent theme. */
+:host-context([data-ig-theme='fluent']) {
+    .hover.off,
+    .focused-hover.off {
+        ::ng-deep .igx-radio__composite::before {
+            background: light-dark(var(--ig-gray-700), var(--ig-gray-400));
+            transform: scale(0.5);
+        }
+    }
+
+    .hover.off.igx-radio--invalid,
+    .focused-hover.off.igx-radio--invalid {
+        ::ng-deep .igx-radio__composite::before {
+            background: var(--ig-error-500);
+        }
+    }
+}
+
+/* Bootstrap and Indigo darken the ring of an off radio on hover, and Bootstrap darkens
+   its focus color when the radio is also focused. */
+:host-context([data-ig-theme='bootstrap']) {
+    .hover.off:not(.igx-radio--invalid),
+    .focused-hover.off:not(.igx-radio--invalid) {
+        ::ng-deep .igx-radio__composite::after {
+            border-color: var(--ig-gray-500);
+        }
+    }
+
+    .focused-hover.off:not(.igx-radio--invalid) ::ng-deep .igx-radio__composite::after {
+        border-color: hsl(from var(--ig-primary-200) h calc(s * 1.12) calc(l * 0.82));
+    }
+}
+
+:host-context([data-ig-theme='indigo']) {
+    .hover.off:not(.igx-radio--invalid),
+    .focused-hover.off:not(.igx-radio--invalid) {
+        ::ng-deep .igx-radio__composite::after {
+            border-color: light-dark(var(--ig-gray-600), hsl(from var(--ig-primary-500-contrast) h s l / 0.8));
+        }
+    }
+}

src/app/data-entries/radio/radio-interaction-state/radio-interaction-state.component.ts

@@ -0,0 +1,22 @@
+import { Component, ElementRef, afterNextRender, inject } from '@angular/core';
+import { IgxRadioComponent } from 'igniteui-angular/radio';
+
+@Component({
+    selector: 'app-radio-interaction-state',
+    templateUrl: './radio-interaction-state.component.html',
+    styleUrls: ['./radio-interaction-state.component.scss'],
+    imports: [IgxRadioComponent]
+})
+export class RadioInteractionStateComponent {
+    constructor() {
+        const element: HTMLElement = inject(ElementRef).nativeElement;
+
+        // A keyup is what turns on a radio's keyboard focus ring, so dispatching one
+        // shows the focused state without moving focus to the radio.
+        afterNextRender(() => {
+            element.querySelectorAll('.focused, .focused-hover').forEach((radio) => {
+                radio.dispatchEvent(new KeyboardEvent('keyup'));
+            });
+        });
+    }
+}