#1404 renable playwright VR tests

.github/workflows/test-ui.yml

@@ -24,28 +24,28 @@ jobs:
         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: 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
 
   cypress-component:
     runs-on: ubuntu-latest

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",

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 {

vuu-ui/packages/vuu-ui-controls/src/icon-button/Icon.css

@@ -1,3 +1,14 @@
 .vuuIcon {
-    --vuu-icon-left: 0;
-}
+  --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);
+}

vuu-ui/playwright/tests/button.test.ts

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 
 test("test", async ({ page }) => {
-  const themes: string[] = ["salt", "vuu"];
+  const themes: string[] = ["salt-theme", "vuu-theme"];
   const themeModes: string[] = ["light", "dark"];
   const densities: string[] = ["high", "medium", "low", "touch"];
 

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";

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";