From dbc01241b4acb2753438b0bb6560dca18a274c33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gon=C3=A7alo=20Ferreira?= <63813420+goncalosard@users.noreply.github.com> Date: Mon, 5 Dec 2022 07:11:26 +0000 Subject: [PATCH] fix(core): radio button indeterminate (#213) Co-authored-by: Daniel Leroux --- .../core/scss/components/_radiobuttons.scss | 40 ------------------ .../radiobutton/test/no-checked/index.html | 27 ++++++++++++ .../radiobutton/test/radiobutton.e2e.ts | 5 +++ ...-1-chromium---theme-classic-dark-linux.png | Bin 0 -> 10158 bytes ...1-chromium---theme-classic-light-linux.png | Bin 0 -> 9983 bytes 5 files changed, 32 insertions(+), 40 deletions(-) create mode 100644 packages/core/src/components/radiobutton/test/no-checked/index.html create mode 100644 packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-dark-linux.png create mode 100644 packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-light-linux.png diff --git a/packages/core/scss/components/_radiobuttons.scss b/packages/core/scss/components/_radiobuttons.scss index 1bd98701240..6f42ec28f20 100755 --- a/packages/core/scss/components/_radiobuttons.scss +++ b/packages/core/scss/components/_radiobuttons.scss @@ -133,46 +133,6 @@ opacity: 0.5; } - [type='radio']:indeterminate { - & + label:after { - content: ''; - position: relative; - display: block; - width: 0.875rem; - height: 0.0625rem; - border-bottom: 0.125rem solid var(--theme-radiobtn-mixed--color); - transform: translateX(0.3125rem) translateY(-0.8rem); - } - - & + label:before { - background-color: var(--theme-radiobtn-mixed--background); - border: var(--theme-radiobtn--border-thickness) solid - var(--theme-radiobtn-mixed--border-color); - } - - &:hover + label:before { - background-color: var(--theme-radiobtn-mixed--background--hover); - border: var(--theme-radiobtn--border-thickness) solid - var(--theme-radiobtn-mixed--border-color--hover); - } - - &:active + label:before { - background-color: var(--theme-radiobtn-mixed--background--active); - border: var(--theme-radiobtn--border-thickness) solid - var(--theme-radiobtn-mixed--border-color--active); - } - - &:disabled + label::before { - background-color: var(--theme-radiobtn-mixed--background--disabled); - border: var(--theme-radiobtn--border-thickness) solid - var(--theme-radiobtn-mixed--border-color--disabled); - } - - &:disabled + label::after { - border-color: var(--theme-radiobtn-mixed--color--disabled); - } - } - [type='radio']:disabled + label { color: var(--theme-radiobtn-label--color--disabled); } diff --git a/packages/core/src/components/radiobutton/test/no-checked/index.html b/packages/core/src/components/radiobutton/test/no-checked/index.html new file mode 100644 index 00000000000..a2f98d702cd --- /dev/null +++ b/packages/core/src/components/radiobutton/test/no-checked/index.html @@ -0,0 +1,27 @@ + + + + + + + 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 7feec068ccd..55c951d9f44 100644 --- a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts +++ b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts @@ -39,4 +39,9 @@ regressionTest.describe('radiobutton', () => { expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); + + regressionTest('no checked', async ({ page }) => { + await page.goto(`radiobutton/test/no-checked`); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-dark-linux.png b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..00bdb88283f7c89cf2a159bd7ef2f04d8dc11a8c GIT binary patch literal 10158 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

-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 T51QXp?+87A>4&OwH}3xrTB}sX literal 0 HcmV?d00001 diff --git a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-light-linux.png b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-light-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..df1c19ec4a4c015a6e8cbf6577d463c62147c6fa GIT binary patch literal 9983 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