feat(text-area): add calcite-text-area component

src/components/label/label.stories.ts

@@ -77,6 +77,10 @@ export const simple = (): string => html`
         <calcite-option>c</calcite-option>
       </calcite-select>
     </calcite-label>
+    <calcite-label>
+      Add Notes
+      <calcite-text-area> </calcite-text-area>
+    </calcite-label>
   </div>
 `;
 
@@ -139,6 +143,10 @@ export const darkModeRTL_TestOnly = (): string => html`
       <calcite-checkbox></calcite-checkbox>
       Text trailing inline-space-between
     </calcite-label>
+    <calcite-label>
+      Add Notes
+      <calcite-text-area> </calcite-text-area>
+    </calcite-label>
   </div>
 `;
 
@@ -175,4 +183,8 @@ export const spacingWithLabel_TestOnly = (): string => html`
     I should not have a bottom margin because I have the CSS variable set.
     <calcite-input></calcite-input>
   </calcite-label>
+  <calcite-label>
+    Add Notes
+    <calcite-text-area> </calcite-text-area>
+  </calcite-label>
 `;

src/components/text-area/assets/text-area/t9n/messages_en.json

@@ -0,0 +1,4 @@
+{
+  "invalid": "Invalid",
+  "overLimit": "Character limit exceeded"
+}

src/components/text-area/readme.md

@@ -0,0 +1,78 @@
+# calcite-text-area
+
+<!-- Auto Generated Below -->
+
+## Usage
+
+### Basic
+
+```html
+<calcite-text-area placeholder="Add Notes"></calcite-text-area>
+```
+
+### Exceeding-max-length
+
+Renders text-area with
+
+```html
+<calcite-text-area placeholder="Add Notes" value="Rocky Mountains National Park" max-length="20"></calcite-text-area>
+```
+
+## Properties
+
+| Property           | Attribute          | Description                                                                                                       | Type                                                                                                                                                                                                                                    | Default     |
+| ------------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `autofocus`        | `autofocus`        | When `true`, the component is focused on page load.                                                               | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `columns`          | `columns`          | Specifies the number or columns allowed.                                                                          | `number`                                                                                                                                                                                                                                | `undefined` |
+| `disabled`         | `disabled`         | When `true`, interaction is prevented and the component is displayed with lower opacity.                          | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `groupSeparator`   | `group-separator`  | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `label`            | `label`            | Accessible name for the component.                                                                                | `string`                                                                                                                                                                                                                                | `undefined` |
+| `maxLength`        | `max-length`       | Specifies the maximum number of characters allowed.                                                               | `number`                                                                                                                                                                                                                                | `undefined` |
+| `messageOverrides` | --                 | Use this property to override individual strings used by the component.                                           | `{ invalid?: string; overLimit?: string; }`                                                                                                                                                                                             | `undefined` |
+| `name`             | `name`             | Specifies the name of the component                                                                               | `string`                                                                                                                                                                                                                                | `undefined` |
+| `numberingSystem`  | `numbering-system` | Specifies the Unicode numeral system used by the component for localization.                                      | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
+| `placeholder`      | `placeholder`      | Specifies the placeholder text for the component.                                                                 | `string`                                                                                                                                                                                                                                | `undefined` |
+| `readonly`         | `readonly`         | When `true`, the component's value can be read, but cannot be modified.                                           | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `required`         | `required`         | When `true`, the component must have a value in order for the form to submit.                                     | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `resize`           | `resize`           | When `true`, disables horizontally and vertically resizing the component.                                         | `"both" \| "horizontal" \| "none" \| "vertical"`                                                                                                                                                                                        | `"both"`    |
+| `rows`             | `rows`             | Specifies the number or rows allowed.                                                                             | `number`                                                                                                                                                                                                                                | `undefined` |
+| `scale`            | `scale`            | Specifies the size of the component.                                                                              | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`       |
+| `value`            | `value`            | The component's value.                                                                                            | `string`                                                                                                                                                                                                                                | `undefined` |
+| `wrap`             | `wrap`             | Specifies the wrapping mechanism for the text.                                                                    | `"hard" \| "soft"`                                                                                                                                                                                                                      | `"soft"`    |
+
+## Events
+
+| Event                   | Description                                           | Type                |
+| ----------------------- | ----------------------------------------------------- | ------------------- |
+| `calciteTextAreaChange` | Fires each time a new `value` is typed and committed. | `CustomEvent<void>` |
+| `calciteTextAreaInput`  | Fires each time a new `value` is typed.               | `CustomEvent<void>` |
+
+## Methods
+
+### `selectText() => Promise<void>`
+
+Selects all text of the component's `value`.
+
+#### Returns
+
+Type: `Promise<void>`
+
+### `setFocus() => Promise<void>`
+
+Sets focus on the component.
+
+#### Returns
+
+Type: `Promise<void>`
+
+## Slots
+
+| Slot             | Description                          |
+| ---------------- | ------------------------------------ |
+|                  | A slot for adding text.              |
+| `"footer-end"`   | A slot for adding a trailing footer. |
+| `"footer-start"` | A slot for adding a leading footer.  |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

src/components/text-area/resources.ts

@@ -0,0 +1,24 @@
+export const CSS = {
+  characterLimit: "character-limit",
+  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",
+  borderColor: "border--color",
+  hide: "hide",
+  blocksizeFull: "block-size--full",
+  footerEndSlotOnly: "footer--end-only"
+};
+
+export const SLOTS = {
+  footerStart: "footer-start",
+  footerEnd: "footer-end"
+};
+
+export const RESIZE_TIMEOUT = 100;

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

@@ -0,0 +1,167 @@
+import { newE2EPage } from "@stencil/core/testing";
+import {
+  accessible,
+  defaults,
+  disabled,
+  focusable,
+  formAssociated,
+  hidden,
+  labelable,
+  reflects,
+  renders,
+  t9n
+} from "../../tests/commonTests";
+import { CSS } from "./resources";
+
+describe("calcite-text-area", () => {
+  it("renders", async () => {
+    renders("calcite-text-area", { display: "inline-block" });
+  });
+
+  it("defaults", async () => {
+    defaults("calcite-text-area", [
+      {
+        propertyName: "wrap",
+        defaultValue: "soft"
+      },
+      {
+        propertyName: "scale",
+        defaultValue: "m"
+      }
+    ]);
+  });
+
+  it("honors hidden attribute", () => hidden("calcite-text-area"));
+
+  it("is labelable", () => labelable("calcite-text-area"));
+
+  it("can be disabled", () => disabled("calcite-text-area"));
+
+  it("reflects", async () =>
+    reflects("calcite-text-area", [
+      {
+        propertyName: "columns",
+        value: "10"
+      },
+      {
+        propertyName: "rows",
+        value: "50"
+      },
+      {
+        propertyName: "scale",
+        value: "s"
+      }
+    ]));
+
+  it("is accessible", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-label>add notes<calcite-text-area max-length="50" required name="something" > </calcite-text-area></calcite-label>`
+    );
+    await accessible("calcite-text-area", page);
+  });
+
+  it("is focusable", () => focusable("calcite-text-area"));
+
+  it("is form associated", () =>
+    formAssociated("calcite-text-area", {
+      testValue: "zion national park",
+      expectedSubmitValue: "zion national park",
+      submitsOnEnter: false
+    }));
+
+  it("should emit calciteTextareaInput event when user type in the textarea and emit calciteTextareaChange when users tabs out", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-text-area></calcite-text-area>");
+
+    const element = await page.find("calcite-text-area");
+    const inputEventSpy = await element.spyOnEvent("calciteTextAreaInput");
+    const changeEventSpy = await element.spyOnEvent("calciteTextAreaChange");
+    await page.waitForChanges();
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    await page.keyboard.type("rocky");
+    await page.waitForChanges();
+
+    expect(inputEventSpy).toHaveReceivedEventTimes(5);
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(changeEventSpy).toHaveReceivedEventTimes(1);
+  });
+
+  it("should not emit calciteTextareaChange & calciteTextareaInput event when user tabs out of the textarea without typing", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-text-area></calcite-text-area>");
+
+    const element = await page.find("calcite-text-area");
+    const changeEventSpy = await element.spyOnEvent("calciteTextAreaChange");
+    const inputEventSpy = await element.spyOnEvent("calciteTextAreaInput");
+    await page.waitForChanges();
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(changeEventSpy).not.toHaveReceivedEvent();
+    expect(inputEventSpy).not.toHaveReceivedEvent();
+  });
+
+  it("should be able to enter characters beyond max-length", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-text-area></calcite-text-area>");
+
+    const element = await page.find("calcite-text-area");
+    element.setAttribute("max-length", 5);
+    await page.waitForChanges();
+
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    await page.keyboard.type("rocky mountains");
+    await page.waitForChanges();
+
+    expect(await element.getProperty("value")).toBe("rocky mountains");
+  });
+
+  it("should have footer--slotted class when slotted at both start and end", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-text-area >
+    <calcite-button slot="footer-start">CLEAR</calcite-button>
+    <calcite-button slot="footer-end">RESET</calcite-button></calcite-text-area>`);
+
+    const element = await page.find("calcite-text-area >>> textarea");
+    await page.waitForChanges();
+
+    expect(element).toHaveClass(CSS.footerSlotted);
+  });
+
+  describe("resize", () => {
+    it("should set CSS resize property to horizontal", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-text-area resize="horizontal"></calcite-text-area>`);
+
+      const element = await page.find("calcite-text-area >>> textarea");
+      await page.waitForChanges();
+
+      expect((await element.getComputedStyle()).resize).toBe("horizontal");
+    });
+
+    it("should set CSS resize property to vertical", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-text-area resize="vertical"></calcite-text-area>`);
+
+      const element = await page.find("calcite-text-area >>> textarea");
+      await page.waitForChanges();
+
+      expect((await element.getComputedStyle()).resize).toBe("vertical");
+    });
+  });
+
+  it("supports translations", () => t9n("calcite-text-area"));
+});