feat(input): adding outside-top prop #4775
Conversation
|
|
@abhinav700 is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces a new label placement option "outside-top" for the Input component across multiple files. This enhancement expands the existing label positioning capabilities, allowing developers to place labels above input fields. The changes are implemented consistently across documentation, component implementation, stories, and theme configuration, ensuring a comprehensive and cohesive update to the Input component's functionality. Changes
Sequence DiagramsequenceDiagram
participant Developer
participant Input Component
participant Theme Configuration
Developer->>Input Component: Set labelPlacement="outside-top"
Input Component->>Theme Configuration: Request styling
Theme Configuration-->>Input Component: Return layout configuration
Input Component->>Developer: Render input with top-placed label
The sequence diagram illustrates how the new "outside-top" label placement is processed, from developer configuration through theme styling to final rendering. Tip 🌐 Web search-backed reviews and chat
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
@wingkwong I have created a new branch and added the changes there |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/docs/content/docs/components/input.mdx (1)
84-87: Consider rephrasing the notes to improve readability.The notes provide valuable clarification about label placement behavior, but they could be more concise and avoid repetition.
Consider this revision:
-> **Note**: If the `labelPlacement` is `outside`, `label` is outside only when a placeholder is provided. - -> **Note**: If the `labelPlacement` is `outside-top` or `outside-left`, `label` is outside even if a placeholder is not provided. +> **Note**: Label placement behavior varies: +> - With `outside`: Label appears outside only when a placeholder is provided. +> - With `outside-top` or `outside-left`: Label always appears outside, regardless of placeholder.🧰 Tools
🪛 LanguageTool
[style] ~86-~86: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...y when a placeholder is provided. > Note: If thelabelPlacementis `outside-...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/docs/content/components/input/label-placements.raw.jsx(1 hunks)apps/docs/content/docs/components/input.mdx(1 hunks)packages/components/input/src/input.tsx(3 hunks)packages/components/input/src/use-input.ts(2 hunks)packages/components/input/stories/input.stories.tsx(3 hunks)packages/core/theme/src/components/input.ts(1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/components/input.mdx
[style] ~86-~86: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...y when a placeholder is provided. > Note: If the labelPlacement is `outside-...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: TypeScript
- GitHub Check: Build
🔇 Additional comments (6)
apps/docs/content/components/input/label-placements.raw.jsx (1)
4-4: LGTM!The addition of "outside-top" to the placements array is consistent with the new feature.
packages/components/input/src/input.tsx (1)
20-20: LGTM!The implementation correctly handles the new "outside-top" label placement by:
- Adding the
isOutsideTopprop- Updating the label rendering conditions to consider the new placement
Also applies to: 86-86, 119-119
packages/components/input/src/use-input.ts (1)
242-244: LGTM!The implementation correctly:
- Adds variables to track label placement
- Updates the logic to handle the new "outside-top" placement
- Maintains clear documentation of the behavior
Also applies to: 245-250, 260-261
packages/components/input/stories/input.stories.tsx (1)
53-53: LGTM!The changes correctly:
- Add the new placement option to the Storybook configuration
- Include comprehensive examples demonstrating the feature with and without placeholders
Also applies to: 178-182, 187-206
packages/core/theme/src/components/input.ts (1)
181-186: LGTM! Clean implementation of the "outside-top" label placement.The implementation follows the established pattern and uses appropriate Tailwind classes for layout and spacing.
apps/docs/content/docs/components/input.mdx (1)
78-78: LGTM! Clear documentation of the new option.The documentation accurately includes the new "outside-top" option in the list of available label placements.
Searched, but everything seams fine. I think this was a common problem in my previous PR also where I would see this error locally but not while making a PR. |
There was a problem hiding this comment.
@abhinav700 your local branch is outdated. I just push the latest canary branch to your branch. Just FYI, we did some refactoring on label placement recently. Please also update this file and revise your current change if necessary. Thanks.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/docs/content/docs/components/input.mdx (1)
86-86: Style Improvement Suggestion foroutside-top/outside-leftNote
This note states that whenlabelPlacementisoutside-toporoutside-left, the label will be displayed outside regardless of a placeholder. However, three successive sentences in this section begin similarly. Consider rephrasing this note to vary the sentence structure and enhance readability.🧰 Tools
🪛 LanguageTool
[style] ~86-~86: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...y when a placeholder is provided. > Note: If thelabelPlacementis `outside-...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/content/docs/components/input.mdx(1 hunks)packages/components/input/src/use-input.ts(2 hunks)packages/core/theme/src/components/input.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/core/theme/src/components/input.ts
- packages/components/input/src/use-input.ts
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/components/input.mdx
[style] ~86-~86: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...y when a placeholder is provided. > Note: If the labelPlacement is `outside-...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: TypeScript
- GitHub Check: Build
🔇 Additional comments (2)
apps/docs/content/docs/components/input.mdx (2)
78-78: Newoutside-topOption Introduced
The updated text now includes theoutside-topoption along with the existing options. This aligns well with the new feature behavior.
84-84: Clarification onoutsideLabel Behavior
This note clarifies that whenlabelPlacementis set tooutside, the label will only be rendered outside if a placeholder is provided. Ensure that the implementation reflects this conditional logic.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/core/system/src/hooks/use-label-placement.ts (1)
12-20: Consider documenting the label placement behavior.The logic handles the new "outside-top" option correctly. Consider adding JSDoc comments to document the behavior of each placement option for better maintainability.
Add documentation above the function:
+/** + * Hook to manage label placement with support for inside, outside, outside-left, and outside-top positions. + * Falls back to "outside" when label is not provided with "inside" placement. + * @param props.labelPlacement - Desired label placement + * @param props.label - Label content + * @returns The resolved label placement + */ export function useLabelPlacement(props: {
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/core/system/src/hooks/use-label-placement.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: TypeScript
- GitHub Check: Build
🔇 Additional comments (1)
packages/core/system/src/hooks/use-label-placement.ts (1)
6-6: LGTM! Verify integration with dependent components.The addition of "outside-top" to the label placement options is a clean, non-breaking change.
Let's verify the integration with dependent components:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for components using labelPlacement ast-grep --pattern 'labelPlacement={$_}'Length of output: 42
🏁 Script executed:
#!/bin/bash # Let's search for the new "outside-top" option and also check for hook usage throughout the codebase. echo "Searching for 'outside-top' usage (string literal)..." rg "\"outside-top\"" . echo "Searching for 'useLabelPlacement' hook usage..." rg "useLabelPlacement" .Length of output: 2470
Integration Verified – "outside-top" Option Properly Propagated
We've confirmed through codebase analysis that the new "outside-top" option is integrated across multiple dependent components (e.g., Input, DateInput, DatePicker, Select) and is properly handled in both hook usage and stories. No issues were found with the hook's implementation or its integration.
|
@wingkwong looks like adding outside top to this causes problems in other packages like date-input |
| @@ -3,7 +3,7 @@ import {useMemo} from "react"; | |||
| import {useProviderContext} from "../provider-context"; | |||
|
|
|||
| export function useLabelPlacement(props: { | |||
| labelPlacement?: "inside" | "outside" | "outside-left"; | |||
| labelPlacement?: "inside" | "outside" | "outside-left" | "outside-top"; | |||
There was a problem hiding this comment.
seems this will break other components. probably use the old way in use-input with some comments, i.e. not using useLabelPlacement.
This PR is duplicate of #3660
PR #4761 is closed because the old branch is deleted
📝 Description
⛳️ Current behavior (updates)
In old behaviour, the label was presented inside the input component if placholder === "" even if labelPlacement === "outside"
🚀 New behavior
Adding outside-top prop which dispalys the label outside the input component regardless of whether the placeholder is there or not.
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
Release Notes
New Features
outside-toplabel placement option for Input components.Documentation
Improvements