Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

59860 add trailing unit for input fields in datepicker and lag field #3246

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/new-students-change.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/view-components": patch
---

Add trailing visuals to the text field
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 53 additions & 1 deletion app/components/primer/alpha/text_field.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,8 @@
** .FormControl
** ├─ .FormControl-label
** │ ├─ .FormControl-input-wrap
** │ │ ├─ .FormControl-input-trailingVisualWrap
** │ │ │ ├─ .FormControl-input-trailingVisual
** │ │ ├─ .FormControl-input-leadingVisualWrap
** │ │ │ ├─ .FormControl-input-leadingVisual
** │ │ ├─ .FormControl-input
Expand Down Expand Up @@ -253,6 +255,23 @@
}
}

& .FormControl-input-trailingVisualWrap {
position: absolute;
top: var(--base-size-8);
right: var(--base-size-8);
display: block;
width: var(--base-size-16);
height: var(--base-size-16);
color: var(--fgColor-muted);
pointer-events: none;

/* octicon */
& .FormControl-input-trailingVisual {
display: block;
user-select: none;
}
}

/* TODO: replace with new Button component */
& .FormControl-input-trailingAction {
position: absolute;
Expand Down Expand Up @@ -333,10 +352,28 @@
}
}

/* if trailingVisual is present */

/*
┌──────────────────┬──32px──┐
╎ ┌──────────────┐ ┌────┐ ╎
╎ 24px 24px ╎
╎ └──────────────┘ └────┘ ╎
└──────────────────┴────────┘
*/

&.FormControl-input-wrap--trailingVisual {
& .FormControl-input {
padding-inline-end: calc(
var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
); /* 32px */
}
}

/*
┌──────────────────┬──32px──┐
╎ ┌──────────────┐ ┌────┐ ╎
╎ 24px 24px
╎ 24px 24px ╎
╎ └──────────────┘ └────┘ ╎
└──────────────────┴────────┘
*/
Expand Down Expand Up @@ -377,6 +414,10 @@
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 */
}

/*
┌──────────────────┬──28px──┐
Expand Down Expand Up @@ -427,6 +468,10 @@
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);
}

/*
┌──36px──┬───12px padding──────┐
Expand All @@ -443,6 +488,13 @@
); /* 36px */
}
}
&.FormControl-input-wrap--trailingVisual {
& .FormControl-input.FormControl-large {
padding-inline-end: calc(
var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
); /* 36px */
}
}

/*
┌──────────────────┬──36px──┐
Expand Down
22 changes: 17 additions & 5 deletions app/lib/primer/forms/dsl/text_field_input.rb
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module Dsl
class TextFieldInput < Input
attr_reader(
*%i[
name label show_clear_button leading_visual leading_spinner clear_button_id
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
]
)
Expand All @@ -20,6 +20,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)
@leading_spinner = !!system_arguments.delete(:leading_spinner)
@clear_button_id = system_arguments.delete(:clear_button_id)
@inset = system_arguments.delete(:inset)
Expand All @@ -33,6 +34,13 @@ def initialize(name:, label:, **system_arguments)
)
end

if @trailing_visual
@trailing_visual[:classes] = class_names(
"FormControl-input-trailingVisual",
@trailing_visual[:classes]
)
end

if @leading_spinner && !@leading_visual
raise ArgumentError, "text fields that request a leading spinner must also specify a leading visual"
end
Expand All @@ -48,6 +56,14 @@ def initialize(name:, label:, **system_arguments)
alias inset? inset
alias monospace? monospace

def trailing_visual?
!!@trailing_visual
end

def leading_visual?
!!@leading_visual
end

def to_component
TextField.new(input: self)
end
Expand All @@ -60,10 +76,6 @@ def focusable?
true
end

def leading_visual?
!!@leading_visual
end

def validation_arguments
if auto_check_src.present?
super.merge(
Expand Down
7 changes: 7 additions & 0 deletions app/lib/primer/forms/text_field.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,12 @@
<%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
</button>
<% end %>
<% if @input.trailing_visual%>
<span class="FormControl-input-trailingVisualWrap">
<% if @input.trailing_visual %>
<%= render(Primer::Beta::Octicon.new(**@input.trailing_visual, data: { target: "primer-text-field.trailingVisual" })) %>
<% end %>
</span>
<% end %>
<% end %>
<% end %>
1 change: 1 addition & 0 deletions app/lib/primer/forms/text_field.rb
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ def initialize(input:)
"FormControl-input-wrap",
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?
),

Expand Down
6 changes: 6 additions & 0 deletions previews/primer/alpha/text_field_preview.rb
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,12 @@ def monospace
render(Primer::Alpha::TextField.new(monospace: true, name: "my-text-field", label: "My text field"))
end

# @label With trailing visual
# @snapshot
def with_trailing_visual
render(Primer::Alpha::TextField.new(trailing_visual: { icon: :search }, name: "my-text-field", label: "My text field"))
end

# @label With leading visual
# @snapshot
def with_leading_visual
Expand Down
Loading