feat: shadcn UI component enhancements and RadioGroup rewrite#861
Open
feat: shadcn UI component enhancements and RadioGroup rewrite#861
Conversation
…Input Expose 10 additional ShadInput properties: textalign, autocapitalize, autocorrect, enablesuggestions, enterkeyhint, maxlines, minlines, cursorcolor, selectioncolor, and obscuringcharacter. Also add onSubmitted support via a new 'submit' event. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Run `webf codegen` to regenerate all Dart bindings and produce the React package at packages/react-shadcn-ui with the new input properties. Update ShadcnInputPage with demos for text alignment, autocapitalize, autocorrect, enterkeyhint, multi-line, cursor/selection colors, and obscuring character. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Map textAlign to ShadInput's alignment and placeholderAlignment parameters so both typed text and placeholder render correctly for center and right alignment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove unnecessary React.FC<any> cast now that local package has proper types for all new input properties. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace npm registry dependency with link to local generated package so new props (textalign, cursorcolor, etc.) are available. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use fixed card width and overflow-x auto for consistent sizing and proper horizontal scrolling on all screen widths. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Uncomment previously hidden demos for Input, Select, Slider, Radio Group, Form, Progress, Skeleton, Tabs, Table, and Popover. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use flex: 1 with minWidth instead of fixed width so cards fill available space when there are only 2-3 items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add hidden config to QuickStartItem and set it for Shadcn UI since shadcn routes are only available in dev mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
On CI, the linked package's dist/ doesn't exist since it's gitignored. Add a prebuild script to build it before vite build. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CI doesn't have node_modules for the linked package, so pnpm install is needed before tsdown can run. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The .gitignore `lib/` rule was too broad, also excluding `src/lib/` which contains the generated .tsx component files needed for tsdown to build. Change to `/lib/` to only ignore root lib/ directory. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
# Conflicts: # use_cases/package.json
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This was referenced Feb 14, 2026
Add ShadInputOTP wrapper with group, slot, and separator child elements following the existing parent-child pattern (radio). Includes TypeScript definitions, Dart implementation, generated bindings, React wrappers, and a use_cases demo page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add Shadcn UI Menubar component wrapping ShadMenubar/ShadMenubarItem Flutter widgets with full support for menu items, keyboard shortcuts, submenus, checkbox items, radio groups, labels, and separators. Also includes the Cupertino popup menu component from previous work. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…icts
## Popover Property Enhancements
Wire up previously declared but unused properties on the popover component:
- **placement**: Add `_placementToAnchor()` conversion that maps placement
strings (top/bottom/left/right and compound variants like top-start) to
`ShadAnchorAuto` anchors with correct follower/target alignment
- **align**: Add new `align` property (start/center/end) for fine-grained
positioning within the placement direction, with attribute binding and
JS property binding support
- **closeOnOutsideClick**: Pass through to `ShadPopover.closeOnTapOutside`
(was declared but never wired up)
- **Controller sync**: Add `ShadPopoverController` listener to sync native
open/close state back to JS when popover is dismissed externally (e.g.
outside tap)
- **Safety**: Add `mounted` checks in postFrameCallback for controller ops
- **Deprecation**: Fix `Colors.black.withOpacity()` → `.withValues(alpha:)`
## Gesture Arena Fix (popover, dropdown_menu, collapsible)
Replace `GestureDetector` with `Listener` for trigger tap handling in three
components: popover, dropdown_menu, and collapsible.
**Root cause**: When a `GestureDetector` wraps a WebF `WidgetElement`
containing interactive Flutter widgets (e.g. `ShadButton`), the inner
widget's `TapGestureRecognizer` wins the Flutter gesture arena, preventing
the outer `GestureDetector.onTap` from ever firing. This made popover
triggers completely non-functional when using button children.
**Fix**: `Listener` receives raw pointer events at the pointer level without
participating in the gesture arena, so both the outer Listener AND the inner
button receive events. A pointer-distance check (<20px) distinguishes taps
from scroll gestures to avoid false triggers inside scrollable containers.
## React Wrapper Updates
- Add `align` prop with documentation to `FlutterShadcnPopoverProps`
- Update `placement` docs with all supported compound values
- Add `align` to element interface and `attributeProps`
## Use Cases Updates
Add three new demo sections to ShadcnPopoverPage:
- Popover Placement (top/bottom/left/right)
- Popover Alignment (start/center/end)
- Controlled Popover (closeOnOutsideClick={false})
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… and radius props Add backgroundColor, color, minHeight, and borderRadius properties to the progress component. Fix the indeterminate variant which was defined but never wired up in the build method. Update use_cases demo to cover all new properties. Also fix input_otp maxlength type mismatch after codegen regeneration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… and manual rendering
Rename radio component from `flutter-shadcn-radio`/`flutter-shadcn-radio-item`
to `flutter-shadcn-radio-group`/`flutter-shadcn-radio-group-item` to match
the shadcn/ui naming convention.
Rewrite the implementation to render radio items manually rather than using
ShadRadioGroup/ShadRadio, because ShadRadio relies on ShadProvider
(InheritedWidget) which does not work correctly in WebF's widget tree.
Key changes:
- **Naming**: Renamed all Dart, TypeScript, and React files from `radio` to
`radio_group`, updated element registrations, exports, and documentation.
- **Manual radio rendering**: Build radio circles manually using theme values
from `ShadTheme.of(context).radioTheme` to match the visual style of
ShadRadio (outer ring border + filled inner circle when selected).
- **Text extraction pattern**: Extract label text from child nodes recursively
(matching the accordion component pattern) instead of using `toWidget()`
which creates child render objects that interfere with gesture detection
in WebF's widget tree.
- **Hit testing**: Use `GestureDetector` with `HitTestBehavior.opaque` to
ensure taps register on the entire radio row, since DecoratedBox/SizedBox
don't participate in hit testing by default.
- **CustomEvent dispatch**: Dispatch `CustomEvent('change', detail: {'value': itemValue})`
instead of plain `Event('change')` so React handlers can read
`e.detail.value` (consistent with select/calendar components).
- **Recursive item search**: `_getRadioItems()` recursively walks child nodes
to find `FlutterShadcnRadioGroupItem` descendants, supporting arbitrary
DOM nesting between parent and items.
- **Fallback value resolution**: Added `_resolveItemValue()` that tries
`_itemValue`, then `getAttribute('value')`, with a final fallback to
lowercase label text when no explicit value is set.
- **Use case updates**: Simplified ShadcnRadioPage.tsx to use the new
component names with labels inside items. Updated BasicFormElementsPage
with input event fallback for native radio controls.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CGQAQ
changed the title
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
1 participant
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
flutter-shadcn-radiotoflutter-shadcn-radio-groupto match shadcn/ui convention. Rewrite implementation with manual radio rendering (ShadRadio's InheritedWidget doesn't work in WebF), text extraction pattern for labels, proper hit testing, and CustomEvent dispatch with value detail.Test plan
🤖 Generated with Claude Code