From 969c19ebd918e209134bc43e8e3491feaf7e2544 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 24 Apr 2023 22:13:20 +0000 Subject: [PATCH 1/6] fix counter color/contrast issues --- app/components/primer/beta/button.pcss | 9 +++++++++ static/classes.json | 8 ++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/app/components/primer/beta/button.pcss b/app/components/primer/beta/button.pcss index 7d9207dc23..6b861b0526 100644 --- a/app/components/primer/beta/button.pcss +++ b/app/components/primer/beta/button.pcss @@ -201,6 +201,11 @@ summary.Button { border-color: var(--color-btn-primary-disabled-border); fill: var(--color-btn-primary-disabled-text); } + + & .Counter { + color: inherit; + background-color: var(--color-btn-primary-counter-bg); + } } /* default (secondary) */ @@ -262,6 +267,10 @@ summary.Button { & .Button-visual { color: var(--color-fg-muted); + + & .Counter { + color: var(--color-fg-default); + } } } diff --git a/static/classes.json b/static/classes.json index fd07aa4d73..462235ca78 100644 --- a/static/classes.json +++ b/static/classes.json @@ -372,10 +372,10 @@ "ActionListWrap--inset": [ "Primer::Alpha::ActionList" ], - "ActionListItem-action": [ + "ActionListItem-visual": [ "Primer::Alpha::ActionList" ], - "ActionListItem-visual": [ + "ActionListItem-action": [ "Primer::Alpha::ActionList" ], "SegmentedControl-item": [ @@ -510,10 +510,10 @@ "FormControl-inlineValidation": [ "Primer::Alpha::TextField" ], - "FormControl-check-group-wrap": [ + "FormControl-radio-group-wrap": [ "Primer::Alpha::TextField" ], - "FormControl-radio-group-wrap": [ + "FormControl-check-group-wrap": [ "Primer::Alpha::TextField" ], "Popover-message--bottom-left": [ From f765877f2c51d6d6a337c74efc1fd0901aafd307 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 24 Apr 2023 22:51:25 +0000 Subject: [PATCH 2/6] fix small/large input alignment --- app/components/primer/alpha/text_field.pcss | 4 ++-- lib/primer/forms/text_field.rb | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss index 255bd3aa59..945fea5ce8 100644 --- a/app/components/primer/alpha/text_field.pcss +++ b/app/components/primer/alpha/text_field.pcss @@ -352,7 +352,7 @@ /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large) // sizes */ - &.FormControl-small { + &.FormControl-input-wrap--small { & .FormControl-input-leadingVisualWrap { top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */ left: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */ @@ -402,7 +402,7 @@ } } - &.FormControl-large { + &.FormControl-input-wrap--large { & .FormControl-input-leadingVisualWrap { top: var(--control-medium-paddingInline-normal, 12px); left: var(--control-medium-paddingInline-normal, 12px); diff --git a/lib/primer/forms/text_field.rb b/lib/primer/forms/text_field.rb index 6dd2648719..a2a19c0c3b 100644 --- a/lib/primer/forms/text_field.rb +++ b/lib/primer/forms/text_field.rb @@ -6,6 +6,11 @@ module Forms class TextField < BaseComponent delegate :builder, :form, to: :@input + SIZE_TO_WHATEVER_MAPPINGS = { + small: "FormControl-input-wrap--small", + large: "FormControl-input-wrap--large" + }.freeze + def initialize(input:) @input = input @@ -17,6 +22,7 @@ def initialize(input:) @field_wrap_arguments = { class: class_names( "FormControl-input-wrap", + SIZE_TO_WHATEVER_MAPPINGS[input.size], "FormControl-input-wrap--trailingAction": @input.show_clear_button?, "FormControl-input-wrap--leadingVisual": @input.leading_visual? ), From a4b4b242e1388ce07e30cb5e5237037dd2181072 Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 24 Apr 2023 15:54:08 -0700 Subject: [PATCH 3/6] Create plenty-emus-sip.md --- .changeset/plenty-emus-sip.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/plenty-emus-sip.md diff --git a/.changeset/plenty-emus-sip.md b/.changeset/plenty-emus-sip.md new file mode 100644 index 0000000000..85691fc8fa --- /dev/null +++ b/.changeset/plenty-emus-sip.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +Adjust background color for Button with Counter, fix small and large TextField visual alignment bugs From 29c553ed2ebb20db9b118563fbc3a4484583162a Mon Sep 17 00:00:00 2001 From: Katie Langerman <18661030+langermank@users.noreply.github.com> Date: Mon, 24 Apr 2023 22:55:28 +0000 Subject: [PATCH 4/6] lol --- lib/primer/forms/text_field.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/primer/forms/text_field.rb b/lib/primer/forms/text_field.rb index a2a19c0c3b..1840f92434 100644 --- a/lib/primer/forms/text_field.rb +++ b/lib/primer/forms/text_field.rb @@ -6,7 +6,7 @@ module Forms class TextField < BaseComponent delegate :builder, :form, to: :@input - SIZE_TO_WHATEVER_MAPPINGS = { + INPUT_WRAP_SIZE = { small: "FormControl-input-wrap--small", large: "FormControl-input-wrap--large" }.freeze @@ -22,7 +22,7 @@ def initialize(input:) @field_wrap_arguments = { class: class_names( "FormControl-input-wrap", - SIZE_TO_WHATEVER_MAPPINGS[input.size], + INPUT_WRAP_SIZE[input.size], "FormControl-input-wrap--trailingAction": @input.show_clear_button?, "FormControl-input-wrap--leadingVisual": @input.leading_visual? ), From d8fe68d55b7f6e09713443a92de498de516d564d Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 25 Apr 2023 10:59:52 +0100 Subject: [PATCH 5/6] add button with counter preview --- previews/primer/beta/button_preview.rb | 15 +++++++++++++++ .../beta/button_preview/trailing_counter.html.erb | 11 +++++++++++ 2 files changed, 26 insertions(+) create mode 100644 previews/primer/beta/button_preview/trailing_counter.html.erb diff --git a/previews/primer/beta/button_preview.rb b/previews/primer/beta/button_preview.rb index 84b82a5741..733f25495f 100644 --- a/previews/primer/beta/button_preview.rb +++ b/previews/primer/beta/button_preview.rb @@ -266,6 +266,21 @@ def trailing_action( }) end + # @label Trailing Counter + # @param block toggle + # @param align_content select [center, start] + def trailing_counter( + block: false, + id: "button-preview", + align_content: :center + ) + render_with_template(locals: { + block: block, + id: id, + align_content: align_content + }) + end + # @label With tooltip # @param scheme select [default, primary, danger, invisible, link] # @param size select [small, medium] diff --git a/previews/primer/beta/button_preview/trailing_counter.html.erb b/previews/primer/beta/button_preview/trailing_counter.html.erb new file mode 100644 index 0000000000..36dc12d016 --- /dev/null +++ b/previews/primer/beta/button_preview/trailing_counter.html.erb @@ -0,0 +1,11 @@ +<%= render(Primer::Beta::Button.new( + scheme: :default, + size: :medium, + block: block, + id: id, + align_content: align_content +)) do |component| %> + <% component.with_leading_visual_icon(icon: :star) %> + <% component.with_trailing_visual_counter(count: 15) %> + Button +<% end %> From b42d54ddd8f361f5c74ca534749aaf13e3637170 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Tue, 25 Apr 2023 13:15:25 +0100 Subject: [PATCH 6/6] use primary scheme in Button trailing counter preview --- previews/primer/beta/button_preview/trailing_counter.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/previews/primer/beta/button_preview/trailing_counter.html.erb b/previews/primer/beta/button_preview/trailing_counter.html.erb index 36dc12d016..244f4c7ca8 100644 --- a/previews/primer/beta/button_preview/trailing_counter.html.erb +++ b/previews/primer/beta/button_preview/trailing_counter.html.erb @@ -1,5 +1,5 @@ <%= render(Primer::Beta::Button.new( - scheme: :default, + scheme: :primary, size: :medium, block: block, id: id,