fix(core): radio button indeterminate (#213)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Dec 5, 2022 · dbc0124 · dbc0124
1 parent 0408cd4
commit dbc0124
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 40 deletions.
diff --git 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
@@ -0,0 +1,27 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <input id="checkbox_1_1" name="group_1" type="radio" />
+    <label for="checkbox_1_1"> Option 1 </label>
+
+    <input id="checkbox_1_2" name="group_1" type="radio" />
+    <label for="checkbox_1_2"> Option 2 </label>
+
+    <input disabled id="checkbox_1_3" name="group_1" type="radio" />
+    <label for="checkbox_1_3"> Option 3 </label>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git 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/...e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-dark-linux.png b/...e.ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-dark-linux.png
diff --git a/....ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-light-linux.png b/....ts-snapshots/radiobutton-no-checked-1-chromium---theme-classic-light-linux.png