From a7a28ab4bac9e0577e0096ebe9848f220509e793 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Mon, 20 Jul 2026 13:44:45 +0300 Subject: [PATCH 01/10] feat(accordion): add programmatic expansion sample --- .../programmatic-expansion/README.md | 56 +++++++++++++++++++ .../programmatic-expansion/index.html | 11 ++++ .../programmatic-expansion/package.json | 42 ++++++++++++++ .../sandbox.config.json | 5 ++ .../programmatic-expansion/src/index.css | 26 +++++++++ .../programmatic-expansion/src/index.tsx | 42 ++++++++++++++ .../programmatic-expansion/tsconfig.json | 44 +++++++++++++++ .../programmatic-expansion/vite.config.js | 12 ++++ 8 files changed, 238 insertions(+) create mode 100644 samples/layouts/accordion/programmatic-expansion/README.md create mode 100644 samples/layouts/accordion/programmatic-expansion/index.html create mode 100644 samples/layouts/accordion/programmatic-expansion/package.json create mode 100644 samples/layouts/accordion/programmatic-expansion/sandbox.config.json create mode 100644 samples/layouts/accordion/programmatic-expansion/src/index.css create mode 100644 samples/layouts/accordion/programmatic-expansion/src/index.tsx create mode 100644 samples/layouts/accordion/programmatic-expansion/tsconfig.json create mode 100644 samples/layouts/accordion/programmatic-expansion/vite.config.js diff --git a/samples/layouts/accordion/programmatic-expansion/README.md b/samples/layouts/accordion/programmatic-expansion/README.md new file mode 100644 index 0000000000..5ee8cc0584 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Programmatic Expansion feature using [Accordion](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + 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 +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/accordion/programmatic-expansion +``` + +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/layouts/accordion/programmatic-expansion/index.html b/samples/layouts/accordion/programmatic-expansion/index.html new file mode 100644 index 0000000000..050be7adb0 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/index.html @@ -0,0 +1,11 @@ + + + + Accordion Programmatic Expansion + + + +
+ + + diff --git a/samples/layouts/accordion/programmatic-expansion/package.json b/samples/layouts/accordion/programmatic-expansion/package.json new file mode 100644 index 0000000000..de10646370 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-accordion-programmatic-expansion", + "description": "This project provides example of Accordion Programmatic Expansion 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/layouts/accordion/programmatic-expansion/sandbox.config.json b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.css b/samples/layouts/accordion/programmatic-expansion/src/index.css new file mode 100644 index 0000000000..11432494bd --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/src/index.css @@ -0,0 +1,26 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-accordion { + width: 100%; +} + +.button-group { + display: flex; + gap: 8px; + padding: 16px; +} + +.button-group igc-button { + min-width: 96px; +} + +.sample-wrapper { + overflow-y: auto; + max-height: 380px; + margin: 8px; +} + +igc-expansion-panel { + border: 1px solid rgba(174, 174, 174, 0.25); +} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.tsx b/samples/layouts/accordion/programmatic-expansion/src/index.tsx new file mode 100644 index 0000000000..5433c64432 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/src/index.tsx @@ -0,0 +1,42 @@ +import React, { useRef } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAccordion, IgrButton, IgrExpansionPanel } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function AccordionProgrammaticExpansion() { + const accordionRef = useRef(null); + + return ( +
+
+ accordionRef.current?.showAll()}> + Show All + + accordionRef.current?.hideAll()}> + Hide All + +
+
+ + + Billing + Review invoices, update payment methods, and manage billing contacts. + + + Security + Configure password rules, multi-factor authentication, and recovery options. + + + Notifications + Choose which product updates and account alerts are sent to your team. + + +
+
+ ); +} + +// rendering above component to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/accordion/programmatic-expansion/tsconfig.json b/samples/layouts/accordion/programmatic-expansion/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/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-jsx", + "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/layouts/accordion/programmatic-expansion/vite.config.js b/samples/layouts/accordion/programmatic-expansion/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/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 + }, +}); From 80cd351b4fcdadc506dbd82a9d03c53cb8bb5612 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:46:07 +0300 Subject: [PATCH 02/10] refactor(accordion): update overview sample --- .../overview/src/AccordionOverview.css | 17 ---- .../layouts/accordion/overview/src/index.css | 12 +++ .../layouts/accordion/overview/src/index.tsx | 79 +++++++------------ 3 files changed, 42 insertions(+), 66 deletions(-) delete mode 100644 samples/layouts/accordion/overview/src/AccordionOverview.css diff --git a/samples/layouts/accordion/overview/src/AccordionOverview.css b/samples/layouts/accordion/overview/src/AccordionOverview.css deleted file mode 100644 index 816b7feede..0000000000 --- a/samples/layouts/accordion/overview/src/AccordionOverview.css +++ /dev/null @@ -1,17 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 380px; - margin: 8px; -} - -igc-switch { - padding: 16px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/overview/src/index.css b/samples/layouts/accordion/overview/src/index.css index e69de29bb2..224afd6a14 100644 --- a/samples/layouts/accordion/overview/src/index.css +++ b/samples/layouts/accordion/overview/src/index.css @@ -0,0 +1,12 @@ +.accordion-sample { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} diff --git a/samples/layouts/accordion/overview/src/index.tsx b/samples/layouts/accordion/overview/src/index.tsx index cd982a3bd7..83947bb79c 100644 --- a/samples/layouts/accordion/overview/src/index.tsx +++ b/samples/layouts/accordion/overview/src/index.tsx @@ -1,68 +1,49 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './AccordionOverview.css'; import { - IgrAccordion, IgrExpansionPanel, IgrSwitch, - IgrCheckboxChangeEventArgs } from 'igniteui-react'; + IgrAccordion, + IgrCheckboxChangeEventArgs, + IgrExpansionPanel, + IgrSwitch +} from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function AccordionOverview() { - const [singleExpand, setSingleExpand] = useState(false); const switchChange = (e: IgrCheckboxChangeEventArgs) => { setSingleExpand(e.detail.checked); - } - + }; + return ( -
- Single Expand -
- - - What has changed about subscription and pricing model? - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - Who will the updated changes impact? - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - - What is the difference between your old model and your current subscription model for Ignite UI? - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with - packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet - server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages - - - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. - - - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. - - +
+
+ + Single Expand +
+ + + + Account + Profile and security settings +

Update your profile details, password, and sign-in preferences.

+ + + Notifications + Email and product updates +

Choose which notifications you receive and how often they are delivered.

+ + + Billing + Payment and invoice settings +

Manage payment methods, billing contacts, and invoice delivery options.

+ +
- ); } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); From c773388fa33f064f2cb372f2e2f3ed98f14d7c22 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:46:29 +0300 Subject: [PATCH 03/10] refactor(accordion): update customization sample --- .../src/AccordionCustomization.css | 35 --- .../accordion/customization/src/index.css | 54 +++++ .../accordion/customization/src/index.tsx | 224 ++++++++++-------- 3 files changed, 174 insertions(+), 139 deletions(-) delete mode 100644 samples/layouts/accordion/customization/src/AccordionCustomization.css diff --git a/samples/layouts/accordion/customization/src/AccordionCustomization.css b/samples/layouts/accordion/customization/src/AccordionCustomization.css deleted file mode 100644 index 89acd44513..0000000000 --- a/samples/layouts/accordion/customization/src/AccordionCustomization.css +++ /dev/null @@ -1,35 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 530px; - margin: 8px; -} - -igc-range-slider { - margin: 24px; -} - -.categories-container { - display: flex; - flex-flow: column nowrap; -} - -igc-checkbox, -igc-radio { - margin: 4px 0; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} - -igc-rating { - flex-direction: row; -} - -.size-small { - --ig-size: var(--ig-size-small); -} diff --git a/samples/layouts/accordion/customization/src/index.css b/samples/layouts/accordion/customization/src/index.css index e69de29bb2..1282237415 100644 --- a/samples/layouts/accordion/customization/src/index.css +++ b/samples/layouts/accordion/customization/src/index.css @@ -0,0 +1,54 @@ +.accordion-sample { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.panel-description { + margin: 0 0 16px; + color: var(--ig-gray-700); +} + +.categories-container { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 24px; + max-width: 520px; +} + +.category-option, +.rating-option { + margin: 4px 0; +} + +.range-summary { + display: flex; + justify-content: space-between; + max-width: 560px; + margin-bottom: 4px; + font-weight: 600; +} + +.cost-slider { + max-width: 560px; + margin: 8px 0 0; +} + +.rating-options { + display: grid; + gap: 8px; + max-width: 360px; +} + +.rating-control { + flex-direction: row; +} + +.time-input { + max-width: 260px; +} + +.size-small { + --ig-size: var(--ig-size-small); +} diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx index 8e138630bb..0d20cb1453 100644 --- a/samples/layouts/accordion/customization/src/index.tsx +++ b/samples/layouts/accordion/customization/src/index.tsx @@ -1,7 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; -import "./AccordionCustomization.css"; import { IgrAccordion, IgrCheckbox, @@ -22,6 +21,8 @@ import "igniteui-webcomponents/themes/light/bootstrap.css"; type Category = { checked: boolean; type: string }; +const ratingOptions = [2, 3, 4, 5]; + const clearIcon = ""; const clockIcon = @@ -44,7 +45,7 @@ export default class AccordionCustomization extends React.Component { categories: this.categories, cost: { lower: 200, upper: 800 }, rating: "", - time: "Time", + time: "Any time", }; this.categoriesChange = this.categoriesChange.bind(this); @@ -59,104 +60,120 @@ export default class AccordionCustomization extends React.Component { } public render(): JSX.Element { + const selectedCategories = this.state.categories + .filter((c: Category) => c.checked) + .map((c: Category) => c.type) + .join(", "); + return ( -
-
- - - - Categories - {this.state.categories.some((c: Category) => c.checked) && ": "} - {this.state.categories - .filter((c: Category) => c.checked) - .map((c: Category) => c.type) - .join(", ")} - - -
- {this.state.categories.map((c: Category) => { - return ( - - this.categoriesChange(e, c.type) - } - > - {c.type} - - ); - })} -
- - - - - Cost: ${this.state.cost.lower} to $ - {this.state.cost.upper} - - - - - - - - Rating{this.state.rating && ": "} - {this.state.rating} - - - - {[1, 2, 3, 4].map((rating) => { - return ( - - 1 ? "s" : "" - } or more`} - max={5} - value={rating + 0.5} - className="size-small" - readOnly={true} - > - - ); - })} - - - - - - {this.state.time} - - - - - - - - - - - - - -
+
+ + + + Transportation{selectedCategories && `: ${selectedCategories}`} + + Choose how you want to travel + +

