diff --git a/.changeset/neat-grids-rest.md b/.changeset/neat-grids-rest.md new file mode 100644 index 00000000000..0c838b04118 --- /dev/null +++ b/.changeset/neat-grids-rest.md @@ -0,0 +1,9 @@ +--- +"@siemens/ix-aggrid": minor +--- + +Add optional theme configuration to `getIxTheme` and `getIxThemeAsync` with `stripedRows` for API-based striped row styling. + +AG Grid now defaults to a uniform row background, while striped rows can be enabled with: + +`getIxTheme(agGridCommunity, { stripedRows: true })` diff --git a/packages/aggrid/src/aggrid-ix-theme-params.ts b/packages/aggrid/src/aggrid-ix-theme-params.ts index 4efb15577b6..d8cb533faf4 100644 --- a/packages/aggrid/src/aggrid-ix-theme-params.ts +++ b/packages/aggrid/src/aggrid-ix-theme-params.ts @@ -25,7 +25,7 @@ export const aggridIxThemeParams = { borderColor: `var(--theme-color-x-weak-bdr)`, headerBackgroundColor: `var(--theme-color-2)`, tooltipBackgroundColor: `var(--theme-color-2)`, - oddRowBackgroundColor: `var(--theme-color-ghost-alt)`, + oddRowBackgroundColor: `var(--theme-color-2)`, sideBarBackgroundColor: `var(--theme-color-2)`, invalidColor: `var(--theme-color-alarm)`, checkboxUncheckedBorderColor: `var(--theme-color-contrast-bdr)`, @@ -98,7 +98,6 @@ export const aggridIxThemeParams = { sideButtonsBarBackgroundColor: `var(--theme-color-2)`, sideButtonHoverBackgroundColor: `var(--theme-color-ghost--hover)`, checkboxCheckedShapeColor: `var(--theme-color-primary--contrast)`, - OddRowBackgroundColor: `var(--theme-color-ghost-alt)`, tabBackgroundColor: `rgba(255, 255, 255, 0)`, tabBorderColor: `rgba(24, 29, 31, 0.15)`, tabHoverBackgroundColor: `rgba(255, 255, 255, 0)`, diff --git a/packages/aggrid/src/index.ts b/packages/aggrid/src/index.ts index c978e8a524b..f77e0b0abb8 100644 --- a/packages/aggrid/src/index.ts +++ b/packages/aggrid/src/index.ts @@ -23,6 +23,16 @@ import { } from '@siemens/ix-icons/icons'; const additionalThemeParams = { fontFamily: ['Siemens Sans', 'sans-serif'] }; +const stripedRowThemeParams = { + oddRowBackgroundColor: 'var(--theme-color-1)', +}; + +export type IxThemeOptions = { + /** + * Enables alternating row background colors. + */ + stripedRows?: boolean; +}; // Flexible type for multiple versions type AgGridModule = { @@ -41,11 +51,17 @@ function extractSvgFromDataUri(dataUri: string): string { return svgString.trim(); } -function createIxTheme(agModule: AgGridModule) { +function createIxTheme(agModule: AgGridModule, options?: IxThemeOptions) { const { createPart, themeAlpine } = agModule; - const base = themeAlpine.withParams({ + + const themeParams = { ...aggridIxThemeParams, ...additionalThemeParams, + ...(options?.stripedRows ? stripedRowThemeParams : {}), + }; + + const base = themeAlpine.withParams({ + ...themeParams, }); const iconCSS = iconOverrides({ @@ -117,15 +133,16 @@ function createIxTheme(agModule: AgGridModule) { return theme; } -const getIxTheme = (agModule: AgGridModule) => { - return createIxTheme(agModule); +const getIxTheme = (agModule: AgGridModule, options?: IxThemeOptions) => { + return createIxTheme(agModule, options); }; const getIxThemeAsync = async ( - importModule: () => Promise | AgGridModule + importModule: () => Promise | AgGridModule, + options?: IxThemeOptions ) => { const agLib = await importModule(); - return createIxTheme(agLib); + return createIxTheme(agLib, options); }; export { getIxTheme, getIxThemeAsync }; diff --git a/packages/aggrid/tests/aggrid.e2e.ts b/packages/aggrid/tests/aggrid.e2e.ts index fdb27d0cd2b..0adc58a9b75 100644 --- a/packages/aggrid/tests/aggrid.e2e.ts +++ b/packages/aggrid/tests/aggrid.e2e.ts @@ -73,6 +73,13 @@ regressionTest.describe('aggrid', () => { ).toMatchSnapshot(); }); + regressionTest('striped rows', async ({ page }) => { + await page.goto('striped/striped.html'); + expect( + await page.screenshot({ fullPage: true, animations: 'disabled' }) + ).toMatchSnapshot(); + }); + regressionTest.describe('header checkbox', () => { regressionTest('should be unchecked', async ({ page }) => { await page.goto('basic/basic.html'); diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png index b944b893d2b..268c6b8dcbd 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png index d75fb5a1940..54c4a2cdcbd 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-38132-button-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png index 4d52a54ab04..ec49d651046 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png index 47a7cb859c7..6a6f7b92932 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-dropdown-top-layer-enableTopLayer-true-select-in-cell-should-appear-above-other-rows-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-dark-linux.png index 98e2f3ac7b4..bd7ae2c20f3 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-light-linux.png index 3d206ed7aaa..b081b77be64 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-editor-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-dark-linux.png index 11137185fbf..7945a5c6123 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-light-linux.png index 1dc866fa2c0..f7eadc4a97d 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-filter-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-dark-linux.png index a8e9b28e71b..50030feb872 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-light-linux.png index 29858f5760a..2fc17402604 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-checked-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-dark-linux.png index 65699e4f759..eec7d9b1af7 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-light-linux.png index 4482bf4eb24..45755c7b16d 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-indeterminate-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-dark-linux.png index 8fa8e6bc70c..3a2f4affb24 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-light-linux.png index 0d46583440c..909a8fb7b79 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-header-checkbox-should-be-unchecked-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-dark-linux.png index af3e4d2a01b..d799c941d43 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-light-linux.png index 845df98bd18..edaecd0aef2 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-pagination-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-striped-rows-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-striped-rows-1-chromium---classic-dark-linux.png new file mode 100644 index 00000000000..5178291b020 Binary files /dev/null and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-striped-rows-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-striped-rows-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-striped-rows-1-chromium---classic-light-linux.png new file mode 100644 index 00000000000..f3f97236176 Binary files /dev/null and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-striped-rows-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-dark-linux.png index b3bd75b4c12..b3f2467b8ec 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-light-linux.png index aacea3b6142..6da826d7f73 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-tooltip-display-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-dark-linux.png index d594d70ce28..e363623b6fc 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-light-linux.png index f4952182183..62fdefc787a 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v33-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-dark-linux.png index f8a5f17f307..f03714efccb 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-light-linux.png index 22b36d15df0..da1b9dd6428 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v34-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-dark-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-dark-linux.png index f8a5f17f307..f03714efccb 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-dark-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-dark-linux.png differ diff --git a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-light-linux.png b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-light-linux.png index 22b36d15df0..da1b9dd6428 100644 Binary files a/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-light-linux.png and b/packages/aggrid/tests/aggrid.e2e.ts-snapshots/aggrid-version-v35-1-chromium---classic-light-linux.png differ diff --git a/packages/aggrid/tests/striped/setup-striped.ts b/packages/aggrid/tests/striped/setup-striped.ts new file mode 100644 index 00000000000..46d994445b0 --- /dev/null +++ b/packages/aggrid/tests/striped/setup-striped.ts @@ -0,0 +1,32 @@ +/* + * SPDX-FileCopyrightText: 2026 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { + AllCommunityModule, + createGrid, + GridOptions, + ModuleRegistry, +} from 'ag-grid-community'; +import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +import { getIxTheme } from '@siemens/ix-aggrid'; +import * as agGridCommunity from 'ag-grid-community'; +import { COLUMN_DEFS, ROW_DATA } from '../utils/test/basic.const'; + +ModuleRegistry.registerModules([AllCommunityModule]); + +const stripedTheme = getIxTheme(agGridCommunity, { stripedRows: true }); + +const gridOptions = { + columnDefs: COLUMN_DEFS, + rowData: ROW_DATA, + suppressCellFocus: true, + theme: stripedTheme, +} satisfies GridOptions; + +const gridElement = document.querySelector('#testGrid') as HTMLElement; +createGrid(gridElement, gridOptions); diff --git a/packages/aggrid/tests/striped/striped.html b/packages/aggrid/tests/striped/striped.html new file mode 100644 index 00000000000..0dcf31ba683 --- /dev/null +++ b/packages/aggrid/tests/striped/striped.html @@ -0,0 +1,21 @@ + + + + + + + AG Grid striped rows + + +
+ + + + diff --git a/packages/angular-standalone-test-app/src/app/app.routes.ts b/packages/angular-standalone-test-app/src/app/app.routes.ts index 8e4893a92a7..4e27b954f4b 100644 --- a/packages/angular-standalone-test-app/src/app/app.routes.ts +++ b/packages/angular-standalone-test-app/src/app/app.routes.ts @@ -34,6 +34,8 @@ export const routePaths: IxPreviewRoutes = { import('../preview-examples/add-icons').then((m) => m.default), 'preview/aggrid': () => import('../preview-examples/aggrid').then((m) => m.default), + 'preview/aggrid-striped': () => + import('../preview-examples/aggrid-striped').then((m) => m.default), 'preview/application': () => import('../preview-examples/application').then((m) => m.default), 'preview/application-advanced': () => diff --git a/packages/angular-standalone-test-app/src/preview-examples/aggrid-striped.ts b/packages/angular-standalone-test-app/src/preview-examples/aggrid-striped.ts new file mode 100644 index 00000000000..b8a4bf491d0 --- /dev/null +++ b/packages/angular-standalone-test-app/src/preview-examples/aggrid-striped.ts @@ -0,0 +1,133 @@ +/* + * SPDX-FileCopyrightText: 2026 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { getIxTheme } from '@siemens/ix-aggrid'; +import { AgGridAngular } from 'ag-grid-angular'; +import { + GridOptions, + AllCommunityModule, + ModuleRegistry, +} from 'ag-grid-community'; +import * as agGrid from 'ag-grid-community'; + +ModuleRegistry.registerModules([AllCommunityModule]); + +@Component({ + selector: 'app-example', + imports: [AgGridAngular, CommonModule], + templateUrl: './aggrid.html', +}) +export default class AGGridStriped implements OnInit { + gridOptions: GridOptions | null = null; + + ngOnInit() { + const ixTheme = getIxTheme(agGrid, { + stripedRows: true, + }); + + this.gridOptions = { + theme: ixTheme, + rowDragManaged: true, + tooltipShowDelay: 500, + rowSelection: { + mode: 'multiRow', + checkboxes: true, + headerCheckbox: true, + selectAll: 'filtered', + }, + columnDefs: [ + { + field: 'type', + headerName: 'Type', + resizable: true, + rowDrag: true, + tooltipField: 'type', + }, + { + field: 'status', + headerName: 'Status', + resizable: true, + sortable: true, + filter: true, + tooltipValueGetter: (params) => { + return `Status: ${params.value} - Type: ${params.data.type}`; + }, + }, + { + field: 'hwVersion', + headerName: 'HW version', + resizable: true, + tooltipValueGetter: (params) => { + if (params.value === 'N/A') { + return 'Hardware version not available'; + } + return `Hardware Version ${params.value}`; + }, + }, + ], + autoSizeStrategy: { + type: 'fitGridWidth', + }, + rowData: [ + { + type: 'Equipment', + status: 'Normal', + hwVersion: '2.0', + }, + { + type: 'Positioner', + status: 'Maintenance', + hwVersion: '1.0', + }, + { + type: 'Pressure sensor', + status: 'Unknown', + hwVersion: 'N/A', + }, + { + type: 'Flow meter', + status: 'Normal', + hwVersion: '3.1', + }, + { + type: 'Temperature sensor', + status: 'Warning', + hwVersion: '2.2', + }, + { + type: 'Valve', + status: 'Normal', + hwVersion: '1.5', + }, + { + type: 'Actuator', + status: 'Maintenance', + hwVersion: '2.0', + }, + { + type: 'Controller', + status: 'Normal', + hwVersion: '4.0', + }, + { + type: 'Safety relay', + status: 'Unknown', + hwVersion: 'N/A', + }, + { + type: 'Power supply', + status: 'Normal', + hwVersion: '1.8', + }, + ], + suppressCellFocus: true, + }; + } +} diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts index b3de23a66cd..5e100902591 100644 --- a/packages/angular-test-app/src/app/app-routing.module.ts +++ b/packages/angular-test-app/src/app/app-routing.module.ts @@ -15,6 +15,7 @@ import AboutAndLegalLegacy from '../preview-examples/about-and-legal-legacy'; import ActionCard from '../preview-examples/action-card'; import AddIcons from '../preview-examples/add-icons'; import AgGrid from '../preview-examples/aggrid'; +import AgGridStriped from '../preview-examples/aggrid-striped'; import ApplicationExample from '../preview-examples/application'; import ApplicationAdvancedExample from '../preview-examples/application-advanced'; import ApplicationAppSwitchExample from '../preview-examples/application-app-switch'; @@ -330,6 +331,10 @@ const routes: Routes = [ path: 'aggrid', component: AgGrid, }, + { + path: 'aggrid-striped', + component: AgGridStriped, + }, { path: 'avatar-image', component: AvatarImage, diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts index 600cb855076..9a21de06d88 100644 --- a/packages/angular-test-app/src/app/app.module.ts +++ b/packages/angular-test-app/src/app/app.module.ts @@ -24,6 +24,7 @@ import AboutAndLegalLegacy from '../preview-examples/about-and-legal-legacy'; import ActionCard from '../preview-examples/action-card'; import AddIcons from '../preview-examples/add-icons'; import AgGrid from '../preview-examples/aggrid'; +import AgGridStriped from '../preview-examples/aggrid-striped'; import ApplicationExample from '../preview-examples/application'; import ApplicationAdvancedExample from '../preview-examples/application-advanced'; import ApplicationAppSwitchExample from '../preview-examples/application-app-switch'; @@ -289,6 +290,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical'; ActionCard, AddIcons, AgGrid, + AgGridStriped, ApplicationExample, ApplicationAdvancedExample, ApplicationBreakpointExample, diff --git a/packages/angular-test-app/src/preview-examples/aggrid-striped.ts b/packages/angular-test-app/src/preview-examples/aggrid-striped.ts new file mode 100644 index 00000000000..53b36bc85a1 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/aggrid-striped.ts @@ -0,0 +1,132 @@ +/* + * SPDX-FileCopyrightText: 2026 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { Component, OnInit } from '@angular/core'; +import { getIxTheme } from '@siemens/ix-aggrid'; +import { + GridOptions, + AllCommunityModule, + ModuleRegistry, +} from 'ag-grid-community'; +import * as agGrid from 'ag-grid-community'; + +ModuleRegistry.registerModules([AllCommunityModule]); + +@Component({ + standalone: false, + selector: 'app-example', + templateUrl: './aggrid.html', +}) +export default class AGGridStriped implements OnInit { + gridOptions: GridOptions | null = null; + + ngOnInit() { + const ixTheme = getIxTheme(agGrid, { + stripedRows: true, + }); + + this.gridOptions = { + theme: ixTheme, + rowDragManaged: true, + tooltipShowDelay: 500, + rowSelection: { + mode: 'multiRow', + checkboxes: true, + headerCheckbox: true, + selectAll: 'filtered', + }, + columnDefs: [ + { + field: 'type', + headerName: 'Type', + resizable: true, + rowDrag: true, + tooltipField: 'type', + }, + { + field: 'status', + headerName: 'Status', + resizable: true, + sortable: true, + filter: true, + tooltipValueGetter: (params) => { + return `Status: ${params.value} - Type: ${params.data.type}`; + }, + }, + { + field: 'hwVersion', + headerName: 'HW version', + resizable: true, + tooltipValueGetter: (params) => { + if (params.value === 'N/A') { + return 'Hardware version not available'; + } + return `Hardware Version ${params.value}`; + }, + }, + ], + autoSizeStrategy: { + type: 'fitGridWidth', + }, + rowData: [ + { + type: 'Equipment', + status: 'Normal', + hwVersion: '2.0', + }, + { + type: 'Positioner', + status: 'Maintenance', + hwVersion: '1.0', + }, + { + type: 'Pressure sensor', + status: 'Unknown', + hwVersion: 'N/A', + }, + { + type: 'Flow meter', + status: 'Normal', + hwVersion: '3.1', + }, + { + type: 'Temperature sensor', + status: 'Warning', + hwVersion: '2.2', + }, + { + type: 'Valve', + status: 'Normal', + hwVersion: '1.5', + }, + { + type: 'Actuator', + status: 'Maintenance', + hwVersion: '2.0', + }, + { + type: 'Controller', + status: 'Normal', + hwVersion: '4.0', + }, + { + type: 'Safety relay', + status: 'Unknown', + hwVersion: 'N/A', + }, + { + type: 'Power supply', + status: 'Normal', + hwVersion: '1.8', + }, + ], + suppressCellFocus: true, + }; + } +} diff --git a/packages/html-test-app/src/preview-examples/aggrid-striped.html b/packages/html-test-app/src/preview-examples/aggrid-striped.html new file mode 100644 index 00000000000..608a4dbc549 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/aggrid-striped.html @@ -0,0 +1,139 @@ + + + + + + + + AG Grid striped example + + +
+ + + + + diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx index e1da8f0e39d..ca9ff00430f 100644 --- a/packages/react-test-app/src/main.tsx +++ b/packages/react-test-app/src/main.tsx @@ -20,6 +20,7 @@ import AboutAndLegalLegacy from './preview-examples/about-and-legal-legacy'; import ActionCard from './preview-examples/action-card'; import AddIcons from './preview-examples/add-icons'; import AgGrid from './preview-examples/aggrid'; +import AgGridStriped from './preview-examples/aggrid-striped'; import Application from './preview-examples/application'; import ApplicationAdvanced from './preview-examples/application-advanced'; import ApplicationAppSwitch from './preview-examples/application-app-switch'; @@ -292,6 +293,7 @@ const routes: IxPreviewRoutes = { '/preview/action-card': ActionCard, '/preview/add-icons': AddIcons, '/preview/aggrid': AgGrid, + '/preview/aggrid-striped': AgGridStriped, '/preview/application': Application, '/preview/application-advanced': ApplicationAdvanced, '/preview/application-breakpoints': ApplicationBreakpoints, diff --git a/packages/react-test-app/src/preview-examples/aggrid-striped.tsx b/packages/react-test-app/src/preview-examples/aggrid-striped.tsx new file mode 100644 index 00000000000..bd4e9c2f30b --- /dev/null +++ b/packages/react-test-app/src/preview-examples/aggrid-striped.tsx @@ -0,0 +1,143 @@ +/* + * SPDX-FileCopyrightText: 2026 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { useEffect, useState } from 'react'; + +import { AgGridReact } from 'ag-grid-react'; +import { getIxTheme } from '@siemens/ix-aggrid'; +import { + ModuleRegistry, + AllCommunityModule, + GridOptions, +} from 'ag-grid-community'; +import * as agGrid from 'ag-grid-community'; + +ModuleRegistry.registerModules([AllCommunityModule]); + +export default () => { + const [gridOptions, setGridOptions] = useState(null); + + useEffect(() => { + const initializeGrid = () => { + const ixTheme = getIxTheme(agGrid, { + stripedRows: true, + }); + + setGridOptions({ + theme: ixTheme, + rowDragManaged: true, + tooltipShowDelay: 500, + rowSelection: { + mode: 'multiRow', + checkboxes: true, + headerCheckbox: true, + selectAll: 'filtered', + }, + columnDefs: [ + { + field: 'type', + headerName: 'Type', + resizable: true, + rowDrag: true, + tooltipField: 'type', + }, + { + field: 'status', + headerName: 'Status', + resizable: true, + sortable: true, + filter: true, + tooltipValueGetter: (params) => { + return `Status: ${params.value} - Type: ${params.data.type}`; + }, + }, + { + field: 'hwVersion', + headerName: 'HW version', + resizable: true, + tooltipValueGetter: (params) => { + if (params.value === 'N/A') { + return 'Hardware version not available'; + } + return `Hardware Version ${params.value}`; + }, + }, + ], + autoSizeStrategy: { + type: 'fitGridWidth', + }, + rowData: [ + { + type: 'Equipment', + status: 'Normal', + hwVersion: '2.0', + }, + { + type: 'Positioner', + status: 'Maintenance', + hwVersion: '1.0', + }, + { + type: 'Pressure sensor', + status: 'Unknown', + hwVersion: 'N/A', + }, + { + type: 'Flow meter', + status: 'Normal', + hwVersion: '3.1', + }, + { + type: 'Temperature sensor', + status: 'Warning', + hwVersion: '2.2', + }, + { + type: 'Valve', + status: 'Normal', + hwVersion: '1.5', + }, + { + type: 'Actuator', + status: 'Maintenance', + hwVersion: '2.0', + }, + { + type: 'Controller', + status: 'Normal', + hwVersion: '4.0', + }, + { + type: 'Safety relay', + status: 'Unknown', + hwVersion: 'N/A', + }, + { + type: 'Power supply', + status: 'Normal', + hwVersion: '1.8', + }, + ], + suppressCellFocus: true, + }); + }; + + initializeGrid(); + }, []); + + if (!gridOptions) { + return null; + } + + return ( +
+ +
+ ); +}; diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue index a6350968be0..8956459be4a 100644 --- a/packages/vue-test-app/src/Root.vue +++ b/packages/vue-test-app/src/Root.vue @@ -18,6 +18,7 @@ import AboutAndLegalLegacy from './preview-examples/about-and-legal-legacy.vue'; import ActionCard from './preview-examples/action-card.vue'; import AddIcons from './preview-examples/add-icons.vue'; import AgGrid from './preview-examples/aggrid.vue'; +import AgGridStriped from './preview-examples/aggrid-striped.vue'; import ApplicationAppSwitch from './preview-examples/application-app-switch.vue'; import ApplicationBreakpoints from './preview-examples/application-breakpoints.vue'; import ApplicationHeader from './preview-examples/application-header.vue'; @@ -272,6 +273,7 @@ const routes: IxPreviewRoutes = { '/preview/action-card': ActionCard, '/preview/add-icons': AddIcons, '/preview/aggrid': AgGrid, + '/preview/aggrid-striped': AgGridStriped, '/preview/application': Application, '/preview/application-advanced': ApplicationAdvanced, '/preview/application-header': ApplicationHeader, diff --git a/packages/vue-test-app/src/preview-examples/aggrid-striped.vue b/packages/vue-test-app/src/preview-examples/aggrid-striped.vue new file mode 100644 index 00000000000..325b7df456f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/aggrid-striped.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/testing/framework-tests/tests/generated/aggrid-striped-axe.spec.ts b/testing/framework-tests/tests/generated/aggrid-striped-axe.spec.ts new file mode 100644 index 00000000000..3c0345acfad --- /dev/null +++ b/testing/framework-tests/tests/generated/aggrid-striped-axe.spec.ts @@ -0,0 +1,26 @@ +/* + * SPDX-FileCopyrightText: 2025 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** + * This test was autogenerated by 'testing/framework-tests/src/main.ts' + * Do not edit this file directly. + */ +import { test, expect } from '@playwright/test'; +import { waitForReadiness, createAxeBuilder } from '../utils'; + +test('aggrid-striped - accessibility check', async ({ page }) => { + await page.goto('/preview/aggrid-striped'); + + // Ugly and not the reliable way to wait for Stencil to be ready + await waitForReadiness(page); + + const accessibilityScanResults = await createAxeBuilder(page).disableRules(['page-has-heading-one']).analyze(); + + expect(accessibilityScanResults.violations).toEqual([]); +}); diff --git a/testing/framework-tests/tests/generated/aggrid-striped.spec.ts b/testing/framework-tests/tests/generated/aggrid-striped.spec.ts new file mode 100644 index 00000000000..854662b501d --- /dev/null +++ b/testing/framework-tests/tests/generated/aggrid-striped.spec.ts @@ -0,0 +1,26 @@ +/* + * SPDX-FileCopyrightText: 2025 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** + * This test was autogenerated by 'testing/framework-tests/src/main.ts' + * Do not edit this file directly. + */ +import { test, expect } from '@playwright/test'; +import { waitForReadiness } from '../utils'; + +test('aggrid-striped', async ({ page }) => { + await page.goto('/preview/aggrid-striped'); + + // Ugly and not the reliable way to wait for Stencil to be ready + await waitForReadiness(page); + + await expect(page.locator('body')).toMatchAriaSnapshot({ + name: 'aggrid-striped.aria-snapshot.yaml', + }); +}); diff --git a/testing/framework-tests/tests/generated/axe.ts b/testing/framework-tests/tests/generated/axe.ts index 2f6255f1cba..4a9a26c0ba6 100644 --- a/testing/framework-tests/tests/generated/axe.ts +++ b/testing/framework-tests/tests/generated/axe.ts @@ -3,6 +3,7 @@ import './about-and-legal-legacy-axe.spec.ts'; import './action-card-axe.spec.ts'; import './add-icons-axe.spec.ts'; import './aggrid-axe.spec.ts'; +import './aggrid-striped-axe.spec.ts'; import './application-advanced-axe.spec.ts'; import './application-app-switch-axe.spec.ts'; import './application-axe.spec.ts'; diff --git a/testing/framework-tests/tests/generated/index.ts b/testing/framework-tests/tests/generated/index.ts index a3d295c9fc0..7d859c76091 100644 --- a/testing/framework-tests/tests/generated/index.ts +++ b/testing/framework-tests/tests/generated/index.ts @@ -7,6 +7,8 @@ import './action-card.spec.ts'; import './add-icons-axe.spec.ts'; import './add-icons.spec.ts'; import './aggrid-axe.spec.ts'; +import './aggrid-striped-axe.spec.ts'; +import './aggrid-striped.spec.ts'; import './aggrid.spec.ts'; import './application-advanced-axe.spec.ts'; import './application-advanced.spec.ts'; diff --git a/testing/framework-tests/tests/generated/test-ids.autogenerated.ts b/testing/framework-tests/tests/generated/test-ids.autogenerated.ts index b90cd1f6abd..2f3846c2e94 100644 --- a/testing/framework-tests/tests/generated/test-ids.autogenerated.ts +++ b/testing/framework-tests/tests/generated/test-ids.autogenerated.ts @@ -253,6 +253,7 @@ export const testIds = [ "application-app-switch", "application-advanced", "aggrid", + "aggrid-striped", "add-icons", "action-card", "about-and-legal",