primer_view_components 0.47.0 → 0.49.0

data/previews/primer/alpha/tree_view_preview/loading_failure.html.erb

@@ -29,8 +29,60 @@
     const includeFragment = subject.querySelector('tree-view-include-fragment')
     if (!includeFragment) return
 
-    includeFragment.addEventListener('loadend', (event) => {
+    function retryButton() {
+      return subject.querySelector("[data-target='tree-view-sub-tree-node.retryButton']")
+    }
+
+    function focusTreeItem() {
+      const treeItem = subject.querySelector("[role='treeitem']")
+      if (treeItem) treeItem.focus()
+    }
+
+    function makeRetryTabbable() {
+      const retry = retryButton()
+      if (!retry) return
+      // Remove tabindex="-1" so the button can be reached by keyboard.
+      retry.removeAttribute('tabindex')
+    }
+
+    function addRetryFocusHandler() {
+      const retry = retryButton()
+      if (!retry) return
+
+      if (retry.dataset.focusHandlerAttached === "true") return
+      retry.dataset.focusHandlerAttached = "true"
+
+      retry.addEventListener('click', () => {
+        focusTreeItem()
+      })
+    }
+
+    // When the failure UI loads, ensure Retry is tabbable
+    includeFragment.addEventListener('loadend', (_event) => {
+      makeRetryTabbable()
+      addRetryFocusHandler()
       subject.setAttribute('data-ready', 'true')
     })
+
+    // If include-fragment swaps in new markup on re-render, re-apply tabindex removal.
+    includeFragment.addEventListener('include-fragment-replaced', () => {
+      makeRetryTabbable()
+      addRetryFocusHandler()
+    })
+
+    // If Retry exists and the user presses Tab while focused inside this TreeView,
+    // redirect focus to Retry so it is reachable without requiring a mouse click.
+    subject.addEventListener('keydown', (event) => {
+      if (event.key !== 'Tab' || event.shiftKey) return
+      const active = document.activeElement
+      if (!(active instanceof HTMLElement)) return
+      if (!subject.contains(active)) return
+      if (active.getAttribute('role') !== 'treeitem') return
+      const retry = retryButton()
+      if (!retry) return
+      makeRetryTabbable()
+      event.preventDefault()
+      retry.focus()
+    })
   })
 </script>

data/previews/primer/beta/avatar_stack_preview.rb

@@ -99,6 +99,15 @@ module Primer
         end
       end
 
+      # @label With individual avatar tooltips
+      def with_individual_tooltips
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "https://github.com/user1", tooltip: "User 1")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "https://github.com/user2", tooltip: "User 2")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "https://github.com/user3", tooltip: "User 3")
+        end
+      end
+
       # @label With disabled expand
       def with_disabled_expand
         render(Primer::Beta::AvatarStack.new(disable_expand: true)) do |component|

data/previews/primer/forms_preview/text_area_with_character_limit_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(TextAreaWithCharacterLimitForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview/text_field_with_character_limit_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(TextFieldWithCharacterLimitForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview.rb

@@ -67,5 +67,11 @@ module Primer
 
     # @snapshot
     def auto_complete_form; end
+
+    # @snapshot
+    def text_area_with_character_limit_form; end
+
+    # @snapshot
+    def text_field_with_character_limit_form; end
   end
 end

data/static/arguments.json

@@ -2846,6 +2846,12 @@
         "default": "N/A",
         "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "N/A",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "name",
         "type": "String",
@@ -2976,6 +2982,12 @@
         "default": "N/A",
         "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "N/A",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "name",
         "type": "String",
@@ -3914,6 +3926,12 @@
         "default": "`nil`",
         "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
       },
+      {
+        "name": "tooltip",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Tooltip text to display on hover when href is provided."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/form_previews.json

@@ -107,6 +107,16 @@
         "preview_path": "primer/forms/auto_complete_form",
         "name": "auto_complete_form",
         "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/text_area_with_character_limit_form",
+        "name": "text_area_with_character_limit_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/text_field_with_character_limit_form",
+        "name": "text_field_with_character_limit_form",
+        "snapshot": "true"
       }
     ]
   }

data/static/info_arch.json

