From 7cb4440e9f302af3b4c050a6fd1ee72b26625599 Mon Sep 17 00:00:00 2001 From: Harry Sild <46851868+Kypsis@users.noreply.github.com> Date: Thu, 21 Dec 2023 10:35:40 +0200 Subject: [PATCH] feat: [MDS-914] Modify filled and outlined versions of MoonAlert to align with design (#319) --- example/lib/src/storybook/stories/alert.dart | 60 ++++++++++++-- lib/moon_design.dart | 2 - lib/src/widgets/alert/alert.dart | 54 +++++++++++++ lib/src/widgets/alert/filled_alert.dart | 79 ------------------ lib/src/widgets/alert/outlined_alert.dart | 84 -------------------- 5 files changed, 106 insertions(+), 173 deletions(-) delete mode 100644 lib/src/widgets/alert/filled_alert.dart delete mode 100644 lib/src/widgets/alert/outlined_alert.dart diff --git a/example/lib/src/storybook/stories/alert.dart b/example/lib/src/storybook/stories/alert.dart index 368b0794..bcc4fe76 100644 --- a/example/lib/src/storybook/stories/alert.dart +++ b/example/lib/src/storybook/stories/alert.dart @@ -192,12 +192,24 @@ class _AlertStoryState extends State { ], ), const TextDivider(text: "Filled MoonAlert variant"), - MoonFilledAlert( + MoonAlert.filled( show: true, color: context.moonColors!.chichi, + backgroundColor: context.moonColors!.chichi10, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.notifications_alert_24_light) : null, title: const Text("Filled error MoonAlert"), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + borderRadius: borderRadius, + gap: 0, + onTap: () {}, + icon: Icon( + MoonIcons.controls_close_small_24_light, + size: 24, + color: context.moonColors!.chichi, + ), + ), body: showBodyKnob ? const SizedBox( height: 24, @@ -207,15 +219,26 @@ class _AlertStoryState extends State { ), ) : null, - onTrailingTap: () {}, ), const SizedBox(height: 16), - MoonFilledAlert( + MoonAlert.filled( show: true, color: context.moonColors!.krillin, + backgroundColor: context.moonColors!.krillin10, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.generic_alarm_round_24_light) : null, title: const Text("Filled warning MoonAlert"), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + borderRadius: borderRadius, + gap: 0, + onTap: () {}, + icon: Icon( + MoonIcons.controls_close_small_24_light, + size: 24, + color: context.moonColors!.krillin, + ), + ), body: showBodyKnob ? const SizedBox( height: 24, @@ -225,15 +248,26 @@ class _AlertStoryState extends State { ), ) : null, - onTrailingTap: () {}, ), const TextDivider(text: "Outlined MoonAlert variant"), - MoonOutlinedAlert( + MoonAlert.outlined( show: true, color: context.moonColors!.roshi, + borderColor: context.moonColors!.roshi, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.generic_check_rounded_24_light) : null, title: const Text("Outlined success MoonAlert"), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + borderRadius: borderRadius, + gap: 0, + onTap: () {}, + icon: Icon( + MoonIcons.controls_close_small_24_light, + size: 24, + color: context.moonColors!.roshi, + ), + ), body: showBodyKnob ? const SizedBox( height: 24, @@ -243,15 +277,26 @@ class _AlertStoryState extends State { ), ) : null, - onTrailingTap: () {}, ), const SizedBox(height: 16), - MoonOutlinedAlert( + MoonAlert.outlined( show: true, color: context.moonColors!.whis, + borderColor: context.moonColors!.whis, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.notifications_alert_24_light) : null, title: const Text('Outlined info MoonAlert'), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + borderRadius: borderRadius, + gap: 0, + onTap: () {}, + icon: Icon( + MoonIcons.controls_close_small_24_light, + size: 24, + color: context.moonColors!.whis, + ), + ), body: showBodyKnob ? const SizedBox( height: 24, @@ -261,7 +306,6 @@ class _AlertStoryState extends State { ), ) : null, - onTrailingTap: () {}, ), ], ), diff --git a/lib/moon_design.dart b/lib/moon_design.dart index 0018d632..a10c779d 100644 --- a/lib/moon_design.dart +++ b/lib/moon_design.dart @@ -48,8 +48,6 @@ export 'package:moon_design/src/utils/squircle/squircle_radius.dart'; export 'package:moon_design/src/widgets/accordion/accordion.dart'; export 'package:moon_design/src/widgets/alert/alert.dart'; -export 'package:moon_design/src/widgets/alert/filled_alert.dart'; -export 'package:moon_design/src/widgets/alert/outlined_alert.dart'; export 'package:moon_design/src/widgets/authcode/authcode.dart'; export 'package:moon_design/src/widgets/avatar/avatar.dart'; export 'package:moon_design/src/widgets/bottom_sheet/bottom_sheet.dart'; diff --git a/lib/src/widgets/alert/alert.dart b/lib/src/widgets/alert/alert.dart index 8171fa25..c05ba437 100644 --- a/lib/src/widgets/alert/alert.dart +++ b/lib/src/widgets/alert/alert.dart @@ -97,6 +97,60 @@ class MoonAlert extends StatefulWidget { this.body, }); + /// MDS filled alert variant. + /// + /// See also: + /// + /// * [MoonOutlinedAlert], MDS outlined button. + const MoonAlert.filled({ + super.key, + this.show = false, + this.borderRadius, + this.color, + required this.backgroundColor, + this.semanticLabel, + this.leading, + required this.title, + this.trailing, + this.body, + }) : showBorder = false, + borderColor = null, + borderWidth = null, + decoration = null, + minimumHeight = null, + padding = null, + horizontalGap = null, + verticalGap = null, + transitionDuration = null, + transitionCurve = null; + + /// MDS outlined alert variant. + /// + /// See also: + /// + /// * [MoonFilledAlert], MDS filled button. + const MoonAlert.outlined({ + super.key, + this.show = false, + this.borderRadius, + this.borderWidth, + this.color, + required this.borderColor, + this.semanticLabel, + this.leading, + required this.title, + this.trailing, + this.body, + }) : showBorder = true, + backgroundColor = Colors.transparent, + decoration = null, + minimumHeight = null, + padding = null, + horizontalGap = null, + verticalGap = null, + transitionDuration = null, + transitionCurve = null; + @override State createState() => _MoonAlertState(); } diff --git a/lib/src/widgets/alert/filled_alert.dart b/lib/src/widgets/alert/filled_alert.dart deleted file mode 100644 index 4af2578d..00000000 --- a/lib/src/widgets/alert/filled_alert.dart +++ /dev/null @@ -1,79 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/widgets/alert/alert.dart'; -import 'package:moon_design/src/widgets/buttons/button.dart'; -import 'package:moon_icons/moon_icons.dart'; - -class MoonFilledAlert extends StatelessWidget { - /// Controls whether the alert is shown. - final bool show; - - /// The border radius of the alert. - final BorderRadiusGeometry? borderRadius; - - /// The color of the alert. - final Color color; - - /// The semantic label for the alert. - final String? semanticLabel; - - /// The callback that is called when the trailing slot widget is tapped. - final VoidCallback? onTrailingTap; - - /// The widget in the leading slot of the alert. - final Widget? leading; - - /// The widget in the title slot of the alert. - final Widget title; - - /// The widget in the body slot of the alert. - final Widget? body; - - /// MDS filled alert variant. - /// - /// See also: - /// - /// * [MoonOutlinedAlert], MDS outlined button. - const MoonFilledAlert({ - super.key, - this.show = false, - this.borderRadius, - required this.color, - this.semanticLabel, - this.onTrailingTap, - this.leading, - required this.title, - this.body, - }); - - @override - Widget build(BuildContext context) { - final resolvedBackgroundColor = color.withOpacity(0.1); - - final effectiveTrailing = MoonButton.icon( - onTap: onTrailingTap, - semanticLabel: semanticLabel, - buttonSize: MoonButtonSize.xs, - borderRadius: borderRadius, - disabledOpacityValue: 1, - icon: Icon( - MoonIcons.controls_close_small_24_light, - color: color, - size: 24, - ), - gap: 0, - ); - - return MoonAlert( - show: show, - borderRadius: borderRadius, - semanticLabel: semanticLabel, - leading: leading, - title: title, - trailing: effectiveTrailing, - body: body, - backgroundColor: resolvedBackgroundColor, - color: color, - ); - } -} diff --git a/lib/src/widgets/alert/outlined_alert.dart b/lib/src/widgets/alert/outlined_alert.dart deleted file mode 100644 index 53c0310b..00000000 --- a/lib/src/widgets/alert/outlined_alert.dart +++ /dev/null @@ -1,84 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/widgets/alert/alert.dart'; -import 'package:moon_design/src/widgets/buttons/button.dart'; -import 'package:moon_icons/moon_icons.dart'; - -class MoonOutlinedAlert extends StatelessWidget { - /// Controls whether the alert is shown. - final bool show; - - /// The border radius of the alert. - final BorderRadiusGeometry? borderRadius; - - /// The color of the alert. - final Color color; - - /// The border width of the alert. - final double? borderWidth; - - /// The semantic label for the alert. - final String? semanticLabel; - - /// The callback that is called when the trailing slot widget is tapped. - final VoidCallback? onTrailingTap; - - /// The widget in the leading slot of the alert. - final Widget? leading; - - /// The widget in the title slot of the alert. - final Widget title; - - /// The widget in the body slot of the alert. - final Widget? body; - - /// MDS outlined alert variant. - /// - /// See also: - /// - /// * [MoonFilledAlert], MDS filled button. - const MoonOutlinedAlert({ - super.key, - this.show = false, - this.borderRadius, - required this.color, - this.borderWidth, - this.semanticLabel, - this.onTrailingTap, - this.leading, - required this.title, - this.body, - }); - - @override - Widget build(BuildContext context) { - final effectiveTrailing = MoonButton.icon( - onTap: onTrailingTap, - semanticLabel: semanticLabel, - buttonSize: MoonButtonSize.xs, - borderRadius: borderRadius, - disabledOpacityValue: 1, - icon: Icon( - MoonIcons.controls_close_small_24_light, - color: color, - size: 24, - ), - gap: 0, - ); - - return MoonAlert( - show: show, - showBorder: true, - borderRadius: borderRadius, - borderWidth: borderWidth, - semanticLabel: semanticLabel, - leading: leading, - title: title, - trailing: effectiveTrailing, - body: body, - backgroundColor: Colors.transparent, - borderColor: color, - color: color, - ); - } -}