feat: add outside-top labelPlacement support for Input (HeroUI v2.8.0)#626
Merged
Conversation
Copilot
AI
changed the title
[WIP] Update input box interface as outlined in feature request
feat: add Mar 23, 2026
outside-top labelPlacement support for Input (HeroUI v2.8.0)
sj817
marked this pull request as ready for review
March 24, 2026 04:48
Contributor
审阅者指南（在小型 PR 上折叠）审阅者指南通过扩展共享的 Input TypeScript props，并将与 HeroUI 相关的依赖升级到实现该行为和 CSS 的版本（并相应更新 lockfile），为 Input 新增对 更新后的 InputProps labelPlacement 支持类图classDiagram
class ComponentProps
class LabelPlacement {
<<type>>
+inside
+outside
+outside_left
+outside_top
}
class Core_InputProps {
+string label
+LabelPlacement labelPlacement
+string startContent
+string endContent
+boolean fullWidth
+boolean isClearable
}
class Web_InputProps {
+string label
+LabelPlacement labelPlacement
+string startContent
+string endContent
+boolean fullWidth
+boolean isClearable
}
ComponentProps <|-- Core_InputProps
ComponentProps <|-- Web_InputProps
LabelPlacement <-- Core_InputProps : uses
LabelPlacement <-- Web_InputProps : uses
文件级变更
与关联 Issue 的对照评估
可能关联的 Issue
提示与命令与 Sourcery 交互
自定义你的体验访问你的 控制面板 以：
获取帮助Original review guide in EnglishReviewer's guide (collapsed on small PRs)Reviewer's GuideAdds support for the new Class diagram for updated InputProps labelPlacement supportclassDiagram
class ComponentProps
class LabelPlacement {
<<type>>
+inside
+outside
+outside_left
+outside_top
}
class Core_InputProps {
+string label
+LabelPlacement labelPlacement
+string startContent
+string endContent
+boolean fullWidth
+boolean isClearable
}
class Web_InputProps {
+string label
+LabelPlacement labelPlacement
+string startContent
+string endContent
+boolean fullWidth
+boolean isClearable
}
ComponentProps <|-- Core_InputProps
ComponentProps <|-- Web_InputProps
LabelPlacement <-- Core_InputProps : uses
LabelPlacement <-- Web_InputProps : uses
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - 我在这里给出了一些整体性的反馈：
labelPlacement联合类型现在同时出现在packages/core和packages/web中；建议提取成一个共享的类型（或从某个统一位置重新导出），这样今后再有类似的新增项时，只需要在单一的“可信源”（single source of truth）里更新即可。- 在
packages/web/package.json中，一些 HeroUI 依赖被固定在特定版本，而更新过的依赖则使用了插入号版本范围（例如@heroui/input、@heroui/theme）；建议统一版本管理策略，或者在文档中说明为什么这些特定的包可以使用浮动版本，以避免后续出现不一致的升级。
给 AI 代理的提示（Prompt）
Please address the comments from this code review:
## Overall Comments
- The `labelPlacement` union is now duplicated in both `packages/core` and `packages/web`; consider extracting a shared type (or re-exporting from one place) so future additions like this only need to be updated in a single source of truth.
- In `packages/web/package.json`, some HeroUI dependencies are pinned while the updated ones now use a caret range (e.g., `@heroui/input`, `@heroui/theme`); consider aligning the versioning strategy or documenting why these specific packages are allowed to float to avoid inconsistent upgrades later.帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈来改进后续的评审。
Original comment in English
Hey - I've left some high level feedback:
- The
labelPlacementunion is now duplicated in bothpackages/coreandpackages/web; consider extracting a shared type (or re-exporting from one place) so future additions like this only need to be updated in a single source of truth. - In
packages/web/package.json, some HeroUI dependencies are pinned while the updated ones now use a caret range (e.g.,@heroui/input,@heroui/theme); consider aligning the versioning strategy or documenting why these specific packages are allowed to float to avoid inconsistent upgrades later.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `labelPlacement` union is now duplicated in both `packages/core` and `packages/web`; consider extracting a shared type (or re-exporting from one place) so future additions like this only need to be updated in a single source of truth.
- In `packages/web/package.json`, some HeroUI dependencies are pinned while the updated ones now use a caret range (e.g., `@heroui/input`, `@heroui/theme`); consider aligning the versioning strategy or documenting why these specific packages are allowed to float to avoid inconsistent upgrades later.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the project’s Input component typing and web UI dependencies to support HeroUI v2.8.0’s new labelPlacement: 'outside-top' option.
Changes:
- Extend
InputProps.labelPlacementunion type to include'outside-top'in both core and web type definitions. - Bump
@heroui/input,@heroui/system, and@heroui/themeversions inpackages/webto pick up the new behavior/styles.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/web/src/types/components/input.ts | Adds 'outside-top' to the labelPlacement type for web Input props. |
| packages/core/src/types/components/input.ts | Adds 'outside-top' to the labelPlacement type for core Input props. |
| packages/web/package.json | Updates HeroUI dependency versions needed for outside-top support. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Member
|
@copilot |
Contributor
Author
... Fixed in 76cd572. The upgrade to |
Contributor
|
你可以通过以下命令安装该版本： |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
HeroUI v2.8.0 introduced a new
outside-topvalue forlabelPlacementon Input — unlikeoutside(which requires a placeholder to render the label outside),outside-topalways positions the label above the input unconditionally.TypeScript interface changes
packages/core/src/types/components/input.ts—labelPlacementextended to'inside' | 'outside' | 'outside-left' | 'outside-top'packages/web/src/types/components/input.ts— sameDependency bumps (
packages/web/package.json)@heroui/input2.4.9^2.4.23@heroui/theme2.4.9^2.4.17@heroui/system^2.4.12^2.4.18@heroui/[email protected]is the first release implementingoutside-topbehavior.@heroui/[email protected]is the last version compatible with Tailwind CSS v3 (v2.4.18+ requires v4); it includes the necessaryoutside-topCSS variants. Lock file updated accordingly.Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
registry.npmmirror.com/home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/.npm/_npx/4876f32048baf8ac/node_modules/.bin/prebuild-install -r node --pkg_version=0.13.1 --pkg_name=node-pty-prebuilt-multiarch pull.rebase nfig/composer/vendor/bin/bash(dns block)www.heroui.com/home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.
由 Sourcery 提供的摘要
为 HeroUI v2.8.0 中新增的
outside-top输入标签位置方式提供支持，并相应更新 HeroUI Web 端依赖。新功能：
outside-top标签位置。增强：
构建：
Original summary in English
Summary by Sourcery
Add support for the new
outside-topinput label placement from HeroUI v2.8.0 and update HeroUI web dependencies accordingly.New Features:
outside-toplabel placement in both core and web input components.Enhancements:
Build: