add delay to chromatic snapshots (#2599)

Ag grid theme - add cypress tests (#2614)

[Ag Grid Theme] test UITK theme (#2699)

[Ag Grid Theme] Ag grid v30 - no sass (#2661)

Co-authored-by: Josh Wooding <[email protected]>

use content characteristic

Create tasty-trains-cover.md

Update tasty-trains-cover.md

fixes

AG Grid Theme site docs (#2796)

Update build.mjs

Update package.json

Ag grid test range selection (#2827)

Ag grid theme tooltip test (#2654)

[AG Grid Theme] Update icons (#2849)

fix editable cell bug

Fixed missing padding and focus ring on focused editable cell.
Fixed wrong background and missing corner flag when editable cell loses focus.

Update salt-ag-grid-theme.css

Update salt-ag-grid-theme.css

.changeset/plenty-hotels-obey.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed Tooltip breaking when used inside a Form Field with an invalid value passed to the `validationStatus` prop.

.changeset/tasty-trains-cover.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/ag-grid-theme": patch
+---
+
+AG Grid Theme is now supporting AG Grid v29 and v30.

.github/workflows/chromatic.yml

@@ -23,8 +23,6 @@ jobs:
           cache: "yarn"
       - name: Install dependencies
         run: yarn
-      - name: Build ag grid theme
-        run: yarn build:ag-grid-theme
       - name: Bundle css
         run: yarn bundle:css
         # 👇 Adds Chromatic as a step in the workflow

cypress.config.ts

@@ -9,6 +9,7 @@ import { version as reactVersion } from "react";
 // @ts-ignore
 import installCoverageTask from "@cypress/code-coverage/task";
 import { cssInline } from "css-inline-plugin";
+import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 let viteConfig: UserConfig = {
   plugins: [react(), tsconfigPaths(), IstanbulPlugin(), cssInline()],
@@ -59,8 +60,13 @@ export default defineConfig({
   viewportWidth: 1280,
   viewportHeight: 1024,
   video: false,
+  env: {
+    pluginVisualRegressionMaxDiffConfig: { threshold: 0.1 },
+    pluginVisualRegressionDiffConfig: { threshold: 0.1 },
+  },
   component: {
     setupNodeEvents(on, config) {
+      initPlugin(on, config);
       installCoverageTask(on, config);
       //Setting up a log task to allow logging to the console during an axe test because console.log() does not work directly in a test
       on("task", {
@@ -70,6 +76,7 @@ export default defineConfig({
           return null;
         },
       });
+
       return config;
     },
     devServer: {

cypress/support/commands.tsx

@@ -7,6 +7,7 @@ import { PerformanceResult, PerformanceTester } from "./PerformanceTester";
 import { ReactNode } from "react";
 import { SaltProvider } from "@salt-ds/core";
 import { AnnouncementListener } from "./AnnouncementListener";
+import "@frsource/cypress-plugin-visual-regression-diff";
 
 const SupportedThemeModeValues = ["light", "dark"] as const;
 type SupportedThemeMode = (typeof SupportedThemeModeValues)[number];
@@ -153,6 +154,20 @@ Cypress.Commands.add("paste", { prevSubject: "element" }, (input, value) => {
   }
 });
 
+Cypress.Screenshot.defaults({
+  onBeforeScreenshot($el) {
+    // turn off pointer events for everything in the body element
+    // @ts-ignore
+    document.querySelector("body").style.pointerEvents = "none";
+  },
+
+  onAfterScreenshot($el, props) {
+    // restore default pointer event behavior
+    // @ts-ignore
+    document.querySelector("body").style.pointerEvents = "initial";
+  },
+});
+
 // Workaround for an issue in Cypress, where ResizeObserver fails with the message
 // ResizeObserver loop limit exceeded
 // Seems to occur for us in Cypress but never in browser in normal use

package.json

@@ -54,6 +54,7 @@
     "@faker-js/faker": "^8.0.0",
     "@fontsource/open-sans": "^4.5.13",
     "@fontsource/pt-mono": "^5.0.12",
+    "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@mswjs/data": "^0.14.0",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-actions": "^7.4.5",
@@ -81,9 +82,9 @@
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "@vitejs/plugin-react": "^4.1.0",
-    "ag-grid-community": "^28.2.1",
-    "ag-grid-enterprise": "^28.2.1",
-    "ag-grid-react": "^28.2.1",
+    "ag-grid-community": "^30.2.0",
+    "ag-grid-enterprise": "^30.2.0",
+    "ag-grid-react": "^30.2.0",
     "axe-core": "^4.9.0",
     "chromatic": "^10.2.0",
     "ci-info": "^3.3.1",