Merge branch 'main' into copilot/fix-performance-benchmark-tests

Author: jonrohan

.changeset/plenty-regions-warn.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Adds character_limit option to TextArea and TextField components

.github/workflows/demo-production-deploy.yml

@@ -72,7 +72,7 @@ jobs:
       with:
         ruby-version: '3.3'
         bundler-cache: true
-    - uses: actions/cache@v4.3.0
+    - uses: actions/cache@v5.0.1
       with:
         path: demo/gemfiles/vendor/bundle
         key: gems-build-kuby-main-ruby-3.3.x-${{ hashFiles('demo/gemfiles/kuby.gemfile.lock') }}

.github/workflows/static-files.yml

@@ -2,6 +2,8 @@ name: Generate static files
 
 on:
   push:
+    branches-ignore:
+      - 'dependabot/**'
 
 jobs:
   static:

Gemfile.lock

@@ -57,7 +57,7 @@ GEM
       parser (>= 2.4)
       smart_properties
     bigdecimal (3.2.3)
-    bootsnap (1.18.6)
+    bootsnap (1.19.0)
       msgpack (~> 1.2)
     builder (3.3.0)
     capybara (3.40.0)

app/components/primer/alpha/text_area.rb

@@ -18,6 +18,7 @@ class TextArea < Primer::Component
       # @!method initialize
       #
       # @macro form_full_width_arguments
+      # @macro form_input_character_limit_arguments
       # @macro form_input_arguments
     end
   end

app/components/primer/alpha/text_field.rb

@@ -19,6 +19,7 @@ class TextField < Primer::Component
       #
       # @macro form_size_arguments
       # @macro form_full_width_arguments
+      # @macro form_input_character_limit_arguments
       # @macro form_input_arguments
       #
       # @param placeholder [String] Placeholder text.

app/components/primer/primer.ts

@@ -22,6 +22,7 @@ import './beta/relative_time'
 import './alpha/tab_container'
 import '../../lib/primer/forms/primer_multi_input'
 import '../../lib/primer/forms/primer_text_field'
+import '../../lib/primer/forms/primer_text_area'
 import '../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
 import './alpha/select_panel_element'

app/forms/text_area_with_character_limit_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class TextAreaWithCharacterLimitForm < ApplicationForm
+  form do |my_form|
+    my_form.text_area(
+      name: :bio,
+      label: "Bio",
+      caption: "Tell us about yourself",
+      character_limit: 100
+    )
+  end
+end

app/forms/text_field_with_character_limit_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class TextFieldWithCharacterLimitForm < ApplicationForm
+  form do |my_form|
+    my_form.text_field(
+      name: :username,
+      label: "Username",
+      caption: "Choose a unique username",
+      character_limit: 20
+    )
+  end
+end

app/lib/primer/forms/caption.html.erb

@@ -1,10 +1,17 @@
-<% if @input.caption? && !@input.caption.blank? %>
-  <span class="FormControl-caption" id="<%= @input.caption_id %>"><%= @input.caption %></span>
-<% elsif caption_template? %>
-  <% caption_template = render_caption_template %>
-  <% unless caption_template.blank? %>
-    <span class="FormControl-caption" id="<%= @input.caption_id %>">
-      <%= caption_template %>
-    </span>
-  <% end %>
+<% if @input.character_limit? %>
+  <span class="sr-only" data-target="<%= @input.character_limit_target_prefix %>.characterLimitSrElement" aria-live="polite" role="status"></span>
+  <span class="sr-only" id="<%= @input.character_limit_id %>">You can enter up to <%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %></span>
+  <span class="FormControl-caption" data-target="<%= @input.character_limit_target_prefix %>.characterLimitElement" data-max-length="<%= @input.character_limit %>" aria-hidden="true">
+    <span class="FormControl-caption-icon" hidden><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+    <span class="FormControl-caption-text"><%= @input.character_limit %> <%= @input.character_limit == 1 ? 'character' : 'characters' %> remaining</span>
+  </span>
+<% end %>
+<% if @input.caption? || caption_template? %>
+  <span class="FormControl-caption" id="<%= @input.caption_id %>">
+    <% if @input.caption? && !@input.caption.blank? %>
+      <%= @input.caption %>
+    <% elsif caption_template? %>
+      <%= render_caption_template %>
+    <% end %>
+  </span>
 <% end %>