This repository has been archived by the owner on Jul 2, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into EVG-19395-feature-branch
- Loading branch information
Showing
24 changed files
with
511 additions
and
690 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
src/components/TextInputWithValidation/TextInputWithValidation.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { CustomMeta, CustomStoryObj } from "test_utils/types"; | ||
| import TextInputWithValidation from "."; | ||
|
|
||
| export default { | ||
| title: "Components/TextInput/TextInputWithValidation", | ||
| component: TextInputWithValidation, | ||
| } satisfies CustomMeta<typeof TextInputWithValidation>; | ||
|
|
||
| export const Default: CustomStoryObj<typeof TextInputWithValidation> = { | ||
| render: (args) => <TextInputWithValidation {...args} />, | ||
| argTypes: {}, | ||
| args: { | ||
| validator: (v) => v !== "bad", | ||
| label: "Some search field", | ||
| }, | ||
| }; |
77 changes: 77 additions & 0 deletions
77
src/components/TextInputWithValidation/TextInputWithValidation.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { render, screen, userEvent } from "test_utils"; | ||
| import TextInputWithValidation from "."; | ||
|
|
||
| describe("textInputWithValidation", () => { | ||
| it("should not be able to submit with an invalid input", async () => { | ||
| const user = userEvent.setup(); | ||
| const onSubmit = jest.fn(); | ||
| render( | ||
| <TextInputWithValidation | ||
| onSubmit={onSubmit} | ||
| label="textinput" | ||
| aria-label="textinput" | ||
| validator={(v) => v.length > 5} | ||
| /> | ||
| ); | ||
| const input = screen.getByRole("textbox", { name: "textinput" }); | ||
| await user.type(input, "test"); | ||
| expect(input).toHaveValue("test"); | ||
| await user.type(input, "{enter}"); | ||
| expect(onSubmit).not.toHaveBeenCalledWith("test"); | ||
| }); | ||
| it("should not validate without a validation function", async () => { | ||
| const user = userEvent.setup(); | ||
| const onSubmit = jest.fn(); | ||
| render( | ||
| <TextInputWithValidation | ||
| onSubmit={onSubmit} | ||
| label="textinput" | ||
| aria-label="textinput" | ||
| /> | ||
| ); | ||
| const input = screen.getByRole("textbox", { name: "textinput" }); | ||
| await user.type(input, "test"); | ||
| await user.type(input, "{enter}"); | ||
| expect(onSubmit).toHaveBeenCalledWith("test"); | ||
| }); | ||
| it("should call onChange only for valid inputs", async () => { | ||
| const user = userEvent.setup(); | ||
| const onChange = jest.fn(); | ||
| render( | ||
| <TextInputWithValidation | ||
| onChange={onChange} | ||
| label="textinput" | ||
| aria-label="textinput" | ||
| validator={(v) => v.length >= 5} | ||
| /> | ||
| ); | ||
| const input = screen.getByRole("textbox", { name: "textinput" }); | ||
| await user.type(input, "test"); | ||
| expect(onChange).not.toHaveBeenCalledWith("test"); | ||
| await user.type(input, "5"); | ||
| expect(onChange).toHaveBeenCalledWith("test5"); | ||
| }); | ||
| it("clearOnSubmit should clear the input after a valid input is submitted", async () => { | ||
| const user = userEvent.setup(); | ||
| const onChange = jest.fn(); | ||
| const onSubmit = jest.fn(); | ||
| render( | ||
| <TextInputWithValidation | ||
| onChange={onChange} | ||
| label="textinput" | ||
| aria-label="textinput" | ||
| validator={(v) => v.length >= 5} | ||
| onSubmit={onSubmit} | ||
| clearOnSubmit | ||
| /> | ||
| ); | ||
| const input = screen.getByRole("textbox", { name: "textinput" }); | ||
| await user.type(input, "test"); | ||
| expect(onChange).not.toHaveBeenCalledWith("test"); | ||
| await user.type(input, "5"); | ||
| expect(onChange).toHaveBeenCalledWith("test5"); | ||
| await user.type(input, "{enter}"); | ||
| expect(input).toHaveValue(""); | ||
| expect(onSubmit).toHaveBeenCalledWith("test5"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { useState, forwardRef } from "react"; | ||
| import IconButton from "@leafygreen-ui/icon-button"; | ||
| import { palette } from "@leafygreen-ui/palette"; | ||
| import Icon from "components/Icon"; | ||
| import IconTooltip from "components/IconTooltip"; | ||
| import TextInputWithGlyph from "components/TextInputWithGlyph"; | ||
| import type { TextInputWithGlyphProps } from "components/TextInputWithGlyph"; | ||
|
|
||
| const { yellow } = palette; | ||
| type TextInputWithValidationProps = { | ||
| /** | ||
| * `onSubmit` will be called when the user submits a new input with the enter key or the plus button | ||
| * if the input is valid | ||
| * @param value - the value of the input | ||
| * @returns void | ||
| */ | ||
| onSubmit?: (value: string) => void; | ||
| validator?: (value: string) => boolean; | ||
| /** | ||
| * `onChange` will be called when the user types into the input and the input is valid | ||
| * @param value - the value of the input | ||
| * @returns void | ||
| */ | ||
| onChange?: (value: string) => void; | ||
| validatorErrorMessage?: string; | ||
| placeholder?: string; | ||
| /** | ||
| * If true, the input will be cleared when the user submits a new input | ||
| */ | ||
| clearOnSubmit?: boolean; | ||
| } & Omit<TextInputWithGlyphProps, "icon" | "onSubmit" | "onChange">; | ||
|
|
||
| const TextInputWithValidation: React.FC<TextInputWithValidationProps> = | ||
| forwardRef((props, ref) => { | ||
| const { | ||
| "aria-label": ariaLabel, | ||
| clearOnSubmit = false, | ||
| label, | ||
| onChange = () => {}, | ||
| onSubmit = () => {}, | ||
| validator = () => true, | ||
| validatorErrorMessage = "Invalid input", | ||
| ...rest | ||
| } = props; | ||
|
|
||
| const [input, setInput] = useState(""); | ||
| const isValid = validator(input); | ||
|
|
||
| const handleOnSubmit = () => { | ||
| if (isValid) { | ||
| onSubmit(input); | ||
| if (clearOnSubmit) { | ||
| setInput(""); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const handleOnChange = (value: string) => { | ||
| if (validator(value)) { | ||
| onChange(value); | ||
| } | ||
| setInput(value); | ||
| }; | ||
|
|
||
| return ( | ||
| <TextInputWithGlyph | ||
| value={input} | ||
| onChange={(e) => handleOnChange(e.target.value)} | ||
| onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => | ||
| e.key === "Enter" && handleOnSubmit() | ||
| } | ||
| label={label} | ||
| aria-label={ariaLabel} | ||
| ref={ref} | ||
| icon={ | ||
| isValid ? ( | ||
| <IconButton | ||
| onClick={handleOnSubmit} | ||
| aria-label="Select plus button" | ||
| > | ||
| <Icon glyph="Plus" /> | ||
| </IconButton> | ||
| ) : ( | ||
| <IconTooltip | ||
| glyph="Warning" | ||
| fill={yellow.base} | ||
| aria-label="validation error" | ||
| > | ||
| {validatorErrorMessage} | ||
| </IconTooltip> | ||
| ) | ||
| } | ||
| {...rest} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| TextInputWithValidation.displayName = "TextInputWithValidation"; | ||
| export default TextInputWithValidation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.