primer_view_components 0.47.0 → 0.49.0

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

@@ -0,0 +1,129 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+  private SCREEN_READER_DELAY: number = 500
+  private announceTimeout: number | null = null
+  private isInitialLoad: boolean = true
+
+  constructor(
+    private inputElement: HTMLInputElement | HTMLTextAreaElement,
+    private characterLimitElement: HTMLElement,
+    private characterLimitSrElement: HTMLElement,
+  ) {}
+
+  /**
+   * Initialize character counting by setting up event listener and initial count
+   */
+  initialize(signal?: AbortSignal): void {
+    this.inputElement.addEventListener('keyup', () => this.updateCharacterCount(), signal ? {signal} : undefined) // Keyup used over input for better screen reader support
+    this.inputElement.addEventListener(
+      'paste',
+      () => setTimeout(() => this.updateCharacterCount(), 50), // Gives the pasted content time to register
+      signal ? {signal} : undefined,
+    )
+    this.updateCharacterCount()
+    this.isInitialLoad = false
+  }
+
+  /**
+   * Clean up any pending timeouts
+   */
+  cleanup(): void {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout)
+    }
+  }
+
+  /**
+   * Pluralizes a word based on the count
+   */
+  private pluralize(count: number, string: string): string {
+    return count === 1 ? string : `${string}s`
+  }
+
+  /**
+   * Update the character count display and validation state
+   */
+  private updateCharacterCount(): void {
+    if (!this.characterLimitElement) return
+
+    const maxLengthAttr = this.characterLimitElement.getAttribute('data-max-length')
+    if (!maxLengthAttr) return
+
+    const maxLength = parseInt(maxLengthAttr, 10)
+    const currentLength = this.inputElement.value.length
+    const charactersRemaining = maxLength - currentLength
+    let message = ''
+
+    if (charactersRemaining >= 0) {
+      const characterText = this.pluralize(charactersRemaining, 'character')
+      message = `${charactersRemaining} ${characterText} remaining`
+      const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text')
+      if (textSpan) {
+        textSpan.textContent = message
+      }
+      this.clearError()
+    } else {
+      const charactersOver = -charactersRemaining
+      const characterText = this.pluralize(charactersOver, 'character')
+      message = `${charactersOver} ${characterText} over`
+      const textSpan = this.characterLimitElement.querySelector('.FormControl-caption-text')
+      if (textSpan) {
+        textSpan.textContent = message
+      }
+      this.setError()
+    }
+
+    // We don't want this announced on initial load
+    if (!this.isInitialLoad) {
+      this.announceToScreenReader(message)
+    }
+  }
+
+  /**
+   * Announce character count to screen readers with debouncing
+   */
+  private announceToScreenReader(message: string): void {
+    if (this.announceTimeout) {
+      clearTimeout(this.announceTimeout)
+    }
+
+    this.announceTimeout = window.setTimeout(() => {
+      if (this.characterLimitSrElement) {
+        this.characterLimitSrElement.textContent = message
+      }
+    }, this.SCREEN_READER_DELAY)
+  }
+
+  /**
+   * Set error when character limit is exceeded
+   */
+  private setError(): void {
+    this.inputElement.setAttribute('invalid', 'true')
+    this.inputElement.setAttribute('aria-invalid', 'true')
+    this.characterLimitElement.classList.add('fgColor-danger')
+
+    // Show danger icon
+    const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon')
+    if (icon) {
+      icon.removeAttribute('hidden')
+    }
+  }
+
+  /**
+   * Clear error when back under character limit
+   */
+  private clearError(): void {
+    this.inputElement.removeAttribute('invalid')
+    this.inputElement.removeAttribute('aria-invalid')
+    this.characterLimitElement.classList.remove('fgColor-danger')
+
+    // Hide danger icon
+    const icon = this.characterLimitElement.querySelector('.FormControl-caption-icon')
+    if (icon) {
+      icon.setAttribute('hidden', '')
+    }
+  }
+}

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

@@ -33,6 +33,9 @@ module Primer
         # @!macro [new] form_full_width_arguments
         #   @param full_width [Boolean] When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`.
 
+        # @!macro [new] form_input_character_limit_arguments
+        #   @param character_limit [Number] Optional character limit for the input. If provided, a character counter will be displayed below the input.
+
         # @!macro [new] form_system_arguments
         #   @param system_arguments [Hash] A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details.
 
