Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors and introduces DropdownInputV2 as a new composite input (inline SingleSelectV2 + free-text PrimitiveInput) with responsive theming support, documentation, Storybook stories, site demo integration, and automated tests.
Changes:
- Added
DropdownInputV2component implementation, types, utilities, and light/dark responsive token sets. - Wired
DROPDOWN_INPUT_V2into the theme system (ThemeContext, token initialization,useComponentToken). - Added test coverage (unit + accessibility), design docs, Storybook stories, and site demo entry.
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/blend/lib/context/useComponentToken.ts | Adds token lookup support for DROPDOWN_INPUT_V2. |
| packages/blend/lib/context/initComponentTokens.ts | Initializes DROPDOWN_INPUT_V2 tokens in the theme token map. |
| packages/blend/lib/context/ThemeContext.tsx | Extends ComponentTokenType + default context tokens with DROPDOWN_INPUT_V2. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/utils.ts | New layout + a11y + state utilities for the composite control. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/index.ts | Barrel exports for DropdownInputV2. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.types.ts | New public prop/types surface for the component. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.tsx | New component implementation (layout, states, a11y, ref forwarding). |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.tokens.ts | Token types + token getter that selects light/dark sets. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.light.tokens.ts | Light theme responsive tokens for the component. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.dark.tokens.ts | Dark theme responsive tokens for the component. |
| packages/blend/tests/components/DropdownInputV2/DropdownInputV2.test.tsx | Unit tests for rendering, states, events, ref forwarding. |
| packages/blend/tests/components/DropdownInputV2/DropdownInputV2.accessibility.test.tsx | Axe-based accessibility coverage across common variants. |
| packages/blend/Design-docs/DropdownInput/DropdownInputDoc.md | Design + API documentation for DropdownInputV2. |
| apps/storybook/stories/foundations/ThemeProvider.stories.tsx | Includes DROPDOWN_INPUT_V2 in token preview list. |
| apps/storybook/stories/components/DropdownInputV2/DropdownInputV2.stories.tsx | Adds comprehensive Storybook stories + interaction testing. |
| apps/site/src/demos/SidebarDemo.tsx | Adds DropdownInputV2 entry to the site demo sidebar routing. |
| apps/site/src/demos/DropdownInputV2Demo.tsx | Adds a full demo/playground page for DropdownInputV2. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+144
to
+145
| | ResponsiveDropdownInputV2Tokens | ||
| | ResponsiveNumberInputV2Tokens => { |
Comment on lines
+52
to
+56
| maxMenuHeight?: number | ||
| minMenuWidth?: number | ||
| maxMenuWidth?: number | ||
| onFocus?: React.FocusEventHandler<HTMLInputElement> | ||
| onBlur?: React.FocusEventHandler<HTMLInputElement> |
Collaborator
vinitkhandal717
left a comment
vinitkhandal717
left a comment
There was a problem hiding this comment.
I think this input can be merge with another input
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors and introduces DropdownInputV2, a new composite InputsV2 control that combines an inline SingleSelectV2 with a text input, fully integrated into Blend’s theming/token system and surfaced in Storybook + site demos.
Changes:
- Added
DropdownInputV2component implementation, types, utilities, and responsive light/dark tokens. - Registered
DROPDOWN_INPUT_V2in theme context initialization anduseComponentToken. - Added unit + accessibility tests, Storybook stories, design docs, and site demo wiring.
Reviewed changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/blend/lib/context/useComponentToken.ts | Adds DROPDOWN_INPUT_V2 token lookup support. |
| packages/blend/lib/context/initComponentTokens.ts | Initializes DROPDOWN_INPUT_V2 tokens in the theme token bootstrap. |
| packages/blend/lib/context/ThemeContext.tsx | Extends ComponentTokenType and default context tokens for DROPDOWN_INPUT_V2. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/utils.ts | Implements layout/ARIA helpers and prop merging for DropdownInputV2. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/index.ts | Adds barrel exports for the new component module. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.types.ts | Defines public props/types for DropdownInputV2. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.tsx | Implements the composite input (inline select + text input) behavior and layout. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.tokens.ts | Defines token types and token getter for light/dark. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.light.tokens.ts | Provides responsive light theme tokens for DropdownInputV2. |
| packages/blend/lib/components/InputsV2/DropdownInputV2/DropdownInputV2.dark.tokens.ts | Provides responsive dark theme tokens for DropdownInputV2. |
| packages/blend/tests/components/DropdownInputV2/DropdownInputV2.test.tsx | Adds core rendering/behavior tests for DropdownInputV2. |
| packages/blend/tests/components/DropdownInputV2/DropdownInputV2.accessibility.test.tsx | Adds axe-based a11y coverage for DropdownInputV2 variants. |
| packages/blend/Design-docs/DropdownInput/DropdownInputDoc.md | Documents requirements, props, tokens, and design decisions for DropdownInputV2. |
| apps/storybook/stories/foundations/ThemeProvider.stories.tsx | Adds DROPDOWN_INPUT_V2 to the ThemeProvider story token list. |
| apps/storybook/stories/components/DropdownInputV2/DropdownInputV2.stories.tsx | Adds comprehensive Storybook stories for DropdownInputV2 (visual + interactive + a11y). |
| apps/site/src/demos/SidebarDemo.tsx | Adds DropdownInputV2 demo entry in the site demo sidebar. |
| apps/site/src/demos/DropdownInputV2Demo.tsx | Adds a dedicated site demo/playground showcasing DropdownInputV2 usage. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+144
to
+145
| | ResponsiveDropdownInputV2Tokens | ||
| | ResponsiveNumberInputV2Tokens => { |
Comment on lines
+162
to
+168
| if (dropdownRef.current) { | ||
| setDropdownWidth(dropdownRef.current.offsetWidth) | ||
| } else { | ||
| setDropdownWidth(0) | ||
| } | ||
| }, [dropDown.value, dropDown.items, selectSize]) | ||
|
|
Comment on lines
+214
to
+217
| onFocus={() => { | ||
| onDropdownOpen?.() | ||
| }} | ||
| onBlur={() => { |
| export { default as DropdownInputV2 } from './DropdownInputV2' | ||
| export * from './DropdownInputV2.tokens' | ||
| export * from './DropdownInputV2.types' | ||
| export * from './utils' |
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.
Summary
Screen.Recording.2026-04-14.at.6.12.34.PM.mov
refactor dropdowninput
Issue Ticket
Closes #1352