Skip to content

Commit

Permalink
feat(UX-1233): Added disabled variant to chip (#203)
Browse files Browse the repository at this point in the history 
feat: Added disabled variant to chip

test: Added debugfillproperties test to chip_test

feat: Added onTaps to chips in example app

fix: changed _updateControllerState to _handleDisabledState

fix: used variable

feat: added onTap to widgetbook

feat: added rounded to widgetbook
  • Loading branch information
@DE7924
DE7924 authored Nov 8, 2024
1 parent 51b4172 commit 321b57d
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 34 deletions.
3 changes: 3 additions & 0 deletions example/lib/pages/components/chip_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ class _ChipExampleState extends State<ChipExample> {
label: 'Label',
leading: ZetaIcon(ZetaIcons.user),
trailing: IconButton(icon: Icon(ZetaIcons.close), onPressed: () {}),
onTap: () {},
),
]);

Expand All @@ -42,6 +43,7 @@ class _ChipExampleState extends State<ChipExample> {
leading: ZetaIcon(ZetaIcons.star),
draggable: true,
data: 'Assist chip',
onTap: () {},
),
),
]);
Expand All @@ -60,6 +62,7 @@ class _ChipExampleState extends State<ChipExample> {
selected: true,
data: 'Filter chip',
draggable: true,
onTap: (bool selected) {},
),
),
]);
Expand Down
6 changes: 6 additions & 0 deletions example/widgetbook/pages/components/chip_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ Widget inputChipUseCase(BuildContext context) {

return WidgetbookScaffold(
builder: (context, _) => ZetaInputChip(
onTap: context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : () {},
rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
leading: context.knobs.boolean(label: 'Avatar', initialValue: true)
? ZetaAvatar(
Expand All @@ -26,6 +28,8 @@ Widget inputChipUseCase(BuildContext context) {

Widget filterChipUseCase(BuildContext context) => WidgetbookScaffold(
builder: (context, _) => ZetaFilterChip(
onTap: context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : (i) {},
rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
selected: context.knobs.boolean(label: 'Selected', initialValue: true),
),
Expand All @@ -34,6 +38,8 @@ Widget filterChipUseCase(BuildContext context) => WidgetbookScaffold(
Widget assistChipUseCase(BuildContext context) {
return WidgetbookScaffold(
builder: (context, _) => ZetaAssistChip(
onTap: context.knobs.boolean(label: 'Disabled', initialValue: false) ? null : () {},
rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
leading: ZetaIcon(iconKnob(context)),
),
Expand Down
88 changes: 61 additions & 27 deletions lib/src/components/chips/chip.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,14 @@ class ZetaChip extends ZetaStatefulWidget {

class _ZetaChipState extends State<ZetaChip> {
bool selected = false;
bool _draggable = false;

@override
void initState() {
super.initState();
selected = widget.selected ?? false;
_draggable = widget.draggable;
_handleDisabledState();
}

@override
Expand All @@ -101,10 +104,25 @@ class _ZetaChipState extends State<ZetaChip> {
if (oldWidget.selected != widget.selected) {
selected = widget.selected ?? false;
}
_handleDisabledState();
}

void _handleDisabledState() {
if (widget.onTap == null && widget.onToggle == null) {
_controller.update(WidgetState.disabled, true);
setState(() {
_draggable = false;
});
} else {
_controller.update(WidgetState.disabled, false);
setState(() {
_draggable = widget.draggable;
});
}
}

Widget _renderLeading(Color foregroundColor) {
if (widget.leading.runtimeType == Icon) {
if (widget.leading.runtimeType == ZetaIcon || widget.leading.runtimeType == Icon) {
return IconTheme(
data: IconThemeData(color: foregroundColor, size: Zeta.of(context).spacing.xl),
child: widget.leading!,
Expand All @@ -120,7 +138,6 @@ class _ZetaChipState extends State<ZetaChip> {
@override
Widget build(BuildContext context) {
final colors = Zeta.of(context).colors;
final foregroundColor = selected ? colors.textInverse : colors.textDefault;

return ZetaRoundedScope(
rounded: context.rounded,
Expand All @@ -129,18 +146,18 @@ class _ZetaChipState extends State<ZetaChip> {
button: widget.onTap != null,
label: widget.semanticLabel,
child: SelectionContainer.disabled(
child: widget.draggable
child: _draggable
? Draggable(
feedback: Material(
color: Colors.transparent,
child: child(colors, foregroundColor, isDragging: true),
child: child(colors, isDragging: true),
),
childWhenDragging: const Nothing(),
data: widget.data,
onDragCompleted: widget.onDragCompleted,
child: child(colors, foregroundColor),
child: child(colors),
)
: child(colors, foregroundColor),
: child(colors),
),
),
);
Expand Down Expand Up @@ -171,25 +188,41 @@ class _ZetaChipState extends State<ZetaChip> {
return Zeta.of(context).spacing.large;
}

Color _foregroundColor(ZetaColors colors, bool disabled) {
if (!disabled) {
if (selected) {
return colors.textInverse;
} else {
return colors.textDefault;
}
} else {
return colors.textDisabled;
}
}

ValueListenableBuilder<Set<WidgetState>> child(
ZetaColors colors,
Color foregroundColor, {
ZetaColors colors, {
bool isDragging = false,
}) {
return ValueListenableBuilder(
valueListenable: _controller,
builder: (context, states, child) {
final disabled = states.contains(WidgetState.disabled);
final Color foregroundColor = _foregroundColor(colors, disabled);
final double iconSize = selected ? Zeta.of(context).spacing.xl_2 : Zeta.of(context).spacing.none;
final bool rounded = context.rounded;
return InkWell(
statesController: _controller,
statesController: !disabled ? _controller : null,
mouseCursor: !disabled ? SystemMouseCursors.click : SystemMouseCursors.basic,
borderRadius: rounded ? Zeta.of(context).radius.full : Zeta.of(context).radius.none,
onTap: () {
if (widget.selected != null) {
setState(() => selected = !selected);
widget.onToggle?.call(selected);
} else {
widget.onTap?.call();
if (!disabled) {
if (widget.selected != null) {
setState(() => selected = !selected);
widget.onToggle?.call(selected);
} else {
widget.onTap?.call();
}
}
},
child: AnimatedContainer(
Expand All @@ -203,22 +236,23 @@ class _ZetaChipState extends State<ZetaChip> {
),
decoration: BoxDecoration(
color: () {
if (states.contains(WidgetState.disabled)) {
if (disabled) {
return colors.surfaceDisabled;
}
if (selected) {
} else {
if (selected) {
if (states.contains(WidgetState.hovered)) {
return colors.borderHover;
}
return colors.surfaceDefaultInverse;
}
if (states.contains(WidgetState.pressed) || isDragging) {
return colors.surfaceSelected;
}
if (states.contains(WidgetState.hovered)) {
return colors.borderHover;
return colors.surfaceHover;
}
return colors.surfaceDefaultInverse;
}
if (states.contains(WidgetState.pressed) || isDragging) {
return colors.surfaceSelected;
}
if (states.contains(WidgetState.hovered)) {
return colors.surfaceHover;
return colors.surfacePrimary;
}
return colors.surfacePrimary;
}(),
borderRadius: rounded ? Zeta.of(context).radius.full : Zeta.of(context).radius.none,
border: Border.fromBorderSide(
Expand All @@ -242,7 +276,7 @@ class _ZetaChipState extends State<ZetaChip> {
child: (selected
? ZetaIcon(
ZetaIcons.check_mark,
color: widget.selected! ? colors.iconInverse : Colors.transparent,
color: disabled ? colors.iconDisabled : colors.iconInverse,
)
: const Nothing()),
)
Expand Down
22 changes: 15 additions & 7 deletions test/src/components/chips/chip_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,21 @@ void main() {

group('Accessibility Tests', () {});
group('Content Tests', () {
// final debugFillProperties = {
// '': '',
// };
// debugFillPropertiesTest(
// widget,
// debugFillProperties,
// );
final debugFillProperties = {
'label': '"Test Chip"',
'rounded': 'null',
'selected': 'null',
'draggable': 'false',
'data': 'null',
'onDragCompleted': 'null',
'semanticLabel': 'null',
'onTap': 'null',
'onToggle': 'null',
};
debugFillPropertiesTest(
const ZetaChip(label: 'Test Chip'),
debugFillProperties,
);

testWidgets('renders label correctly', (WidgetTester tester) async {
await tester.pumpWidget(
Expand Down

0 comments on commit 321b57d

Please sign in to comment.