diff --git a/example/lib/pages/components/chip_example.dart b/example/lib/pages/components/chip_example.dart index 72a96407..899a8c38 100644 --- a/example/lib/pages/components/chip_example.dart +++ b/example/lib/pages/components/chip_example.dart @@ -63,6 +63,21 @@ class _ChipExampleState extends State { ), ), ]); + + 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, @@ -74,6 +89,7 @@ class _ChipExampleState extends State { inputChipExample, assistChipExample, filterChipExample, + statusChipExample, const SizedBox(height: 100), DragTarget( onAcceptWithDetails: (details) => setState(() => chipType = details.data), diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart index 545f0410..9f3a0fca 100644 --- a/lib/src/components/chips/chip.dart +++ b/lib/src/components/chips/chip.dart @@ -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]. /// diff --git a/lib/src/components/chips/status_chip.dart b/lib/src/components/chips/status_chip.dart new file mode 100644 index 00000000..db6aa0b9 --- /dev/null +++ b/lib/src/components/chips/status_chip.dart @@ -0,0 +1,87 @@ +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +/// +/// {@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, + 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, + child: SelectionContainer.disabled( + child: draggable + ? Draggable( + feedback: Material( + color: Colors.transparent, + child: child(context), + ), + childWhenDragging: const Nothing(), + data: data, + onDragCompleted: onDragCompleted, + child: child(context), + ) + : child(context), + ), + ), + ), + ); + } + + /// The child widget of the chip. + Widget child(BuildContext context) { + return Container( + decoration: BoxDecoration( + color: Zeta.of(context).colors.surfaceWarm, + borderRadius: BorderRadius.all( + Radius.circular( + Zeta.of(context).spacing.small, + ), + ), + ), + padding: EdgeInsets.symmetric( + horizontal: Zeta.of(context).spacing.small, + vertical: Zeta.of(context).spacing.minimum, + ), + child: Text(label, style: ZetaTextStyles.bodyXSmall), + ); + } +}