fix: Add Close icon to bottom sheet

analysis_options.yaml

@@ -1 +1,8 @@
 include: package:zds_analysis/analysis_options_lib.yaml
+
+linter:
+  rules:
+    document_ignores: false
+    missing_code_block_language_in_doc_comment: false
+    unnecessary_library_name: false
+    unintended_html_in_doc_comment: false

example/widgetbook/pages/components/bottom_sheet_widgetbook.dart

@@ -32,6 +32,8 @@ ZetaBottomSheet _bottomSheet(BuildContext context) {
   return ZetaBottomSheet(
     centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true),
     title: context.knobs.string(label: 'Title', initialValue: 'Title'),
+    onDismissed: () => print('Dismissed'),
+    showCloseButton: context.knobs.boolean(label: 'Show close button', initialValue: true),
     body: Wrap(
       spacing: Zeta.of(context).spacing.medium,
       runSpacing: Zeta.of(context).spacing.medium,

lib/src/components/bottom sheets/bottom_sheet.dart

@@ -21,6 +21,8 @@ class ZetaBottomSheet extends ZetaStatelessWidget {
     this.title,
     this.body,
     this.centerTitle = true,
+    this.showCloseButton = true,
+    this.onDismissed,
   });
 
   /// The title of [ZetaBottomSheet].
@@ -34,10 +36,28 @@ class ZetaBottomSheet extends ZetaStatelessWidget {
   /// The content of [ZetaBottomSheet].
   final Widget? body;
 
+  /// Whether to show close icon button or not.
+  final bool showCloseButton;
+
+  /// Callback when the bottom sheet is dismissed.
+  ///
+  /// This is _only_ called when the user closes the sheet by tapping the close button.
+  ///
+  /// Defaults to
+  /// ```dart
+  /// Navigator.of(context).pop();
+  /// ```
+  final VoidCallback? onDismissed;
+
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
 
+    final text = Text(
+      title ?? '',
+      style: ZetaTextStyles.titleMedium,
+      textAlign: centerTitle ? TextAlign.center : TextAlign.start,
+    );
     return ZetaRoundedScope(
       rounded: context.rounded,
       child: Container(
@@ -54,39 +74,64 @@ class ZetaBottomSheet extends ZetaStatelessWidget {
             topRight: Radius.circular(Zeta.of(context).spacing.xl_2),
           ),
         ),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
+        child: Stack(
           children: [
-            Align(
-              child: SizedBox(
-                height: Zeta.of(context).spacing.xl_5,
-                child: Padding(
-                  padding: EdgeInsets.only(top: Zeta.of(context).spacing.small),
-                  child: ZetaIcon(
-                    Icons.maximize,
-                    size: Zeta.of(context).spacing.xl_9,
-                    color: colors.surfaceDisabled,
-                  ),
+            if (showCloseButton)
+              Positioned(
+                right: Zeta.of(context).spacing.medium,
+                top: Zeta.of(context).spacing.small,
+                child: IconButton(
+                  icon: const ZetaIcon(ZetaIcons.close),
+                  color: colors.iconSubtle,
+                  onPressed: () {
+                    if (onDismissed != null) {
+                      onDismissed?.call();
+                    } else {
+                      Navigator.of(context).pop();
+                    }
+                  },
                 ),
               ),
-            ),
-            if (title != null)
-              Padding(
-                padding: EdgeInsets.symmetric(
-                  horizontal: Zeta.of(context).spacing.medium,
-                  vertical: Zeta.of(context).spacing.xl_2,
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Align(
+                  child: SizedBox(
+                    height: Zeta.of(context).spacing.xl,
+                    child: Center(
+                      child: Container(
+                        decoration: BoxDecoration(
+                          color: colors.surfaceDisabled,
+                          borderRadius: BorderRadius.circular(
+                            100, // NOTE: This radius is hardcoded in Figma, doesn't change when token values change.
+                          ),
+                        ),
+                        height: Zeta.of(context).spacing.minimum,
+                        width: Zeta.of(context).spacing.xl_6,
+                      ),
+                    ),
+                  ),
                 ),
-                child: Align(
-                  alignment: centerTitle ? Alignment.center : Alignment.centerLeft,
-                  child: Text(
-                    title!,
-                    style: ZetaTextStyles.titleMedium,
+                if (title != null)
+                  Padding(
+                    padding: EdgeInsets.symmetric(
+                      horizontal: Zeta.of(context).spacing.medium,
+                      vertical: Zeta.of(context).spacing.xl_2,
+                    ),
+                    child: Row(
+                      mainAxisAlignment: centerTitle ? MainAxisAlignment.center : MainAxisAlignment.spaceBetween,
+                      children: [
+                        Expanded(
+                          child: centerTitle ? Center(child: text) : text,
+                        ),
+                      ],
+                    ),
                   ),
+                Material(
+                  color: colors.surfaceSecondary,
+                  child: body ?? const Nothing(),
                 ),
-              ),
-            Material(
-              color: colors.surfaceSecondary,
-              child: body ?? const Nothing(),
+              ],
             ),
           ],
         ),
@@ -99,7 +144,9 @@ class ZetaBottomSheet extends ZetaStatelessWidget {
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty<String?>('title', title))
-      ..add(DiagnosticsProperty<bool>('centerTitle', centerTitle));
+      ..add(DiagnosticsProperty<bool>('centerTitle', centerTitle))
+      ..add(DiagnosticsProperty<bool>('showCloseButton', showCloseButton))
+      ..add(ObjectFlagProperty<VoidCallback>.has('onDismissed', onDismissed));
   }
 }