add trailing text to the primer text field

opf · Dec 18, 2024 · 2630356 · 2630356
1 parent 5396bf2
commit 2630356
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 2 deletions.
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -271,6 +271,26 @@
       user-select: none;
     }
   }
+  & .FormControl-input-trailingTextWrap {
+    position: absolute;
+    top: var(--base-size-8);
+    right: var(--base-size-8);
+    width: auto;
+    max-width: 25%;
+    padding-left: var(--base-size-8);
+    display: flex;
+    align-items: center;
+    height: var(--base-size-16);
+    color: var(--fgColor-muted);
+    pointer-events: none;
+
+    /* text */
+    & .FormControl-input-trailingText {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 
   /* TODO: replace with new Button component */
   & .FormControl-input-trailingAction {
@@ -370,6 +390,12 @@
     }
   }
 
+  &.FormControl-input-wrap--trailingText {
+    & .FormControl-input {
+      padding-inline-end: 25%
+    }
+  }
+
   /*
 	┌──────────────────┬──32px──┐
 	╎  ┌──────────────┐  ┌────┐ ╎
@@ -496,6 +522,12 @@
       }
     }
 
+    &.FormControl-input-wrap--trailingText {
+      & .FormControl-input.FormControl-large {
+        padding-inline-end: 25%;
+      }
+    }
+
     /*
     ┌──────────────────┬──36px──┐
     ╎  ┌──────────────┐  ┌────┐ ╎

diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb
@@ -8,7 +8,7 @@ class TextFieldInput < Input
         attr_reader(
           *%i[
             name label show_clear_button leading_visual leading_spinner trailing_visual clear_button_id
-            visually_hide_label inset monospace field_wrap_classes auto_check_src
+            visually_hide_label inset monospace field_wrap_classes auto_check_src trailing_text
           ]
         )
 
@@ -21,6 +21,7 @@ def initialize(name:, label:, **system_arguments)
           @show_clear_button = system_arguments.delete(:show_clear_button)
           @leading_visual = system_arguments.delete(:leading_visual)
           @trailing_visual = system_arguments.delete(:trailing_visual)
+          @trailing_text = system_arguments.delete(:trailing_text)
           @leading_spinner = !!system_arguments.delete(:leading_spinner)
           @clear_button_id = system_arguments.delete(:clear_button_id)
           @inset = system_arguments.delete(:inset)
@@ -107,6 +108,10 @@ def validation_message_arguments
             super
           end
         end
+
+        def trailing_text?
+          !!@trailing_text
+        end
       end
     end
   end

diff --git a/app/lib/primer/forms/text_field.html.erb b/app/lib/primer/forms/text_field.html.erb
@@ -21,7 +21,12 @@
       <span class="FormControl-input-trailingVisualWrap">
         <% if @input.trailing_visual %>
           <%= render(Primer::Beta::Octicon.new(**@input.trailing_visual, data: { target: "primer-text-field.trailingVisual" })) %>
+          </span>
         <% end %>
+    <% end %>
+    <% if @input.trailing_text %>
+      <span class="FormControl-input-trailingTextWrap">
+        <span class="FormControl-input-trailingText"><%= @input.trailing_text %></span>
       </span>
     <% end %>
   <% end %>

diff --git a/app/lib/primer/forms/text_field.rb b/app/lib/primer/forms/text_field.rb
@@ -25,7 +25,8 @@ def initialize(input:)
             INPUT_WRAP_SIZE[input.size],
             "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
             "FormControl-input-wrap--trailingVisual": @input.trailing_visual?,
-            "FormControl-input-wrap--leadingVisual": @input.leading_visual?
+            "FormControl-input-wrap--leadingVisual": @input.leading_visual?,
+            "FormControl-input-wrap--trailingText": @input.trailing_text?
           ),
 
           hidden: @input.hidden?

diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
@@ -178,6 +178,12 @@ def with_trailing_visual
         render(Primer::Alpha::TextField.new(trailing_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
       end
 
+      # @label With trailing text
+      # @snapshot
+      def with_trailing_text
+        render(Primer::Alpha::TextField.new(trailing_text: "minutes", name: "my-text-field", label: "My text field"))
+      end
+
       # @label With leading visual
       # @snapshot
       def with_leading_visual