Merge remote-tracking branch 'opf/59860-add-trailing-unit-for-input-f…

…ields-in-datepicker-and-lag-field' into text_field_trailing_visuals
primer · Jan 14, 2025 · 14031c5 · 14031c5
2 parents 46bc68b + 5ec5919
commit 14031c5
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -270,6 +270,14 @@
       max-width: 25%;
       padding-left: var(--base-size-8);
     }
+    &:has( .FormControl-input-trailingVisualLabel) {
+      max-width: 25%;
+      padding-left: var(--base-size-8);
+    }
+      .FormControl-input-trailingVisualLabel {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
   }
   /* TODO: replace with new Button component */
   & .FormControl-input-trailingAction {
@@ -369,6 +377,9 @@
     &:has(.FormControl-input-trailingVisualText) .FormControl-input {
       padding-inline-end: 25%
     }
+    &:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
+      padding-inline-end: 25%
+    }
   }
 
   /*
@@ -500,14 +511,21 @@
       &:has(.FormControl-input-trailingVisualText) .FormControl-input {
         padding-inline-end: 25%
       }
+      &:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
+        padding-inline-end: 25%
+      }
     }
 
     &.FormControl-input-wrap--trailingText {
       & .FormControl-input.FormControl-large {
         padding-inline-end: 25%;
       }
     }
-
+    &.FormControl-input-wrap--trailingLabel {
+      & .FormControl-input.FormControl-large {
+        padding-inline-end: 25%;
+      }
+    }
     /*
     ┌──────────────────┬──36px──┐
     ╎  ┌──────────────┐  ┌────┐ ╎