-
-
-
-
- Single
-
-
- Single-Required
-
-
- Multiple
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {(['single', 'single-required', 'multiple'] as const).map((selection) => (
+
+ {selection === 'single-required' ? 'Single-Required' : selection.charAt(0).toUpperCase() + selection.slice(1)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
);
}
diff --git a/samples/inputs/button-group/size/src/ButtonGroupSize.css b/samples/inputs/button-group/size/src/ButtonGroupSize.css
new file mode 100644
index 0000000000..384a4e4545
--- /dev/null
+++ b/samples/inputs/button-group/size/src/ButtonGroupSize.css
@@ -0,0 +1,28 @@
+igc-ripple {
+ --color: gray;
+}
+
+.button-group-size {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 32px;
+ padding: 13px;
+}
+
+.button-group-size-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 32px;
+}
+
+.button-group-size-item span {
+ width: 52px;
+ text-align: right;
+ color: var(--ig-gray-700);
+ font-size: 12px;
+ line-height: 16px;
+}
diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx
index 06cbe8b3de..28ce3d496c 100644
--- a/samples/inputs/button-group/size/src/index.tsx
+++ b/samples/inputs/button-group/size/src/index.tsx
@@ -1,39 +1,39 @@
-import React, { useState } from 'react';
+import React from 'react';
import ReactDOM from 'react-dom/client';
-import {
- IgrButtonGroup,
- IgrComponentValueChangedEventArgs,
- IgrToggleButton,
- } from 'igniteui-react';
+import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/material.css';
+import './ButtonGroupSize.css';
import './index.css';
-export default function ButtonGroupSize() {
- const [style, setStyle] = useState({ '--ig-size': 'var(--ig-size-large)' } as React.CSSProperties)
+const cities = ['Sofia', 'London', 'New York'];
- function onSelect(args: IgrComponentValueChangedEventArgs) {
- setStyle({
- '--ig-size': `var(--ig-size-${args.detail})`
- } as React.CSSProperties)
- }
+const sizes = ['small', 'medium', 'large'];
+export default function ButtonGroupSize(): JSX.Element {
return (
-
-
-
- Small
-
-
- Medium
-
-
- Large
-
-
-
+
+ {sizes.map((size) => (
+
+ {size.charAt(0).toUpperCase() + size.slice(1)}
+
+ {cities.map((city) => (
+
+ {city}
+
+
+ ))}
+
+
+ ))}
+
);
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
);
+root.render(
);
diff --git a/samples/inputs/button-group/states/.devcontainer/devcontainer.json b/samples/inputs/button-group/states/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..e0b8e9c925
--- /dev/null
+++ b/samples/inputs/button-group/states/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+ "name": "Node.js",
+ "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/.eslintrc.js b/samples/inputs/button-group/states/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/button-group/states/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+ parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+ parserOptions: {
+ ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+ sourceType: "module", // Allows for the use of imports
+ ecmaFeatures: {
+ jsx: true // Allows for the parsing of JSX
+ }
+ },
+ settings: {
+ react: {
+ version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+ }
+ },
+ extends: [
+ "eslint:recommended",
+ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+ "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+ ],
+ rules: {
+ // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ },
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+ }
+ ]
+ };
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/README.md b/samples/inputs/button-group/states/README.md
new file mode 100644
index 0000000000..9c6295d419
--- /dev/null
+++ b/samples/inputs/button-group/states/README.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of React application with example of States feature using [Button Group](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## 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
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/button-group/states
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script 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/button-group/states/index.html b/samples/inputs/button-group/states/index.html
new file mode 100644
index 0000000000..0ce785b95d
--- /dev/null
+++ b/samples/inputs/button-group/states/index.html
@@ -0,0 +1,11 @@
+
+
+
+
Button Group Interaction States
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/package.json b/samples/inputs/button-group/states/package.json
new file mode 100644
index 0000000000..003410711d
--- /dev/null
+++ b/samples/inputs/button-group/states/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "react-button-group-states",
+ "description": "This project provides example of Button Group Interaction States 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": "^1.17.0",
+ "igniteui-react": "19.7.0",
+ "igniteui-react-core": "19.6.0",
+ "igniteui-webcomponents": "^7.2.1",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@types/jest": "^29.2.0",
+ "@types/node": "^24.7.1",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "@vitejs/plugin-react": "^5.0.4",
+ "@vitest/browser": "^3.2.4",
+ "typescript": "^4.8.4",
+ "vite": "^7.1.9",
+ "vitest": "^3.2.4",
+ "vitest-canvas-mock": "^0.3.3",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/inputs/button-group/states/sandbox.config.json b/samples/inputs/button-group/states/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/button-group/states/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css b/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css
new file mode 100644
index 0000000000..cf89a782a1
--- /dev/null
+++ b/samples/inputs/button-group/states/src/ButtonGroupInteractionStates.css
@@ -0,0 +1,33 @@
+igc-ripple {
+ --color: gray;
+}
+
+.button-group-interaction-states {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+}
+
+.button-group-interaction-states-row {
+ display: grid;
+ grid-template-columns: 120px 160px 160px;
+ align-items: center;
+ gap: 16px;
+}
+
+.button-group-interaction-states .row-label,
+.button-group-interaction-states .column-label {
+ color: var(--ig-gray-700);
+ font-size: 12px;
+ line-height: 16px;
+ font-weight: 600;
+}
+
+.button-group-interaction-states-row igc-button-group:not([disabled]) igc-toggle-button[selected]::part(toggle) {
+ background: var(--item-active-background);
+ border-color: var(--item-active-border-color);
+ color: var(--item-selected-text-color);
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/src/index.css b/samples/inputs/button-group/states/src/index.css
new file mode 100644
index 0000000000..1f53b8aa05
--- /dev/null
+++ b/samples/inputs/button-group/states/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/button-group/states/src/index.tsx b/samples/inputs/button-group/states/src/index.tsx
new file mode 100644
index 0000000000..77e39628a2
--- /dev/null
+++ b/samples/inputs/button-group/states/src/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/material.css';
+import './ButtonGroupInteractionStates.css';
+import './index.css';
+
+const rows: Array<{ label: string; selected: boolean }> = [
+ { label: 'Selected / Off', selected: false },
+ { label: 'Selected / On', selected: true }
+];
+
+export default function ButtonGroupInteractionStates(): JSX.Element {
+ return (
+
+
+
+ Enabled
+ Disabled
+
+ {rows.map((row) => (
+
+ {row.label}
+
+
+ Device
+
+
+
+
+
+ Cloud
+
+
+
+ ))}
+
+ );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
);
diff --git a/samples/inputs/button-group/states/tsconfig.json b/samples/inputs/button-group/states/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/inputs/button-group/states/tsconfig.json
@@ -0,0 +1,44 @@
+{
+ "compilerOptions": {
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "baseUrl": ".",
+ "outDir": "build/dist",
+ "module": "esnext",
+ "target": "es5",
+ "lib": [
+ "es6",
+ "dom"
+ ],
+ "sourceMap": true,
+ "allowJs": true,
+ "jsx": "react",
+ "moduleResolution": "node",
+ "rootDir": "src",
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "noImplicitAny": true,
+ "noUnusedLocals": false,
+ "importHelpers": true,
+ "allowSyntheticDefaultImports": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "isolatedModules": true,
+ "noEmit": true
+ },
+ "exclude": [
+ "node_modules",
+ "build",
+ "scripts",
+ "acceptance-tests",
+ "webpack",
+ "jest",
+ "src/setupTests.ts",
+ "**/odatajs-4.0.0.js",
+ "config-overrides.js"
+ ],
+ "include": [
+ "src"
+ ]
+}
diff --git a/samples/inputs/button-group/states/vite.config.js b/samples/inputs/button-group/states/vite.config.js
new file mode 100644
index 0000000000..1744dbc719
--- /dev/null
+++ b/samples/inputs/button-group/states/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/button-group/styling/src/ButtonGroupStyling.css b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css
index fc5cd8712a..22c9d20f42 100644
--- a/samples/inputs/button-group/styling/src/ButtonGroupStyling.css
+++ b/samples/inputs/button-group/styling/src/ButtonGroupStyling.css
@@ -1,27 +1,32 @@
-igc-button-group {
- width: 200px;
-}
-
igc-ripple {
--color: gray;
}
-igc-toggle-button::part(toggle) {
- color: #fdfdfd;
- background: #2f4d6a;
+.button-group-styling {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 7rem;
+}
+
+.button-group-styling igc-button-group {
+ width: 420px;
+ border: 2px solid #4da3e8;
+ border-radius: 4px;
+ overflow: hidden;
}
-igc-toggle-button::part(toggle):hover {
- color: #fdfdfd;
- background: #1f3347;
+.button-group-styling igc-toggle-button::part(toggle) {
+ color: #4a5a66;
+ background: #cfe8fb;
+ border-color: #4da3e8;
}
-igc-toggle-button[disabled]::part(toggle) {
- color: gray;
- background: lightgray;
+.button-group-styling igc-toggle-button::part(toggle):hover {
+ background: #b3daf8;
}
-igc-toggle-button[selected]::part(toggle) {
- color: #fdfdfd;
- background: #1f3347;
+.button-group-styling igc-toggle-button[selected]::part(toggle) {
+ color: #2f4d6a;
+ background: #6db3ea;
}
\ No newline at end of file
diff --git a/samples/inputs/button-group/styling/src/index.tsx b/samples/inputs/button-group/styling/src/index.tsx
index 0bf8d1f292..61f3d984f9 100644
--- a/samples/inputs/button-group/styling/src/index.tsx
+++ b/samples/inputs/button-group/styling/src/index.tsx
@@ -1,39 +1,31 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import {
- IgrButtonGroup,
- IgrRipple,
- IgrToggleButton,
- } from 'igniteui-react';
+import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupStyling.css';
import './index.css';
-export default function ButtonGroupStyling() {
+const layouts = ['Left', 'Center', 'Right'];
+
+export default function ButtonGroupStyling(): JSX.Element {
return (
-
-
-
- Sofia
-
-
-
- London
-
-
-
- New York
-
-
-
- Tokyo
-
-
+
+
+ {layouts.map((layout) => (
+
+ {layout}
+
+
+ ))}
-
+
);
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
);
+root.render(
);
diff --git a/samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..e0b8e9c925
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+ "name": "Node.js",
+ "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/tailwind-styling/.eslintrc.js b/samples/inputs/button-group/tailwind-styling/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+ parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+ parserOptions: {
+ ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+ sourceType: "module", // Allows for the use of imports
+ ecmaFeatures: {
+ jsx: true // Allows for the parsing of JSX
+ }
+ },
+ settings: {
+ react: {
+ version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+ }
+ },
+ extends: [
+ "eslint:recommended",
+ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+ "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+ ],
+ rules: {
+ // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ },
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+ }
+ ]
+ };
\ No newline at end of file
diff --git a/samples/inputs/button-group/tailwind-styling/README.md b/samples/inputs/button-group/tailwind-styling/README.md
new file mode 100644
index 0000000000..2a5d2b0210
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/README.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of React application with example of Tailwind Styling feature using [Button Group](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/button-group/tailwind-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script 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/button-group/tailwind-styling/index.html b/samples/inputs/button-group/tailwind-styling/index.html
new file mode 100644
index 0000000000..6c5b289faa
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/index.html
@@ -0,0 +1,11 @@
+
+
+
+
ButtonGroupTailwindStyling
+
+
+
+
+
+
+
diff --git a/samples/inputs/button-group/tailwind-styling/package.json b/samples/inputs/button-group/tailwind-styling/package.json
new file mode 100644
index 0000000000..29a89fe1ae
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "react-button-group-tailwind-styling",
+ "description": "This project provides example of Button Group 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": "^1.17.0",
+ "igniteui-react": "19.7.0",
+ "igniteui-react-core": "19.6.0",
+ "igniteui-webcomponents": "^7.2.1",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@tailwindcss/vite": "^4.1.14",
+ "@types/jest": "^29.2.0",
+ "@types/node": "^24.7.1",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "@vitejs/plugin-react": "^5.0.4",
+ "@vitest/browser": "^3.2.4",
+ "tailwindcss": "^4.1.14",
+ "typescript": "^4.8.4",
+ "vite": "^7.1.9",
+ "vitest": "^3.2.4",
+ "vitest-canvas-mock": "^0.3.3",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/inputs/button-group/tailwind-styling/sandbox.config.json b/samples/inputs/button-group/tailwind-styling/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/inputs/button-group/tailwind-styling/src/index.css b/samples/inputs/button-group/tailwind-styling/src/index.css
new file mode 100644
index 0000000000..6ff2900474
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/src/index.css
@@ -0,0 +1,37 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+igc-ripple {
+ --color: gray;
+}
+
+.button-group-center {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 7rem;
+}
+
+.button-group-style {
+ width: 420px;
+ max-width: 100%;
+}
+
+.button-group-style igc-toggle-button::part(toggle) {
+ color: var(--color-violet-700);
+ background: var(--color-white);
+ border-color: var(--color-violet-300);
+}
+
+.button-group-style igc-toggle-button::part(toggle):hover {
+ background: var(--color-fuchsia-100);
+}
+
+.button-group-style igc-toggle-button[selected]::part(toggle) {
+ color: var(--color-white);
+ background: var(--color-violet-600);
+}
diff --git a/samples/inputs/button-group/tailwind-styling/src/index.tsx b/samples/inputs/button-group/tailwind-styling/src/index.tsx
new file mode 100644
index 0000000000..468ab3e915
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/src/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrButtonGroup, IgrRipple, IgrToggleButton } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/material.css';
+
+const views = ['Day', 'Week', 'Month'];
+
+export default function ButtonGroupTailwindStyling(): JSX.Element {
+ return (
+
+
+ {views.map((view) => (
+
+ {view}
+
+
+ ))}
+
+
+ );
+}
+
+// rendering above class to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
);
diff --git a/samples/inputs/button-group/tailwind-styling/tsconfig.json b/samples/inputs/button-group/tailwind-styling/tsconfig.json
new file mode 100644
index 0000000000..e7db8a94f5
--- /dev/null
+++ b/samples/inputs/button-group/tailwind-styling/tsconfig.json
@@ -0,0 +1,44 @@
+{
+ "compilerOptions": {
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "baseUrl": ".",
+ "outDir": "build/dist",
+ "module": "esnext",
+ "target": "es5",
+ "lib": [
+ "es6",
+ "dom"
+ ],
+ "sourceMap": true,
+ "allowJs": true,
+ "jsx": "react",
+ "moduleResolution": "node",
+ "rootDir": "src",
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "noImplicitAny": true,
+ "noUnusedLocals": false,
+ "importHelpers": true,
+ "allowSyntheticDefaultImports": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "isolatedModules": true,
+ "noEmit": true
+ },
+ "exclude": [
+ "node_modules",
+ "build",
+ "scripts",
+ "acceptance-tests",
+ "webpack",
+ "jest",
+ "src/setupTests.ts",
+ "**/odatajs-4.0.0.js",
+ "config-overrides.js"
+ ],
+ "include": [
+ "src"
+ ]
+}
diff --git a/samples/inputs/button-group/tailwind-styling/vite.config.js b/samples/inputs/button-group/tailwind-styling/vite.config.js
new file mode 100644
index 0000000000..663868e022
--- /dev/null
+++ b/samples/inputs/button-group/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
+ },
+});
\ No newline at end of file