feat(text-area): add support for minLength

packages/calcite-components/src/components/text-area/assets/t9n/messages.json

@@ -1,4 +1,5 @@
 {
   "invalid": "Invalid",
-  "tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
+  "tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}.",
+  "tooShort": "The current character length is {currentLength}, which is less than the minimum character length of {minLength}."
 }

packages/calcite-components/src/components/text-area/assets/t9n/text-area.t9n.en.json

@@ -1,4 +1,5 @@
 {
   "invalid": "Invalid",
-  "tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}."
+  "tooLong": "The current character length is {currentLength}, which exceeds the maximum character length of {maxLength}.",
+  "tooShort": "The current character length is {currentLength}, which is less than the minimum character length of {minLength}."
 }

packages/calcite-components/src/components/text-area/interfaces.ts

@@ -1,4 +1,5 @@
 export interface CharacterLengthObj {
   currentLength: string;
   maxLength: string;
+  minLength: string;
 }

packages/calcite-components/src/components/text-area/resources.ts

@@ -1,13 +1,13 @@
 export const CSS = {
   assistiveText: "assistive-text",
   characterLimit: "character-limit",
+  characterLimitInvalid: "character-limit--invalid",
   content: "content",
   container: "container",
   footer: "footer",
   resizeDisabled: "resize--disabled",
   resizeDisabledX: "resize--disabled-x",
   resizeDisabledY: "resize--disabled-y",
-  characterOverLimit: "character--over-limit",
   readOnly: "readonly",
   textAreaInvalid: "text-area--invalid",
   footerSlotted: "footer--slotted",

packages/calcite-components/src/components/text-area/text-area.e2e.ts

@@ -87,7 +87,7 @@ describe("calcite-text-area", () => {
     accessible(
       html`<calcite-label>
         add notes
-        <calcite-text-area max-length="50" required name="something"></calcite-text-area>
+        <calcite-text-area min-length="5" max-length="50" required name="something"></calcite-text-area>
       </calcite-label>`,
     );
   });
@@ -152,7 +152,7 @@ describe("calcite-text-area", () => {
     await page.setContent("<calcite-text-area></calcite-text-area>");
 
     const element = await page.find("calcite-text-area");
-    element.setAttribute("max-length", "5");
+    element.setProperty("maxLength", "5");
     await page.waitForChanges();
 
     await page.keyboard.press("Tab");
@@ -164,6 +164,23 @@ describe("calcite-text-area", () => {
     expect(await element.getProperty("value")).toBe("rocky mountains");
   });
 
+  it("should be able to enter characters below min-length", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-text-area></calcite-text-area>");
+
+    const element = await page.find("calcite-text-area");
+    element.setProperty("minLength", "5");
+    await page.waitForChanges();
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    await page.keyboard.type("rock");
+    await page.waitForChanges();
+
+    expect(await element.getProperty("value")).toBe("rock");
+  });
+
   it("should have footer--slotted class when slotted at both start and end", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-text-area>
@@ -250,7 +267,7 @@ describe("calcite-text-area", () => {
       });
     });
 
-    describe("max-chars", () => {
+    describe("max-chars valid range", () => {
       themed(html`<calcite-text-area max-length="10"></calcite-text-area>`, {
         "--calcite-text-area-divider-color": {
           shadowSelector: `.${CSS.textArea}`,
@@ -273,13 +290,45 @@ describe("calcite-text-area", () => {
       });
     });
 
-    describe("over limit", () => {
+    describe("min-chars valid range", () => {
+      themed(html`<calcite-text-area min-length="4" value="12345"></calcite-text-area>`, {
+        "--calcite-text-area-divider-color": {
+          shadowSelector: `.${CSS.textArea}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-text-area-footer-border-color": [
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderBottomColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderLeftColor",
+          },
+          {
+            shadowSelector: `.${CSS.footer}`,
+            targetProp: "borderRightColor",
+          },
+        ],
+      });
+    });
+
+    describe("over max limit", () => {
       themed(html`<calcite-text-area max-length="4" value="12345"></calcite-text-area>`, {
         "--calcite-text-area-character-limit-text-color": {
           shadowSelector: `.${CSS.characterLimit}`,
           targetProp: "color",
         },
       });
     });
+
+    describe("under min limit", () => {
+      themed(html`<calcite-text-area min-length="4" value="123"></calcite-text-area>`, {
+        "--calcite-text-area-character-limit-text-color": {
+          shadowSelector: `.${CSS.characterLimit}`,
+          targetProp: "color",
+        },
+      });
+    });
   });
 });

packages/calcite-components/src/components/text-area/text-area.scss

@@ -97,7 +97,7 @@
   padding-inline-start: var(--calcite-spacing-md);
 }
 
-.character--over-limit {
+.character-limit--invalid {
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-color-status-danger);
 }

packages/calcite-components/src/components/text-area/text-area.stories.ts

@@ -103,8 +103,9 @@ export const groupSeparator_TestOnly = (): string => html`
   </calcite-text-area>
 `;
 
-export const exceedingMaxLength_TestOnly = (): string => html`
+export const invalidCharLength_TestOnly = (): string => html`
   <calcite-text-area value="Rocky Mountains National Park" max-length="10"> </calcite-text-area>
+  <calcite-text-area value="Rocky" min-length="10"> </calcite-text-area>
 `;
 
 export const chineseLang_TestOnly = (): string => html`

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -161,7 +161,7 @@ export class TextArea
   @property() label: string;
 
   /**
-   * Specifies the maximum number of characters allowed.
+   * Specifies the maximum number of characters allowed. Must be greater than or equal to the value of `minLength`, if present and valid.
    *
    * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-maxlength)
    */
@@ -178,7 +178,7 @@ export class TextArea
   messages = useT9n<typeof T9nStrings>({ blocking: true });
 
   /**
-   * Specifies the minimum number of characters allowed.
+   * Specifies the minimum number of characters allowed. Must be less than or equal to the value of `maxLength`, if present and valid.
    *
    * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-minlength)
    */
@@ -360,9 +360,10 @@ export class TextArea
 
   private getLocalizedCharacterLength(): CharacterLengthObj {
     const currentLength = this.value ? this.value.length.toString() : "0";
-    const maxLength = this.maxLength.toString();
+    const maxLength = this.maxLength?.toString();
+    const minLength = this.minLength?.toString();
     if (this.numberingSystem === "latn") {
-      return { currentLength, maxLength };
+      return { currentLength, maxLength, minLength };
     }
 
     numberStringFormatter.numberFormatOptions = {
@@ -374,13 +375,16 @@ export class TextArea
     return {
       currentLength: numberStringFormatter.localize(currentLength),
       maxLength: numberStringFormatter.localize(maxLength),
+      minLength: numberStringFormatter.localize(minLength),
     };
   }
 
   syncHiddenFormInput(input: HTMLInputElement): void {
     input.setCustomValidity("");
-    if (this.isCharacterLimitExceeded()) {
-      input.setCustomValidity(this.replacePlaceholdersInMessages());
+    if (this.isCharacterOverMaxLimit()) {
+      input.setCustomValidity(this.replacePlaceholdersInLongMessages());
+    } else if (this.isCharacterUnderMinLimit()) {
+      input.setCustomValidity(this.replacePlaceholdersInShortMessages());
     }
 
     syncHiddenFormInput("textarea", this, input);
@@ -426,34 +430,61 @@ export class TextArea
     };
   }
 
-  private replacePlaceholdersInMessages(): string {
-    return this.messages.tooLong
-      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
-      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
+  private replacePlaceholders(
+    template: string,
+    placeholderToValueObject: { [key: string]: string },
+  ): string {
+    let result;
+    for (const key in placeholderToValueObject) {
+      result = template.replace(key, placeholderToValueObject[key]);
+    }
+    return result;
+  }
+
+  private replacePlaceholdersInLongMessages(): string {
+    return this.replacePlaceholders(this.messages.tooLong, {
+      "{currentLength}": this.localizedCharacterLengthObj.currentLength,
+      "{maxLength}": this.localizedCharacterLengthObj.maxLength,
+    });
   }
 
-  private isCharacterLimitExceeded(): boolean {
+  private replacePlaceholdersInShortMessages(): string {
+    return this.replacePlaceholders(this.messages.tooShort, {
+      "{currentLength}": this.localizedCharacterLengthObj.currentLength,
+      "{minLength}": this.localizedCharacterLengthObj.minLength,
+    });
+  }
+
+  private isCharacterOverMaxLimit(): boolean {
     return this.value?.length > this.maxLength;
   }
 
+  private isCharacterUnderMinLimit(): boolean {
+    return this.value?.length < this.minLength;
+  }
+
   // #endregion
 
   // #region Rendering
 
   override render(): JsxNode {
-    const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
+    const hasFooter =
+      this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength || !!this.minLength;
+    const isOverMaxLimit = this.isCharacterOverMaxLimit();
+    const isUnderMinLimit = this.isCharacterUnderMinLimit();
+
     return (
       <InteractiveContainer disabled={this.disabled}>
         <textarea
           aria-describedby={this.guid}
           aria-errormessage={IDS.validationMessage}
-          ariaInvalid={this.status === "invalid" || this.isCharacterLimitExceeded()}
+          ariaInvalid={this.status === "invalid" || isOverMaxLimit || isUnderMinLimit}
           ariaLabel={getLabelText(this)}
           autofocus={this.el.autofocus}
           class={{
             [CSS.textArea]: true,
             [CSS.readOnly]: this.readOnly,
-            [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
+            [CSS.textAreaInvalid]: isOverMaxLimit || isUnderMinLimit,
             [CSS.footerSlotted]: this.endSlotHasElements && this.startSlotHasElements,
             [CSS.textAreaOnly]: !hasFooter,
           }}
@@ -504,9 +535,14 @@ export class TextArea
           {this.renderCharacterLimit()}
         </footer>
         <HiddenFormInputSlot component={this} />
-        {this.isCharacterLimitExceeded() && (
+        {isOverMaxLimit && (
+          <span ariaLive="polite" class={CSS.assistiveText} id={this.guid}>
+            {this.replacePlaceholdersInLongMessages()}
+          </span>
+        )}
+        {isUnderMinLimit && (
           <span ariaLive="polite" class={CSS.assistiveText} id={this.guid}>
-            {this.replacePlaceholdersInMessages()}
+            {this.replacePlaceholdersInShortMessages()}
           </span>
         )}
         {this.validationMessage && this.status === "invalid" ? (
@@ -523,11 +559,16 @@ export class TextArea
   }
 
   private renderCharacterLimit(): JsxNode | null {
-    if (this.maxLength) {
+    if (this.maxLength || this.minLength) {
       this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
       return (
         <span class={CSS.characterLimit}>
-          <span class={{ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() }}>
+          <span
+            class={{
+              [CSS.characterLimitInvalid]:
+                this.isCharacterOverMaxLimit() || this.isCharacterUnderMinLimit(),
+            }}
+          >
             {this.localizedCharacterLengthObj.currentLength}
           </span>
           {"/"}