primer_view_components 0.49.0 → 0.51.0

data/app/components/primer/beta/nav_list_group_element.js

@@ -105,7 +105,7 @@ __decorate([
     targets
 ], NavListGroupElement.prototype, "focusMarkers", void 0);
 NavListGroupElement = __decorate([
-    controller
+    controller('nav-list-group')
 ], NavListGroupElement);
 export { NavListGroupElement };
 window.NavListGroupElement = NavListGroupElement;

data/app/components/primer/beta/nav_list_group_element.ts

@@ -1,7 +1,7 @@
 import {controller, target, targets} from '@github/catalyst'
 import {ActionListTruncationObserver} from '../alpha/action_list'
 
-@controller
+@controller('nav-list-group')
 export class NavListGroupElement extends HTMLElement {
   @target showMoreItem: HTMLElement
   @targets focusMarkers: HTMLElement[]

data/app/components/primer/dialog_helper.js

@@ -25,20 +25,29 @@ function dialogInvokerButtonHandler(event) {
             // If the behaviour is allowed through the dialog will be shown but then
             // quickly hidden- as if it were never shown. This prevents that.
             event.preventDefault();
-            // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-            // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-            // any popover that is currently open, regardless of whether or not another top layer element,
-            // such as a <dialog> is nested inside.
-            // See https://github.com/whatwg/html/issues/9998.
-            // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-            // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+            // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+            // there are two related issues:
+            //
+            // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+            //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+            //    See https://github.com/whatwg/html/issues/9998,
+            //    fixed by https://github.com/whatwg/html/pull/10116.
+            //
+            // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+            //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+            //    when tabbing past the last focusable element. Converting the popover to "manual"
+            //    prevents this interference.
+            //
+            // In both cases, the fix is the same: convert ancestor auto popovers to manual.
             let node = button;
             let fixed = false;
             while (node) {
-                node = node.parentElement?.closest('[popover]:not(:popover-open)');
+                node = node.parentElement?.closest('[popover]');
                 if (node && node.popover === 'auto') {
                     node.classList.add('dialog-inside-popover-fix');
                     node.popover = 'manual';
+                    // Changing popover from "auto" to "manual" closes the popover,
+                    // so we need to re-show it regardless of whether it was previously open.
                     node.showPopover();
                     fixed = true;
                 }

data/app/components/primer/dialog_helper.ts

@@ -15,20 +15,29 @@ function dialogInvokerButtonHandler(event: Event) {
       // quickly hidden- as if it were never shown. This prevents that.
       event.preventDefault()
 
-      // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
-      // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
-      // any popover that is currently open, regardless of whether or not another top layer element,
-      // such as a <dialog> is nested inside.
-      // See https://github.com/whatwg/html/issues/9998.
-      // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers
-      // that present this bug, we must undo the work they did to hide ancestral popovers of the dialog:
+      // When a <dialog> is opened with showModal() from inside a popover with popover="auto",
+      // there are two related issues:
+      //
+      // 1. In older browsers (e.g. Chrome 122), the "hide all popovers" algorithm runs when a
+      //    top layer element opens, closing any ancestor popover. We must re-open those popovers.
+      //    See https://github.com/whatwg/html/issues/9998,
+      //    fixed by https://github.com/whatwg/html/pull/10116.
+      //
+      // 2. In newer browsers where the popover stays open, the popover="auto" behavior still
+      //    interferes with the native <dialog> focus trap, causing focus to escape the dialog
+      //    when tabbing past the last focusable element. Converting the popover to "manual"
+      //    prevents this interference.
+      //
+      // In both cases, the fix is the same: convert ancestor auto popovers to manual.
       let node: HTMLElement | null | undefined = button
       let fixed = false
       while (node) {
-        node = node.parentElement?.closest('[popover]:not(:popover-open)')
+        node = node.parentElement?.closest('[popover]')
         if (node && node.popover === 'auto') {
           node.classList.add('dialog-inside-popover-fix')
           node.popover = 'manual'
+          // Changing popover from "auto" to "manual" closes the popover,
+          // so we need to re-show it regardless of whether it was previously open.
           node.showPopover()
           fixed = true
         }

data/app/components/primer/scrollable_region.js

@@ -46,7 +46,7 @@ __decorate([
     attr
 ], ScrollableRegionElement.prototype, "labelledBy", void 0);
 ScrollableRegionElement = __decorate([
-    controller
+    controller('scrollable-region')
 ], ScrollableRegionElement);
 export { ScrollableRegionElement };
 window.ScrollableRegionElement = ScrollableRegionElement;

data/app/components/primer/scrollable_region.ts

@@ -1,6 +1,6 @@
 import {controller, attr} from '@github/catalyst'
 
-@controller
+@controller('scrollable-region')
 export class ScrollableRegionElement extends HTMLElement {
   @attr hasOverflow = false
   @attr labelledBy = ''

data/app/controllers/primer/view_components/toggle_switch_controller.rb

@@ -9,7 +9,7 @@ module Primer
         attr_accessor :last_request
       end
 
-      rescue_from ActionController::InvalidAuthenticityToken, with: :handle_invalid_authenticity_token
+      rescue_from ActionController::InvalidCrossOriginRequest, with: :handle_invalid_cross_origin_request
 
       before_action :reject_non_ajax_request
 
@@ -29,7 +29,7 @@ module Primer
 
       private
 
-      def handle_invalid_authenticity_token
+      def handle_invalid_cross_origin_request
         render status: :unauthorized, plain: "Bad CSRF token."
       end
 

data/app/forms/check_box_with_nested_form.rb

@@ -8,27 +8,31 @@ class CheckBoxWithNestedForm < ApplicationForm
       custom_cities_form.text_field(
         name: :custom_cities,
         label: "Custom cities",
-        description: "A space-separated list of cities"
+        caption: "A space-separated list of cities"
       )
     end
   end
 
   form do |check_form|
-    check_form.check_box_group(name: :city_categories) do |check_group|
+    check_form.check_box_group(
+      name: :city_categories,
+      label: "City categories",
+      caption: "Select all that apply."
+    ) do |check_group|
       check_group.check_box(
         value: "capital",
         label: "Capital",
-        description: "The capital city"
+        caption: "The capital city"
       )
       check_group.check_box(
         value: "populous",
         label: "Most-populous",
-        description: "The five most-populous cities"
+        caption: "The five most-populous cities"
       )
       check_group.check_box(
         value: "custom",
         label: "Custom",
-        description: "A custom list of cities"
+        caption: "A custom list of cities"
       ) do |custom_check_box|
         custom_check_box.nested_form do |builder|
           CustomCitiesForm.new(builder)

data/app/lib/primer/forms/check_box.rb

@@ -11,6 +11,13 @@ module Primer
         @input.add_label_classes("FormControl-label")
         @input.add_input_classes("FormControl-checkbox")
 
+        # Generate custom ID that preserves brackets from the name
+        unless @input.input_arguments[:id].present?
+          generate_custom_id
+          # Update the label's for attribute to match the new ID
+          @input.label_arguments[:for] = @input.input_arguments[:id]
+        end
+
         return unless @input.scheme == :array
 
         @input.input_arguments[:multiple] = true
@@ -32,6 +39,27 @@ module Primer
 
       private
 
+      def generate_custom_id
+        # Generate an ID from the name that preserves special characters like brackets
+        # For array scheme: name + "_" + value (e.g., "permissions[3]_foo")
+        # For boolean scheme: just the name (e.g., "long_o")
+        base_name = @input.name.to_s
+
+        # For array scheme, Rails appends [] to the name, so we remove it for ID generation
+        # but only the trailing [] that Rails adds, not brackets that are part of the original name
+        # Regex /\[\]$/ matches literal "[]" at the end of the string
+        base_name = base_name.sub(/\[\]$/, "")
+
+        # For array scheme, append the value to make IDs unique
+        # For boolean scheme, just use the base name
+        # Note: Rails automatically escapes HTML attributes, so special characters are safe
+        if @input.scheme == :array && @input.value.present?
+          @input.input_arguments[:id] = "#{base_name}_#{@input.value}"
+        else
+          @input.input_arguments[:id] = base_name
+        end
+      end
+
       def checked_value
         @input.value || "1"
       end

data/app/lib/primer/forms/dsl/multi_input.rb

@@ -39,7 +39,9 @@ module Primer
           new_options[:data] ||= {}
           new_options[:data][:name] = name
           new_options[:data][:targets] = "primer-multi-input.fields"
-          new_options[:id] = nil if options[:hidden]
+          new_options[:id] = "#{@name}_#{name}"
+          new_options[:aria] ||= {}
+          new_options[:aria][:labelledby] = "label-#{base_id}"
           new_options[:disabled] = true if options[:hidden] # disable to avoid submitting to server
           new_options
         end

data/app/lib/primer/forms/dsl/text_field_input.rb

@@ -6,7 +6,7 @@ module Primer
         attr_reader(
           *%i[
             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 character_limit
+            clear_button_label visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit
           ]
         )
 
@@ -21,6 +21,7 @@ module Primer
           @trailing_visual = system_arguments.delete(:trailing_visual)
           @leading_spinner = !!system_arguments.delete(:leading_spinner)
           @clear_button_id = system_arguments.delete(:clear_button_id) || SecureRandom.uuid
+          @clear_button_label = system_arguments.delete(:clear_button_label)
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
           @auto_check_src = system_arguments.delete(:auto_check_src)

data/app/lib/primer/forms/form_control.html.erb

@@ -1,7 +1,8 @@
 <% if @input.form_control? %>
   <%= content_tag(@tag, **@form_group_arguments) do %>
     <% if @input.label %>
-      <%= builder.label(@input.name, **@input.label_arguments) do %>
+      <% label_id = @input.label_arguments[:id] || "label-#{@input.base_id}" %>
+      <%= builder.label(@input.name, **@input.label_arguments.merge(id: label_id)) do %>
         <%= @input.label %>
         <% if @input.required? %>
           <span aria-hidden="true">*</span>

data/app/lib/primer/forms/primer_multi_input.js

@@ -35,7 +35,7 @@ __decorate([
     targets
 ], PrimerMultiInputElement.prototype, "fields", void 0);
 PrimerMultiInputElement = __decorate([
-    controller
+    controller('primer-multi-input')
 ], PrimerMultiInputElement);
 export { PrimerMultiInputElement };
 if (!window.customElements.get('primer-multi-input')) {

data/app/lib/primer/forms/primer_multi_input.ts

@@ -1,7 +1,7 @@
 /* eslint-disable custom-elements/expose-class-on-global */
 import {controller, targets} from '@github/catalyst'
 
-@controller
+@controller('primer-multi-input')
 export class PrimerMultiInputElement extends HTMLElement {
   @targets fields: HTMLInputElement[]
 

data/app/lib/primer/forms/primer_text_area.js

@@ -44,7 +44,7 @@ __decorate([
     target
 ], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextAreaElement = __decorate([
-    controller
+    controller('primer-text-area')
 ], PrimerTextAreaElement);
 export { PrimerTextAreaElement };
 if (!window.customElements.get('primer-text-area')) {

data/app/lib/primer/forms/primer_text_area.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {CharacterCounter} from './character_counter'
 
-@controller
+@controller('primer-text-area')
 export class PrimerTextAreaElement extends HTMLElement {
   @target inputElement: HTMLTextAreaElement
   @target characterLimitElement: HTMLElement

data/app/lib/primer/forms/primer_text_field.js

@@ -128,6 +128,6 @@ __decorate([
     target
 ], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
-    controller
+    controller('primer-text-field')
 ], PrimerTextFieldElement);
 export { PrimerTextFieldElement };

data/app/lib/primer/forms/primer_text_field.ts

@@ -10,7 +10,7 @@ declare global {
   }
 }
 
-@controller
+@controller('primer-text-field')
 export class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement

data/app/lib/primer/forms/text_field.html.erb

@@ -13,7 +13,7 @@
       <%= builder.text_field(@input.name, **@input.input_arguments) %>
     <% end %>
     <% if @input.show_clear_button? %>
-      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
+      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="<%= @input.clear_button_label || 'Clear' %>" data-action="click:primer-text-field#clearContents">
         <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
       </button>
     <% end %>

data/app/lib/primer/forms/toggle_switch_input.js

@@ -29,6 +29,6 @@ __decorate([
     target
 ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
 ToggleSwitchInputElement = __decorate([
-    controller
+    controller('toggle-switch-input')
 ], ToggleSwitchInputElement);
 export { ToggleSwitchInputElement };

data/app/lib/primer/forms/toggle_switch_input.ts

@@ -2,7 +2,7 @@
 
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('toggle-switch-input')
 export class ToggleSwitchInputElement extends HTMLElement {
   @target validationElement: HTMLElement
   @target validationMessageElement: HTMLElement

data/lib/primer/accessibility.rb

@@ -32,6 +32,10 @@ module Primer
         per_component: {
           Primer::Alpha::ToggleSwitch => {
             all_scenarios: %i[button-name]
+          },
+
+          Primer::Alpha::MultiInput => {
+            visually_hide_label: %i[label-title-only]
           }
         }
       }
@@ -46,6 +50,8 @@ module Primer
       end
 
       def axe_rules_to_skip(component: nil, scenario_name: nil, flatten: false)
+        scenario_key = scenario_name.is_a?(String) ? scenario_name.to_sym : scenario_name
+
         to_skip = {
           wont_fix: Set.new(AXE_RULES_TO_SKIP.dig(:wont_fix, :global) || []),
           will_fix: Set.new(AXE_RULES_TO_SKIP.dig(:will_fix, :global) || [])
@@ -55,9 +61,9 @@ module Primer
           to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, :all_scenarios) || [])
           to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, :all_scenarios) || [])
 
-          if scenario_name
-            to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, scenario_name) || [])
-            to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, scenario_name) || [])
+          if scenario_key
+            to_skip[:wont_fix].merge(AXE_RULES_TO_SKIP.dig(:wont_fix, :per_component, component, scenario_key) || [])
+            to_skip[:will_fix].merge(AXE_RULES_TO_SKIP.dig(:will_fix, :per_component, component, scenario_key) || [])
           end
         end
 

data/lib/primer/view_components/engine.rb

@@ -48,10 +48,7 @@ module Primer
 
       initializer "primer.forms.helpers" do
         ActiveSupport.on_load :action_controller_base do
-          begin
-            require "primer/form_helper"
-          rescue LoadError
-          end
+          require_relative "../../../app/helpers/primer/form_helper"
 
           helper Primer::FormHelper
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 49
+      MINOR = 51
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/form_control_preview/playground.html.erb

@@ -8,10 +8,12 @@
 
 <br>
 
+<% field_id = "bar-#{SecureRandom.hex}" %>
+
 <%= form_with(url: "/foo") do |f| %>
-  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: "bar" })) do |component| %>
+  <%= render(Primer::Alpha::FormControl.new(**system_arguments, label_arguments: { for: field_id })) do |component| %>
     <% component.with_input do |input_arguments| %>
-      <%= f.text_field(:bar, **input_arguments) %>
+      <%= f.text_field(:bar, id: field_id, **input_arguments) %>
     <% end %>
   <% end %>
 <% end %>

data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb

@@ -1,7 +1,7 @@
 <p style="max-width: 500px">
   Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
   onto the page as an SVG &lt;symbol&gt; element and included into the SVG you see below with the &lt;use&gt; element.
-  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
+  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank" style="text-decoration: underline">MDN docs</a> for
   more information.
 </p>
 

data/previews/primer/alpha/overlay_preview.rb

@@ -77,31 +77,6 @@ module Primer
         end
       end
 
-      # @label Menu No Header
-      #
-      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
-      # @param padding [Symbol] select [normal, condensed, none]
-      # @param anchor_align [Symbol] select [start, center, end]
-      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
-      # @param allow_out_of_bounds [Boolean] toggle
-      #
-      # @param button_text [String] text
-      # @param body_text [String] text
-      def menu_no_header(size: :auto, padding: :normal, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, button_text: "Show Overlay Menu", body_text: "This is a menu")
-        render(Primer::Alpha::Overlay.new(
-                 title: "Menu",
-                 role: :menu,
-                 size: size,
-                 padding: padding,
-                 anchor_align: anchor_align,
-                 anchor_side: anchor_side,
-                 allow_out_of_bounds: allow_out_of_bounds
-               )) do |d|
-          d.with_show_button { button_text }
-          d.with_body { body_text }
-        end
-      end
-
       # @label Middle Of Page
       #
       # @param title [String] text

data/previews/primer/alpha/text_area_preview.rb

@@ -50,7 +50,7 @@ module Primer
       # @label Default
       # @snapshot
       def default
-        render(Primer::Alpha::TextArea.new(name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-default", name: "my-text-area-default", label: "Tell me about yourself"))
       end
 
       # @!group Options
@@ -58,61 +58,61 @@ module Primer
       # @label With caption
       # @snapshot
       def with_caption
-        render(Primer::Alpha::TextArea.new(caption: "With a caption", name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-caption", name: "my-text-area-with-caption", caption: "With a caption", label: "Tell me about yourself"))
       end
 
       # @label Visually hidden label
       # @snapshot
       def visually_hide_label
-        render(Primer::Alpha::TextArea.new(visually_hide_label: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-visually-hide-label", name: "my-text-area-visually-hide-label", visually_hide_label: true, label: "Tell me about yourself"))
       end
 
       # @label Full width
       # @snapshot
       def full_width
-        render(Primer::Alpha::TextArea.new(full_width: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-full-width", name: "my-text-area-full-width", full_width: true, label: "Tell me about yourself"))
       end
 
       # @label Not full width
       # @snapshot
       def not_full_width
-        render(Primer::Alpha::TextArea.new(full_width: false, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-not-full-width", name: "my-text-area-not-full-width", full_width: false, label: "Tell me about yourself"))
       end
 
       # @label Disabled
       # @snapshot
       def disabled
-        render(Primer::Alpha::TextArea.new(disabled: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-disabled", name: "my-text-area-disabled", disabled: true, label: "Tell me about yourself"))
       end
 
       # @label Invalid
       # @snapshot
       def invalid
-        render(Primer::Alpha::TextArea.new(invalid: true, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-invalid", name: "my-text-area-invalid", invalid: true, label: "Tell me about yourself"))
       end
 
       # @label With validation message
       # @snapshot
       def with_validation_message
-        render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-validation-message", name: "my-text-area-with-validation-message", validation_message: "An error occurred!", label: "Tell me about yourself"))
       end
 
       # @label With character limit
       # @snapshot interactive
       def with_character_limit
-        render(Primer::Alpha::TextArea.new(character_limit: 10, name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit", name: "my-text-area-with-character-limit", character_limit: 10, label: "Tell me about yourself"))
       end
 
       # @label With character limit, over limit
       # @snapshot interactive
       def with_character_limit_over_limit
-        render(Primer::Alpha::TextArea.new(character_limit: 10, name: "my-text-area", label: "Tell me about yourself", value: "This text is definitely over the limit."))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-over-limit", name: "my-text-area-with-character-limit-over-limit", character_limit: 10, label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end
 
       # @label With character limit and caption
       # @snapshot
       def with_character_limit_and_caption
-        render(Primer::Alpha::TextArea.new(character_limit: 100, caption: "With a caption.", name: "my-text-area", label: "Tell me about yourself"))
+        render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-and-caption", name: "my-text-area-with-character-limit-and-caption", character_limit: 100, caption: "With a caption.", label: "Tell me about yourself"))
       end
       #
       # @!endgroup

data/previews/primer/alpha/text_field_preview.rb

@@ -15,6 +15,7 @@ module Primer
       # @param size [Symbol] select [small, medium, large]
       # @param show_clear_button toggle
       # @param clear_button_id text
+      # @param clear_button_label text
       # @param full_width toggle
       # @param disabled toggle
       # @param invalid toggle
@@ -35,6 +36,7 @@ module Primer
         size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
         show_clear_button: false,
         clear_button_id: "my-text-field-clear-button",
+        clear_button_label: nil,
         full_width: true,
         disabled: false,
         invalid: false,
@@ -56,6 +58,7 @@ module Primer
           size: size,
           show_clear_button: show_clear_button,
           clear_button_id: clear_button_id,
+          clear_button_label: clear_button_label,
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
@@ -133,6 +136,12 @@ module Primer
         render(Primer::Alpha::TextField.new(show_clear_button: true, name: "my-text-field-3", label: "My text field"))
       end
 
+      # @label Show clear button with custom label
+      # @snapshot
+      def show_clear_button_with_custom_label
+        render(Primer::Alpha::TextField.new(show_clear_button: true, clear_button_label: "Effacer", name: "my-text-field-3-custom", label: "Mon champ de texte"))
+      end
+
       # @label Full width
       # @snapshot
       def full_width