fix: do not show required indicator when checkbox has no label (#8294) (

#8296) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Dec 7, 2024 · 059142a · 059142a
1 parent 27dbb99
commit 059142a
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 0 deletions.
diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js
@@ -50,6 +50,12 @@ describe('checkbox', () => {
     await visualDiff(div, 'required');
   });
 
+  it('required empty', async () => {
+    element.required = true;
+    element.label = '';
+    await visualDiff(div, 'required-empty');
+  });
+
   it('invalid focus-ring', async () => {
     element.required = true;
     element.invalid = true;

diff --git a/...ages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required-empty.png b/...ages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required-empty.png
diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js
@@ -49,6 +49,12 @@ describe('checkbox', () => {
     await visualDiff(div, 'required');
   });
 
+  it('required empty', async () => {
+    element.required = true;
+    element.label = '';
+    await visualDiff(div, 'required-empty');
+  });
+
   it('error message', async () => {
     element.errorMessage = 'This field is required';
     element.required = true;

diff --git a/.../checkbox/test/visual/material/screenshots/checkbox/baseline/required-empty.png b/.../checkbox/test/visual/material/screenshots/checkbox/baseline/required-empty.png
diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -241,6 +241,10 @@ registerStyles(
       text-align: center;
     }
 
+    :host(:not([has-label])) [part='required-indicator'] {
+      display: none;
+    }
+
     /* Invalid */
     :host([invalid]) {
       --vaadin-input-field-border-color: var(--lumo-error-color);

diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -161,6 +161,10 @@ registerStyles(
       color: var(--material-error-text-color);
     }
 
+    :host(:not([has-label])) [part='required-indicator'] {
+      display: none;
+    }
+
     [part='error-message'],
     [part='helper-text'] {
       font-size: 0.75em;