From 545657e8d0db6308684c2b7e9f12b1c32080bb0f Mon Sep 17 00:00:00 2001 From: Vitalij Vascenko Date: Wed, 26 Jun 2024 12:09:34 +0200 Subject: [PATCH] feat: [DX-1901] Add onPressed to Alert and Banners --- optimus/lib/src/feedback/alert.dart | 63 +++++++------ optimus/lib/src/feedback/banner.dart | 94 ++++++++++--------- .../lib/src/feedback/system_wide_banner.dart | 77 ++++++++------- 3 files changed, 128 insertions(+), 106 deletions(-) diff --git a/optimus/lib/src/feedback/alert.dart b/optimus/lib/src/feedback/alert.dart index 80176b1e..fab873ae 100644 --- a/optimus/lib/src/feedback/alert.dart +++ b/optimus/lib/src/feedback/alert.dart @@ -14,6 +14,7 @@ class OptimusAlert extends StatelessWidget { this.icon, this.link, this.onDismissed, + this.onPressed, this.variant = OptimusFeedbackVariant.info, }); @@ -38,6 +39,9 @@ class OptimusAlert extends StatelessWidget { /// icon. final OptimusFeedbackVariant variant; + /// An optional callback to be called when the alert is pressed. + final VoidCallback? onPressed; + bool get _isExpanded => description != null || link != null; double _getPadding(BuildContext context) => @@ -58,35 +62,38 @@ class OptimusAlert extends StatelessWidget { return Padding( padding: EdgeInsets.all(padding), - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: alertWidth), - child: Stack( - children: [ - _AlertContent( - icon: icon, - variant: variant, - title: title, - description: description, - linkText: link?.text, - onLinkPressed: () { - link?.onPressed(); - OptimusAlertOverlay.of(context)?.remove(this); - }, - dismissible: onDismissed != null, - ), - if (onDismissed != null) - Positioned( - top: _isExpanded ? tokens.spacing200 : tokens.spacing0, - right: tokens.spacing200, - bottom: _isExpanded ? null : tokens.spacing0, - child: FeedbackDismissButton( - onDismissed: () { - onDismissed?.call(); - OptimusAlertOverlay.of(context)?.remove(this); - }, - ), + child: GestureDetector( + onTap: onPressed, + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: alertWidth), + child: Stack( + children: [ + _AlertContent( + icon: icon, + variant: variant, + title: title, + description: description, + linkText: link?.text, + onLinkPressed: () { + link?.onPressed(); + OptimusAlertOverlay.of(context)?.remove(this); + }, + dismissible: onDismissed != null, ), - ], + if (onDismissed != null) + Positioned( + top: _isExpanded ? tokens.spacing200 : tokens.spacing0, + right: tokens.spacing200, + bottom: _isExpanded ? null : tokens.spacing0, + child: FeedbackDismissButton( + onDismissed: () { + onDismissed?.call(); + OptimusAlertOverlay.of(context)?.remove(this); + }, + ), + ), + ], + ), ), ), ); diff --git a/optimus/lib/src/feedback/banner.dart b/optimus/lib/src/feedback/banner.dart index a84b8d56..b0908196 100644 --- a/optimus/lib/src/feedback/banner.dart +++ b/optimus/lib/src/feedback/banner.dart @@ -22,6 +22,7 @@ class OptimusBanner extends StatelessWidget { this.variant = OptimusFeedbackVariant.info, this.hasIcon = false, this.description, + this.onPressed, this.isDismissible = false, this.onDismiss, }); @@ -53,59 +54,66 @@ class OptimusBanner extends StatelessWidget { /// Called when close button is pressed (if [isDismissible] == true). final VoidCallback? onDismiss; + /// An optional callback when the banner is pressed. + final VoidCallback? onPressed; + bool get _isExpanded => description != null; @override Widget build(BuildContext context) { final tokens = context.tokens; - return DecoratedBox( - decoration: BoxDecoration( - color: variant.backgroundColor(tokens), - borderRadius: BorderRadius.all(tokens.borderRadius100), - ), - child: Stack( - children: [ - Padding( - padding: EdgeInsets.all(tokens.spacing200), - child: Row( - crossAxisAlignment: _isExpanded - ? CrossAxisAlignment.start - : CrossAxisAlignment.center, - children: [ - if (hasIcon) - Padding( - padding: EdgeInsets.only(right: tokens.spacing200), - child: FeedbackIcon(variant: variant), - ), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: isDismissible - ? EdgeInsets.only(right: tokens.spacing200) - : EdgeInsets.zero, - child: FeedbackTitle(title: title), - ), - if (description case final description?) + return GestureDetector( + onTap: onPressed, + child: DecoratedBox( + decoration: BoxDecoration( + color: variant.backgroundColor(tokens), + borderRadius: BorderRadius.all(tokens.borderRadius100), + ), + child: Stack( + children: [ + Padding( + padding: EdgeInsets.all(tokens.spacing200), + child: Row( + crossAxisAlignment: _isExpanded + ? CrossAxisAlignment.start + : CrossAxisAlignment.center, + children: [ + if (hasIcon) + Padding( + padding: EdgeInsets.only(right: tokens.spacing200), + child: FeedbackIcon(variant: variant), + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ Padding( - padding: EdgeInsets.only(top: tokens.spacing50), - child: FeedbackDescription(description: description), + padding: isDismissible + ? EdgeInsets.only(right: tokens.spacing200) + : EdgeInsets.zero, + child: FeedbackTitle(title: title), ), - ], + if (description case final description?) + Padding( + padding: EdgeInsets.only(top: tokens.spacing50), + child: + FeedbackDescription(description: description), + ), + ], + ), ), - ), - ], - ), - ), - if (isDismissible) - Positioned( - top: tokens.spacing200, - right: tokens.spacing200, - child: FeedbackDismissButton(onDismissed: onDismiss), + ], + ), ), - ], + if (isDismissible) + Positioned( + top: tokens.spacing200, + right: tokens.spacing200, + child: FeedbackDismissButton(onDismissed: onDismiss), + ), + ], + ), ), ); } diff --git a/optimus/lib/src/feedback/system_wide_banner.dart b/optimus/lib/src/feedback/system_wide_banner.dart index 58611432..81562b23 100644 --- a/optimus/lib/src/feedback/system_wide_banner.dart +++ b/optimus/lib/src/feedback/system_wide_banner.dart @@ -24,6 +24,7 @@ class OptimusSystemWideBanner extends StatelessWidget { this.link, this.description, this.variant = OptimusFeedbackVariant.info, + this.onPressed, }); /// Content of the banner. @@ -42,50 +43,56 @@ class OptimusSystemWideBanner extends StatelessWidget { /// Controls background color. final OptimusFeedbackVariant variant; + /// An optional callback to be called when the banner is pressed. + final VoidCallback? onPressed; + bool get _isExpanded => description != null || link != null; @override Widget build(BuildContext context) { final tokens = context.tokens; - return DecoratedBox( - decoration: BoxDecoration(color: variant.backgroundColor(tokens)), - child: Padding( - padding: EdgeInsets.symmetric( - horizontal: tokens.spacing100, - vertical: tokens.spacing200, - ), - child: Row( - crossAxisAlignment: _isExpanded - ? CrossAxisAlignment.start - : CrossAxisAlignment.center, - children: [ - FeedbackIcon(variant: variant), - Expanded( - child: Padding( - padding: EdgeInsets.only(left: tokens.spacing150), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - FeedbackTitle(title: title), - if (description case final description?) - Padding( - padding: EdgeInsets.only(top: tokens.spacing50), - child: FeedbackDescription(description: description), - ), - if (link case final link?) - Padding( - padding: EdgeInsets.only(top: tokens.spacing50), - child: FeedbackLink( - text: link.text, - onPressed: link.onPressed, + return GestureDetector( + onTap: onPressed, + child: DecoratedBox( + decoration: BoxDecoration(color: variant.backgroundColor(tokens)), + child: Padding( + padding: EdgeInsets.symmetric( + horizontal: tokens.spacing100, + vertical: tokens.spacing200, + ), + child: Row( + crossAxisAlignment: _isExpanded + ? CrossAxisAlignment.start + : CrossAxisAlignment.center, + children: [ + FeedbackIcon(variant: variant), + Expanded( + child: Padding( + padding: EdgeInsets.only(left: tokens.spacing150), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + FeedbackTitle(title: title), + if (description case final description?) + Padding( + padding: EdgeInsets.only(top: tokens.spacing50), + child: FeedbackDescription(description: description), + ), + if (link case final link?) + Padding( + padding: EdgeInsets.only(top: tokens.spacing50), + child: FeedbackLink( + text: link.text, + onPressed: link.onPressed, + ), ), - ), - ], + ], + ), ), ), - ), - ], + ], + ), ), ), );