Misc fixes

primer · Jan 13, 2025 · 46bc68b · 46bc68b
1 parent c377d31
commit 46bc68b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 43 deletions.
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -265,6 +265,7 @@
     gap: var(--base-size-4);
     color: var(--fgColor-muted);
     pointer-events: none;
+
     &:has( .FormControl-input-trailingVisualText) {
       max-width: 25%;
       padding-left: var(--base-size-8);
@@ -337,7 +338,7 @@
   /*
 	┌──32px──┬────────────────────┐
 	╎  ┌───┐   ┌────────────────┐ ╎
-	╎   16px    16px                ╎
+	╎   16px    16px              ╎
 	╎  └───┘   └────────────────┘ ╎
 	└───────8px───────────────────┘
 	*/
@@ -364,6 +365,7 @@
     & .FormControl-input {
       padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
     }
+
     &:has(.FormControl-input-trailingVisualText) .FormControl-input {
       padding-inline-end: 25%
     }
@@ -413,6 +415,7 @@
       top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
       left: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
     }
+
     & .FormControl-input-trailingVisualWrap {
       top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
       right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
@@ -467,6 +470,7 @@
       top: var(--control-medium-paddingInline-normal);
       left: var(--control-medium-paddingInline-normal);
     }
+
     & .FormControl-input-trailingVisualWrap {
       top: var(--control-medium-paddingInline-normal);
       right: var(--control-medium-paddingInline-normal);
@@ -492,6 +496,7 @@
       & .FormControl-input {
         padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
       }
+
       &: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
@@ -1,5 +1,8 @@
+# frozen_string_literal: true
+
 module Primer
   module Forms
+    # :nodoc:
     class TextField < BaseComponent
       delegate :builder, :form, to: :@input
 
@@ -44,39 +47,35 @@ def trailing_visual_component
         visual = @input.trailing_visual
 
         # Render icon if specified
-        @trailing_visual_component = if (icon_arguments = visual[:icon])
-          icon_arguments[:classes] = class_names(
-            icon_arguments.delete(:classes),
-            "FormControl-input-trailingVisualIcon"
-          )
-
-          Primer::Beta::Octicon.new(**icon_arguments)
-        elsif (label_arguments = visual[:label])
-          # Render label if specified
-          label_arguments[:classes] = class_names(
-            label_arguments.delete(:classes),
-            "FormControl-input-trailingVisualLabel"
-          )
+        @trailing_visual_component =
+          if (icon_arguments = visual[:icon])
+            Primer::Beta::Octicon.new(**icon_arguments)
+          elsif (label_arguments = visual[:label])
+            # Render label if specified
+            label_arguments[:classes] = class_names(
+              label_arguments.delete(:classes),
+              "FormControl-input-trailingVisualLabel"
+            )
 
-          text = label_arguments.delete(:text)
-          Primer::Beta::Label.new(**label_arguments).with_content(text)
-        elsif (counter_arguments = visual[:counter])
-          # Render counter if specified
-          counter_arguments[:classes] = class_names(
-            counter_arguments.delete(:classes),
-            "FormControl-input-trailingVisualCounter"
-          )
+            text = label_arguments.delete(:text)
+            Primer::Beta::Label.new(**label_arguments).with_content(text)
+          elsif (counter_arguments = visual[:counter])
+            # Render counter if specified
+            counter_arguments[:classes] = class_names(
+              counter_arguments.delete(:classes),
+              "FormControl-input-trailingVisualCounter"
+            )
 
-          Primer::Beta::Counter.new(**counter_arguments)
-        elsif (truncate_arguments = visual[:text])
-          # Render text if specified
-          truncate_arguments[:classes] = class_names(
-            truncate_arguments.delete(:classes),
-            "FormControl-input-trailingVisualText"
-          )
-          text = truncate_arguments.delete(:text)
-          Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
-        end
+            Primer::Beta::Counter.new(**counter_arguments)
+          elsif (truncate_arguments = visual[:text])
+            # Render text if specified
+            truncate_arguments[:classes] = class_names(
+              truncate_arguments.delete(:classes),
+              "FormControl-input-trailingVisualText"
+            )
+            text = truncate_arguments.delete(:text)
+            Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
+          end
       end
     end
   end

diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock
@@ -344,7 +344,7 @@ GEM
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     yard (0.9.37)
-    zeitwerk (2.7.1)
+    zeitwerk (2.6.18)
 
 PLATFORMS
   arm64-darwin-21

diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb
@@ -181,25 +181,25 @@ def with_trailing_icon
       # @label With trailing text
       # @snapshot
       def with_trailing_text
-        render(Primer::Alpha::TextField.new( trailing_visual: { text: { text: "minute" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "minute" } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing long text
       # @snapshot
       def with_trailing_long_text
-        render(Primer::Alpha::TextField.new( trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { text: { text: "Long trailing text" } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing counter
       # @snapshot
       def with_trailing_counter
-        render(Primer::Alpha::TextField.new( trailing_visual: { counter: { counter: 5 } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { counter: { count: 5 } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With trailing label
       # @snapshot
       def with_trailing_label
-        render(Primer::Alpha::TextField.new( trailing_visual: { label: { text: "Hello" } }, name: "my-text-field", label: "My text field"))
+        render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field", label: "My text field"))
       end
 
       # @label With leading visual

diff --git a/test/components/alpha/text_field_test.rb b/test/components/alpha/text_field_test.rb
@@ -104,31 +104,31 @@ def test_enforces_leading_visual_when_spinner_requested
   end
 
   def test_renders_a_trailing_visual_icon
-    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { icon: :search }))
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { icon: { icon: :search } }))
 
     assert_selector ".FormControl-input-trailingVisualWrap" do
-      assert_selector "svg.octicon.octicon-search.FormControl-input-trailingVisualIcon"
+      assert_selector "svg.octicon.octicon-search"
     end
   end
 
   def test_renders_a_trailing_visual_text
-    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { text: 'minute' }))
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { text: { 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' }))
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { label: { text: "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' }))
+  def test_renders_a_trailing_visual_counter
+    render_inline(Primer::Alpha::TextField.new(**@default_params, trailing_visual: { counter: { count: 5 } }))
 
     assert_selector ".FormControl-input-trailingVisualWrap" do
       assert_selector ".FormControl-input-trailingVisualCounter.Counter", text: "5"