fix(ui5-checkbox): improved required state placement and asterisks behaviour (#11326)

CheckBox is now properly vertically aligned when set to required and referred in an ui5-label.

Additionally when there is not associated label, we now append required asterisks to the internal label (text) of the checkbox.

Fixes: #10864

Author: plamenivanov91

packages/main/src/CheckBox.ts

@@ -154,6 +154,9 @@ class CheckBox extends UI5Element implements IFormInputElement {
 
 	/**
 	 * Defines whether the component is required.
+	 *
+	 * **Note:** We advise against using the text property of the checkbox when there is a
+	 * label associated with it to avoid having two required asterisks.
 	 * @default false
 	 * @public
 	 * @since 1.3.0

packages/main/src/themes/CheckBox.css

@@ -5,6 +5,19 @@
 	display: inline-block;
 }
 
+:host([required]) {
+	vertical-align: middle;
+}
+
+:host([required]) .ui5-checkbox-label:after {
+	content:"*";
+	margin-inline-start: .125rem;
+	color: var(--sapField_RequiredColor);
+	font-size: var(--sapFontLargeSize);
+	font-family: var(--sapFontFamily);
+	font-weight: bold;
+}
+
 :host {
 	overflow: hidden;
 	max-width: 100%;