From 059142ad1065f654a814db7f7ff70a60231a0246 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Sat, 7 Dec 2024 17:12:32 +0100
Subject: [PATCH] fix: do not show required indicator when checkbox has no
 label (#8294) (#8296)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 .../checkbox/test/visual/lumo/checkbox.test.js    |   6 ++++++
 .../checkbox/baseline/required-empty.png          | Bin 0 -> 278 bytes
 .../test/visual/material/checkbox.test.js         |   6 ++++++
 .../checkbox/baseline/required-empty.png          | Bin 0 -> 256 bytes
 .../checkbox/theme/lumo/vaadin-checkbox-styles.js |   4 ++++
 .../theme/material/vaadin-checkbox-styles.js      |   4 ++++
 6 files changed, 20 insertions(+)
 create mode 100644 packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required-empty.png
 create mode 100644 packages/checkbox/test/visual/material/screenshots/checkbox/baseline/required-empty.png

diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js
index 60722a02e9..a74e175230 100644
--- 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/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required-empty.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required-empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..101ca8061bb8c45112503b6c25bdd9d21d927223
GIT binary patch
literal 278
zcmeAS@N?(olHy`uVBq!ia0vp^dLYcf1|-9GYMTQo#^NA%Cx&(BWL^R}7d%}YLoyoQ
zUiam0au8{KxH?2DrDKc0umAgXIk*f>?GI$8c88U=81u|YuiyFpkmRuwmd|w@Hoj+=
za_FYWxn%`rt(!IH_&&_pt$R4uKH}~cGr!Hcr$2p;nWh#dwlg)8>3!dY^xW(GWqa>F
zJerm^{T0vg!}GoFZh7(I_~N=ln+twqOFUe<x^ULR$o1`?=NEs}y%FvDFo!EW*kbmf
zn|s=h8}5^vcjuEztZKWh4R^cva^*cGp<<Rc-20E8W%@hugYR}OpgOoabZ>kxXNt7-
UR<5{wALus*Pgg&ebxsLQ0NG}F8vp<R

literal 0
HcmV?d00001

diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js
index d181d390aa..d7787394eb 100644
--- 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/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/required-empty.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/required-empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..77e47bfadf255d9f341b82da120229e760dd6628
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^Iv~u!1|;QLq8Nb`V{wqX6T`Z5GB1IgU7jwEArY-_
zZ*1f}q9EXM@#9HehZkZi4lmSfSITIgV3pA*;PqgUcEeORb??uguGX!WiLkpC#jXG8
zXZZm=*3FtTd=KVur3D+zZo29BIw6~PYuJ~2+n??EUNMhdk>zsS=T>jc+Z!1SjybHo
zy6alqLqj$Oh39)rrw19?zBvE-ULvvyKcf#>wp*$PdEMT8y)^RrEq$3}6Wy|N5BKH2
lj*|IR?YS($3`zNI@g;d$jfXbNy$1S%!PC{xWt~$(6982sXbu1X

literal 0
HcmV?d00001

diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
index 1ce3dfb8e5..1ae09d0b04 100644
--- 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
index 7c2774befd..b18d39b8c0 100644
--- 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;