Skip to content

Commit

Permalink
feat(UX-1234): Status Chip (#201)
Browse files Browse the repository at this point in the history
feat: created status chip

docs: added description for status chip

fix: converted child widget function to a stateless widget class in status chip

feat: implemented status chip widgetbook use case

fix: set rounded to default to true

test: wrote tests for status chip
  • Loading branch information
DE7924 authored Nov 6, 2024
1 parent e035a47 commit c69d3b7
Show file tree
Hide file tree
Showing 9 changed files with 380 additions and 0 deletions.
16 changes: 16 additions & 0 deletions example/lib/pages/components/chip_example.dart
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,21 @@ class _ChipExampleState extends State<ChipExample> {
),
),
]);

final Widget statusChipExample = Column(children: [
Text(
'Status Chip',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
ZetaStatusChip(
label: 'Label',
data: 'Status chip',
draggable: true,
),
]);

final colors = Zeta.of(context).colors;
return ExampleScaffold(
name: ChipExample.name,
Expand All @@ -74,6 +89,7 @@ class _ChipExampleState extends State<ChipExample> {
inputChipExample,
assistChipExample,
filterChipExample,
statusChipExample,
const SizedBox(height: 100),
DragTarget<String>(
onAcceptWithDetails: (details) => setState(() => chipType = details.data),
Expand Down
1 change: 1 addition & 0 deletions example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ class _HotReloadState extends State<HotReload> {
WidgetbookUseCase(name: 'Filter Chip', builder: (context) => filterChipUseCase(context)),
WidgetbookUseCase(name: 'Input Chip', builder: (context) => inputChipUseCase(context)),
WidgetbookUseCase(name: 'Assist Chip', builder: (context) => assistChipUseCase(context)),
WidgetbookUseCase(name: 'Status Chip', builder: (context) => statusChipUseCase(context)),
],
),
WidgetbookComponent(
Expand Down
11 changes: 11 additions & 0 deletions example/widgetbook/pages/components/chip_widgetbook.dart
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,14 @@ Widget assistChipUseCase(BuildContext context) {
),
);
}

Widget statusChipUseCase(BuildContext context) {
return WidgetbookScaffold(
builder: (context, _) => ZetaStatusChip(
label: context.knobs.string(label: 'Label', initialValue: 'Label'),
draggable: context.knobs.boolean(label: 'Draggable', initialValue: false),
rounded: context.knobs.boolean(label: 'Rounded', initialValue: true),
onDragCompleted: () => print('Drag completed'),
),
);
}
1 change: 1 addition & 0 deletions lib/src/components/chips/chip.dart
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import '../../../zeta_flutter.dart';
export './assist_chip.dart';
export './filter_chip.dart';
export './input_chip.dart';
export './status_chip.dart';

/// This covers the broad functionality of [ZetaAssistChip], [ZetaFilterChip] and [ZetaInputChip].
///
Expand Down
125 changes: 125 additions & 0 deletions lib/src/components/chips/status_chip.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import '../../../zeta_flutter.dart';

/// The [ZetaStatusChip] is a chip that displays a status/label.
/// It can be dragged around the screen and placed in new locations using [DragTarget].
///
/// {@category Components}
///
/// Figma: https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21265-2159
///
/// Widgetbook: https://zeta-ds.web.app/flutter/widgetbook/index.html#/?path=components/chips/input-chip
class ZetaStatusChip extends ZetaStatelessWidget {
/// Creates a [ZetaStatusChip].
const ZetaStatusChip({
super.key,
required this.label,
super.rounded = true,
this.draggable = false,
this.data,
this.onDragCompleted,
this.semanticLabel,
});

/// The label on the [ZetaStatusChip]
final String label;

/// Whether the chip can be dragged.
final bool draggable;

/// Draggable data.
final dynamic data;

/// Called when the draggable is dropped and accepted by a [DragTarget].
///
/// See also:
/// * [DragTarget]
/// * [Draggable]
final VoidCallback? onDragCompleted;

/// A semantic label for the chip.
final String? semanticLabel;

@override
Widget build(BuildContext context) {
return ZetaRoundedScope(
rounded: context.rounded,
child: MouseRegion(
cursor: draggable ? SystemMouseCursors.click : SystemMouseCursors.basic,
child: Semantics(
label: semanticLabel ?? label,
child: SelectionContainer.disabled(
child: draggable
? Draggable(
feedback: Material(
color: Colors.transparent,
child: _Child(context: context, label: label),
),
childWhenDragging: const Nothing(),
data: data,
onDragCompleted: onDragCompleted,
child: _Child(context: context, label: label),
)
: _Child(context: context, label: label),
),
),
),
);
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(StringProperty('label', label))
..add(DiagnosticsProperty<bool>('draggable', draggable))
..add(DiagnosticsProperty('data', data))
..add(ObjectFlagProperty<VoidCallback?>.has('onDragCompleted', onDragCompleted))
..add(StringProperty('semanticLabel', semanticLabel));
}
}

/// The child widget of the [ZetaStatusChip].
class _Child extends StatelessWidget {
const _Child({required this.context, required this.label});

final BuildContext context;

final String label;

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Zeta.of(context).colors.surfaceWarm,
borderRadius: context.rounded
? BorderRadius.all(
Radius.circular(
Zeta.of(context).spacing.small,
),
)
: null,
),
padding: EdgeInsets.symmetric(
horizontal: Zeta.of(context).spacing.small,
vertical: Zeta.of(context).spacing.minimum,
),
child: Text(
label,
style: ZetaTextStyles.bodyXSmall.copyWith(
color: Zeta.of(context).colors.textDefault,
),
),
);
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(DiagnosticsProperty<BuildContext>('context', context))
..add(StringProperty('label', label));
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit c69d3b7

Please sign in to comment.