From 472b01b1050aa9743a6a3f3bc90132f99dbbb703 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Mon, 6 Jan 2025 14:39:13 +0100 Subject: [PATCH] fix preview issues and set a class for text so it can be truncated when it is too long --- app/components/primer/alpha/text_field.pcss | 7 ------- app/lib/primer/forms/dsl/text_field_input.rb | 13 +------------ app/lib/primer/forms/text_field.html.erb | 4 ++-- app/lib/primer/forms/text_field.rb | 8 +++++--- previews/primer/alpha/text_field_preview.rb | 14 ++++++++++---- 5 files changed, 18 insertions(+), 28 deletions(-) diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss index 94707ab81b..8be1a57eb9 100644 --- a/app/components/primer/alpha/text_field.pcss +++ b/app/components/primer/alpha/text_field.pcss @@ -266,15 +266,8 @@ color: var(--fgColor-muted); pointer-events: none; &:has( .FormControl-input-trailingVisualText) { - width: auto; max-width: 25%; padding-left: var(--base-size-8); - - & .FormControl-input-trailingVisualText { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } } } /* TODO: replace with new Button component */ diff --git a/app/lib/primer/forms/dsl/text_field_input.rb b/app/lib/primer/forms/dsl/text_field_input.rb index 9aa4dd23f2..8f22ca5920 100644 --- a/app/lib/primer/forms/dsl/text_field_input.rb +++ b/app/lib/primer/forms/dsl/text_field_input.rb @@ -18,7 +18,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 = build_trailing_visual(system_arguments.delete(:trailing_visual)) + @trailing_visual = system_arguments.delete(:trailing_visual) @leading_spinner = !!system_arguments.delete(:leading_spinner) @clear_button_id = system_arguments.delete(:clear_button_id) @inset = system_arguments.delete(:inset) @@ -55,17 +55,6 @@ def leading_visual? !!@leading_visual end - def build_trailing_visual(trailing_visual) - return nil unless trailing_visual - - icon = trailing_visual[:icon] - text = trailing_visual[:text] - counter = trailing_visual[:counter] - label = trailing_visual[:label] - - { icon: icon, text: text, counter: counter, label: label }.compact - end - def to_component TextField.new(input: self) end diff --git a/app/lib/primer/forms/text_field.html.erb b/app/lib/primer/forms/text_field.html.erb index 509e200c33..562f01098b 100644 --- a/app/lib/primer/forms/text_field.html.erb +++ b/app/lib/primer/forms/text_field.html.erb @@ -17,9 +17,9 @@ <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %> <% end %> - <% if (component = @input.trailing_visual_component) %> + <% if @input.trailing_visual %>
- <%= render(component) %> + <%= render(trailing_visual_component) %>
<% end %> <% end %> diff --git a/app/lib/primer/forms/text_field.rb b/app/lib/primer/forms/text_field.rb index 19a97205f4..b141e1a8dd 100644 --- a/app/lib/primer/forms/text_field.rb +++ b/app/lib/primer/forms/text_field.rb @@ -67,15 +67,17 @@ def trailing_visual_component "FormControl-input-trailingVisualCounter" ) - Primer::Beta::Counter.new(**counter_arguments)) + 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 end diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb index a8390f7c65..494d4d9f99 100644 --- a/previews/primer/alpha/text_field_preview.rb +++ b/previews/primer/alpha/text_field_preview.rb @@ -175,25 +175,31 @@ def monospace # @label With trailing icon # @snapshot def with_trailing_icon - render(Primer::Alpha::TextField.new(trailing_visual: { icon: :search }, name: "my-text-field", label: "My text field")) + render(Primer::Alpha::TextField.new(trailing_visual: { icon: { 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_visual: { 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")) end # @label With trailing counter # @snapshot def with_trailing_counter - render(Primer::Alpha::TextField.new( trailing_visual: { counter: 5 }, name: "my-text-field", label: "My text field")) + render(Primer::Alpha::TextField.new( trailing_visual: { counter: { counter: 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: "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