@primer/view-components 0.48.0 → 0.49.0-rc.03cc71ca

package/app/components/primer/primer.d.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';

package/app/components/primer/primer.js

@@ -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';

package/app/lib/primer/forms/character_counter.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export declare class CharacterCounter {
+    private inputElement;
+    private characterLimitElement;
+    private characterLimitSrElement;
+    private SCREEN_READER_DELAY;
+    private announceTimeout;
+    private isInitialLoad;
+    constructor(inputElement: HTMLInputElement | HTMLTextAreaElement, characterLimitElement: HTMLElement, characterLimitSrElement: HTMLElement);
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal?: AbortSignal): void;
+    /**
+     * Clean up any pending timeouts
+     */
+    cleanup(): void;
+    /**
+     * Pluralizes a word based on the count
+     */
+    private pluralize;
+    /**
+     * Update the character count display and validation state
+     */
+    private updateCharacterCount;
+    /**
+     * Announce character count to screen readers with debouncing
+     */
+    private announceToScreenReader;
+    /**
+     * Set error when character limit is exceeded
+     */
+    private setError;
+    /**
+     * Clear error when back under character limit
+     */
+    private clearError;
+}

package/app/lib/primer/forms/character_counter.js

@@ -0,0 +1,114 @@
+/**
+ * Shared character counting functionality for text inputs with character limits.
+ * Handles real-time character count updates, validation, and aria-live announcements.
+ */
+export class CharacterCounter {
+    constructor(inputElement, characterLimitElement, characterLimitSrElement) {
+        this.inputElement = inputElement;
+        this.characterLimitElement = characterLimitElement;
+        this.characterLimitSrElement = characterLimitSrElement;
+        this.SCREEN_READER_DELAY = 500;
+        this.announceTimeout = null;
+        this.isInitialLoad = true;
+    }
+    /**
+     * Initialize character counting by setting up event listener and initial count
+     */
+    initialize(signal) {
+        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() {
+        if (this.announceTimeout) {
+            clearTimeout(this.announceTimeout);
+        }
+    }
+    /**
+     * Pluralizes a word based on the count
+     */
+    pluralize(count, string) {
+        return count === 1 ? string : `${string}s`;
+    }
+    /**
+     * Update the character count display and validation state
+     */
+    updateCharacterCount() {
+        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
+     */
+    announceToScreenReader(message) {
+        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
+     */
+    setError() {
+        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
+     */
+    clearError() {
+        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', '');
+        }
+    }
+}

package/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;
+    }
+}

package/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);
+}

package/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;

package/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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.48.0",
+  "version": "0.49.0-rc.03cc71ca",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -67,7 +67,7 @@
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.8.0",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.57.0",
     "@primer/css": "22.0.2",
     "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -80,7 +80,7 @@
     "glob": "^11.0.2",
     "markdownlint-cli2": "^0.19.1",
     "mocha": "^11.0.1",
-    "playwright": "^1.49.1",
+    "playwright": "^1.57.0",
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",

package/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",

package/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"
       }
     ]
   }

package/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",

package/static/previews.json

@@ -6989,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"
+          ]
+        }
       }
     ]
   },
@@ -7284,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",