@@ -112,6 +115,7 @@ module Primer
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{@base_id}" if supports_validation?
+            id_map[:character_limit_caption] = "character_limit-#{@base_id}" if character_limit?
             id_map[:caption] = "caption-#{@base_id}" if caption? || caption_template?
           end
 
@@ -196,6 +200,25 @@ module Primer
           form.render_caption_template(caption_template_name)
         end
 
+        def character_limit?
+          false
+        end
+
+        def character_limit_id
+          ids[:character_limit_caption]
+        end
+
+        def character_limit_target_prefix
+          case type
+          when :text_field
+            "primer-text-field"
+          when :text_area
+            "primer-text-area"
+          else
+            ""
+          end
+        end
+
         def valid?
           supports_validation? && validation_messages.empty? && !@invalid
         end

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

@@ -5,13 +5,20 @@ module Primer
     module Dsl
       # :nodoc:
       class TextAreaInput < Input
-        attr_reader :name, :label
+        attr_reader :name, :label, :character_limit
 
         def initialize(name:, label:, **system_arguments)
           @name = name
           @label = label
+          @character_limit = system_arguments.delete(:character_limit)
+
+          if @character_limit.present? && @character_limit.to_i <= 0
+            raise ArgumentError, "character_limit must be a positive integer, got #{@character_limit}"
+          end
 
           super(**system_arguments)
+
+          add_input_data(:target, "primer-text-area.inputElement")
         end
 
         def to_component
@@ -22,6 +29,10 @@ module Primer
           :text_area
         end
 
+        def character_limit?
+          @character_limit.present?
+        end
+
         # :nocov:
         def focusable?
           true

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
+            visually_hide_label inset monospace field_wrap_classes auto_check_src character_limit
           ]
         )
 
@@ -24,6 +24,11 @@ module Primer
           @inset = system_arguments.delete(:inset)
           @monospace = system_arguments.delete(:monospace)
           @auto_check_src = system_arguments.delete(:auto_check_src)
+          @character_limit = system_arguments.delete(:character_limit)
+
+          if @character_limit.present? && @character_limit.to_i <= 0
+            raise ArgumentError, "character_limit must be a positive integer, got #{@character_limit}"
+          end
 
           if @leading_visual
             @leading_visual[:classes] = class_names(
@@ -67,6 +72,10 @@ module Primer
           true
         end
 
+        def character_limit?
+          @character_limit.present?
+        end
+
         def validation_arguments
           if auto_check_src.present?
             super.merge(

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

@@ -0,0 +1,13 @@
+export declare class PrimerTextAreaElement extends HTMLElement {
+    #private;
+    inputElement: HTMLTextAreaElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        PrimerTextAreaElement: typeof PrimerTextAreaElement;
+    }
+}

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

@@ -0,0 +1,53 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _PrimerTextAreaElement_characterCounter;
+import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
+let PrimerTextAreaElement = class PrimerTextAreaElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextAreaElement_characterCounter.set(this, null);
+    }
+    connectedCallback() {
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextAreaElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f").initialize();
+        }
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _PrimerTextAreaElement_characterCounter, "f")?.cleanup();
+    }
+};
+_PrimerTextAreaElement_characterCounter = new WeakMap();
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextAreaElement.prototype, "characterLimitSrElement", void 0);
+PrimerTextAreaElement = __decorate([
+    controller
+], PrimerTextAreaElement);
+export { PrimerTextAreaElement };
+if (!window.customElements.get('primer-text-area')) {
+    Object.assign(window, { PrimerTextAreaElement });
+    window.customElements.define('primer-text-area', PrimerTextAreaElement);
+}

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

@@ -0,0 +1,37 @@
+import {controller, target} from '@github/catalyst'
+import {CharacterCounter} from './character_counter'
+
+@controller
+export class PrimerTextAreaElement extends HTMLElement {
+  @target inputElement: HTMLTextAreaElement
+  @target characterLimitElement: HTMLElement
+  @target characterLimitSrElement: HTMLElement
+
+  #characterCounter: CharacterCounter | null = null
+
+  connectedCallback(): void {
+    if (this.characterLimitElement) {
+      this.#characterCounter = new CharacterCounter(
+        this.inputElement,
+        this.characterLimitElement,
+        this.characterLimitSrElement,
+      )
+      this.#characterCounter.initialize()
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.#characterCounter?.cleanup()
+  }
+}
+
+declare global {
+  interface Window {
+    PrimerTextAreaElement: typeof PrimerTextAreaElement
+  }
+}
+
+if (!window.customElements.get('primer-text-area')) {
+  Object.assign(window, {PrimerTextAreaElement})
+  window.customElements.define('primer-text-area', PrimerTextAreaElement)
+}

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

