diff --git a/analysis_options.yaml b/analysis_options.yaml index 6bfc3f6f..f648dc87 100644 --- a/analysis_options.yaml +++ b/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 diff --git a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart b/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart index a0fe9ccf..ec4b5673 100644 --- a/example/widgetbook/pages/components/bottom_sheet_widgetbook.dart +++ b/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, diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart index 7bd11867..14525ffc 100644 --- a/lib/src/components/bottom sheets/bottom_sheet.dart +++ b/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('title', title)) - ..add(DiagnosticsProperty('centerTitle', centerTitle)); + ..add(DiagnosticsProperty('centerTitle', centerTitle)) + ..add(DiagnosticsProperty('showCloseButton', showCloseButton)) + ..add(ObjectFlagProperty.has('onDismissed', onDismissed)); } }