add test for trailing visuals

opf · Dec 19, 2024 · 5f4955c · 5f4955c
1 parent 5a81e1a
commit 5f4955c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -265,12 +265,12 @@
     gap: var(--base-size-4);
     color: var(--fgColor-muted);
     pointer-events: none;
-    &:has( .FormControl-input-trailingText) {
+    &:has( .FormControl-input-trailingVisualText) {
       width: auto;
       max-width: 25%;
       padding-left: var(--base-size-8);
 
-      & .FormControl-input-trailingText {
+      & .FormControl-input-trailingVisualText {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -371,7 +371,7 @@
     & .FormControl-input {
       padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
     }
-    &:has(.FormControl-input-trailingText) .FormControl-input {
+    &:has(.FormControl-input-trailingVisualText) .FormControl-input {
       padding-inline-end: 25%
     }
   }
@@ -499,7 +499,7 @@
       & .FormControl-input {
         padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
       }
-      &:has(.FormControl-input-trailingText) .FormControl-input {
+      &:has(.FormControl-input-trailingVisualText) .FormControl-input {
         padding-inline-end: 25%
       }
     }

diff --git a/app/lib/primer/forms/text_field.rb b/app/lib/primer/forms/text_field.rb
@@ -46,16 +46,16 @@ def trailing_visual_render
         content = ActiveSupport::SafeBuffer.new # Use SafeBuffer for safe HTML concatenation
 
         # Render icon if specified
-        content << render(Primer::Beta::Octicon.new(icon: visual[:icon])) if visual[:icon]
+        content << render(Primer::Beta::Octicon.new(icon: visual[:icon], classes: "FormControl-input-trailingVisualIcon")) if visual[:icon]
 
         # Render label if specified
-        content << render(Primer::Beta::Label.new()) { visual[:label] } if visual[:label]
+        content << render(Primer::Beta::Label.new(classes: "FormControl-input-trailingVisualLabel")) { visual[:label] } if visual[:label]
 
         # Render counter if specified
-        content << render(Primer::Beta::Counter.new(count: visual[:counter])) if visual[:counter]
+        content << render(Primer::Beta::Counter.new(count: visual[:counter], classes: "FormControl-input-trailingVisualCounter")) if visual[:counter]
 
         # Render text if specified
-        content << content_tag(:span, visual[:text], class: "FormControl-input-trailingText") if visual[:text]
+        content << content_tag(:span, visual[:text], class: "FormControl-input-trailingVisualText") if visual[:text]
 
         # Wrap in the trailing visual container
         content_tag(:span, content, class: "FormControl-input-trailingVisualWrap")

diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
@@ -181,7 +181,7 @@ def with_trailing_icon
       # @label With trailing text
       # @snapshot
       def with_trailing_text
-        render(Primer::Alpha::TextField.new( trailing_visual: { text: "Foobarbaz" }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new( trailing_visual: { text: "minute" }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing counter

diff --git a/test/components/alpha/text_field_test.rb b/test/components/alpha/text_field_test.rb
@@ -102,4 +102,36 @@ def test_enforces_leading_visual_when_spinner_requested
 
     assert_includes error.message, "must also specify a leading visual"
   end
+
+  def test_renders_a_trailing_visual_icon
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { icon: :search }))
+
+    assert_selector ".FormControl-input-trailingVisualWrap" do
+      assert_selector "svg.octicon.octicon-search.FormControl-input-trailingVisualIcon"
+    end
+  end
+
+  def test_renders_a_trailing_visual_text
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { text: 'minute' }))
+
+    assert_selector ".FormControl-input-trailingVisualWrap" do
+      assert_selector ".FormControl-input-trailingVisualText", text: "minute"
+    end
+  end
+
+  def test_renders_a_trailing_visual_label
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { label: 'Hello' }))
+
+    assert_selector ".FormControl-input-trailingVisualWrap" do
+      assert_selector ".FormControl-input-trailingVisualLabel.Label", text: "Hello"
+    end
+  end
+
+  def test_renders_a_trailing_visual_Counter
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { counter: '5' }))
+
+    assert_selector ".FormControl-input-trailingVisualWrap" do
+      assert_selector ".FormControl-input-trailingVisualCounter.Counter", text: "5"
+    end
+  end
 end