input_group: Add InputGroup component. #1674
Conversation
…dons - Introduce `InputGroup` component with flexible layout and alignment options - Add supporting components: `InputGroupAddon`, `InputGroupText`, `InputGroupInput`, and `InputGroupTextarea` - Implement various examples including search, URL input, validation, and chat interfaces - Update story module to include and initialize InputGroupStory - Register InputGroup in the main UI module exports
huacnlee
changed the title
| /// Create a standard InputGroup with max-width | ||
| fn example_group() -> InputGroup { | ||
| InputGroup::new().max_w_96() | ||
| } |
There was a problem hiding this comment.
As the example, we should keep the example simple and clean to understand.
Move these things to render method to as a nested layout, even it will duplicate code.
| const DEFAULT_ADDON_PADDING: Pixels = px(12.); | ||
| const DEFAULT_TEXTAREA_HEIGHT: Pixels = px(80.); | ||
|
|
||
| // === Types === |
There was a problem hiding this comment.
Remove all comments like this.
|
|
||
| // === Constants === | ||
|
|
||
| const DEFAULT_INPUT_GROUP_ID: &str = "input-group"; |
There was a problem hiding this comment.
Remove this, and use InputGroup as the group id.
| /// Marks the input group as invalid/error state. | ||
| /// | ||
| /// When `true`, the border color changes to indicate an error. | ||
| pub fn invalid(mut self, invalid: bool) -> Self { |
There was a problem hiding this comment.
I think, we are not ready to introduce this feature, because danger not enough. So this API we need to consider more before add.
Please remove it, with replacement, user can be based on style for adding the invalid style.
| fn default() -> Self { | ||
| Self::new() | ||
| } | ||
| } |
There was a problem hiding this comment.
Remove default for InputGroup, just use new method.
| let border = self.get_border_color(cx); | ||
|
|
||
| div() | ||
| .id(self.id.unwrap_or_else(|| DEFAULT_INPUT_GROUP_ID.into())) |
There was a problem hiding this comment.
If the id is not required, just removed it. Here, this code is not correct.
| div() | ||
| .id(self.id.unwrap_or_else(|| DEFAULT_INPUT_GROUP_ID.into())) | ||
| .w_full() | ||
| .min_w_0() |
There was a problem hiding this comment.
Why need this? So, please review you self agian.
| .when(cx.theme().shadow, |this| this.shadow_xs()) | ||
| .when(self.disabled, |this| { | ||
| this.opacity(0.5).cursor_not_allowed() | ||
| }) |
There was a problem hiding this comment.
Disabled style should not just change the opacity, please follow disabled style of the Input, Button.
| pub fn align(mut self, align: InputGroupAlign) -> Self { | ||
| self.align = align; | ||
| self | ||
| } |
There was a problem hiding this comment.
We also need add helper methods like inline_end, inline_start, block_start and block_end, and please order the method by name.
| .text_sm() | ||
| .font_medium() | ||
| .cursor_text() | ||
| .pl(padding.0) |
| /// Creates a text label with default styling. | ||
| /// | ||
| /// This is a convenience method for quickly creating text elements. | ||
| pub fn label(text: impl Into<String>) -> impl IntoElement { |
There was a problem hiding this comment.
And why have this method? This is not for InputGroupText.
| /// ``` | ||
| #[derive(IntoElement)] | ||
| pub struct InputGroupInput { | ||
| state: gpui::Entity<crate::input::InputState>, |
There was a problem hiding this comment.
Clean code, use Entity and InputState.
| pub fn height(mut self, height: impl Into<Option<DefiniteLength>>) -> Self { | ||
| self.height = height.into(); | ||
| self | ||
| } |
There was a problem hiding this comment.
Remove this method, use style instead, so user can use h method.
2 participants
InputGroupcomponent with flexible layout and alignment optionsInputGroupAddon,InputGroupText,InputGroupInput, andInputGroupTextareaDescription
Add a new shadcn/ui InputGroup component that provides a flexible way to compose input fields with addons such as icons, buttons, and text labels.
Features:
BlockEnd)
Examples included:
Screenshot
Break Changes
Describe any breaking changes introduced by this pull request. If none, remove this section.
None
How to Test
cargo run
- Basic Search with Icon and Results
- URL Input with Protocol Prefix
- Username with Validation Icon
- Search with Clear Button
- Search with Loading State
- Multiple Icons
- With Action Button
- Disabled State
- Invalid/Error State
- Chat Input with Toolbar
Checklist
cargo runfor story tests related to the changes.