+ Select one or more transportation options for your trip. +

+
+ {this.state.categories.map((c: Category) => { + return ( + + this.categoriesChange(e, c.type) + } + > + {c.type} + + ); + })} +
+ + + + + Budget: ${this.state.cost.lower} - ${this.state.cost.upper} + + Set the price range + +

+ Adjust the minimum and maximum cost for available options. +

+
+ ${this.state.cost.lower} + ${this.state.cost.upper} +
+ + + + + + Minimum Rating{this.state.rating && ": "} + {this.state.rating} + + Filter by review score + +

+ Choose the lowest rating you want to include in the results. +

+ + {ratingOptions.map((rating) => { + return ( + + 1 ? "s" : ""} or more`} + max={5} + value={rating} + className="rating-control size-small" + readOnly={true} + > + + ); + })} + + + + + Arrival Time{this.state.time !== "Any time" && `: ${this.state.time}`} + Set the latest arrival time + +

+ Pick the latest acceptable arrival time for your trip. +

+ + + + + + + + + + +
); } @@ -194,11 +211,11 @@ export default class AccordionCustomization extends React.Component { const s = e.target as IgrDateTimeInput; const result = s.value !== null - ? `Arrive before ${e.detail.toLocaleTimeString([], { + ? e.detail.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", - })}` - : "Time"; + }) + : "Any time"; this.setState({ time: result, }); @@ -207,7 +224,7 @@ export default class AccordionCustomization extends React.Component { public clearTime() { this.dateTimeInput.clear(); this.setState({ - time: "Time", + time: "Any time", }); } @@ -219,6 +236,5 @@ export default class AccordionCustomization extends React.Component { } } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); From 23cd5db727a375b10748546e456915e67eb80aca Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:46:54 +0300 Subject: [PATCH 04/10] refactor(accordion): update programmatic expansion sample --- .../programmatic-expansion/src/index.css | 27 ++++------ .../programmatic-expansion/src/index.tsx | 53 +++++++++++-------- 2 files changed, 41 insertions(+), 39 deletions(-) diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.css b/samples/layouts/accordion/programmatic-expansion/src/index.css index 11432494bd..67b128391f 100644 --- a/samples/layouts/accordion/programmatic-expansion/src/index.css +++ b/samples/layouts/accordion/programmatic-expansion/src/index.css @@ -1,26 +1,17 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-accordion { - width: 100%; +.accordion-sample { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; } -.button-group { +.accordion-toolbar { display: flex; + justify-content: flex-end; gap: 8px; - padding: 16px; + margin-bottom: 12px; } -.button-group igc-button { +.action-button { min-width: 96px; } - -.sample-wrapper { - overflow-y: auto; - max-height: 380px; - margin: 8px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.tsx b/samples/layouts/accordion/programmatic-expansion/src/index.tsx index 5433c64432..64c4664a4c 100644 --- a/samples/layouts/accordion/programmatic-expansion/src/index.tsx +++ b/samples/layouts/accordion/programmatic-expansion/src/index.tsx @@ -8,35 +8,46 @@ export default function AccordionProgrammaticExpansion() { const accordionRef = useRef(null); return ( -
-
- accordionRef.current?.showAll()}> +
+
+ accordionRef.current?.showAll()} + > Show All - accordionRef.current?.hideAll()}> + accordionRef.current?.hideAll()} + > Hide All
-
- - - Billing - Review invoices, update payment methods, and manage billing contacts. - - - Security - Configure password rules, multi-factor authentication, and recovery options. - - - Notifications - Choose which product updates and account alerts are sent to your team. - - -
+ + + + Billing + Invoices and payment settings +

Review invoices, update payment methods, and manage billing contacts.

+ + + + Security + Password and access controls +

Configure password rules, multi-factor authentication, and recovery options.

+ + + + Notifications + Product updates and account alerts +

Choose which product updates and account alerts are sent to your team.

+ +
); } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); From 9f95f627c39574810fdf8cead7425132c14ac915 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:47:10 +0300 Subject: [PATCH 05/10] refactor(accordion): update nested scenario sample --- .../src/AccordionNestedScenario.css | 17 --- .../accordion/nested-scenario/src/index.css | 12 ++ .../accordion/nested-scenario/src/index.tsx | 105 +++++++++--------- 3 files changed, 62 insertions(+), 72 deletions(-) delete mode 100644 samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css diff --git a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css b/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css deleted file mode 100644 index 2eb281b0e4..0000000000 --- a/samples/layouts/accordion/nested-scenario/src/AccordionNestedScenario.css +++ /dev/null @@ -1,17 +0,0 @@ -igc-accordion { - width: 100%; -} - -.sample-wrapper { - overflow-y: auto; - max-height: 470px; - margin: 8px; -} - -igc-switch { - padding: 16px; -} - -igc-expansion-panel { - border: 1px solid rgba(174, 174, 174, 0.25); -} diff --git a/samples/layouts/accordion/nested-scenario/src/index.css b/samples/layouts/accordion/nested-scenario/src/index.css index e69de29bb2..fb5de5aea5 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.css +++ b/samples/layouts/accordion/nested-scenario/src/index.css @@ -0,0 +1,12 @@ +.accordion-sample { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; +} diff --git a/samples/layouts/accordion/nested-scenario/src/index.tsx b/samples/layouts/accordion/nested-scenario/src/index.tsx index 8d7a68fbac..c81c404704 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.tsx +++ b/samples/layouts/accordion/nested-scenario/src/index.tsx @@ -1,75 +1,70 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import './AccordionNestedScenario.css'; import { - IgrAccordion, IgrExpansionPanel, IgrSwitch, - IgrCheckboxChangeEventArgs + IgrAccordion, + IgrCheckboxChangeEventArgs, + IgrExpansionPanel, + IgrSwitch } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; export default function AccordionNestedScenario() { - const [singleExpand, setSingleExpand] = useState(false); - + const switchChange = (e: IgrCheckboxChangeEventArgs) => { setSingleExpand(e.detail.checked); - } + }; return ( -
- Single Expand -
- - - Common questions about renewal. - - - - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. - - - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. - - - Will I be automatically charged for my renewal/ Can I be automatically charged for renewal? - Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, - at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are - subject to the renewal terms that were agreed upon as part of that purchase. - - - - - - What has changed about subscription and pricing model? - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - Who will the updated changes impact? - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - +
+
+ + Single Expand +
+ + + + Workspace Settings + Nested account, access, and billing options + + + + Profile + Name, photo, and contact details +

Update the public information shown to other workspace members.

+ + + + Security + Password and sign-in preferences +

Review active sessions, change your password, and configure sign-in requirements.

+ + + + Notifications + Email and product updates +

Choose the messages you receive for comments, assignments, and releases.

+ + + + + + Team Access + Members, roles, and permissions +

Invite teammates, assign roles, and review workspace permissions.

+ + + + Billing + Plan, invoices, and payment method +

Manage subscription details, billing contacts, and invoice delivery.

+ +
); } -// rendering above component to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); From cba2ceb55c5b52c8855c8ab8a18af2c750d06935 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:47:53 +0300 Subject: [PATCH 06/10] feat(accordion): add styling sample --- .../styling/.devcontainer/devcontainer.json | 1 + samples/layouts/accordion/styling/README.md | 56 +++++++++++++++++++ samples/layouts/accordion/styling/index.html | 11 ++++ .../layouts/accordion/styling/package.json | 42 ++++++++++++++ .../accordion/styling/sandbox.config.json | 5 ++ .../layouts/accordion/styling/src/index.css | 38 +++++++++++++ .../layouts/accordion/styling/src/index.tsx | 40 +++++++++++++ .../layouts/accordion/styling/tsconfig.json | 44 +++++++++++++++ .../layouts/accordion/styling/vite.config.js | 12 ++++ 9 files changed, 249 insertions(+) create mode 100644 samples/layouts/accordion/styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/accordion/styling/README.md create mode 100644 samples/layouts/accordion/styling/index.html create mode 100644 samples/layouts/accordion/styling/package.json create mode 100644 samples/layouts/accordion/styling/sandbox.config.json create mode 100644 samples/layouts/accordion/styling/src/index.css create mode 100644 samples/layouts/accordion/styling/src/index.tsx create mode 100644 samples/layouts/accordion/styling/tsconfig.json create mode 100644 samples/layouts/accordion/styling/vite.config.js diff --git a/samples/layouts/accordion/styling/.devcontainer/devcontainer.json b/samples/layouts/accordion/styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..5779654722 --- /dev/null +++ b/samples/layouts/accordion/styling/.devcontainer/devcontainer.json @@ -0,0 +1 @@ +{"image":"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"} diff --git a/samples/layouts/accordion/styling/README.md b/samples/layouts/accordion/styling/README.md new file mode 100644 index 0000000000..abd2d2cb78 --- /dev/null +++ b/samples/layouts/accordion/styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Styling feature using [Accordion](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + 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 +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/accordion/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/layouts/accordion/styling/index.html b/samples/layouts/accordion/styling/index.html new file mode 100644 index 0000000000..a658e62846 --- /dev/null +++ b/samples/layouts/accordion/styling/index.html @@ -0,0 +1,11 @@ + + + + Accordion Styling + + + +
+ + + diff --git a/samples/layouts/accordion/styling/package.json b/samples/layouts/accordion/styling/package.json new file mode 100644 index 0000000000..ebf67487ca --- /dev/null +++ b/samples/layouts/accordion/styling/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-accordion-styling", + "description": "This project provides example of Accordion 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": { + "@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/layouts/accordion/styling/sandbox.config.json b/samples/layouts/accordion/styling/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/styling/src/index.css b/samples/layouts/accordion/styling/src/index.css new file mode 100644 index 0000000000..c610f99671 --- /dev/null +++ b/samples/layouts/accordion/styling/src/index.css @@ -0,0 +1,38 @@ +.accordion-sample { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-sample igc-expansion-panel { + background-color: var(--ig-gray-50); + color: var(--ig-gray-900); + border-radius: 4px; +} + +.accordion-sample igc-expansion-panel::part(header) { + background-color: var(--ig-gray-100); +} + +.accordion-sample igc-expansion-panel[open]::part(header) { + background-color: var(--ig-primary-50); +} + +.accordion-sample igc-expansion-panel::part(indicator) { + color: var(--ig-primary-500); +} + +.accordion-sample igc-expansion-panel::part(title) { + color: var(--ig-gray-900); + font-weight: 600; +} + +.accordion-sample igc-expansion-panel[open]::part(title), +.accordion-sample igc-expansion-panel[open]::part(subtitle) { + color: var(--ig-primary-700); +} + +.accordion-sample igc-expansion-panel::part(content) { + color: var(--ig-gray-700); +} diff --git a/samples/layouts/accordion/styling/src/index.tsx b/samples/layouts/accordion/styling/src/index.tsx new file mode 100644 index 0000000000..4cc6a551ed --- /dev/null +++ b/samples/layouts/accordion/styling/src/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +export default function AccordionStyling() { + return ( +
+ + + Getting Started + Setup and onboarding +

+ Find installation steps, project setup guidance, and resources for building your first application. +

+ + + + Billing + Invoices and payment methods +

+ Review invoices, update payment methods, and manage billing contacts for your account. +

+ + + + Security + Access and authentication +

+ Configure password rules, multi-factor authentication, and recovery options for your team. +

+ + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/accordion/styling/tsconfig.json b/samples/layouts/accordion/styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/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-jsx", + "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/layouts/accordion/styling/vite.config.js b/samples/layouts/accordion/styling/vite.config.js new file mode 100644 index 0000000000..4fc593892f --- /dev/null +++ b/samples/layouts/accordion/styling/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 + }, +}); From cb2ebbd33579e18e8407bfb45c4b44965909834a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:48:10 +0300 Subject: [PATCH 07/10] feat(accordion): add tailwind styling sample --- .../.devcontainer/devcontainer.json | 1 + .../accordion/tailwind-styling/README.md | 56 +++++++++++++++++++ .../accordion/tailwind-styling/index.html | 11 ++++ .../accordion/tailwind-styling/package.json | 44 +++++++++++++++ .../tailwind-styling/sandbox.config.json | 5 ++ .../accordion/tailwind-styling/src/index.css | 4 ++ .../accordion/tailwind-styling/src/index.tsx | 54 ++++++++++++++++++ .../accordion/tailwind-styling/tsconfig.json | 44 +++++++++++++++ .../accordion/tailwind-styling/vite.config.js | 13 +++++ 9 files changed, 232 insertions(+) create mode 100644 samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json create mode 100644 samples/layouts/accordion/tailwind-styling/README.md create mode 100644 samples/layouts/accordion/tailwind-styling/index.html create mode 100644 samples/layouts/accordion/tailwind-styling/package.json create mode 100644 samples/layouts/accordion/tailwind-styling/sandbox.config.json create mode 100644 samples/layouts/accordion/tailwind-styling/src/index.css create mode 100644 samples/layouts/accordion/tailwind-styling/src/index.tsx create mode 100644 samples/layouts/accordion/tailwind-styling/tsconfig.json create mode 100644 samples/layouts/accordion/tailwind-styling/vite.config.js diff --git a/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..5779654722 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1 @@ +{"image":"mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"} diff --git a/samples/layouts/accordion/tailwind-styling/README.md b/samples/layouts/accordion/tailwind-styling/README.md new file mode 100644 index 0000000000..e5af6a5a19 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Accordion](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + 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 +git checkout master +cd ./igniteui-react-examples +cd ./samples/layouts/accordion/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/layouts/accordion/tailwind-styling/index.html b/samples/layouts/accordion/tailwind-styling/index.html new file mode 100644 index 0000000000..d21cb0e1c3 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + Accordion Tailwind Styling + + + +
+ + + diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json new file mode 100644 index 0000000000..048585aaf1 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-accordion-tailwind-styling", + "description": "This project provides example of Accordion 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/layouts/accordion/tailwind-styling/sandbox.config.json b/samples/layouts/accordion/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..f8b5562bd6 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css new file mode 100644 index 0000000000..fcd1c17aa0 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.css @@ -0,0 +1,4 @@ +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); +@source "./index.tsx"; diff --git a/samples/layouts/accordion/tailwind-styling/src/index.tsx b/samples/layouts/accordion/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..361ade8dc8 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const panelClassName = [ + 'rounded', + 'bg-[var(--ig-gray-50)]', + 'text-[var(--ig-gray-900)]', + '[&::part(header)]:bg-[var(--ig-gray-100)]', + '[&[open]::part(header)]:bg-[var(--ig-primary-50)]', + '[&::part(indicator)]:text-[var(--ig-primary-500)]', + '[&::part(title)]:font-semibold', + '[&::part(title)]:text-[var(--ig-gray-900)]', + '[&[open]::part(title)]:text-[var(--ig-primary-700)]', + '[&[open]::part(subtitle)]:text-[var(--ig-primary-700)]', + '[&::part(content)]:text-[var(--ig-gray-700)]' +].join(' '); + +export default function AccordionTailwindStyling() { + return ( +
+ + + Getting Started + Setup and onboarding +

+ Find installation steps, project setup guidance, and resources for building your first application. +

+ + + + Billing + Invoices and payment methods +

+ Review invoices, update payment methods, and manage billing contacts for your account. +

+ + + + Security + Access and authentication +

+ Configure password rules, multi-factor authentication, and recovery options for your team. +

+ + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/layouts/accordion/tailwind-styling/tsconfig.json b/samples/layouts/accordion/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/layouts/accordion/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-jsx", + "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/layouts/accordion/tailwind-styling/vite.config.js b/samples/layouts/accordion/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..c1fff0c83c --- /dev/null +++ b/samples/layouts/accordion/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 + }, +}); From 41786d477f9533352719006d107c65381cc95bda Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 12:57:02 +0300 Subject: [PATCH 08/10] fix(accordion): transportation panel reopening --- .../accordion/customization/src/index.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx index 0d20cb1453..1bb2829102 100644 --- a/samples/layouts/accordion/customization/src/index.tsx +++ b/samples/layouts/accordion/customization/src/index.tsx @@ -38,6 +38,7 @@ export default class AccordionCustomization extends React.Component { ]; private dateTimeInput: IgrDateTimeInput; + private transportationPanel: IgrExpansionPanel; constructor(props: any) { super(props); @@ -54,11 +55,18 @@ export default class AccordionCustomization extends React.Component { this.timeChange = this.timeChange.bind(this); this.clearTime = this.clearTime.bind(this); this.dateTimeInputRef = this.dateTimeInputRef.bind(this); + this.transportationPanelRef = this.transportationPanelRef.bind(this); registerIconFromText("clear", clearIcon, "material"); registerIconFromText("clock", clockIcon, "material"); } + public componentDidMount() { + if (this.transportationPanel) { + this.transportationPanel.open = true; + } + } + public render(): JSX.Element { const selectedCategories = this.state.categories .filter((c: Category) => c.checked) @@ -68,7 +76,7 @@ export default class AccordionCustomization extends React.Component { return (
- + Transportation{selectedCategories && `: ${selectedCategories}`} @@ -234,6 +242,13 @@ export default class AccordionCustomization extends React.Component { } this.dateTimeInput = input; } + + public transportationPanelRef(panel: IgrExpansionPanel) { + if (!panel) { + return; + } + this.transportationPanel = panel; + } } const root = ReactDOM.createRoot(document.getElementById("root")); From 273e2aa426a996f0698be75969dd7dbca7a74d39 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 12 Aug 2026 17:21:43 +0300 Subject: [PATCH 09/10] feat(accordion): enhance accordion sample with max-height and overflow styling --- samples/layouts/accordion/customization/src/index.css | 2 ++ samples/layouts/accordion/nested-scenario/src/index.css | 2 ++ samples/layouts/accordion/overview/src/index.css | 2 ++ .../layouts/accordion/programmatic-expansion/src/index.css | 2 ++ samples/layouts/accordion/styling/src/index.css | 2 ++ samples/layouts/accordion/tailwind-styling/src/index.css | 5 +++++ samples/layouts/accordion/tailwind-styling/src/index.tsx | 2 +- 7 files changed, 16 insertions(+), 1 deletion(-) diff --git a/samples/layouts/accordion/customization/src/index.css b/samples/layouts/accordion/customization/src/index.css index 1282237415..41acf8d4d5 100644 --- a/samples/layouts/accordion/customization/src/index.css +++ b/samples/layouts/accordion/customization/src/index.css @@ -1,5 +1,7 @@ .accordion-sample { width: min(760px, 100%); + max-height: 100%; + overflow-y: auto; margin: 0 auto; padding: 24px; box-sizing: border-box; diff --git a/samples/layouts/accordion/nested-scenario/src/index.css b/samples/layouts/accordion/nested-scenario/src/index.css index fb5de5aea5..411f82619d 100644 --- a/samples/layouts/accordion/nested-scenario/src/index.css +++ b/samples/layouts/accordion/nested-scenario/src/index.css @@ -1,5 +1,7 @@ .accordion-sample { width: min(760px, 100%); + max-height: 100%; + overflow-y: auto; margin: 0 auto; padding: 24px; box-sizing: border-box; diff --git a/samples/layouts/accordion/overview/src/index.css b/samples/layouts/accordion/overview/src/index.css index 224afd6a14..e9060efa66 100644 --- a/samples/layouts/accordion/overview/src/index.css +++ b/samples/layouts/accordion/overview/src/index.css @@ -1,5 +1,7 @@ .accordion-sample { width: min(720px, 100%); + max-height: 100%; + overflow-y: auto; margin: 0 auto; padding: 24px; box-sizing: border-box; diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.css b/samples/layouts/accordion/programmatic-expansion/src/index.css index 67b128391f..dc0476de9b 100644 --- a/samples/layouts/accordion/programmatic-expansion/src/index.css +++ b/samples/layouts/accordion/programmatic-expansion/src/index.css @@ -1,5 +1,7 @@ .accordion-sample { width: min(720px, 100%); + max-height: 100%; + overflow-y: auto; margin: 0 auto; padding: 24px; box-sizing: border-box; diff --git a/samples/layouts/accordion/styling/src/index.css b/samples/layouts/accordion/styling/src/index.css index c610f99671..506da5be76 100644 --- a/samples/layouts/accordion/styling/src/index.css +++ b/samples/layouts/accordion/styling/src/index.css @@ -1,5 +1,7 @@ .accordion-sample { width: min(720px, 100%); + max-height: 100%; + overflow-y: auto; margin: 0 auto; padding: 24px; box-sizing: border-box; diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css index fcd1c17aa0..d35041b3d1 100644 --- a/samples/layouts/accordion/tailwind-styling/src/index.css +++ b/samples/layouts/accordion/tailwind-styling/src/index.css @@ -2,3 +2,8 @@ @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx"; + +.accordion-tailwind-sample { + max-height: 100%; + overflow-y: auto; +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.tsx b/samples/layouts/accordion/tailwind-styling/src/index.tsx index 361ade8dc8..5bec513a06 100644 --- a/samples/layouts/accordion/tailwind-styling/src/index.tsx +++ b/samples/layouts/accordion/tailwind-styling/src/index.tsx @@ -20,7 +20,7 @@ const panelClassName = [ export default function AccordionTailwindStyling() { return ( -
+
Getting Started From 33605f5f6881e2517ce9eb9a0b16df1f13692d1a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 14 Aug 2026 13:56:16 +0300 Subject: [PATCH 10/10] fix(accordion): update Tailwind deps and styles --- browser/package-lock.json | 2 +- browser/public/meta.json | 2 +- browser/src/index.css | 3 +++ browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/tailwind-styling/package.json | 4 ++-- samples/inputs/badge/tailwind-styling/src/index.css | 8 ++++---- samples/layouts/accordion/tailwind-styling/package.json | 4 ++-- samples/layouts/accordion/tailwind-styling/src/index.css | 1 - 8 files changed, 14 insertions(+), 12 deletions(-) diff --git a/browser/package-lock.json b/browser/package-lock.json index 3aae5f1550..fafc39a934 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -5843,8 +5843,8 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "devOptional": true, "license": "Apache-2.0", - "optional": true, "engines": { "node": ">=8" } diff --git a/browser/public/meta.json b/browser/public/meta.json index 717bce6e87..bad741ae6c 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-14 13:52:24","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/index.css b/browser/src/index.css index 68ba452275..f5c1f70900 100644 --- a/browser/src/index.css +++ b/browser/src/index.css @@ -1,3 +1,6 @@ +@import "tailwindcss/utilities.css" layer(utilities); +@source "./samples/**/*.{ts,tsx,js,jsx}"; + #root, html, body, diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 717bce6e87..bad741ae6c 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-14 13:52:24","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json index a4300fd58d..e1d7f6b876 100644 --- a/samples/inputs/badge/tailwind-styling/package.json +++ b/samples/inputs/badge/tailwind-styling/package.json @@ -21,14 +21,14 @@ "tslib": "^2.4.0" }, "devDependencies": { - "@tailwindcss/vite": "^4.1.14", + "@tailwindcss/vite": "^4.3.3", "@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", + "tailwindcss": "^4.3.3", "typescript": "^4.8.4", "vite": "^7.1.9", "vitest": "^3.2.4", diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css index 101b4607d2..79e22edf92 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.css +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -1,9 +1,9 @@ -/* 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); +@source "./index.tsx"; + +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ igc-badge { --ig-size: var(--ig-size-small); diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json index 048585aaf1..24d204ed97 100644 --- a/samples/layouts/accordion/tailwind-styling/package.json +++ b/samples/layouts/accordion/tailwind-styling/package.json @@ -21,14 +21,14 @@ "tslib": "^2.4.0" }, "devDependencies": { - "@tailwindcss/vite": "^4.1.14", + "@tailwindcss/vite": "^4.3.3", "@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", + "tailwindcss": "^4.3.3", "typescript": "^4.8.4", "vite": "^7.1.9", "vitest": "^3.2.4", diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css index d35041b3d1..eec79f37d7 100644 --- a/samples/layouts/accordion/tailwind-styling/src/index.css +++ b/samples/layouts/accordion/tailwind-styling/src/index.css @@ -1,4 +1,3 @@ -@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); @source "./index.tsx";