@@ -15,6 +15,8 @@ export declare class PrimerTextFieldElement extends HTMLElement {
     validationErrorIcon: HTMLElement;
     leadingVisual: HTMLElement;
     leadingSpinner: HTMLElement;
+    characterLimitElement: HTMLElement;
+    characterLimitSrElement: HTMLElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     clearContents(): void;

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

@@ -1,4 +1,3 @@
-/* eslint-disable custom-elements/expose-class-on-global */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -16,13 +15,15 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _PrimerTextFieldElement_abortController;
+var _PrimerTextFieldElement_abortController, _PrimerTextFieldElement_characterCounter;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
+import { CharacterCounter } from './character_counter';
 let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _PrimerTextFieldElement_abortController.set(this, void 0);
+        _PrimerTextFieldElement_characterCounter.set(this, null);
     }
     connectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
@@ -40,9 +41,15 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
             const errorMessage = await event.detail.response.text();
             this.setError(errorMessage);
         }, { signal });
+        // Set up character limit tracking if present
+        if (this.characterLimitElement) {
+            __classPrivateFieldSet(this, _PrimerTextFieldElement_characterCounter, new CharacterCounter(this.inputElement, this.characterLimitElement, this.characterLimitSrElement), "f");
+            __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f").initialize(signal);
+        }
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
+        __classPrivateFieldGet(this, _PrimerTextFieldElement_characterCounter, "f")?.cleanup();
     }
     clearContents() {
         this.inputElement.value = '';
@@ -92,6 +99,7 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
+_PrimerTextFieldElement_characterCounter = new WeakMap();
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "inputElement", void 0);
@@ -113,6 +121,12 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "characterLimitSrElement", void 0);
 PrimerTextFieldElement = __decorate([
     controller
 ], PrimerTextFieldElement);

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

@@ -1,8 +1,7 @@
-/* eslint-disable custom-elements/expose-class-on-global */
-
 import '@github/auto-check-element'
 import type {AutoCheckErrorEvent, AutoCheckSuccessEvent} from '@github/auto-check-element'
 import {controller, target} from '@github/catalyst'
+import {CharacterCounter} from './character_counter'
 
 declare global {
   interface HTMLElementEventMap {
@@ -20,8 +19,11 @@ export class PrimerTextFieldElement extends HTMLElement {
   @target validationErrorIcon: HTMLElement
   @target leadingVisual: HTMLElement
   @target leadingSpinner: HTMLElement
+  @target characterLimitElement: HTMLElement
+  @target characterLimitSrElement: HTMLElement
 
   #abortController: AbortController | null
+  #characterCounter: CharacterCounter | null = null
 
   connectedCallback(): void {
     this.#abortController?.abort()
@@ -48,16 +50,27 @@ export class PrimerTextFieldElement extends HTMLElement {
       },
       {signal},
     )
+
+    // Set up character limit tracking if present
+    if (this.characterLimitElement) {
+      this.#characterCounter = new CharacterCounter(
+        this.inputElement,
+        this.characterLimitElement,
+        this.characterLimitSrElement,
+      )
+      this.#characterCounter.initialize(signal)
+    }
   }
 
   disconnectedCallback() {
     this.#abortController?.abort()
+    this.#characterCounter?.cleanup()
   }
 
   clearContents() {
     this.inputElement.value = ''
     this.inputElement.focus()
-    this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }))
+    this.inputElement.dispatchEvent(new Event('input', {bubbles: true, cancelable: false}))
   }
 
   clearError(): void {

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

@@ -1,5 +1,7 @@
-<%= render(FormControl.new(input: @input)) do %>
-  <%= content_tag(:div, **@field_wrap_arguments) do %>
-    <%= builder.text_area(@input.name, **@input.input_arguments) %>
+<primer-text-area>
+  <%= render(FormControl.new(input: @input)) do %>
+    <%= content_tag(:div, **@field_wrap_arguments) do %>
+      <%= builder.text_area(@input.name, **@input.input_arguments) %>
+    <% end %>
   <% end %>
-<% end %>
+</primer-text-area>

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

@@ -77,6 +77,14 @@ module Primer
             Primer::Beta::Truncate.new(**truncate_arguments).with_content(text)
           end
       end
+
+      def character_limit_validation_arguments
+        {
+          class: "FormControl-inlineValidation",
+          id: @input.character_limit_validation_id,
+          hidden: true
+        }
+      end
     end
   end
 end

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/action_menu_preview/submitting_forms.html.erb

@@ -8,7 +8,7 @@
   }) do |item| %>
     <% if params["time"] %>
       <% item.with_description.with_content("Last submitted at #{params["time"]}") %>
