diff --git a/.github/actions/setup-vuu-ui/action.yml b/.github/actions/setup-vuu-ui/action.yml index 2fc62f2759..1e24543279 100644 --- a/.github/actions/setup-vuu-ui/action.yml +++ b/.github/actions/setup-vuu-ui/action.yml @@ -2,18 +2,20 @@ name: Setup Vuu UI description: "Installs NodeJS and project dependencies" runs: - using: 'composite' + using: "composite" steps: + - name: Checkout + uses: actions/checkout@v4 - 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 a34b9e7532..45e11662e9 100644 --- a/.github/workflows/test-ui.yml +++ b/.github/workflows/test-ui.yml @@ -7,9 +7,7 @@ jobs: lint-and-typecheck: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Install Node & dependencies + - name: Setup uses: ./.github/actions/setup-vuu-ui - run: cd ./vuu-ui && npm run build:worker - run: cd ./vuu-ui && npm run lint @@ -18,41 +16,29 @@ jobs: vitest: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Install Node & dependencies + - name: Setup 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: Setup + uses: ./.github/actions/setup-vuu-ui + - name: Build Showcase + run: cd ./vuu-ui && npm run showcase:build + - name: Launch Showcase + run: cd ./vuu-ui && npm run showcase:preview& + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: cd ./vuu-ui && npm run test:playwright cypress-component: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Install Node & dependencies + - name: Setup uses: ./.github/actions/setup-vuu-ui - name: Build Worker run: cd ./vuu-ui && npm run build:worker @@ -75,9 +61,7 @@ jobs: vuu-app-build: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Install Node & dependencies + - name: Setup uses: ./.github/actions/setup-vuu-ui - name: Build Vuu Libraries run: cd ./vuu-ui && npm run build diff --git a/vuu-ui/package.json b/vuu-ui/package.json index 945c5d4cc2..cc1a98fc25 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", diff --git a/vuu-ui/packages/vuu-theme/css/components/button.css b/vuu-ui/packages/vuu-theme/css/components/button.css index 9c54272ef5..df6ac0d76f 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 334c287429..5e0dcf42e0 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/tests/button.test.ts b/vuu-ui/playwright/tests/button.test.ts index bda4c05dbf..b9d5f00828 100644 --- a/vuu-ui/playwright/tests/button.test.ts +++ b/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"]; diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-high-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-high-density-darwin.png new file mode 100644 index 0000000000..770597b414 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-high-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-low-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-low-density-darwin.png new file mode 100644 index 0000000000..f0b7602bc6 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-low-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-medium-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-medium-density-darwin.png new file mode 100644 index 0000000000..95bb70bab9 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-medium-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-touch-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-touch-density-darwin.png new file mode 100644 index 0000000000..cf7f4fa167 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-dark-touch-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-high-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-high-density-darwin.png new file mode 100644 index 0000000000..5ba6be82d2 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-high-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-low-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-low-density-darwin.png new file mode 100644 index 0000000000..dc9e68886a Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-low-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-medium-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-medium-density-darwin.png new file mode 100644 index 0000000000..865b885872 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-medium-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-touch-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-touch-density-darwin.png new file mode 100644 index 0000000000..0d3936f700 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-salt-theme-light-touch-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-high-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-high-density-darwin.png new file mode 100644 index 0000000000..996cb10fa6 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-high-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-low-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-low-density-darwin.png new file mode 100644 index 0000000000..8bbbe4e951 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-low-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-medium-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-medium-density-darwin.png new file mode 100644 index 0000000000..144ecebeed Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-medium-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-touch-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-touch-density-darwin.png new file mode 100644 index 0000000000..dfa4f3f119 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-dark-touch-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-high-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-high-density-darwin.png new file mode 100644 index 0000000000..d6e385456d Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-high-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-low-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-low-density-darwin.png new file mode 100644 index 0000000000..33ba669300 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-low-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-medium-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-medium-density-darwin.png new file mode 100644 index 0000000000..a86e54bc4c Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-medium-density-darwin.png differ diff --git a/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-touch-density-darwin.png b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-touch-density-darwin.png new file mode 100644 index 0000000000..6b75d97218 Binary files /dev/null and b/vuu-ui/playwright/tests/button.test.ts-snapshots/ButtonVariations-vuu-theme-light-touch-density-darwin.png differ diff --git a/vuu-ui/showcase/src/themes/salt-theme.ts b/vuu-ui/showcase/src/themes/salt-theme.ts index d4dc76e41e..c649488226 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 d4dc76e41e..c649488226 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";