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

Author: web-padawan

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;

packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required-empty.png

@@ -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;

packages/checkbox/test/visual/material/checkbox.test.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);

packages/checkbox/test/visual/material/screenshots/checkbox/baseline/required-empty.png

@@ -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;