-    <% elsif %>
+    <% else %>
       <% item.with_description.with_content("Not yet submitted") %>
     <% end %>
   <% end %>

data/previews/primer/alpha/text_area_preview.rb

@@ -16,6 +16,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
+      # @param character_limit number
       def playground(
         name: "my-text-area",
         id: "my-text-area",
@@ -26,7 +27,8 @@ module Primer
         full_width: true,
         disabled: false,
         invalid: false,
-        validation_message: nil
+        validation_message: nil,
+        character_limit: nil
       )
         system_arguments = {
           name: name,
@@ -38,7 +40,8 @@ module Primer
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
-          validation_message: validation_message
+          validation_message: validation_message,
+          character_limit: character_limit
         }
 
         render(Primer::Alpha::TextArea.new(**system_arguments))
@@ -93,6 +96,24 @@ module Primer
       def with_validation_message
         render(Primer::Alpha::TextArea.new(validation_message: "An error occurred!", name: "my-text-area", 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"))
+      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."))
+      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"))
+      end
       #
       # @!endgroup
     end

data/previews/primer/alpha/text_field_preview.rb

@@ -24,6 +24,7 @@ module Primer
       # @param monospace toggle
       # @param leading_visual_icon octicon
       # @param leading_spinner toggle
+      # @param character_limit number
       def playground(
         name: "my-text-field",
         id: "my-text-field",
@@ -42,7 +43,8 @@ module Primer
         inset: false,
         monospace: false,
         leading_visual_icon: nil,
-        leading_spinner: false
+        leading_spinner: false,
+        character_limit: nil
       )
         system_arguments = {
           name: name,
@@ -61,7 +63,8 @@ module Primer
           placeholder: placeholder,
           inset: inset,
           monospace: monospace,
-          leading_spinner: leading_spinner
+          leading_spinner: leading_spinner,
+          character_limit: character_limit
         }
 
         if leading_visual_icon
@@ -197,7 +200,7 @@ module Primer
       end
 
       # @label With trailing label
-      # @snapshot 
+      # @snapshot
       def with_trailing_label
         render(Primer::Alpha::TextField.new(trailing_visual: { label: { text: "Hello" } }, name: "my-text-field-15", label: "My text field"))
       end
@@ -213,6 +216,24 @@ module Primer
       def with_validation_message
         render(Primer::Alpha::TextField.new(validation_message: "An error occurred!", name: "my-text-field-17", label: "My text field"))
       end
+
+      # @label With character limit
+      # @snapshot interactive
+      def with_character_limit
+        render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-18", label: "Username"))
+      end
+
+      # @label With character limit, over limit
+      # @snapshot interactive
+      def with_character_limit_over_limit
+        render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-19", 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::TextField.new(character_limit: 20, caption: "Choose a unique username.", name: "my-text-field-20", label: "Username"))
+      end
       #
       # @!endgroup
 
@@ -220,24 +241,24 @@ module Primer
       #
       # @label Auto check request ok
       def with_auto_check_ok
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_ok_path, name: "my-text-field-18", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_ok_path, name: "my-text-field-21", label: "My text field"))
       end
 
       # @label Auto check request accepted
       def with_auto_check_accepted
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_accepted_path, name: "my-text-field-19", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_accepted_path, name: "my-text-field-22", label: "My text field"))
       end
 
       # @label Auto check request error
       def with_auto_check_error
-        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_error_path, name: "my-text-field-20", label: "My text field"))
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.primer_view_components.example_check_error_path, name: "my-text-field-23", label: "My text field"))
       end
       #
       # @!endgroup
 
       # @label With data target attribute
       def with_data_target
-        render(Primer::Alpha::TextField.new(name: "my-text-field", label: "My text field", data: { target: "custom-component.inputElement" }))
+        render(Primer::Alpha::TextField.new(name: "my-text-field-24", label: "My text field", data: { target: "custom-component.inputElement" }))
       end
       #
       # @!endgroup