Skip to content

Commit 2bfa995

Browse files
CGQAQclaude
CGQAQ
and
claude
committed
feat(react-shadcn-ui): enhance progress component with color, height, 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>
1 parent e4ca915 commit 2bfa995

File tree

9 files changed

+381
-62
lines changed

9 files changed

+381
-62
lines changed

‎native_uis/webf_shadcn_ui/lib/src/components/input_otp.dart‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@ import 'input_otp_bindings_generated.dart';
1515
class FlutterShadcnInputOtp extends FlutterShadcnInputOtpBindings {
1616
FlutterShadcnInputOtp(super.context);
1717

18-
String? _maxlength;
18+
String _maxlength = '';
1919
String? _value;
2020
bool _disabled = false;
2121

2222
@override
23-
String? get maxlength => _maxlength;
23+
String get maxlength => _maxlength;
2424

2525
@override
2626
set maxlength(value) {
27-
final String? v = value?.toString();
27+
final String v = value?.toString() ?? '';
2828
if (v != _maxlength) {
2929
_maxlength = v;
3030
state?.requestUpdateState(() {});
@@ -55,7 +55,7 @@ class FlutterShadcnInputOtp extends FlutterShadcnInputOtpBindings {
5555
}
5656
}
5757

58-
int get maxLength => int.tryParse(_maxlength ?? '') ?? 6;
58+
int get maxLength => int.tryParse(_maxlength) ?? 6;
5959

6060
@override
6161
WebFWidgetElementState createState() => FlutterShadcnInputOtpState(this);

‎native_uis/webf_shadcn_ui/lib/src/components/input_otp_bindings_generated.dart‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
import 'package:webf/webf.dart';
1111
abstract class FlutterShadcnInputOtpBindings extends WidgetElement {
1212
FlutterShadcnInputOtpBindings(super.context);
13-
String? get maxlength;
13+
String get maxlength;
1414
set maxlength(value);
1515
String? get value;
1616
set value(value);
@@ -20,9 +20,9 @@ abstract class FlutterShadcnInputOtpBindings extends WidgetElement {
2020
void initializeAttributes(Map<String, ElementAttributeProperty> attributes) {
2121
super.initializeAttributes(attributes);
2222
attributes['maxlength'] = ElementAttributeProperty(
23-
getter: () => maxlength?.toString(),
23+
getter: () => maxlength.toString(),
2424
setter: (value) => maxlength = value,
25-
deleter: () => maxlength = null
25+
deleter: () => maxlength = ''
2626
);
2727
attributes['value'] = ElementAttributeProperty(
2828
getter: () => value?.toString(),
@@ -57,4 +57,4 @@ abstract class FlutterShadcnInputOtpBindings extends WidgetElement {
5757
...super.properties,
5858
flutterShadcnInputOtpProperties,
5959
];
60-
}
60+
}

‎native_uis/webf_shadcn_ui/lib/src/components/progress.d.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,31 @@ interface FlutterShadcnProgressProperties {
3131
* Default: 'default'
3232
*/
3333
variant?: string;
34+
35+
/**
36+
* Background color of the progress track.
37+
* Accepts hex color string (e.g. '#e0e0e0', '#FF808080').
38+
*/
39+
backgroundColor?: string;
40+
41+
/**
42+
* Color of the progress indicator.
43+
* Accepts hex color string (e.g. '#3b82f6', '#FF0000FF').
44+
*/
45+
color?: string;
46+
47+
/**
48+
* Minimum height of the progress bar in logical pixels.
49+
* Default: 16
50+
*/
51+
minHeight?: string;
52+
53+
/**
54+
* Border radius of the progress bar in logical pixels.
55+
* Applied uniformly to all corners.
56+
* Default: 16
57+
*/
58+
borderRadius?: string;
3459
}
3560

3661
interface FlutterShadcnProgressEvents {}

‎native_uis/webf_shadcn_ui/lib/src/components/progress.dart‎

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ class FlutterShadcnProgress extends FlutterShadcnProgressBindings {
1818
double _value = 0;
1919
double _max = 100;
2020
String _variant = 'default';
21+
Color? _backgroundColor;
22+
Color? _color;
23+
double? _minHeight;
24+
double? _borderRadius;
2125

2226
@override
2327
String? get value => _value.toString();
@@ -58,6 +62,73 @@ class FlutterShadcnProgress extends FlutterShadcnProgressBindings {
5862
}
5963
}
6064

65+
@override
66+
String? get backgroundColor => _backgroundColor != null
67+
? '#${_backgroundColor!.value.toRadixString(16).padLeft(8, '0')}'
68+
: null;
69+
70+
@override
71+
set backgroundColor(value) {
72+
final newValue = value != null ? _parseColor(value.toString()) : null;
73+
if (newValue != _backgroundColor) {
74+
_backgroundColor = newValue;
75+
state?.requestUpdateState(() {});
76+
}
77+
}
78+
79+
@override
80+
String? get color => _color != null
81+
? '#${_color!.value.toRadixString(16).padLeft(8, '0')}'
82+
: null;
83+
84+
@override
85+
set color(value) {
86+
final newValue = value != null ? _parseColor(value.toString()) : null;
87+
if (newValue != _color) {
88+
_color = newValue;
89+
state?.requestUpdateState(() {});
90+
}
91+
}
92+
93+
@override
94+
String? get minHeight => _minHeight?.toString();
95+
96+
@override
97+
set minHeight(value) {
98+
final newValue = value != null ? double.tryParse(value.toString()) : null;
99+
if (newValue != _minHeight) {
100+
_minHeight = newValue;
101+
state?.requestUpdateState(() {});
102+
}
103+
}
104+
105+
@override
106+
String? get borderRadius => _borderRadius?.toString();
107+
108+
@override
109+
set borderRadius(value) {
110+
final newValue = value != null ? double.tryParse(value.toString()) : null;
111+
if (newValue != _borderRadius) {
112+
_borderRadius = newValue;
113+
state?.requestUpdateState(() {});
114+
}
115+
}
116+
117+
static Color? _parseColor(String value) {
118+
final trimmed = value.trim().toLowerCase();
119+
if (trimmed.startsWith('#')) {
120+
final hex = trimmed.substring(1);
121+
if (hex.length == 6) {
122+
final intValue = int.tryParse(hex, radix: 16);
123+
if (intValue != null) return Color(0xFF000000 | intValue);
124+
} else if (hex.length == 8) {
125+
final intValue = int.tryParse(hex, radix: 16);
126+
if (intValue != null) return Color(intValue);
127+
}
128+
}
129+
return null;
130+
}
131+
61132
@override
62133
WebFWidgetElementState createState() => FlutterShadcnProgressState(this);
63134
}
@@ -71,10 +142,25 @@ class FlutterShadcnProgressState extends WebFWidgetElementState {
71142

72143
@override
73144
Widget build(BuildContext context) {
74-
final progress = widgetElement._max > 0
75-
? widgetElement._value / widgetElement._max
76-
: 0.0;
145+
final isIndeterminate = widgetElement._variant == 'indeterminate';
146+
147+
final double? progressValue;
148+
if (isIndeterminate) {
149+
progressValue = null;
150+
} else {
151+
progressValue = widgetElement._max > 0
152+
? widgetElement._value / widgetElement._max
153+
: 0.0;
154+
}
77155

78-
return ShadProgress(value: progress);
156+
return ShadProgress(
157+
value: progressValue,
158+
backgroundColor: widgetElement._backgroundColor,
159+
color: widgetElement._color,
160+
minHeight: widgetElement._minHeight,
161+
borderRadius: widgetElement._borderRadius != null
162+
? BorderRadius.circular(widgetElement._borderRadius!)
163+
: null,
164+
);
79165
}
80166
}

‎native_uis/webf_shadcn_ui/lib/src/components/progress_bindings_generated.dart‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ abstract class FlutterShadcnProgressBindings extends WidgetElement {
1616
set max(value);
1717
String? get variant;
1818
set variant(value);
19+
String? get backgroundColor;
20+
set backgroundColor(value);
21+
String? get color;
22+
set color(value);
23+
String? get minHeight;
24+
set minHeight(value);
25+
String? get borderRadius;
26+
set borderRadius(value);
1927
@override
2028
void initializeAttributes(Map<String, ElementAttributeProperty> attributes) {
2129
super.initializeAttributes(attributes);
@@ -34,6 +42,26 @@ abstract class FlutterShadcnProgressBindings extends WidgetElement {
3442
setter: (value) => variant = value,
3543
deleter: () => variant = null
3644
);
45+
attributes['background-color'] = ElementAttributeProperty(
46+
getter: () => backgroundColor?.toString(),
47+
setter: (value) => backgroundColor = value,
48+
deleter: () => backgroundColor = null
49+
);
50+
attributes['color'] = ElementAttributeProperty(
51+
getter: () => color?.toString(),
52+
setter: (value) => color = value,
53+
deleter: () => color = null
54+
);
55+
attributes['min-height'] = ElementAttributeProperty(
56+
getter: () => minHeight?.toString(),
57+
setter: (value) => minHeight = value,
58+
deleter: () => minHeight = null
59+
);
60+
attributes['border-radius'] = ElementAttributeProperty(
61+
getter: () => borderRadius?.toString(),
62+
setter: (value) => borderRadius = value,
63+
deleter: () => borderRadius = null
64+
);
3765
}
3866
static StaticDefinedBindingPropertyMap flutterShadcnProgressProperties = {
3967
'value': StaticDefinedBindingProperty(
@@ -51,6 +79,26 @@ abstract class FlutterShadcnProgressBindings extends WidgetElement {
5179
setter: (element, value) =>
5280
castToType<FlutterShadcnProgressBindings>(element).variant = value,
5381
),
82+
'backgroundColor': StaticDefinedBindingProperty(
83+
getter: (element) => castToType<FlutterShadcnProgressBindings>(element).backgroundColor,
84+
setter: (element, value) =>
85+
castToType<FlutterShadcnProgressBindings>(element).backgroundColor = value,
86+
),
87+
'color': StaticDefinedBindingProperty(
88+
getter: (element) => castToType<FlutterShadcnProgressBindings>(element).color,
89+
setter: (element, value) =>
90+
castToType<FlutterShadcnProgressBindings>(element).color = value,
91+
),
92+
'minHeight': StaticDefinedBindingProperty(
93+
getter: (element) => castToType<FlutterShadcnProgressBindings>(element).minHeight,
94+
setter: (element, value) =>
95+
castToType<FlutterShadcnProgressBindings>(element).minHeight = value,
96+
),
97+
'borderRadius': StaticDefinedBindingProperty(
98+
getter: (element) => castToType<FlutterShadcnProgressBindings>(element).borderRadius,
99+
setter: (element, value) =>
100+
castToType<FlutterShadcnProgressBindings>(element).borderRadius = value,
101+
),
54102
};
55103
@override
56104
List<StaticDefinedBindingPropertyMap> get properties => [

0 commit comments

Comments
 (0)