feat(radio): update samples

samples/inputs/radio/disabled/src/index.css

@@ -1,2 +1,30 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.radio-disabled {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.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);
+}

samples/inputs/radio/disabled/src/index.tsx

@@ -5,13 +5,13 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function RadioDisabled() {
     return (
-        <div className="container sample">
-            <div className="container" style={{width: "430px", height: "25px", border: "1px solid gainsboro"}}>
-                <IgrRadioGroup alignment="horizontal">
-                    <IgrRadio name="fruit" value="banana" disabled={true}>Banana</IgrRadio>
-                    <IgrRadio name="fruit" value="Mango">Mango</IgrRadio>
-                    <IgrRadio name="fruit" value="apple">Apple</IgrRadio>
-                    <IgrRadio name="fruit" value="orange">Orange</IgrRadio>
+        <div className="sample radio-disabled">
+            <div className="age-question">
+                <span id="age-title" className="age-title">What is your age?</span>
+                <IgrRadioGroup name="age" aria-labelledby="age-title">
+                    <IgrRadio value="18-27" checked={true}>18-27</IgrRadio>
+                    <IgrRadio value="28-39">28-39</IgrRadio>
+                    <IgrRadio value="40-55" disabled={true}>40-55</IgrRadio>
                 </IgrRadioGroup>
             </div>
         </div>

samples/inputs/radio/interaction-state/README.md

@@ -0,0 +1,50 @@
+This folder contains implementation of React application with example of Interaction State feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/radio/interaction-state" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+cd ./igniteui-react-examples
+git checkout master
+cd ./samples/inputs/radio/interaction-state
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install
+npm start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).

samples/inputs/radio/interaction-state/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>RadioInteractionState</title>
+    <link href="https://dl.infragistics.com/x/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/inputs/radio/interaction-state/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-radio-interaction-state",
+  "description": "This project provides example of Radio Interaction State using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^2.2.1",
+    "igniteui-react": "19.9.0",
+    "igniteui-react-core": "19.6.0",
+    "igniteui-webcomponents": "~7.4.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/browser": "^5.0.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
+    "vitest-canvas-mock": "^1.2.0",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

samples/inputs/radio/interaction-state/src/index.css

@@ -0,0 +1,96 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */
+@import url("https://use.typekit.net/bng2zgw.css");
+
+.radio-states {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.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::part(ripple) {
+    background: var(--empty-color);
+    opacity: 0.06;
+}
+
+.hover::part(ripple checked) {
+    background: var(--fill-color);
+}
+
+.hover:state(ig-invalid)::part(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-igd-theme on the page, so the hover columns draw the dot in the Fluent theme. */
+[data-igd-theme='fluent'] :is(.hover, .focused-hover).off::part(control)::before {
+    background: light-dark(var(--ig-gray-700), var(--ig-gray-400));
+    transform: scale(0.5);
+}
+
+[data-igd-theme='fluent'] :is(.hover, .focused-hover).off:state(ig-invalid)::part(control)::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. */
+[data-igd-theme='bootstrap'] :is(.hover, .focused-hover).off:not(:state(ig-invalid))::part(control)::after {
+    border-color: var(--ig-gray-500);
+}
+
+[data-igd-theme='bootstrap'] .focused-hover.off:not(:state(ig-invalid))::part(control)::after {
+    border-color: hsl(from var(--ig-primary-200) h calc(s * 1.12) calc(l * 0.82));
+}
+
+[data-igd-theme='indigo'] :is(.hover, .focused-hover).off:not(:state(ig-invalid))::part(control)::after {
+    border-color: light-dark(var(--ig-gray-600), hsl(from var(--ig-primary-500-contrast) h s l / 0.8));
+}

samples/inputs/radio/interaction-state/src/index.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrRadio } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const states = [
+    { caption: 'Hover', label: 'Daily Updates', className: 'hover' },
+    { caption: 'Focused', label: 'Weekly Updates', className: 'focused' },
+    { caption: 'Focused & Hover', label: 'Monthly Updates', className: 'focused-hover' },
+];
+
+const groups = [
+    {
+        name: 'enabled',
+        invalid: false,
+        rows: [
+            { caption: 'Enabled / On', checked: true },
+            { caption: 'Enabled / Off', checked: false },
+        ],
+    },
+    {
+        name: 'invalid',
+        invalid: true,
+        rows: [
+            { caption: 'Invalid / On', checked: true },
+            { caption: 'Invalid / Off', checked: false },
+        ],
+    },
+];
+
+export default function RadioInteractionState() {
+    const gridRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const grid = gridRef.current;
+        if (!grid) {
+            return;
+        }
+        // The radios only show their states, so they take no pointer or keyboard input.
+        grid.setAttribute('inert', '');
+        // 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.
+        grid.querySelectorAll('.focused, .focused-hover').forEach((radio) => {
+            radio.dispatchEvent(new KeyboardEvent('keyup'));
+        });
+    }, []);
+
+    return (
+        <div className="sample radio-states">
+            <div className="radio-states-grid" ref={gridRef}>
+                <span />
+                {states.map((state) => (
+                    <span key={state.caption} className="column-caption">{state.caption}</span>
+                ))}
+                {groups.map((group) => (
+                    <div key={group.name} className="radio-states-group">
+                        {group.rows.map((row) => (
+                            <React.Fragment key={row.caption}>
+                                <span className="row-caption">{row.caption}</span>
+                                {states.map((state) => (
+                                    <IgrRadio
+                                        key={state.caption}
+                                        className={row.checked ? state.className : `${state.className} off`}
+                                        checked={row.checked}
+                                        invalid={group.invalid}
+                                    >
+                                        {state.label}
+                                    </IgrRadio>
+                                ))}
+                            </React.Fragment>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<RadioInteractionState/>);

samples/inputs/radio/interaction-state/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "lib": [
+      "es2020",
+      "dom",
+      "dom.iterable"
+    ],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": [
+      "vite/client"
+    ],
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ]
+}

samples/inputs/radio/interaction-state/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build'
+  },
+  server: {
+    open: false
+  },
+});