diff --git a/packages/aggrid/src/aggrid-ix-theme-params.ts b/packages/aggrid/src/aggrid-ix-theme-params.ts index 4efb15577b6..d059a5872c7 100644 --- a/packages/aggrid/src/aggrid-ix-theme-params.ts +++ b/packages/aggrid/src/aggrid-ix-theme-params.ts @@ -8,7 +8,7 @@ */ export const aggridIxThemeParams = { accentColor: `var(--theme-color-focus-bdr)`, - backgroundColor: `var(--theme-color-2)`, + backgroundColor: `var(--theme-color-1)`, headerColumnResizeHandleColor: `var(--theme-color-0)`, foregroundColor: `var(--theme-color-std-text)`, cellTextColor: `var(--theme-color-std-text)`, @@ -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..b950f9a24e0 100644 --- a/packages/aggrid/src/index.ts +++ b/packages/aggrid/src/index.ts @@ -12,6 +12,7 @@ import headerStyles from './header.style.css'; import tooltipStyles from './tooltip.style.css'; import radioStyles from './radio.style.css'; import inputStyles from './input.style.css'; +import rowStateStyles from './row-state.style.css'; import { aggridIxThemeParams } from './aggrid-ix-theme-params.ts'; import { iconOverrides } from 'ag-grid-community'; import { @@ -106,6 +107,13 @@ function createIxTheme(agModule: AgGridModule) { css: inputStyles, }) ) + .withPart( + createPart({ + feature: 'rowStateCustomStyles', + params: {}, + css: rowStateStyles, + }) + ) .withPart( createPart({ feature: 'iconOverrides', diff --git a/packages/aggrid/src/row-state.style.css b/packages/aggrid/src/row-state.style.css new file mode 100644 index 00000000000..69d651fd69d --- /dev/null +++ b/packages/aggrid/src/row-state.style.css @@ -0,0 +1,15 @@ +/* + * 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. + */ + +.ag-row.ag-row-hover .ag-cell { + background-image: linear-gradient( + var(--theme-color-ghost--hover), + var(--theme-color-ghost--hover) + ) !important; +} diff --git a/packages/storybook-docs/package.json b/packages/storybook-docs/package.json index 4306cf1aa01..36ddc4e8cef 100644 --- a/packages/storybook-docs/package.json +++ b/packages/storybook-docs/package.json @@ -13,10 +13,12 @@ "dependencies": { "@maskito/core": "^3.2.0", "@maskito/kit": "^3.2.0", + "ag-grid-community": "^33.3.2", "lit": "^3.2.1" }, "devDependencies": { "@siemens/ix": "workspace:*", + "@siemens/ix-aggrid": "workspace:*", "@siemens/ix-icons": "catalog:", "@stencil/core": "~4.17.0", "@storybook/addon-a11y": "^10.1.11", diff --git a/packages/storybook-docs/src/stories/aggrid.stories.ts b/packages/storybook-docs/src/stories/aggrid.stories.ts new file mode 100644 index 00000000000..17484c28332 --- /dev/null +++ b/packages/storybook-docs/src/stories/aggrid.stories.ts @@ -0,0 +1,111 @@ +/* + * SPDX-FileCopyrightText: 2024 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 type { Meta, StoryObj } from '@storybook/web-components-vite'; +import { getIxTheme } from '@siemens/ix-aggrid'; +import * as agGridCommunity from 'ag-grid-community'; +import { + AllCommunityModule, + ModuleRegistry, + createGrid, + type GridOptions, +} from 'ag-grid-community'; + +ModuleRegistry.registerModules([AllCommunityModule]); + +type AgGridArgs = { + gridOptions: GridOptions; +}; + +const 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' }, +]; + +function renderGrid(args: AgGridArgs) { + const container = document.createElement('div'); + container.style.height = '20rem'; + container.style.width = '100%'; + + createGrid(container, { + ...args.gridOptions, + theme: getIxTheme(agGridCommunity), + }); + + return container; +} + +const meta = { + title: 'Example/AgGrid', + tags: [], + render: (args) => renderGrid(args), + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=86777-15993&m=dev', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + gridOptions: { + 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) => + `Status: ${params.value} - Type: ${params.data.type}`, + }, + { + field: 'hwVersion', + headerName: 'HW version', + resizable: true, + tooltipValueGetter: (params) => + params.value === 'N/A' + ? 'Hardware version not available' + : `Hardware Version ${params.value}`, + }, + ], + autoSizeStrategy: { + type: 'fitGridWidth', + }, + rowData, + suppressCellFocus: true, + }, + }, +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13283350206..cb01bb85070 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1081,6 +1081,9 @@ importers: '@maskito/kit': specifier: ^3.2.0 version: 3.2.0(@maskito/core@3.2.0) + ag-grid-community: + specifier: ^33.3.2 + version: 33.3.2 lit: specifier: ^3.2.1 version: 3.2.1 @@ -1088,6 +1091,9 @@ importers: '@siemens/ix': specifier: workspace:* version: link:../core + '@siemens/ix-aggrid': + specifier: workspace:* + version: link:../aggrid '@siemens/ix-icons': specifier: 'catalog:' version: 3.4.0