feat: add tel TextFieldTextType (#1918)

mondaycom · Jan 25, 2024 · 64f71ec · 64f71ec
1 parent acec76c
commit 64f71ec
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 0 deletions.
diff --git a/src/components/TextField/TextFieldConstants.ts b/src/components/TextField/TextFieldConstants.ts
@@ -29,6 +29,7 @@ export enum TextFieldTextType {
   DATE = "date",
   DATE_TIME = "datetime-local",
   NUMBER = "number",
+  TEL = "tel",
   URL = "url",
   EMAIL = "email"
 }

diff --git a/src/components/TextField/__tests__/TextField.jest.js b/src/components/TextField/__tests__/TextField.jest.js
@@ -227,6 +227,17 @@ describe("TextField Tests", () => {
       expect(input.type).toBe(TextField.types.PASSWORD);
     });
 
+    it("type should be tel", () => {
+      const { rerender } = inputComponent;
+      act(() => {
+        inputComponent = rerender(
+          <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id="test" type={TextField.types.TEL} />
+        );
+      });
+      const input = screen.getByPlaceholderText(defaultPlaceHolder);
+      expect(input.type).toBe(TextField.types.TEL);
+    });
+
     it("type should be url", () => {
       const { rerender } = inputComponent;
       act(() => {

diff --git a/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap b/src/components/TextField/__tests__/__snapshots__/textField-snapshot-tests.jest.js.snap
@@ -1236,6 +1236,68 @@ exports[`TextField renders correctly with showCharCount 1`] = `
 </div>
 `;
 
+exports[`TextField renders correctly with tel type 1`] = `
+<div
+  aria-busy={false}
+  className="textField"
+  role=""
+>
+  <div
+    className="labelWrapper"
+  >
+    <div
+      className="inputWrapper wrapperSizeSmall"
+    >
+      <input
+        aria-activedescendant=""
+        aria-invalid={null}
+        aria-label=""
+        aria-owns=""
+        autoComplete="off"
+        className="input"
+        data-testid="text-field_input"
+        disabled={false}
+        id="input"
+        maxLength={null}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onWheel={[Function]}
+        placeholder=""
+        readOnly={false}
+        required={false}
+        role=""
+        type="tel"
+        value=""
+      />
+      <div
+        className="clickable iconContainer iconContainerActive disableTextSelection"
+        data-testid="clickable"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="button"
+        tabIndex={-1}
+      />
+      <div
+        className="clickable iconContainer iconContainerActive disableTextSelection"
+        data-testid="text-field-secondary-button_input"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="button"
+        tabIndex={-1}
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`TextField renders correctly with url type 1`] = `
 <div
   aria-busy={false}

diff --git a/src/components/TextField/__tests__/textField-snapshot-tests.jest.js b/src/components/TextField/__tests__/textField-snapshot-tests.jest.js
@@ -110,6 +110,11 @@ describe("TextField renders correctly", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it("with tel type", () => {
+    const tree = renderer.create(<TextField type={TextField.types.TEL} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it("with url type", () => {
     const tree = renderer.create(<TextField type={TextField.types.URL} />).toJSON();
     expect(tree).toMatchSnapshot();