diff --git a/samples/inputs/radio/disabled/src/index.css b/samples/inputs/radio/disabled/src/index.css index 1f53b8aa05..75756516a2 100644 --- a/samples/inputs/radio/disabled/src/index.css +++ b/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 */ \ No newline at end of file +/* 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); +} diff --git a/samples/inputs/radio/disabled/src/index.tsx b/samples/inputs/radio/disabled/src/index.tsx index 69d7e4aa34..8a2625d5e1 100644 --- a/samples/inputs/radio/disabled/src/index.tsx +++ b/samples/inputs/radio/disabled/src/index.tsx @@ -5,13 +5,13 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function RadioDisabled() { return ( -
-
- - Banana - Mango - Apple - Orange +
+
+ What is your age? + + 18-27 + 28-39 + 40-55
diff --git a/samples/inputs/radio/interaction-state/README.md b/samples/inputs/radio/interaction-state/README.md new file mode 100644 index 0000000000..da8f3a2ccc --- /dev/null +++ b/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. + + + + + + View Docs + + + View Code + + + Run Sample + + + + +## 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). diff --git a/samples/inputs/radio/interaction-state/index.html b/samples/inputs/radio/interaction-state/index.html new file mode 100644 index 0000000000..b89800e274 --- /dev/null +++ b/samples/inputs/radio/interaction-state/index.html @@ -0,0 +1,11 @@ + + + + RadioInteractionState + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/interaction-state/package.json b/samples/inputs/radio/interaction-state/package.json new file mode 100644 index 0000000000..abbfd50c34 --- /dev/null +++ b/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" + ] +} diff --git a/samples/inputs/radio/interaction-state/src/index.css b/samples/inputs/radio/interaction-state/src/index.css new file mode 100644 index 0000000000..ba760d572d --- /dev/null +++ b/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)); +} diff --git a/samples/inputs/radio/interaction-state/src/index.tsx b/samples/inputs/radio/interaction-state/src/index.tsx new file mode 100644 index 0000000000..3d1d1dcc11 --- /dev/null +++ b/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(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 ( +
+
+ + {states.map((state) => ( + {state.caption} + ))} + {groups.map((group) => ( +
+ {group.rows.map((row) => ( + + {row.caption} + {states.map((state) => ( + + {state.label} + + ))} + + ))} +
+ ))} +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/radio/interaction-state/tsconfig.json b/samples/inputs/radio/interaction-state/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/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" + ] +} diff --git a/samples/inputs/radio/interaction-state/vite.config.js b/samples/inputs/radio/interaction-state/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/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 + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/layout/README.md b/samples/inputs/radio/layout/README.md new file mode 100644 index 0000000000..2dfdb7796a --- /dev/null +++ b/samples/inputs/radio/layout/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Layout feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + + +## 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/layout +``` + +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). diff --git a/samples/inputs/radio/layout/index.html b/samples/inputs/radio/layout/index.html new file mode 100644 index 0000000000..9c7511b094 --- /dev/null +++ b/samples/inputs/radio/layout/index.html @@ -0,0 +1,11 @@ + + + + RadioLayout + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/layout/package.json b/samples/inputs/radio/layout/package.json new file mode 100644 index 0000000000..0fe317467d --- /dev/null +++ b/samples/inputs/radio/layout/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-layout", + "description": "This project provides example of Radio Layout 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" + ] +} diff --git a/samples/inputs/radio/layout/src/index.css b/samples/inputs/radio/layout/src/index.css new file mode 100644 index 0000000000..826ec659f3 --- /dev/null +++ b/samples/inputs/radio/layout/src/index.css @@ -0,0 +1,28 @@ +/* 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-layout { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1.5rem 3.75rem; +} + +.radio-layout-item { + display: flex; + align-items: center; + gap: 1.875rem; +} + +.radio-layout-item 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; +} diff --git a/samples/inputs/radio/layout/src/index.tsx b/samples/inputs/radio/layout/src/index.tsx new file mode 100644 index 0000000000..1412b0d64a --- /dev/null +++ b/samples/inputs/radio/layout/src/index.tsx @@ -0,0 +1,31 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioLayout() { + return ( +
+
+ Label After + + Yellow + Orange + Purple + +
+
+ + Yellow + Orange + Purple + + Label Before +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/radio/layout/tsconfig.json b/samples/inputs/radio/layout/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/radio/layout/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" + ] +} diff --git a/samples/inputs/radio/layout/vite.config.js b/samples/inputs/radio/layout/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/layout/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 + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/on-off-state/README.md b/samples/inputs/radio/on-off-state/README.md new file mode 100644 index 0000000000..00f7d17634 --- /dev/null +++ b/samples/inputs/radio/on-off-state/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of On Off State feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + + +## 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/on-off-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). diff --git a/samples/inputs/radio/on-off-state/index.html b/samples/inputs/radio/on-off-state/index.html new file mode 100644 index 0000000000..24450119db --- /dev/null +++ b/samples/inputs/radio/on-off-state/index.html @@ -0,0 +1,11 @@ + + + + RadioOnOffState + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/on-off-state/package.json b/samples/inputs/radio/on-off-state/package.json new file mode 100644 index 0000000000..38d33befd9 --- /dev/null +++ b/samples/inputs/radio/on-off-state/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-on-off-state", + "description": "This project provides example of Radio On Off 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" + ] +} diff --git a/samples/inputs/radio/on-off-state/src/index.css b/samples/inputs/radio/on-off-state/src/index.css new file mode 100644 index 0000000000..1bec03b6aa --- /dev/null +++ b/samples/inputs/radio/on-off-state/src/index.css @@ -0,0 +1,30 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-on-off { + 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); +} diff --git a/samples/inputs/radio/on-off-state/src/index.tsx b/samples/inputs/radio/on-off-state/src/index.tsx new file mode 100644 index 0000000000..7851f265b7 --- /dev/null +++ b/samples/inputs/radio/on-off-state/src/index.tsx @@ -0,0 +1,23 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioOnOffState() { + return ( +
+
+ What is your age? + + 18-27 + 28-39 + 40-55 + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/radio/on-off-state/tsconfig.json b/samples/inputs/radio/on-off-state/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/radio/on-off-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" + ] +} diff --git a/samples/inputs/radio/on-off-state/vite.config.js b/samples/inputs/radio/on-off-state/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/on-off-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 + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/orientation/README.md b/samples/inputs/radio/orientation/README.md new file mode 100644 index 0000000000..07b771c166 --- /dev/null +++ b/samples/inputs/radio/orientation/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Orientation feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + + +## 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/orientation +``` + +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). diff --git a/samples/inputs/radio/orientation/index.html b/samples/inputs/radio/orientation/index.html new file mode 100644 index 0000000000..a1a7847d6c --- /dev/null +++ b/samples/inputs/radio/orientation/index.html @@ -0,0 +1,11 @@ + + + + RadioOrientation + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/orientation/package.json b/samples/inputs/radio/orientation/package.json new file mode 100644 index 0000000000..ad02b95ea2 --- /dev/null +++ b/samples/inputs/radio/orientation/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-orientation", + "description": "This project provides example of Radio Orientation 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" + ] +} diff --git a/samples/inputs/radio/orientation/src/index.css b/samples/inputs/radio/orientation/src/index.css new file mode 100644 index 0000000000..bcaee41c06 --- /dev/null +++ b/samples/inputs/radio/orientation/src/index.css @@ -0,0 +1,41 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-orientation { + display: flex; + flex-wrap: wrap; + /* Centers the row of cards vertically, while the cards stay top-aligned to each other. */ + align-content: center; + align-items: flex-start; + justify-content: center; + gap: 1.5rem 3.75rem; +} + +.radio-orientation-item { + display: flex; + flex-direction: column; + gap: 1rem; + box-sizing: border-box; + padding: 1rem; + + /* The card of the design, in the surface color of the theme. */ + border-radius: 0.5rem; + background: var(--ig-surface-500); +} + +.billing-cycle { + width: 13.9375rem; +} + +.chart-type { + width: 17.1875rem; +} + +.radio-orientation-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); +} diff --git a/samples/inputs/radio/orientation/src/index.tsx b/samples/inputs/radio/orientation/src/index.tsx new file mode 100644 index 0000000000..84413b9772 --- /dev/null +++ b/samples/inputs/radio/orientation/src/index.tsx @@ -0,0 +1,31 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioOrientation() { + return ( +
+
+ Billing cycle + + Monthly + Annual + Two-year + +
+
+ Chart type + + Line + Bar + Pie + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/radio/orientation/tsconfig.json b/samples/inputs/radio/orientation/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/radio/orientation/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" + ] +} diff --git a/samples/inputs/radio/orientation/vite.config.js b/samples/inputs/radio/orientation/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/orientation/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 + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/overview/README.md b/samples/inputs/radio/overview/README.md new file mode 100644 index 0000000000..1b3da9ab55 --- /dev/null +++ b/samples/inputs/radio/overview/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Overview feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + + +## 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/overview +``` + +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). diff --git a/samples/inputs/radio/overview/index.html b/samples/inputs/radio/overview/index.html new file mode 100644 index 0000000000..3a6a0aa56d --- /dev/null +++ b/samples/inputs/radio/overview/index.html @@ -0,0 +1,11 @@ + + + + RadioOverview + + + +
+ + + \ No newline at end of file diff --git a/samples/inputs/radio/overview/package.json b/samples/inputs/radio/overview/package.json new file mode 100644 index 0000000000..ee05226e21 --- /dev/null +++ b/samples/inputs/radio/overview/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-radio-overview", + "description": "This project provides example of Radio Overview 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" + ] +} diff --git a/samples/inputs/radio/overview/src/index.css b/samples/inputs/radio/overview/src/index.css new file mode 100644 index 0000000000..9a1f24d033 --- /dev/null +++ b/samples/inputs/radio/overview/src/index.css @@ -0,0 +1,36 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.radio-overview { + display: flex; + align-items: center; + justify-content: center; +} + +.feedback-form { + display: flex; + flex-direction: column; + gap: 1rem; + box-sizing: border-box; + width: 22.5rem; + padding: 1rem; + + /* The card of the design, in the surface color of the theme. */ + border-radius: 0.5rem; + background: var(--ig-surface-500); +} + +.feedback-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); +} + +.feedback-send { + align-self: center; + width: 11.25rem; + margin-top: 1rem; +} diff --git a/samples/inputs/radio/overview/src/index.tsx b/samples/inputs/radio/overview/src/index.tsx new file mode 100644 index 0000000000..b7fd76130b --- /dev/null +++ b/samples/inputs/radio/overview/src/index.tsx @@ -0,0 +1,24 @@ +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function RadioOverview() { + return ( +
+
e.preventDefault()}> + Does our app meet your expectations? + + Exceeds expectations + Meets expectations + Below expectations + + Send +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/radio/overview/tsconfig.json b/samples/inputs/radio/overview/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/radio/overview/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" + ] +} diff --git a/samples/inputs/radio/overview/vite.config.js b/samples/inputs/radio/overview/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/radio/overview/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 + }, +}); \ No newline at end of file diff --git a/samples/inputs/radio/styling/src/index.css b/samples/inputs/radio/styling/src/index.css index 238ccdd014..4ff9f0fc78 100644 --- a/samples/inputs/radio/styling/src/index.css +++ b/samples/inputs/radio/styling/src/index.css @@ -1,11 +1,123 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -:root { - --igc-primary-h: 60deg; - --igc-primary-s: 100%; - --igc-primary-l: 25%; + +/* Aktiv Grotesk, from the same Adobe Fonts kit the docs use. */ +@import url("https://use.typekit.net/bng2zgw.css"); + +.radio-styling { + display: flex; + align-items: center; + justify-content: center; +} + +.shipping-card { + /* The design's own palette. It is set here instead of coming from the theme, + so the sample keeps its look in every theme. */ + --shipping-surface: #fff; + --shipping-primary: #0176ff; + --shipping-title: #00142b; + --shipping-ink: #002b5c; + --shipping-gray-100: #f3f6fa; + --shipping-gray-300: #d2dbe8; + --shipping-gray-400: #a9b8cc; + --shipping-gray-600: #556c86; + + /* The colors of the hover and focus effects the theme draws around the radio. */ + --ig-radio-fill-color: var(--shipping-primary); + --ig-radio-empty-color: var(--shipping-gray-400); + + box-sizing: border-box; + width: 21.75rem; + border: 1px solid var(--shipping-gray-300); + border-radius: 1rem; + background: var(--shipping-surface); + font-family: aktiv-grotesk, sans-serif; +} + +.shipping-header { + box-sizing: border-box; + height: 3.75rem; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--shipping-gray-300); +} + +.shipping-title { + color: var(--shipping-title); + font-size: 1rem; + font-weight: 600; + line-height: 1.5rem; + letter-spacing: 0.15px; +} + +.shipping-methods { + gap: 0; + padding: 1rem 1.5rem; +} + +.shipping-method::part(base) { + gap: 0.125rem; +} + +.shipping-method::part(label) { + color: var(--shipping-ink); + font-family: aktiv-grotesk, sans-serif; + font-size: 0.75rem; + font-weight: 600; + line-height: 1rem; + letter-spacing: 0.15px; +} + +.shipping-detail { + color: var(--shipping-gray-600); +} + +.shipping-method[disabled]::part(label), +.shipping-method[disabled] .shipping-detail { + color: var(--shipping-gray-400); +} + +/* The design draws the radio as a 2px ring with a 10px dot in a 40px slot. Each + theme draws the radio its own way, so the whole radio is drawn here. */ +.shipping-method::part(control) { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + border-radius: 50%; +} + +.shipping-method::part(control)::before, +.shipping-method::part(control)::after { + top: 50%; + left: 50%; + width: 1.25rem; + min-width: 0; + height: 1.25rem; + border-radius: 50%; +} + +/* The ring */ +.shipping-method::part(control)::after { + transform: translate(-50%, -50%); + border: 0.125rem solid var(--shipping-gray-400); + background: var(--shipping-surface); +} + +.shipping-method::part(control checked)::after { + border-color: var(--shipping-primary); +} + +.shipping-method[disabled]::part(control)::after { + border-color: var(--shipping-gray-300); + background: var(--shipping-gray-100); +} + +/* The dot */ +.shipping-method::part(control)::before { + transform: translate(-50%, -50%) scale(0); + border: none; + background: var(--shipping-primary); } -igc-radio::part(control) { - --size: 18px; +.shipping-method::part(control checked)::before { + transform: translate(-50%, -50%) scale(0.5); } diff --git a/samples/inputs/radio/styling/src/index.tsx b/samples/inputs/radio/styling/src/index.tsx index ecc8546558..890cf1bab4 100644 --- a/samples/inputs/radio/styling/src/index.tsx +++ b/samples/inputs/radio/styling/src/index.tsx @@ -1,17 +1,34 @@ import ReactDOM from 'react-dom/client'; +import './index.css'; import { IgrRadio, IgrRadioGroup } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -import './index.css'; + +const methods = [ + { value: 'standard', name: 'Standard', detail: '(2-4 business days)', checked: true }, + { value: 'express', name: 'Express', detail: '(next day by 6 pm)' }, + { value: 'pickup', name: 'Pickup point', detail: '(400 + locations)' }, + { value: 'same-day', name: 'Same-day', detail: '(not available)', disabled: true }, +]; export default function RadioStyling() { return ( -
-
- - Apple - Banana - Mango - Orange +
+
+
+ Shipping method +
+ + {methods.map((method) => ( + + {method.name} {method.detail} + + ))}
diff --git a/samples/inputs/radio/tailwind-styling/README.md b/samples/inputs/radio/tailwind-styling/README.md new file mode 100644 index 0000000000..add33dbc7d --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/README.md @@ -0,0 +1,50 @@ +This folder contains implementation of React application with example of Tailwind Styling feature using [Radio](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + + +## 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/tailwind-styling +``` + +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). diff --git a/samples/inputs/radio/tailwind-styling/index.html b/samples/inputs/radio/tailwind-styling/index.html new file mode 100644 index 0000000000..1662badcac --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + RadioTailwindStyling + + + +
+ + + diff --git a/samples/inputs/radio/tailwind-styling/package.json b/samples/inputs/radio/tailwind-styling/package.json new file mode 100644 index 0000000000..7e65063089 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-radio-tailwind-styling", + "description": "This project provides example of Radio Tailwind Styling 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": { + "@tailwindcss/vite": "^4.1.14", + "@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", + "tailwindcss": "^4.1.14", + "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" + ] +} diff --git a/samples/inputs/radio/tailwind-styling/src/index.css b/samples/inputs/radio/tailwind-styling/src/index.css new file mode 100644 index 0000000000..bf815c706b --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/src/index.css @@ -0,0 +1,71 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +/* Keep this order. An @import after the Tailwind imports is dropped, and in + the samples browser one before the @layer statement drops the Tailwind + imports, so Aktiv Grotesk goes between them. */ +@layer theme, base, components, utilities; +@import url("https://use.typekit.net/bng2zgw.css"); +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; + +@theme { + /* The design's own palette. It lives here instead of coming from the theme + palette, so the sample keeps its colors in every theme. */ + --color-export-primary: #0176ff; + --color-export-primary-strong: #006ae6; + --color-export-tint: #e6f2ff; + --color-export-tint-strong: #cce4ff; + --color-export-title: #00142b; + --color-export-ink: #002b5c; + --color-export-muted: #556c86; + --color-export-divider: #d2dbe8; + --color-export-empty: #a9b8cc; + --color-export-cancel: #616161; +} + +/* The design draws the radio as a 2px ring with a 10px dot in a 40px slot. Each + theme draws the radio its own way, so the whole radio is drawn here. */ +.format-option::part(base) { + gap: 0.125rem; +} + +.format-option::part(control) { + width: 2.5rem; + min-width: 2.5rem; + height: 2.5rem; + border-radius: 50%; +} + +.format-option::part(control)::before, +.format-option::part(control)::after { + top: 50%; + left: 50%; + width: 1.25rem; + min-width: 0; + height: 1.25rem; + border-radius: 50%; +} + +/* The ring */ +.format-option::part(control)::after { + transform: translate(-50%, -50%); + border: 0.125rem solid var(--color-export-empty); + background: white; +} + +.format-option::part(control checked)::after { + border-color: var(--color-export-primary); +} + +/* The dot */ +.format-option::part(control)::before { + transform: translate(-50%, -50%) scale(0); + border: none; + background: var(--color-export-primary); +} + +.format-option::part(control checked)::before { + transform: translate(-50%, -50%) scale(0.5); +} diff --git a/samples/inputs/radio/tailwind-styling/src/index.tsx b/samples/inputs/radio/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..e9ee9dec69 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/src/index.tsx @@ -0,0 +1,68 @@ +import { useState } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const formats = [ + { value: 'pdf', label: 'PDF Document' }, + { value: 'xls', label: 'XLS Editable spreadsheet' }, + { value: 'csv', label: 'CSV Raw data, no styling' }, +]; + +const radioLabel = 'text-xs font-semibold leading-4 tracking-[0.15px] text-export-ink'; + +// The base part is styled directly, so the buttons keep the design's look in every theme. +// Without the theme's shadow, the focused button shows an outline instead. +const button = + '[&::part(base)]:h-[30px] [&::part(base)]:min-w-0 [&::part(base)]:px-3 [&::part(base)]:shadow-none ' + + '[&::part(base)]:text-sm [&::part(base)]:font-semibold [&::part(base)]:normal-case [&::part(base)]:leading-4 [&::part(base)]:tracking-[0.75px] ' + + '[&::part(base_focused)]:outline-2 [&::part(base_focused)]:outline-offset-2 [&::part(base_focused)]:outline-export-primary'; + +const cancelButton = + button + ' [&::part(base)]:rounded [&::part(base)]:border-transparent [&::part(base)]:bg-transparent ' + + '[&::part(base)]:text-export-cancel [&::part(base):hover]:bg-export-tint-strong'; + +const exportButton = + button + ' [&::part(base)]:rounded-lg [&::part(base)]:border-export-primary [&::part(base)]:bg-export-primary ' + + '[&::part(base)]:text-white [&::part(base):hover]:border-export-primary-strong [&::part(base):hover]:bg-export-primary-strong'; + +export default function RadioTailwindStyling() { + const [format, setFormat] = useState('csv'); + + return ( +
+
+
+ Export report + Choose a format to export +
+ + {formats.map((option) => ( + { + if (e.detail.checked) { + setFormat(option.value); + } + }} + > + {option.label} + + ))} + +
+ Cancel + Export as {format.toUpperCase()} +
+
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')!); +root.render(); diff --git a/samples/inputs/radio/tailwind-styling/tsconfig.json b/samples/inputs/radio/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e27a22be9b --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/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" + ] +} diff --git a/samples/inputs/radio/tailwind-styling/vite.config.js b/samples/inputs/radio/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..4043727956 --- /dev/null +++ b/samples/inputs/radio/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build', + }, + server: { + open: false, + }, +});