refactor: use position: absolute for required indicator

vaadin · Apr 10, 2024 · 14d2000 · 14d2000
1 parent 62d7e79
commit 14d2000
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 7 deletions.
diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/error-message.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/error-message.png
diff --git a/.../checkbox/test/visual/lumo/screenshots/checkbox/baseline/invalid-focus-ring.png b/.../checkbox/test/visual/lumo/screenshots/checkbox/baseline/invalid-focus-ring.png
diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/required.png
diff --git a/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-required.png b/packages/checkbox/test/visual/lumo/screenshots/checkbox/baseline/rtl-required.png
diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -33,6 +33,7 @@ registerStyles(
     [part='label'] {
       display: flex;
       position: relative;
+      max-width: max-content;
     }
 
     :host([has-label]) ::slotted(label) {
@@ -42,6 +43,14 @@ registerStyles(
       );
     }
 
+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    }
+
+    :host([has-label][required]) ::slotted(label) {
+      padding-inline-end: var(--lumo-space-m);
+    }
+
     [part='checkbox'] {
       width: var(--_checkbox-size);
       height: var(--_checkbox-size);
@@ -156,11 +165,6 @@ registerStyles(
       background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
     }
 
-    /* RTL specific styles */
-    :host([dir='rtl'][has-label]) ::slotted(label) {
-      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
-    }
-
     /* Used for activation "halo" */
     [part='checkbox']::before {
       pointer-events: none;
@@ -205,10 +209,9 @@ registerStyles(
 
     /* Required */
     :host([required]) [part='required-indicator'] {
-      position: relative;
+      position: absolute;
       top: var(--lumo-space-xs);
       right: var(--lumo-space-xs);
-      align-self: flex-start;
     }
 
     :host([required][dir='rtl']) [part='required-indicator'] {