@@ -8584,6 +8584,12 @@
         "default": "N/A",
         "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "N/A",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "name",
         "type": "String",
@@ -8812,6 +8818,45 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []
@@ -8842,6 +8887,12 @@
         "default": "N/A",
         "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
       },
+      {
+        "name": "character_limit",
+        "type": "Number",
+        "default": "N/A",
+        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
+      },
       {
         "name": "name",
         "type": "String",
@@ -9288,6 +9339,45 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/with_auto_check_ok",
         "name": "with_auto_check_ok",
@@ -11952,6 +12042,12 @@
         "default": "`nil`",
         "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
       },
+      {
+        "name": "tooltip",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Tooltip text to display on hover when href is provided."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -12318,6 +12414,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/avatar_stack/with_individual_tooltips",
+        "name": "with_individual_tooltips",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/avatar_stack/with_disabled_expand",
         "name": "with_disabled_expand",

data/static/previews.json

@@ -1470,6 +1470,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/beta/avatar_stack/with_individual_tooltips",
+        "name": "with_individual_tooltips",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/beta/avatar_stack/with_disabled_expand",
         "name": "with_disabled_expand",
@@ -6976,6 +6989,45 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },
@@ -7271,6 +7323,45 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit",
+        "name": "with_character_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
+        "name": "with_character_limit_over_limit",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
+        "name": "with_character_limit_and_caption",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/text_field/with_auto_check_ok",
         "name": "with_auto_check_ok",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.47.0
+  version: 0.49.0
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-18 00:00:00.000000000 Z
+date: 2026-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -112,7 +112,9 @@ files:
 - app/assets/javascripts/components/primer/scrollable_region.d.ts
 - app/assets/javascripts/components/primer/shared_events.d.ts
 - app/assets/javascripts/components/primer/utils.d.ts
+- app/assets/javascripts/lib/primer/forms/character_counter.d.ts
 - app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts
+- app/assets/javascripts/lib/primer/forms/primer_text_area.d.ts
 - app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts
 - app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts
 - app/assets/javascripts/primer_view_components.js
@@ -615,7 +617,9 @@ files:
 - app/forms/select_form.rb
 - app/forms/single_text_field_form.rb
 - app/forms/submit_button_form.rb
+- app/forms/text_area_with_character_limit_form.rb
 - app/forms/text_field_and_checkbox_form.rb
+- app/forms/text_field_with_character_limit_form.rb
 - app/helpers/primer/form_helper.rb
 - app/lib/primer/attributes_helper.rb
 - app/lib/primer/audited/dsl.rb
@@ -643,6 +647,9 @@ files:
 - app/lib/primer/forms/button.rb
 - app/lib/primer/forms/caption.html.erb
 - app/lib/primer/forms/caption.rb
+- app/lib/primer/forms/character_counter.d.ts
+- app/lib/primer/forms/character_counter.js
+- app/lib/primer/forms/character_counter.ts
 - app/lib/primer/forms/check_box.html.erb
 - app/lib/primer/forms/check_box.rb
 - app/lib/primer/forms/check_box_group.html.erb
@@ -683,6 +690,9 @@ files:
 - app/lib/primer/forms/primer_multi_input.d.ts
 - app/lib/primer/forms/primer_multi_input.js
 - app/lib/primer/forms/primer_multi_input.ts
+- app/lib/primer/forms/primer_text_area.d.ts
+- app/lib/primer/forms/primer_text_area.js
+- app/lib/primer/forms/primer_text_area.ts
 - app/lib/primer/forms/primer_text_field.d.ts
 - app/lib/primer/forms/primer_text_field.js
 - app/lib/primer/forms/primer_text_field.ts
@@ -1060,7 +1070,9 @@ files:
 - previews/primer/forms_preview/select_form.html.erb
 - previews/primer/forms_preview/single_text_field_form.html.erb
 - previews/primer/forms_preview/submit_button_form.html.erb
+- previews/primer/forms_preview/text_area_with_character_limit_form.html.erb
 - previews/primer/forms_preview/text_field_and_checkbox_form.html.erb
+- previews/primer/forms_preview/text_field_with_character_limit_form.html.erb
 - previews/primer/url_helpers.rb
 - static/arguments.json
 - static/assets/view-components.svg