New input component #1577

praneshg239 · 2025-05-05T11:23:46Z

This PR contains changes for

TextInput
NumberInput
SearchInput
FormWrapper
FormInput.Text

All these components are updated in the docs. Please check.

TextInput

SearchInput

NumberInput

Form usage

Features

Error handling and validation is encapsulated.
Need to pass error or theme prop explicitly. Based on the presence of validation error for the given field, FormInput.Text can switch between themes.
If ID is not passed, TextInput component has a built in logic to generate random ID to support htmlFor prop of Label.

// ...

<FormWrapper {...formMethods} onSubmit={methods.handleSubmit(onSubmit)}>
        <FormInput.Text
          ref={inputRef}
          name="username"
          label="Username"
          placeholder="Enter at least 3 characters"
        />
</FormWrapper>

Screen.Recording.2025-05-11.at.12.29.11.AM.mov

netlify · 2025-05-05T11:23:59Z

✅ Deploy Preview for harness-design ready!

Name	Link
🔨 Latest commit	`9b22178`
🔍 Latest deploy log	https://app.netlify.com/projects/harness-design/deploys/682612b54217de0008f22e80
😎 Deploy Preview	https://deploy-preview-1577--harness-design.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-05-05T11:24:02Z

✅ Deploy Preview for harness-xd-review ready!

Name	Link
🔨 Latest commit	`9b22178`
🔍 Latest deploy log	https://app.netlify.com/projects/harness-xd-review/deploys/682612b5470aac000842ca78
😎 Deploy Preview	https://deploy-preview-1577--harness-xd-review.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

praneshg239 · 2025-05-06T18:04:09Z

packages/ui/src/components/form-input/components/NumberInput.tsx

