feat: add email TextFieldTextType (#1916)

mondaycom · Jan 25, 2024 · 6bfda79 · 6bfda79
1 parent 9ae7f00
commit 6bfda79
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 1 deletion.
diff --git a/src/components/TextField/TextFieldConstants.ts b/src/components/TextField/TextFieldConstants.ts
@@ -28,7 +28,8 @@ export enum TextFieldTextType {
   SEARCH = "search",
   DATE = "date",
   DATE_TIME = "datetime-local",
-  NUMBER = "number"
+  NUMBER = "number",
+  EMAIL = "email"
 }
 
 export enum TextFieldFeedbackState {

diff --git a/src/components/TextField/__tests__/TextField.jest.js b/src/components/TextField/__tests__/TextField.jest.js
@@ -226,6 +226,17 @@ describe("TextField Tests", () => {
       const input = screen.getByPlaceholderText(defaultPlaceHolder);
       expect(input.type).toBe(TextField.types.PASSWORD);
     });
+
+    it("type should be email", () => {
+      const { rerender } = inputComponent;
+      act(() => {
+        inputComponent = rerender(
+          <TextField placeholder={defaultPlaceHolder} onChange={onChangeStub} id="test" type={TextField.types.EMAIL} />
+        );
+      });
+      const input = screen.getByPlaceholderText(defaultPlaceHolder);
+      expect(input.type).toBe(TextField.types.EMAIL);
+    });
   });
   describe("autocomplete", () => {
     it("should add autocomplete attr and set it to on", () => {

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
@@ -587,6 +587,68 @@ exports[`TextField renders correctly with date-time type 1`] = `
 </div>
 `;
 
+exports[`TextField renders correctly with email 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="email"
+        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 icon 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
@@ -109,4 +109,9 @@ describe("TextField renders correctly", () => {
     const tree = renderer.create(<TextField type={TextField.types.DATE_TIME} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it("with email type", () => {
+    const tree = renderer.create(<TextField type={TextField.types.EMAIL} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });