Extract text and search input from forms as component

[gtsiolis]

Problem to solve

There are around more than 100 instances of text inputs or search inputs elements across the product, see <input> instances[1].

Currently, most input elements rely on the main button styles in index.css.

gitpod/components/dashboard/src/index.css

Lines 83 to 91 in 77b4d06

	textarea,
	input[type="text"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	select {
	@apply block w-56 text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
	}

It would be great to have some form elements as components to cover some of the different elements, states, variants, etc. of each element once across the product.

Elements: Checkbox, Date Picker, Filter, Search, Textarea, Text Input, etc.

Some basic designs already exist for the input and the checkbox elements.

Input	Checkbox

See also relevant discussion (internal). Cc @selfcontained

[Devansu-Yadav]

@gtsiolis Can I continue on @selfcontained's work in #16545 by helping to replace the use of the <CheckBox/> component with the newly created <CheckboxInput> component across the dashboard code?

[gtsiolis]

Absolutely, @Devansu-Yadav! I've opened #16768 to keep track of the migration and continue the discussion there. 🏓

[gtsiolis]

Cross-posting from relevant comment in #16636 (comment) for visibility and more context:

There are a few minor spacing differences with the search input in dashboard vs. admin dashboard, but should be fine to merge this as is and tackle this separately with #16511. Cc @selfcontained

Admin (Users)	Project (Branches)	Admin (org)

[Devansu-Yadav]

I'd like to work on extracting the search input as a separate component that could be used across both the dashboards 😄

Currently, I see a couple of places where <input type="search" ... /> element is being used within the dashboard code.

Can I work on this? @gtsiolis

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.