[PR #3089] [MERGED] feat: introducing a new smart input hoppscotch ui component #4224

New issue

Closed

opened 2026-03-17 01:46:44 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:46:44 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3089
Author: @joeljstephen
Created: 5/29/2023
Status: ✅ Merged
Merged: 8/5/2023
Merged by: @AndrewBastin

Base: release/2023.8.0 ← Head: refactor/input-hopp-ui

📝 Commits (10+)

e50943d feat: introducing new input ui component
785e6ea refactor: introduces ability to toggle between different input styles
443385f refactor: replaced current input implementations with input ui component
61cec0c refactor: replaced current input in collections module with input ui component
6fe9436 refactor: replaced current input in different module with input ui component
3c71454 refactor: replaced input type prop with input styles
3005387 refactor: labels now go as props instead of slots and implemented default styles
eb97a0f refactor: fixed styling issues in few smart input usages in the app
33467e5 refactor: new generate uid function and used smart input for create team in admin
eeca258 refactor: updated types for smart input component

📊 Changes

33 files changed (+543 additions, -639 deletions)

View changed files

📝 packages/hoppscotch-common/src/components.d.ts (+194 -193)
📝 packages/hoppscotch-common/src/components/app/Shortcuts.vue (+8 -9)
📝 packages/hoppscotch-common/src/components/collections/Add.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/AddFolder.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/AddRequest.vue (+7 -13)
📝 packages/hoppscotch-common/src/components/collections/Edit.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/EditFolder.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/EditRequest.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/SaveRequest.vue (+9 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/Add.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/Edit.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue (+7 -15)
📝 packages/hoppscotch-common/src/components/collections/graphql/index.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/collections/index.vue (+4 -4)
📝 packages/hoppscotch-common/src/components/environments/my/Details.vue (+9 -16)
📝 packages/hoppscotch-common/src/components/environments/teams/Details.vue (+9 -17)
📝 packages/hoppscotch-common/src/components/firebase/Login.vue (+8 -18)

...and 13 more files

📄 Description

Issue Number

Closes HFE-61

Description

This PR introduces a new Smart Input component in hoppscotch-ui where most of the input implementation in the different modules is abstracted into the new UI component. This includes input boxes with floating labels, input with buttons, single input boxes etc..

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/3089 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 5/29/2023 **Status:** ✅ Merged **Merged:** 8/5/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.8.0` ← **Head:** `refactor/input-hopp-ui` --- ### 📝 Commits (10+) - [`e50943d`](https://github.com/hoppscotch/hoppscotch/commit/e50943d786b6cee82e31052109387941ea04f54f) feat: introducing new input ui component - [`785e6ea`](https://github.com/hoppscotch/hoppscotch/commit/785e6eaa668a569bc48eb0ca202d9a4957e521f8) refactor: introduces ability to toggle between different input styles - [`443385f`](https://github.com/hoppscotch/hoppscotch/commit/443385fecd413ca95fb19686bba304b41d434083) refactor: replaced current input implementations with input ui component - [`61cec0c`](https://github.com/hoppscotch/hoppscotch/commit/61cec0ce5d5bd213f04c768baf66c6548cbb9d38) refactor: replaced current input in collections module with input ui component - [`6fe9436`](https://github.com/hoppscotch/hoppscotch/commit/6fe94368a4badaa4b0ae43cb4b69ab1661daf041) refactor: replaced current input in different module with input ui component - [`3c71454`](https://github.com/hoppscotch/hoppscotch/commit/3c71454bf6e09144b598f19cdd7fdc0a89e890a5) refactor: replaced input type prop with input styles - [`3005387`](https://github.com/hoppscotch/hoppscotch/commit/30053871d9cc00383da261a1f0393ae21310e2bf) refactor: labels now go as props instead of slots and implemented default styles - [`eb97a0f`](https://github.com/hoppscotch/hoppscotch/commit/eb97a0f4de081aba5acb4f17ecec0a88f6413038) refactor: fixed styling issues in few smart input usages in the app - [`33467e5`](https://github.com/hoppscotch/hoppscotch/commit/33467e5d4e69bf65932f4bfa3d67bc5a2ed9bd78) refactor: new generate uid function and used smart input for create team in admin - [`eeca258`](https://github.com/hoppscotch/hoppscotch/commit/eeca258f09cc124feb7b9fadeb06ed16439c0c97) refactor: updated types for smart input component ### 📊 Changes **33 files changed** (+543 additions, -639 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components.d.ts` (+194 -193) 📝 `packages/hoppscotch-common/src/components/app/Shortcuts.vue` (+8 -9) 📝 `packages/hoppscotch-common/src/components/collections/Add.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/AddFolder.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/AddRequest.vue` (+7 -13) 📝 `packages/hoppscotch-common/src/components/collections/Edit.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/EditFolder.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/EditRequest.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/SaveRequest.vue` (+9 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/Add.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/Edit.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue` (+7 -15) 📝 `packages/hoppscotch-common/src/components/collections/graphql/index.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/collections/index.vue` (+4 -4) 📝 `packages/hoppscotch-common/src/components/environments/my/Details.vue` (+9 -16) 📝 `packages/hoppscotch-common/src/components/environments/teams/Details.vue` (+9 -17) 📝 `packages/hoppscotch-common/src/components/firebase/Login.vue` (+8 -18) _...and 13 more files_ </details> ### 📄 Description ### Issue Number Closes HFE-61 ### Description This PR introduces a new Smart Input component in `hoppscotch-ui` where most of the input implementation in the different modules is abstracted into the new UI component. This includes input boxes with floating labels, input with buttons, single input boxes etc..  ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>