diff --git a/.github/actions/setup-vuu-ui/action.yml b/.github/actions/setup-vuu-ui/action.yml index 2fc62f275..807427ab4 100644 --- a/.github/actions/setup-vuu-ui/action.yml +++ b/.github/actions/setup-vuu-ui/action.yml @@ -2,18 +2,18 @@ name: Setup Vuu UI description: "Installs NodeJS and project dependencies" runs: - using: 'composite' + using: "composite" steps: - name: Install NodeJS - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version: "18" + node-version: 18 - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@v4 with: path: ~/.npm key: npm-${{ hashFiles('package-lock.json') }} restore-keys: npm- - name: Install dependencies shell: bash - run: cd ./vuu-ui && npm install + run: cd ./vuu-ui && npm ci diff --git a/.github/workflows/test-ui.yml b/.github/workflows/test-ui.yml index a34b9e753..02e624811 100644 --- a/.github/workflows/test-ui.yml +++ b/.github/workflows/test-ui.yml @@ -8,7 +8,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install Node & dependencies uses: ./.github/actions/setup-vuu-ui - run: cd ./vuu-ui && npm run build:worker @@ -19,39 +19,41 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install Node & dependencies uses: ./.github/actions/setup-vuu-ui - run: cd ./vuu-ui && npm run test:vite - # playwright: - # timeout-minutes: 10 - # runs-on: ubuntu-latest - # steps: - # - name: Checkout - # uses: actions/checkout@v3 - # - name: Install Node & dependencies - # uses: ./.github/actions/setup-vuu-ui - # - name: Install Playwright Chromium Browser - # run: cd ./vuu-ui && npx playwright install --with-deps chromium - # - name: Build Showcase - # run: cd ./vuu-ui && npm run showcase:build - # - name: Run tests - # run: | - # cd ./vuu-ui && - # npm run test:playwright - # - uses: actions/upload-artifact@v4 - # if: ${{ !cancelled() }} - # with: - # name: playwright-report - # path: ./vuu-ui/playwright/reports/ - # retention-days: 10 + playwright: + timeout-minutes: 10 + runs-on: macos-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Install Node & dependencies + uses: ./.github/actions/setup-vuu-ui + - name: Install Playwright Chromium Browser + run: cd ./vuu-ui && npx playwright install --with-deps chromium + - name: Build Showcase + run: cd ./vuu-ui && npm run showcase:build + - name: Launch Showcase + run: cd ./vuu-ui && npm run showcase:preview& + - name: Run tests + run: | + cd ./vuu-ui && + npm run test:playwright + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report-vr + path: ./vuu-ui/playwright/reports/ + retention-days: 10 cypress-component: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install Node & dependencies uses: ./.github/actions/setup-vuu-ui - name: Build Worker @@ -76,7 +78,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install Node & dependencies uses: ./.github/actions/setup-vuu-ui - name: Build Vuu Libraries diff --git a/.gitignore b/.gitignore index 28982b593..a6ec28523 100644 --- a/.gitignore +++ b/.gitignore @@ -17,9 +17,10 @@ node_modules yarn-debug.log* yarn-error.log* -/vuu-ui/showcase/src/examples/**/*.js /vuu-ui/cypress/screenshots -/vuu-ui/themes/tar-theme +/vuu-ui/playwright/reports +/vuu-ui/playwright/regression-test-results +/vuu-ui/showcase/src/examples/**/*.js deployed_apps dist diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json index 46dfb62a9..0d7e60b63 100644 --- a/vuu-ui/package-lock.json +++ b/vuu-ui/package-lock.json @@ -13,8 +13,7 @@ "sample-apps/**", "showcase", "tools/esbuild-plugin-inline-css", - "tools/vuu-showcase", - "themes/**" + "tools/vuu-showcase" ], "dependencies": { "@salt-ds/core": "1.27.1", @@ -36,7 +35,7 @@ }, "devDependencies": { "@lezer/generator": "^1.2.2", - "@playwright/test": "^1.43.0", + "@playwright/test": "1.45.0", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", @@ -1668,18 +1667,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz", - "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz", + "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==", "dev": true, "dependencies": { - "playwright": "1.43.0" + "playwright": "1.45.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@remix-run/router": { @@ -3077,10 +3076,6 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, - "node_modules/@vuu-themes/tar-theme": { - "resolved": "themes/tar-theme", - "link": true - }, "node_modules/@zeit/schemas": { "version": "2.29.0", "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz", @@ -9834,33 +9829,33 @@ } }, "node_modules/playwright": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz", - "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz", + "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==", "dev": true, "dependencies": { - "playwright-core": "1.43.0" + "playwright-core": "1.45.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" }, "optionalDependencies": { "fsevents": "2.3.2" } }, "node_modules/playwright-core": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz", - "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz", + "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==", "dev": true, "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/playwright/node_modules/fsevents": { @@ -13696,6 +13691,7 @@ "@finos/vuu-popups": "0.0.26", "@finos/vuu-table": "0.0.26", "@finos/vuu-utils": "0.0.26", + "@floating-ui/react": "0.26.5", "@salt-ds/core": "1.27.1", "@salt-ds/icons": "1.9.1", "@salt-ds/styles": "0.2.1", @@ -13712,6 +13708,20 @@ "react-dom": ">=17.0.2" } }, + "packages/vuu-ui-controls/node_modules/@floating-ui/react": { + "version": "0.26.5", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.5.tgz", + "integrity": "sha512-LJeSQa+yOwV0Tdpc/C3Vr92QMrwRqRMTk4yOwsRJKc57x3Lcw317GE0EV+ECM7+Z89yEAPBe7nzbDEWfkWCrBA==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.5", + "@floating-ui/utils": "^0.2.0", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "packages/vuu-utils": { "name": "@finos/vuu-utils", "version": "0.0.26", @@ -13931,418 +13941,13 @@ "themes/tar-theme": { "name": "@vuu-themes/tar-theme", "version": "0.0.26", + "extraneous": true, "license": "Apache-2.0", "devDependencies": { "esbuild": "0.20.2", "prettier": "2.8.4" } }, - "themes/tar-theme/node_modules/@esbuild/aix-ppc64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", - "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/android-arm": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz", - "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/android-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz", - "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/android-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz", - "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/darwin-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz", - "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/darwin-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz", - "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/freebsd-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz", - "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/freebsd-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz", - "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-arm": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz", - "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz", - "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-ia32": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz", - "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-loong64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz", - "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-mips64el": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz", - "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-ppc64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz", - "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-riscv64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz", - "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-s390x": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz", - "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/linux-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz", - "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/netbsd-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz", - "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/openbsd-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz", - "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/sunos-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz", - "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/win32-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz", - "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/win32-ia32": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz", - "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/@esbuild/win32-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz", - "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "themes/tar-theme/node_modules/esbuild": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", - "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", - "dev": true, - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.20.2", - "@esbuild/android-arm": "0.20.2", - "@esbuild/android-arm64": "0.20.2", - "@esbuild/android-x64": "0.20.2", - "@esbuild/darwin-arm64": "0.20.2", - "@esbuild/darwin-x64": "0.20.2", - "@esbuild/freebsd-arm64": "0.20.2", - "@esbuild/freebsd-x64": "0.20.2", - "@esbuild/linux-arm": "0.20.2", - "@esbuild/linux-arm64": "0.20.2", - "@esbuild/linux-ia32": "0.20.2", - "@esbuild/linux-loong64": "0.20.2", - "@esbuild/linux-mips64el": "0.20.2", - "@esbuild/linux-ppc64": "0.20.2", - "@esbuild/linux-riscv64": "0.20.2", - "@esbuild/linux-s390x": "0.20.2", - "@esbuild/linux-x64": "0.20.2", - "@esbuild/netbsd-x64": "0.20.2", - "@esbuild/openbsd-x64": "0.20.2", - "@esbuild/sunos-x64": "0.20.2", - "@esbuild/win32-arm64": "0.20.2", - "@esbuild/win32-ia32": "0.20.2", - "@esbuild/win32-x64": "0.20.2" - } - }, "tools/css-inline-plugin": { "version": "1.0.0", "extraneous": true, @@ -15377,10 +14982,23 @@ "@finos/vuu-table": "0.0.26", "@finos/vuu-table-types": "0.0.26", "@finos/vuu-utils": "0.0.26", + "@floating-ui/react": "0.26.5", "@salt-ds/core": "1.27.1", "@salt-ds/icons": "1.9.1", "@salt-ds/styles": "0.2.1", "@salt-ds/window": "0.1.1" + }, + "dependencies": { + "@floating-ui/react": { + "version": "0.26.5", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.5.tgz", + "integrity": "sha512-LJeSQa+yOwV0Tdpc/C3Vr92QMrwRqRMTk4yOwsRJKc57x3Lcw317GE0EV+ECM7+Z89yEAPBe7nzbDEWfkWCrBA==", + "requires": { + "@floating-ui/react-dom": "^2.0.5", + "@floating-ui/utils": "^0.2.0", + "tabbable": "^6.0.1" + } + } } }, "@finos/vuu-utils": { @@ -15696,12 +15314,12 @@ } }, "@playwright/test": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz", - "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz", + "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==", "dev": true, "requires": { - "playwright": "1.43.0" + "playwright": "1.45.0" } }, "@remix-run/router": { @@ -16699,207 +16317,6 @@ } } }, - "@vuu-themes/tar-theme": { - "version": "file:themes/tar-theme", - "requires": { - "esbuild": "0.20.2", - "prettier": "2.8.4" - }, - "dependencies": { - "@esbuild/aix-ppc64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", - "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==", - "dev": true, - "optional": true - }, - "@esbuild/android-arm": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz", - "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==", - "dev": true, - "optional": true - }, - "@esbuild/android-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz", - "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==", - "dev": true, - "optional": true - }, - "@esbuild/android-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz", - "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==", - "dev": true, - "optional": true - }, - "@esbuild/darwin-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz", - "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==", - "dev": true, - "optional": true - }, - "@esbuild/darwin-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz", - "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==", - "dev": true, - "optional": true - }, - "@esbuild/freebsd-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz", - "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==", - "dev": true, - "optional": true - }, - "@esbuild/freebsd-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz", - "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==", - "dev": true, - "optional": true - }, - "@esbuild/linux-arm": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz", - "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==", - "dev": true, - "optional": true - }, - "@esbuild/linux-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz", - "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==", - "dev": true, - "optional": true - }, - "@esbuild/linux-ia32": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz", - "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==", - "dev": true, - "optional": true - }, - "@esbuild/linux-loong64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz", - "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==", - "dev": true, - "optional": true - }, - "@esbuild/linux-mips64el": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz", - "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==", - "dev": true, - "optional": true - }, - "@esbuild/linux-ppc64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz", - "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==", - "dev": true, - "optional": true - }, - "@esbuild/linux-riscv64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz", - "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==", - "dev": true, - "optional": true - }, - "@esbuild/linux-s390x": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz", - "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==", - "dev": true, - "optional": true - }, - "@esbuild/linux-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz", - "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==", - "dev": true, - "optional": true - }, - "@esbuild/netbsd-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz", - "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==", - "dev": true, - "optional": true - }, - "@esbuild/openbsd-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz", - "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==", - "dev": true, - "optional": true - }, - "@esbuild/sunos-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz", - "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==", - "dev": true, - "optional": true - }, - "@esbuild/win32-arm64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz", - "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==", - "dev": true, - "optional": true - }, - "@esbuild/win32-ia32": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz", - "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==", - "dev": true, - "optional": true - }, - "@esbuild/win32-x64": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz", - "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==", - "dev": true, - "optional": true - }, - "esbuild": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", - "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", - "dev": true, - "requires": { - "@esbuild/aix-ppc64": "0.20.2", - "@esbuild/android-arm": "0.20.2", - "@esbuild/android-arm64": "0.20.2", - "@esbuild/android-x64": "0.20.2", - "@esbuild/darwin-arm64": "0.20.2", - "@esbuild/darwin-x64": "0.20.2", - "@esbuild/freebsd-arm64": "0.20.2", - "@esbuild/freebsd-x64": "0.20.2", - "@esbuild/linux-arm": "0.20.2", - "@esbuild/linux-arm64": "0.20.2", - "@esbuild/linux-ia32": "0.20.2", - "@esbuild/linux-loong64": "0.20.2", - "@esbuild/linux-mips64el": "0.20.2", - "@esbuild/linux-ppc64": "0.20.2", - "@esbuild/linux-riscv64": "0.20.2", - "@esbuild/linux-s390x": "0.20.2", - "@esbuild/linux-x64": "0.20.2", - "@esbuild/netbsd-x64": "0.20.2", - "@esbuild/openbsd-x64": "0.20.2", - "@esbuild/sunos-x64": "0.20.2", - "@esbuild/win32-arm64": "0.20.2", - "@esbuild/win32-ia32": "0.20.2", - "@esbuild/win32-x64": "0.20.2" - } - } - } - }, "@zeit/schemas": { "version": "2.29.0", "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.29.0.tgz", @@ -21815,13 +21232,13 @@ } }, "playwright": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz", - "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz", + "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.43.0" + "playwright-core": "1.45.0" }, "dependencies": { "fsevents": { @@ -21834,9 +21251,9 @@ } }, "playwright-core": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz", - "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz", + "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==", "dev": true }, "postcss": { diff --git a/vuu-ui/package.json b/vuu-ui/package.json index 945c5d4cc..39c607a1d 100644 --- a/vuu-ui/package.json +++ b/vuu-ui/package.json @@ -41,6 +41,7 @@ "showcase:build": "npm run build:worker && cd showcase && node scripts/build.mjs", "test:cypress": "npm run build:worker && cypress run --component --browser chrome --headless", "test:cypress:local": "cypress open --component --browser chrome", + "test:playwright": "cd playwright && playwright test", "test:vite": "npm run build:worker && vitest run", "bump": "node ./scripts/version.mjs", "pub": "node ./scripts/publish.mjs", @@ -64,7 +65,7 @@ }, "devDependencies": { "@lezer/generator": "^1.2.2", - "@playwright/test": "^1.43.0", + "@playwright/test": "1.45.0", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", diff --git a/vuu-ui/packages/vuu-theme/css/components/button.css b/vuu-ui/packages/vuu-theme/css/components/button.css index 9c54272ef..df6ac0d76 100644 --- a/vuu-ui/packages/vuu-theme/css/components/button.css +++ b/vuu-ui/packages/vuu-theme/css/components/button.css @@ -6,26 +6,6 @@ .saltButton { gap: var(--salt-spacing-200); white-space: nowrap; - - .vuuIcon { - --vuu-icon-color: var(--vuuButtonIcon-color, var(--button-text-color)); - } - } - - .saltButton:active:not(:disabled) { - --vuu-icon-color: var(--button-text-color-active); - } - - .saltButton:hover:not(.saltButton-disabled, .saltButton-active, :active) { - --vuu-icon-color: var(--button-text-color-hover); - } - - .saltButton-active { - --vuu-icon-color: var(--button-text-color-active); - } - - .saltButton-disabled { - --vuu-icon-color: var(--button-text-color-disabled); } .saltButton-primary { diff --git a/vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.css b/vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.css index 334c28742..5e0dcf42e 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.css +++ b/vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.css @@ -1,3 +1,14 @@ .vuuIcon { - --vuu-icon-left: 0; -} \ No newline at end of file + --vuu-icon-left: 0; +} + +.saltButton .vuuIcon { + --vuu-icon-color: var(--button-text-color); +} +.saltButton-active .vuuIcon { + --vuu-icon-color: var(--button-text-color-active); +} + +.saltButton-disabled { + --vuu-icon-color: var(--button-text-color-disabled); +} diff --git a/vuu-ui/playwright.config.ts b/vuu-ui/playwright/playwright.config.ts similarity index 76% rename from vuu-ui/playwright.config.ts rename to vuu-ui/playwright/playwright.config.ts index 082b4c6be..55db4a517 100644 --- a/vuu-ui/playwright.config.ts +++ b/vuu-ui/playwright/playwright.config.ts @@ -1,7 +1,8 @@ import { defineConfig, devices } from "@playwright/test"; export default defineConfig({ - testDir: "./playwright/tests", + testDir: "./visual-regression-tests", + snapshotPathTemplate: "./snapshots/{arg}{ext}", /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ @@ -11,7 +12,7 @@ export default defineConfig({ /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: [["html", { outputFolder: "./playwright/reports" }]], + reporter: [["html", { outputFolder: "./reports" }]], /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ @@ -25,9 +26,5 @@ export default defineConfig({ use: { ...devices["Desktop Chrome"] }, }, ], - snapshotPathTemplate: "./playwright/snapshots/{testFilePath}/{arg}{ext}", - outputDir: "./playwright/test-results", - webServer: { - command: "npm run showcase:preview", - }, + outputDir: "./visual-regression-results", }); diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-high.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-high.png new file mode 100644 index 000000000..2d54efb31 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-low.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-low.png new file mode 100644 index 000000000..f11cde790 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-medium.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-medium.png new file mode 100644 index 000000000..d6b23bd8c Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-touch.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-touch.png new file mode 100644 index 000000000..441d007f5 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-dark-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-high.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-high.png new file mode 100644 index 000000000..ae9b274c1 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-low.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-low.png new file mode 100644 index 000000000..89a415ca0 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-medium.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-medium.png new file mode 100644 index 000000000..bbf1d1ac6 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-touch.png b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-touch.png new file mode 100644 index 000000000..09f6fdbd3 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/salt-light-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-high.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-high.png new file mode 100644 index 000000000..7a5db83a4 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-low.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-low.png new file mode 100644 index 000000000..4b88df5a6 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-medium.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-medium.png new file mode 100644 index 000000000..c1ed55c25 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-touch.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-touch.png new file mode 100644 index 000000000..234ee7b61 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-dark-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-high.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-high.png new file mode 100644 index 000000000..82c78d0c7 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-low.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-low.png new file mode 100644 index 000000000..7ac0c8718 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-medium.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-medium.png new file mode 100644 index 000000000..8c2fad010 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-touch.png b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-touch.png new file mode 100644 index 000000000..5da0921c7 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/icon-only/vuu-light-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-high.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-high.png new file mode 100644 index 000000000..0e30a8575 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-low.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-low.png new file mode 100644 index 000000000..1d9707671 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-medium.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-medium.png new file mode 100644 index 000000000..352f143b1 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-touch.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-touch.png new file mode 100644 index 000000000..57d8b0960 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-dark-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-light-high.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-high.png new file mode 100644 index 000000000..aa153be52 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-light-low.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-low.png new file mode 100644 index 000000000..864c3c961 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-light-medium.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-medium.png new file mode 100644 index 000000000..90e70ef1f Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/salt-light-touch.png b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-touch.png new file mode 100644 index 000000000..9897f0d01 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/salt-light-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-high.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-high.png new file mode 100644 index 000000000..9aa73cba6 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-low.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-low.png new file mode 100644 index 000000000..51e4d3f41 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-medium.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-medium.png new file mode 100644 index 000000000..8043d6ddb Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-touch.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-touch.png new file mode 100644 index 000000000..d46522b53 Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-dark-touch.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-high.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-high.png new file mode 100644 index 000000000..712e42c8d Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-high.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-low.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-low.png new file mode 100644 index 000000000..b651a4b9e Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-low.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-medium.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-medium.png new file mode 100644 index 000000000..b6ff410de Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-medium.png differ diff --git a/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-touch.png b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-touch.png new file mode 100644 index 000000000..f344d227a Binary files /dev/null and b/vuu-ui/playwright/snapshots/Button/text-only/vuu-light-touch.png differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-high-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-high-density.png deleted file mode 100644 index db229707f..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-high-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-low-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-low-density.png deleted file mode 100644 index 4dd99c0bb..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-low-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-medium-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-medium-density.png deleted file mode 100644 index 4574372f0..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-medium-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-touch-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-touch-density.png deleted file mode 100644 index 30396d66e..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-dark-touch-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-high-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-high-density.png deleted file mode 100644 index 9c2ab6c04..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-high-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-low-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-low-density.png deleted file mode 100644 index f7f97ea50..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-low-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-medium-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-medium-density.png deleted file mode 100644 index 24ee0b338..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-medium-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-touch-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-touch-density.png deleted file mode 100644 index a12ccff0e..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-salt-light-touch-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-high-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-high-density.png deleted file mode 100644 index 356afa988..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-high-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-low-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-low-density.png deleted file mode 100644 index f3d5897fc..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-low-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-medium-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-medium-density.png deleted file mode 100644 index c38c8c902..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-medium-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-touch-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-touch-density.png deleted file mode 100644 index cf52f5a44..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-dark-touch-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-high-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-high-density.png deleted file mode 100644 index a33d79fa1..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-high-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-low-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-low-density.png deleted file mode 100644 index 6eb8c4eb6..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-low-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-medium-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-medium-density.png deleted file mode 100644 index b885abb06..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-medium-density.png and /dev/null differ diff --git a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-touch-density.png b/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-touch-density.png deleted file mode 100644 index 6fb8f093c..000000000 Binary files a/vuu-ui/playwright/snapshots/button.test.ts/ButtonVariations-vuu-light-touch-density.png and /dev/null differ diff --git a/vuu-ui/playwright/tests/button.test.ts b/vuu-ui/playwright/tests/button.test.ts deleted file mode 100644 index bda4c05db..000000000 --- a/vuu-ui/playwright/tests/button.test.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { test, expect } from "@playwright/test"; - -test("test", async ({ page }) => { - const themes: string[] = ["salt", "vuu"]; - const themeModes: string[] = ["light", "dark"]; - const densities: string[] = ["high", "medium", "low", "touch"]; - - for (let i = 0; i < themes.length; i++) { - for (let j = 0; j < themeModes.length; j++) { - for (let k = 0; k < densities.length; k++) { - const queryString = `&theme=${themes[i]}#themeMode=${themeModes[j]},density=${densities[k]}`; - await page.goto( - `http://localhost:4173/salt/Button/ButtonVariations?standalone${queryString}` - ); - await expect(page).toHaveScreenshot( - `ButtonVariations-${themes[i]}-${themeModes[j]}-${densities[k]}-density.png` - ); - } - } - } -}); diff --git a/vuu-ui/playwright/visual-regression-tests/Button.test.ts b/vuu-ui/playwright/visual-regression-tests/Button.test.ts new file mode 100644 index 000000000..73ddd33dd --- /dev/null +++ b/vuu-ui/playwright/visual-regression-tests/Button.test.ts @@ -0,0 +1,45 @@ +import { test, expect } from "@playwright/test"; + +test.describe("Button", () => { + test("text only", async ({ page }) => { + for (const theme of ["vuu", "salt"]) { + for (const themeMode of ["light", "dark"]) { + for (const density of ["high", "medium", "low", "touch"]) { + await page.goto( + `http://localhost:4173/salt/Button/ButtonTextOnly?standalone&theme=${theme}-theme#themeMode=${themeMode},density=${density}` + ); + await page.waitForFunction(() => document.fonts.ready); + await expect(await page.screenshot()).toMatchSnapshot({ + name: [ + "Button", + "text-only", + `${theme}-${themeMode}-${density}.png`, + ], + maxDiffPixelRatio: 0.05, + }); + } + } + } + }); + + test("icon only", async ({ page }) => { + for (const theme of ["vuu", "salt"]) { + for (const themeMode of ["light", "dark"]) { + for (const density of ["high", "medium", "low", "touch"]) { + await page.goto( + `http://localhost:4173/salt/Button/ButtonIconOnly?standalone&theme=${theme}-theme#themeMode=${themeMode},density=${density}` + ); + await page.waitForFunction(() => document.fonts.ready); + await expect(await page.screenshot()).toMatchSnapshot({ + name: [ + "Button", + "icon-only", + `${theme}-${themeMode}-${density}.png`, + ], + maxDiffPixelRatio: 0.05, + }); + } + } + } + }); +}); diff --git a/vuu-ui/showcase/src/examples/salt/Button.examples.tsx b/vuu-ui/showcase/src/examples/salt/Button.examples.tsx index d0d6adb29..efa7b95c1 100644 --- a/vuu-ui/showcase/src/examples/salt/Button.examples.tsx +++ b/vuu-ui/showcase/src/examples/salt/Button.examples.tsx @@ -4,7 +4,7 @@ import { Icon, IconButton } from "@finos/vuu-ui-controls"; let displaySequence = 1; -export const DefaultButton = () => { +export const ButtonTextOnly = () => { const handleClick = () => { console.log("Button click"); }; @@ -14,7 +14,17 @@ export const DefaultButton = () => { ); }; -DefaultButton.displaySequence = displaySequence++; +ButtonTextOnly.displaySequence = displaySequence++; + +export const ButtonIconOnly = () => { + const handleClick = () => { + console.log("Button click"); + }; + return ( + + ); +}; +ButtonIconOnly.displaySequence = displaySequence++; export const IconButtons = () => { return ( diff --git a/vuu-ui/showcase/src/themes/salt-theme.ts b/vuu-ui/showcase/src/themes/salt-theme.ts index d4dc76e41..c64948822 100644 --- a/vuu-ui/showcase/src/themes/salt-theme.ts +++ b/vuu-ui/showcase/src/themes/salt-theme.ts @@ -12,3 +12,5 @@ import "@fontsource/open-sans/700.css"; import "@fontsource/open-sans/700-italic.css"; import "@fontsource/open-sans/800.css"; import "@fontsource/open-sans/800-italic.css"; + +import "@finos/vuu-icons/index.css"; diff --git a/vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts b/vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts index d4dc76e41..c64948822 100644 --- a/vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts +++ b/vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts @@ -12,3 +12,5 @@ import "@fontsource/open-sans/700.css"; import "@fontsource/open-sans/700-italic.css"; import "@fontsource/open-sans/800.css"; import "@fontsource/open-sans/800-italic.css"; + +import "@finos/vuu-icons/index.css";