feat(aggrid): add pagination theme support (#261)

packages/aggrid/package.json

@@ -24,10 +24,11 @@
     "loader/"
   ],
   "scripts": {
-    "build": "stencil build --docs",
+    "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "generate": "stencil generate",
-    "test:e2e": "playwright test --reporter html"
+    "test:e2e": "playwright test --reporter html",
+    "host-root": "http-server -a 127.0.0.1"
   },
   "dependencies": {
     "@stencil/core": "~2.19.2"
@@ -40,7 +41,8 @@
     "ag-grid-community": "^28.0.2",
     "@siemens/ix": "~1.2.1",
     "@stencil/sass": "~2.0.0",
-    "@playwright/test": "^1.24.1"
+    "@playwright/test": "^1.24.1",
+    "http-server": "^14.1.1"
   },
   "peerDependencies": {
     "ag-grid-community": "^28.0.2",

packages/aggrid/playwright.config.ts

@@ -72,8 +72,8 @@ const config: PlaywrightTestConfig = {
   /* Configure projects for major browsers */
   projects: buildProjectsWithThemes(),
   webServer: {
-    command: 'yarn start',
-    port: 3333,
+    command: 'yarn host-root',
+    port: 8080,
   },
 };
 

packages/aggrid/scss/ix-aggrid.scss

@@ -9,6 +9,10 @@
 
 [class*='ag-theme-ix'] {
   --ag-background-color: transparent;
+
+  --ag-foreground-color: var(--theme-color-std-text);
+  --ag-secondary-foreground-color: var(--theme-color-std-text);
+
   --ag-header-background-color: transparent;
   --ag-odd-row-background-color: transparent;
   --ag-row-hover-color: var(--theme-table-data-row--background--hover);
@@ -70,6 +74,17 @@
     color: var(--theme-table-header-sort--color);
   }
 
+  .ag-paging-button {
+    color: var(--theme-btn-invisible-primary--color);
+    &.ag-disabled {
+      color: var(--theme-btn-invisible-primary--color--disabled);
+
+      .ag-icon {
+        color: inherit;
+      }
+    }
+  }
+
   .ag-header-cell-resize::after {
     transition: background-color 250ms linear;
   }

packages/aggrid/src/components/my-component/my-component.tsx

@@ -8,48 +8,14 @@
  */
 
 import { Component, h, Host } from '@stencil/core';
-import { themeSwitcher } from '@utils/test/theme-switcher';
-import { ColDef, GridOptions } from 'ag-grid-community';
-
-const columnDefs: ColDef[] = [
-  { field: 'make', resizable: true, checkboxSelection: true },
-  { field: 'model', resizable: true, sortable: true, filter: true },
-  { field: 'price', resizable: true },
-];
-
-const rowData = [
-  { make: 'Toyota', model: 'Celica', price: 35000, checked: false },
-  { make: 'Ford', model: 'Mondeo', price: 32000, checked: true },
-  { make: 'Porsche', model: 'Boxster', price: 72000, checked: false },
-];
 
 @Component({
   tag: 'my-component',
   styleUrl: 'my-component.scss',
   scoped: true,
 })
 export class MyComponent {
-  gridOptions: GridOptions = {
-    columnDefs: columnDefs,
-    rowData: rowData,
-    rowSelection: 'multiple',
-    suppressCellFocus: true,
-  };
-
-  componentDidLoad() {
-    themeSwitcher();
-  }
-
   render() {
-    return (
-      <Host
-        style={{
-          height: '100%',
-          width: '100%',
-        }}
-      >
-        <ix-ag-grid gridOptions={this.gridOptions}></ix-ag-grid>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }

packages/aggrid/src/components/aggrid.e2e.ts → packages/aggrid/src/components/tests/aggrid.e2e.ts

@@ -11,12 +11,12 @@ import { regressionTest } from '@utils/test';
 
 regressionTest.describe('aggrid', () => {
   regressionTest('basic', async ({ page }) => {
-    await page.goto('/');
+    await page.goto('basic.html');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
   regressionTest('filter', async ({ page }) => {
-    await page.goto('/');
+    await page.goto('basic.html');
 
     const filterHandle = await page.waitForSelector('.ag-header-cell:nth-child(2) [ref="eMenu"]');
     await filterHandle.click();
@@ -26,4 +26,9 @@ regressionTest.describe('aggrid', () => {
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('pagination', async ({ page }) => {
+    await page.goto('pagination.html');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });

packages/aggrid/src/components/tests/basic.html

@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: 2022 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.
+-->
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css" />
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css" />
+
+    <link rel="stylesheet" href="/www/build/ix-aggrid.css" />
+    <link rel="stylesheet" href="/www/build/ix/dist/siemens-ix/siemens-ix.css" />
+    <link rel="stylesheet" href="/www/build/ix-icons/css/ix-icons.css" />
+    <style>
+      body {
+        min-height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100%; height: 100%" class="ag-theme-alpine-dark ag-theme-ix"></div>
+    <script type="module">
+      import { themeSwitcher } from './utils/test/theme-switcher.js';
+
+      themeSwitcher();
+
+      (() => {
+        const columnDefs = [
+          { field: 'make', resizable: true, checkboxSelection: true },
+          { field: 'model', resizable: true, sortable: true, filter: true },
+          { field: 'price', resizable: true },
+        ];
+
+        const rowData = [
+          { make: 'Toyota', model: 'Celica', price: 35000, checked: false },
+          { make: 'Ford', model: 'Mondeo', price: 32000, checked: true },
+          { make: 'Porsche', model: 'Boxster', price: 72000, checked: false },
+        ];
+
+        const gridOptions = {
+          columnDefs: columnDefs,
+          rowData: rowData,
+          rowSelection: 'multiple',
+          suppressCellFocus: true,
+        };
+
+        const gridDiv = document.querySelector('div.ag-theme-ix');
+        const grid = new agGrid.Grid(gridDiv, gridOptions);
+      })();
+    </script>
+  </body>
+</html>

packages/aggrid/src/components/tests/pagination.html

@@ -0,0 +1,62 @@
+<!--
+SPDX-FileCopyrightText: 2022 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.
+-->
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css" />
+    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css" />
+
+    <link rel="stylesheet" href="/www/build/ix-aggrid.css" />
+    <link rel="stylesheet" href="/www/build/ix/dist/siemens-ix/siemens-ix.css" />
+    <link rel="stylesheet" href="/www/build/ix-icons/css/ix-icons.css" />
+    <style>
+      body {
+        min-height: 100vh;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div style="width: 100%; height: 100%" class="ag-theme-alpine-dark ag-theme-ix"></div>
+    <script type="module">
+      import { themeSwitcher } from './utils/test/theme-switcher.js';
+
+      themeSwitcher();
+
+      (() => {
+        const columnDefs = [
+          { field: 'make', resizable: true, checkboxSelection: true },
+          { field: 'model', resizable: true, sortable: true, filter: true },
+          { field: 'price', resizable: true },
+        ];
+
+        const rowData = (() => {
+          const data = [];
+
+          for (let i = 0; i < 500; i++) {
+            data.push({ make: 'Toyota', model: 'Celica', price: 35000, checked: false });
+          }
+
+          return data;
+        })();
+
+        const gridOptions = {
+          columnDefs: columnDefs,
+          rowData: rowData,
+          rowSelection: 'multiple',
+          suppressCellFocus: true,
+          pagination: true,
+        };
+
+        const gridDiv = document.querySelector('div.ag-theme-ix');
+        const grid = new agGrid.Grid(gridDiv, gridOptions);
+      })();
+    </script>
+  </body>
+</html>

packages/aggrid/src/utils/test/index.ts → packages/aggrid/src/components/tests/utils/test/index.ts

@@ -8,3 +8,4 @@
  */
 
 export * from './page';
+export { themeSwitcher } from './theme-switcher';

packages/aggrid/src/utils/test/page.ts → packages/aggrid/src/components/tests/utils/test/page.ts

@@ -16,7 +16,7 @@ async function extendPageFixture(page: Page, testInfo: TestInfo) {
     type: theme,
   });
   page.goto = async (url: string, options) => {
-    const response = await originalGoto(`http://127.0.0.1:3333${url}?theme=${theme}`, options);
+    const response = await originalGoto(`http://127.0.0.1:8080/src/components/tests/${url}?theme=${theme}`, options);
     // Inital timeout for webKit to render Web Components
     await page.waitForTimeout(1000);
     return response;

packages/aggrid/stencil.config.ts

@@ -9,6 +9,7 @@
 
 import { Config } from '@stencil/core';
 import { sass } from '@stencil/sass';
+
 export const config: Config = {
   namespace: 'ix-aggrid',
   globalStyle: './scss/ix-aggrid.scss',
@@ -21,9 +22,6 @@ export const config: Config = {
     {
       type: 'dist-custom-elements',
     },
-    {
-      type: 'docs-readme',
-    },
     {
       type: 'www',
       serviceWorker: null,

packages/aggrid/tsconfig.json

@@ -15,8 +15,8 @@
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@utils/test": ["src/utils/test"],
-      "@utils/test/*": ["src/utils/test/*"]
+      "@utils/test": ["src/components/tests/utils/test"],
+      "@utils/test/*": ["src/components/tests/utils/test/*"]
     }
   },
   "include": ["src"],