diff --git a/packages/core/playwright.config.ts b/packages/core/playwright.config.ts index 133cdab3c3c..cb5780e36bd 100644 --- a/packages/core/playwright.config.ts +++ b/packages/core/playwright.config.ts @@ -37,6 +37,7 @@ function buildProjectsWithThemes() { /** * See https://playwright.dev/docs/test-configuration. */ +/** @type {import('@playwright/test').PlaywrightTestConfig} */ const config: PlaywrightTestConfig = { testMatch: '*.e2e.ts', /* Maximum time one test can run for. */ @@ -55,7 +56,7 @@ const config: PlaywrightTestConfig = { /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, + workers: 10, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss index 12d2ac240c2..79b4b44a2f7 100755 --- a/packages/core/scss/components/_checkboxes.scss +++ b/packages/core/scss/components/_checkboxes.scss @@ -29,9 +29,8 @@ [type='checkbox']:not(:checked) + label, [type='checkbox']:checked + label { position: relative; - display: flex; - align-items: center; - line-height: $default-space; + display: inline-flex; + align-items: flex-start; user-select: none; color: var(--theme-checkbox-label--color); @@ -45,6 +44,10 @@ content: ''; width: $size; height: $size; + min-width: $size; + min-height: $size; + max-width: $size; + max-height: $size; float: left; margin-right: $small-space; @@ -110,8 +113,7 @@ border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color); border-left: 0.0625rem solid var(--theme-checkbox-checked--color); position: absolute; - top: 0.3rem; - left: 0.35rem; + margin: 0.3125rem 0.3125rem 0.1875rem; transform: rotate(-53deg) scale(2); } @@ -151,8 +153,7 @@ height: 0.125rem; border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color); position: absolute; - top: $small-space; - left: $tiny-space; + margin: 0.5rem 0 0 0.25rem; } & + label:before { diff --git a/packages/core/scss/components/_radiobuttons.scss b/packages/core/scss/components/_radiobuttons.scss index 6f42ec28f20..aa2af16f1ff 100755 --- a/packages/core/scss/components/_radiobuttons.scss +++ b/packages/core/scss/components/_radiobuttons.scss @@ -20,8 +20,9 @@ [type='radio']:not(:checked) + label, [type='radio']:checked + label { + display: inline-flex; + align-items: flex-start; position: relative; - line-height: $size; user-select: none; color: var(--theme-radiobtn-label--color); @@ -36,6 +37,10 @@ content: ''; width: $size; height: $size; + min-width: $size; + min-height: $size; + max-width: $size; + max-height: $size; float: left; margin-right: $small-space; diff --git a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-dark-linux.png index 915ec6dfe21..4be72248683 100644 Binary files a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-light-linux.png index bae8830747f..9c47d26719c 100644 Binary files a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-light-linux.png and b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-basic-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-dark-linux.png index 2fa8892421b..c7b1a066cbe 100644 Binary files a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-dark-linux.png and b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-light-linux.png index 61606642733..bbc92219205 100644 Binary files a/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-light-linux.png and b/packages/core/src/components/checkbox/test/checkbox.e2e.ts-snapshots/checkbox-indeterminate-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/components/checkbox/test/long-text/index.html b/packages/core/src/components/checkbox/test/long-text/index.html new file mode 100644 index 00000000000..fe778fb6dd9 --- /dev/null +++ b/packages/core/src/components/checkbox/test/long-text/index.html @@ -0,0 +1,52 @@ + + + + + + + Stencil Component Starter + + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx index f75c4d6c966..e8e54b43cf1 100644 --- a/packages/core/src/components/my-component/my-component.tsx +++ b/packages/core/src/components/my-component/my-component.tsx @@ -16,6 +16,32 @@ import { Component, h, Host } from '@stencil/core'; }) export class MyComponent { render() { - return ; + return ( + + { + r.indeterminate = true; + }} + /> + + + + + + + + + + + + ); } } diff --git a/packages/core/src/components/radiobutton/test/long-text/index.html b/packages/core/src/components/radiobutton/test/long-text/index.html new file mode 100644 index 00000000000..2bbee003072 --- /dev/null +++ b/packages/core/src/components/radiobutton/test/long-text/index.html @@ -0,0 +1,38 @@ + + + + + + + Stencil Component Starter + + +
+ + + + + + + + +
+ + + diff --git a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts index 55c951d9f44..bb8f81f05d4 100644 --- a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts +++ b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts @@ -44,4 +44,9 @@ regressionTest.describe('radiobutton', () => { await page.goto(`radiobutton/test/no-checked`); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); + + regressionTest('long text', async ({ page }) => { + await page.goto(`radiobutton/test/long-text`); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..3976667186c Binary files /dev/null and b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..cf56245db3a Binary files /dev/null and b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-long-text-1-chromium---theme-classic-light-linux.png differ