Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(UX-1233): Added disabled variant to chip #203

Merged
merged 5 commits into from
Nov 8, 2024
Merged

feat(UX-1233): Added disabled variant to chip #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4aea008
test: Added debugfillproperties test to chip_test
DE7924 Nov 7, 2024
8db89f4
fix: changed _updateControllerState to _handleDisabledState
DE7924 Nov 7, 2024
ce65794
fix: used variable
DE7924 Nov 7, 2024
822bb0c
feat: added onTap to widgetbook
DE7924 Nov 7, 2024
507f848
feat: added rounded to widgetbook
DE7924 Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions example/lib/pages/components/chip_example.dart
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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