+        let inputValue = e.target.value
+
+        // When type="number", we need to check if decimals are allowed
+        if (!allowDecimal && inputValue.includes('.')) {


This I have to check whether it can be removed by testing inputMode will handle this or not.

praneshg239 · 2025-05-06T18:05:05Z

packages/ui/src/components/form-input/components/SearchInput.tsx

+
+  // Clean up debounced function on unmount
+  useEffect(() => {
+    const debouncedFn = debouncedOnChangeRef.current


Search input will have debounce builtin.

praneshg239 · 2025-05-06T18:05:51Z

packages/ui/src/components/form-input/components/SearchInput.tsx

+  }, [])
+
+  return (
+    <BaseInput


Should search component needs a label?

apps/portal/src/content/docs/components/form-input.mdx

apps/portal/src/components/samples/SearchInputDoc.tsx

apps/portal/src/content/docs/components/form-input.mdx

knagurski · 2025-05-07T10:18:16Z

packages/ui/src/components/form-primitives/form-caption.tsx

+})
+
+// Default theme props
+type CaptionProps = {


Can we rename this to match the component name?

packages/ui/src/components/form-primitives/form-caption.tsx

packages/ui/src/components/form-input/components/text-input.tsx

knagurski · 2025-05-07T10:26:58Z

packages/ui/src/components/form-input/components/search-input.tsx

+import { BaseInput, InputProps } from './base-input'
+
+// Custom onChange handler for search that works with strings instead of events
+interface SearchInputProps extends Omit<InputProps, 'type' | 'onChange' | 'label'> {


You don't need to omit the onChange since you're overriding it

Suggested change

interface SearchInputProps extends Omit<InputProps, 'type' | 'onChange' | 'label'> {

interface SearchInputProps extends Omit<InputProps, 'type' | 'label'> {

I did the same, but ChangeEventHandler is not compatible with string. Hence we need to omit.

packages/ui/src/components/form-input/components/number-input.tsx

praneshg239 · 2025-05-10T19:22:47Z

packages/ui/src/components/form-input/components/form-text-input.tsx

+  }
+
+  if (!formContext) {
+    throw new Error(


If FormInput.Text is not using within the scope of FormProvider from react-hook-from, then it will throw an exception with proper message.

praneshg239 · 2025-05-10T19:23:34Z

packages/ui/src/components/form-input/components/form-text-input.tsx

+        field.ref = setRefs
+
+        // Determine if there's an error from the form state
+        const errorMessage = fieldState.error?.message || props.error


fieldState will take precedence over props.error.

apps/gitness/src/pages-v2/repo/repo-list.tsx

knagurski · 2025-05-14T09:28:55Z

apps/portal/src/content/docs/components/form.mdx

This doc is quite non-standard in its layout and content

can we update the doc as separate PR?

apps/portal/src/components/samples/SearchInputDoc.tsx

knagurski · 2025-05-14T10:53:18Z

packages/ui/src/icons/chevron-up.svg

-<svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 15L12 9L18 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">


Aren't these existing icons? I'd consider leaving the icons as-is for the input PR and just reference icons by name. The icons themselves can be managed separately.

apps/portal/src/content/docs/components/number-input.mdx

packages/ui/src/views/repo/repo-create/index.tsx

packages/ui/src/views/repo/webhooks/webhook-create/repo-webhook-create-page.tsx

apps/gitness/src/pages-v2/repo/repo-list.tsx

abhinavrastogi-harness · 2025-05-13T19:06:19Z

apps/gitness/src/pages-v2/repo/repo-list.tsx

+        toRepository={(repo: RepositoryType) => routes.toRepoSummary({ spaceId, repoId: repo.name })}
+        toCreateRepo={() => routes.toCreateRepo({ spaceId })}
+        toImportRepo={() => routes.toImportRepo({ spaceId })}
+        toImportMultipleRepos={() => routes.toImportMultipleRepos({ spaceId })}


should this be part of this PR? maybe it came in during a rebase?

No @abhinavrastogi-harness, it was not added before because of this, multiple import repos is not working now. It is the fix for that.

abhinavrastogi-harness · 2025-05-13T20:03:24Z

packages/ui/src/icons/chevron-down.svg

-<g>
-<path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" stroke-linecap="round"/>
-</g>
+<svg viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">


packages/ui/src/components/form-input/components/form-text-input.tsx

packages/ui/src/components/form-primitives/form-caption.tsx

packages/ui/src/components/form-primitives/form-wrapper.tsx

packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx

praneshg239 · 2025-05-15T06:48:40Z

Regarding #1577 (comment)

chevron-up icon was not correct. It was different from what we are using in figma. Hence updated right icon from figma to match the mock. Else, number input spin will look different from what we have in figma.

knagurski

No blockers. We can follow up on most of this stuff in follow up PRs. Great work

knagurski · 2025-05-15T13:31:42Z

apps/portal/src/content/docs/components/form.mdx

Can we drop this file from the PR since it'll need rewritten

knagurski · 2025-05-15T13:33:48Z

apps/portal/src/content/docs/components/number-input.mdx

+      description: "Theme styling for the input and caption",
+      required: false,
+      defaultValue: "default",
+      value: "default | success | danger | warning",


knagurski · 2025-05-15T13:34:44Z

apps/portal/src/content/docs/components/number-input.mdx

+      description: "Size of the input field",
+      required: false,
+      defaultValue: "default",
+      value: "default | sm",


Suggested change

value: "default | sm",

value: "'default' | 'sm'",

knagurski · 2025-05-15T13:36:17Z

apps/portal/src/content/docs/components/search-input.mdx

+
+import { DocsPage } from "@/components/docs-page";
+
+Below is an example of how to implement a search input that displays the current search value using React state. The SearchInput component includes a built-in 300ms debounce to prevent excessive callbacks when typing:


Can we reword this to describe the component rather than the example?

knagurski · 2025-05-15T13:39:25Z

apps/portal/src/content/docs/components/search-input.mdx

+<DocsPage.ComponentExample client:only code={`() => {
+  // Using useState hook to track search value
+  const [searchValue, setSearchValue] = React.useState("");
+
+return (
+
+<div className="flex flex-col gap-6 min-w-[400px]">
+  <div className="mb-2 w-full font-bold mt-6">Search with State:</div>
+  <SearchInput
+    placeholder="Type to search..."
+    onChange={(value) => setSearchValue(value)}
+  />
+  <div className="rounded-md border p-3">
+    <div className="text-sm font-medium underline underline-offset-2">
+      Current Search Value:
+    </div>
+    <p className="mt-1 font-mono text-sm">{searchValue || "(empty)"}</p>
+  </div>
+</div>
+) }`} />


The indentation looks off in this example. Since it's seen by prettier as a string, we need to manually indent examples.

knagurski · 2025-05-15T13:40:25Z

apps/portal/src/content/docs/components/search-input.mdx

+return (
+    <SearchInput
+        placeholder="Type to search..."
+        onChange={(value) => setSearchValue(value)}
+  />
+)


Suggested change

return (

<SearchInput

placeholder="Type to search..."

onChange={(value) => setSearchValue(value)}

/>

)

return (

<SearchInput

placeholder="Type to search..."

onChange={(value) => setSearchValue(value)}

/>

)

knagurski · 2025-05-15T14:30:18Z

packages/ui/src/components/form-input/index.ts

+import { FormTextInput } from './components/form-text-input'
+
+const FormInput = {
+  Text: FormTextInput


We can follow up, but if we have a use-case of a numeric input at all, we have a use-case of using it within a form without needing to wire it up manually.

knagurski · 2025-05-15T14:33:35Z

packages/ui/src/components/form-primitives/form-caption.tsx

+  const effectiveIconName = theme === 'danger' ? 'cross-circle' : 'warning-triangle-outline'
+
+  return (
+    <p className={cn(formCaptionVariants({ theme }), className)}>


Must see if there's an appropriate role to use and how we can link it a form element. As-is screen readers will not associate anything in this with the form element. We can follow up in a future PR.

knagurski · 2025-05-15T15:00:59Z

packages/ui/src/components/inputs/base-input.tsx

+}
+
+export interface BaseInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'>,


HTML elements do not have the concept of suffix. prefix is back from the DHTML days when HTML was trying to be XML!

Suggested change

extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'>,

extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>,

knagurski · 2025-05-15T15:04:13Z

packages/ui/src/components/inputs/base-input.tsx

+  return <span className={cn('cn-input-affix', isPrefix ? 'cn-input-prefix' : 'cn-input-suffix')}>{children}</span>
+}
+
+export interface BaseInputProps


Do we need to export this? It's called BaseInputProps, but it's not the props to the BaseInput component (InputProps has that privilege). Can we just make this part of line 42?

praneshg239 added the design system label May 6, 2025

praneshg239 force-pushed the new-input-component branch from 988b7f7 to 9a8f9d4 Compare May 6, 2025 17:45

praneshg239 commented May 6, 2025

View reviewed changes

knagurski reviewed May 7, 2025

View reviewed changes

praneshg239 force-pushed the new-input-component branch from 7886ba5 to 7f155ac Compare May 10, 2025 18:43

praneshg239 marked this pull request as ready for review May 10, 2025 19:15

praneshg239 requested review from abhinavrastogi-harness and vardanbansal-harness as code owners May 10, 2025 19:15

praneshg239 marked this pull request as draft May 10, 2025 19:16

praneshg239 commented May 10, 2025

View reviewed changes

praneshg239 force-pushed the new-input-component branch from c14f356 to e27c2cc Compare May 14, 2025 07:59

praneshg239 marked this pull request as ready for review May 14, 2025 08:50

knagurski reviewed May 14, 2025

View reviewed changes

abhinavrastogi-harness reviewed May 14, 2025

View reviewed changes

packages/ui/src/components/form-input/components/form-text-input.tsx Outdated Show resolved Hide resolved

abhinavrastogi-harness reviewed May 14, 2025

View reviewed changes

packages/ui/src/components/form-primitives/form-caption.tsx Outdated Show resolved Hide resolved

packages/ui/src/components/form-primitives/form-wrapper.tsx Outdated Show resolved Hide resolved

packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx Outdated Show resolved Hide resolved

praneshg239 force-pushed the new-input-component branch from e767ba7 to 2180d14 Compare May 15, 2025 07:11

praneshg239 added 7 commits May 15, 2025 21:33

Initial changes for Input component with Caption

9407987

Add wrapper to input and Add FormInput component

a7da886

Add SearchInput and update input styles

657e481

Add NumberInput component

fc449c6

Fix NumberInput styles

49cd9c1

Revert Input and Caption components from primitives components

89950b9

Update NumberInput to type number

39e0aea

praneshg239 added 11 commits May 15, 2025 21:33

Revert Input docs changes

59eac48

Update SearchInput in repo list page and repo summary page

ea9721c

Update FormInput where Input is used - 1

8c56241

Create react-hook-form sync Text input component

3310f15

Update TextInput and FormWrapper to use forms in sync with inputs

39dddea

Update docs for TextInput, NumberInput and Form components

e7c8a08

Fix lint issue and refactor

8f5a65a

Refactor and remove unused files

8d893db

Refactor

6d1ee08

Update review comments

e82e849

Fix lint issue

9b22178

praneshg239 force-pushed the new-input-component branch from bf9ce7a to 9b22178 Compare May 15, 2025 16:13

knagurski approved these changes May 15, 2025

View reviewed changes

praneshg239 merged commit 06aa8ab into main May 15, 2025
20 checks passed

praneshg239 deleted the new-input-component branch May 15, 2025 17:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New input component #1577

New input component #1577

praneshg239 commented May 5, 2025 •

edited

Loading

netlify bot commented May 5, 2025 •

edited

Loading

netlify bot commented May 5, 2025 •

edited

Loading

praneshg239 May 6, 2025

praneshg239 May 6, 2025

praneshg239 May 6, 2025

knagurski May 7, 2025

knagurski May 7, 2025

praneshg239 May 7, 2025

praneshg239 May 10, 2025

praneshg239 May 10, 2025

knagurski May 14, 2025

praneshg239 May 15, 2025

knagurski May 14, 2025

abhinavrastogi-harness May 13, 2025

praneshg239 May 15, 2025

abhinavrastogi-harness May 13, 2025

praneshg239 commented May 15, 2025

knagurski left a comment

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

knagurski May 15, 2025

	interface SearchInputProps extends Omit<InputProps, 'type' \| 'onChange' \| 'label'> {
	interface SearchInputProps extends Omit<InputProps, 'type' \| 'label'> {

	value: "default \| success \| danger \| warning",
	value: "'default' \| 'success' \| 'danger' \| 'warning'",


		import { DocsPage } from "@/components/docs-page";

		Below is an example of how to implement a search input that displays the current search value using React state. The SearchInput component includes a built-in 300ms debounce to prevent excessive callbacks when typing:

	extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'prefix' \| 'suffix'>,
	extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' \| 'prefix'>,

New input component #1577

New input component #1577

Conversation

praneshg239 commented May 5, 2025 • edited Loading

TextInput

SearchInput

NumberInput

Form usage

Features

netlify bot commented May 5, 2025 • edited Loading

✅ Deploy Preview for harness-design ready!

netlify bot commented May 5, 2025 • edited Loading

✅ Deploy Preview for harness-xd-review ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

praneshg239 commented May 15, 2025

knagurski left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

praneshg239 commented May 5, 2025 •

edited

Loading

netlify bot commented May 5, 2025 •

edited

Loading

netlify bot commented May 5, 2025 •

edited

Loading