From a87dadcd780ffb609c9e81086b58f17aa75aef4e Mon Sep 17 00:00:00 2001 From: Harry Sild <46851868+Kypsis@users.noreply.github.com> Date: Thu, 23 Mar 2023 16:44:47 +0200 Subject: [PATCH] fix: [MDS-451] Button types should be separated via intrinsic properties (#91) --- .../lib/src/storybook/stories/accordion.dart | 6 +- example/lib/src/storybook/stories/button.dart | 24 ++-- example/lib/src/storybook/stories/modal.dart | 4 +- .../lib/src/storybook/stories/popover.dart | 2 +- .../lib/src/storybook/stories/tooltip.dart | 4 +- lib/moon_design.dart | 7 +- lib/src/theme/button/button_colors.dart | 82 ++++++------ lib/src/theme/colors.dart | 4 +- lib/src/widgets/accordion/accordion_item.dart | 101 ++++++++------- lib/src/widgets/buttons/button.dart | 7 +- ...primary_button.dart => filled_button.dart} | 22 ++-- ...ndary_button.dart => outlined_button.dart} | 11 +- lib/src/widgets/buttons/tertiary_button.dart | 118 ------------------ .../{ghost_button.dart => text_button.dart} | 18 +-- 14 files changed, 142 insertions(+), 268 deletions(-) rename lib/src/widgets/buttons/{primary_button.dart => filled_button.dart} (85%) rename lib/src/widgets/buttons/{secondary_button.dart => outlined_button.dart} (91%) delete mode 100644 lib/src/widgets/buttons/tertiary_button.dart rename lib/src/widgets/buttons/{ghost_button.dart => text_button.dart} (87%) diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart index 36dbc713..6d2ad4b1 100644 --- a/example/lib/src/storybook/stories/accordion.dart +++ b/example/lib/src/storybook/stories/accordion.dart @@ -74,7 +74,7 @@ class AccordionStory extends Story { children: [ const SizedBox(height: 64), const TextDivider(text: "Grouped accordion"), - const SizedBox(height: 24), + const SizedBox(height: 32), MoonAccordionItem( identityValue: AccordionItems.first, groupIdentityValue: currentlyOpenAccordionItem, @@ -86,6 +86,7 @@ class AccordionStory extends Story { shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.all(12), onExpansionChanged: (value) => setState(() => currentlyOpenAccordionItem = value), + leading: const Icon(MoonIconsOther.frame24), title: const Text("Grouped accordion item #1"), children: const [ Text( @@ -106,6 +107,7 @@ class AccordionStory extends Story { shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.all(12), onExpansionChanged: (value) => setState(() => currentlyOpenAccordionItem = value), + leading: const Icon(MoonIconsOther.frame24), title: const Text("Grouped accordion item #2"), children: const [ Text( @@ -115,7 +117,7 @@ class AccordionStory extends Story { ), const SizedBox(height: 40), const TextDivider(text: "Ungrouped accordion with content outside"), - const SizedBox(height: 24), + const SizedBox(height: 32), MoonAccordionItem( accordionSize: accordionSizesKnob, backgroundColor: backgroundColor, diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart index 20440a32..6a7fa7a7 100644 --- a/example/lib/src/storybook/stories/button.dart +++ b/example/lib/src/storybook/stories/button.dart @@ -145,45 +145,35 @@ class ButtonStory extends Story { icon: showLeftIconKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 40), - const TextDivider(text: "Main buttons"), + const TextDivider(text: "Button variants"), const SizedBox(height: 32), - MoonPrimaryButton( + MoonFilledButton( onTap: showDisabledKnob ? null : () {}, buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, showPulseEffect: showPulseEffectKnob, leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null, - label: showLabelKnob ? const Text("MoonPrimaryButton") : null, + label: showLabelKnob ? const Text("MoonFilledButton") : null, rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 32), - MoonSecondaryButton( + MoonOutlinedButton( onTap: showDisabledKnob ? null : () {}, buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, showPulseEffect: showPulseEffectKnob, leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null, - label: showLabelKnob ? const Text("MoonSecondaryButton") : null, + label: showLabelKnob ? const Text("MoonOutlinedButton") : null, rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 32), - MoonTertiaryButton( + MoonTextButton( onTap: showDisabledKnob ? null : () {}, buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, showPulseEffect: showPulseEffectKnob, leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null, - label: showLabelKnob ? const Text("MoonTertiaryButton") : null, - rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null, - ), - const SizedBox(height: 32), - MoonGhostButton( - onTap: showDisabledKnob ? null : () {}, - buttonSize: buttonSizesKnob, - isFullWidth: setFullWidthKnob, - showPulseEffect: showPulseEffectKnob, - leftIcon: showLeftIconKnob ? Icon(resolvedIconVariant) : null, - label: showLabelKnob ? const Text("MoonGhostButton") : null, + label: showLabelKnob ? const Text("MoonTextButton") : null, rightIcon: showRightIconKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 40), diff --git a/example/lib/src/storybook/stories/modal.dart b/example/lib/src/storybook/stories/modal.dart index 00705bcc..7b9f219f 100644 --- a/example/lib/src/storybook/stories/modal.dart +++ b/example/lib/src/storybook/stories/modal.dart @@ -75,7 +75,7 @@ class ModalStory extends Story { ), Padding( padding: const EdgeInsets.fromLTRB(24, 16, 24, 24), - child: MoonPrimaryButton( + child: MoonFilledButton( label: const Text("Okay"), isFullWidth: true, onTap: () => Navigator.of(context).pop(), @@ -99,7 +99,7 @@ class ModalStory extends Story { const SizedBox(height: 64), Builder( builder: (context) { - return MoonPrimaryButton( + return MoonFilledButton( label: const Text("Open Modal"), onTap: () => modalBuilder(context), ); diff --git a/example/lib/src/storybook/stories/popover.dart b/example/lib/src/storybook/stories/popover.dart index 9a736459..d10242a1 100644 --- a/example/lib/src/storybook/stories/popover.dart +++ b/example/lib/src/storybook/stories/popover.dart @@ -101,7 +101,7 @@ class PopoverStory extends Story { ], ), const SizedBox(height: 16), - MoonPrimaryButton( + MoonFilledButton( buttonSize: MoonButtonSize.sm, isFullWidth: true, onTap: () { diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart index a26b210d..15707022 100644 --- a/example/lib/src/storybook/stories/tooltip.dart +++ b/example/lib/src/storybook/stories/tooltip.dart @@ -132,11 +132,11 @@ class TooltipStory extends Story { const SizedBox(height: 40), const TextDivider(text: "Default tooltip"), const SizedBox(height: 32), - MoonPrimaryButton( + MoonFilledButton( showTooltip: true, tooltipMessage: customLabelTextKnob, onTap: () {}, - label: const Text("MoonPrimaryButton"), + label: const Text("MoonFilledButton"), ), const SizedBox(height: 32), MoonChip( diff --git a/lib/moon_design.dart b/lib/moon_design.dart index e4535d40..b2e22f72 100644 --- a/lib/moon_design.dart +++ b/lib/moon_design.dart @@ -32,10 +32,9 @@ export 'package:moon_design/src/utils/widget_surveyor.dart'; export 'package:moon_design/src/widgets/accordion/accordion_item.dart'; export 'package:moon_design/src/widgets/avatar/avatar.dart'; export 'package:moon_design/src/widgets/buttons/button.dart'; -export 'package:moon_design/src/widgets/buttons/ghost_button.dart'; -export 'package:moon_design/src/widgets/buttons/primary_button.dart'; -export 'package:moon_design/src/widgets/buttons/secondary_button.dart'; -export 'package:moon_design/src/widgets/buttons/tertiary_button.dart'; +export 'package:moon_design/src/widgets/buttons/filled_button.dart'; +export 'package:moon_design/src/widgets/buttons/outlined_button.dart'; +export 'package:moon_design/src/widgets/buttons/text_button.dart'; export 'package:moon_design/src/widgets/checkbox/checkbox.dart'; export 'package:moon_design/src/widgets/chips/chip.dart'; export 'package:moon_design/src/widgets/chips/ghost_chip.dart'; diff --git a/lib/src/theme/button/button_colors.dart b/lib/src/theme/button/button_colors.dart index 5a37ac50..62432941 100644 --- a/lib/src/theme/button/button_colors.dart +++ b/lib/src/theme/button/button_colors.dart @@ -6,65 +6,57 @@ import 'package:moon_design/src/theme/colors.dart'; class MoonButtonColors extends ThemeExtension with DiagnosticableTreeMixin { static final light = MoonButtonColors( borderColor: MoonColors.light.trunks, - primaryBackgroundColor: MoonColors.light.piccolo, - tertiaryBackgroundColor: MoonColors.light.hit, - ghostTextColor: MoonColors.light.trunks, - ghostFocusColor: MoonColors.light.piccolo, - ghostHoverColor: MoonColors.light.jiren, + filledVariantBackgroundColor: MoonColors.light.piccolo, + textVariantTextColor: MoonColors.light.trunks, + textVariantFocusColor: MoonColors.light.piccolo, + textVariantHoverColor: MoonColors.light.jiren, ); static final dark = MoonButtonColors( borderColor: MoonColors.dark.trunks, - primaryBackgroundColor: MoonColors.dark.piccolo, - tertiaryBackgroundColor: MoonColors.dark.hit, - ghostTextColor: MoonColors.dark.trunks, - ghostFocusColor: MoonColors.dark.piccolo, - ghostHoverColor: MoonColors.dark.jiren, + filledVariantBackgroundColor: MoonColors.dark.piccolo, + textVariantTextColor: MoonColors.dark.trunks, + textVariantFocusColor: MoonColors.dark.piccolo, + textVariantHoverColor: MoonColors.dark.jiren, ); /// Button border color. final Color borderColor; - /// Primary button background color. - final Color primaryBackgroundColor; + /// Filled button background color. + final Color filledVariantBackgroundColor; - /// Tertiary button background color. - final Color tertiaryBackgroundColor; + /// Text button text color. + final Color textVariantTextColor; - /// Ghost button text color. - final Color ghostTextColor; + /// Text button focus effect color. + final Color textVariantFocusColor; - /// Ghost button focus effect color. - final Color ghostFocusColor; - - /// Ghost button hover effect color. - final Color ghostHoverColor; + /// Text button hover effect color. + final Color textVariantHoverColor; const MoonButtonColors({ required this.borderColor, - required this.primaryBackgroundColor, - required this.tertiaryBackgroundColor, - required this.ghostTextColor, - required this.ghostFocusColor, - required this.ghostHoverColor, + required this.filledVariantBackgroundColor, + required this.textVariantTextColor, + required this.textVariantFocusColor, + required this.textVariantHoverColor, }); @override MoonButtonColors copyWith({ Color? borderColor, - Color? primaryBackgroundColor, - Color? tertiaryBackgroundColor, - Color? ghostTextColor, - Color? ghostFocusColor, - Color? ghostHoverColor, + Color? filledVariantBackgroundColor, + Color? textVariantTextColor, + Color? textVariantFocusColor, + Color? textVariantHoverColor, }) { return MoonButtonColors( borderColor: borderColor ?? this.borderColor, - primaryBackgroundColor: primaryBackgroundColor ?? this.primaryBackgroundColor, - tertiaryBackgroundColor: tertiaryBackgroundColor ?? this.tertiaryBackgroundColor, - ghostTextColor: ghostTextColor ?? this.ghostTextColor, - ghostFocusColor: ghostFocusColor ?? this.ghostFocusColor, - ghostHoverColor: ghostHoverColor ?? this.ghostHoverColor, + filledVariantBackgroundColor: filledVariantBackgroundColor ?? this.filledVariantBackgroundColor, + textVariantTextColor: textVariantTextColor ?? this.textVariantTextColor, + textVariantFocusColor: textVariantFocusColor ?? this.textVariantFocusColor, + textVariantHoverColor: textVariantHoverColor ?? this.textVariantHoverColor, ); } @@ -74,11 +66,10 @@ class MoonButtonColors extends ThemeExtension with Diagnostica return MoonButtonColors( borderColor: Color.lerp(borderColor, other.borderColor, t)!, - primaryBackgroundColor: Color.lerp(primaryBackgroundColor, other.primaryBackgroundColor, t)!, - tertiaryBackgroundColor: Color.lerp(tertiaryBackgroundColor, other.tertiaryBackgroundColor, t)!, - ghostTextColor: Color.lerp(ghostTextColor, other.ghostTextColor, t)!, - ghostFocusColor: Color.lerp(ghostFocusColor, other.ghostFocusColor, t)!, - ghostHoverColor: Color.lerp(ghostHoverColor, other.ghostHoverColor, t)!, + filledVariantBackgroundColor: Color.lerp(filledVariantBackgroundColor, other.filledVariantBackgroundColor, t)!, + textVariantTextColor: Color.lerp(textVariantTextColor, other.textVariantTextColor, t)!, + textVariantFocusColor: Color.lerp(textVariantFocusColor, other.textVariantFocusColor, t)!, + textVariantHoverColor: Color.lerp(textVariantHoverColor, other.textVariantHoverColor, t)!, ); } @@ -88,10 +79,9 @@ class MoonButtonColors extends ThemeExtension with Diagnostica properties ..add(DiagnosticsProperty("type", "MoonButtonColors")) ..add(ColorProperty("borderColor", borderColor)) - ..add(ColorProperty("primaryBackgroundColor", primaryBackgroundColor)) - ..add(ColorProperty("tertiaryBackgroundColor", tertiaryBackgroundColor)) - ..add(ColorProperty("ghostTextColor", ghostTextColor)) - ..add(ColorProperty("ghostFocusColor", ghostFocusColor)) - ..add(ColorProperty("ghostHoverColor", ghostHoverColor)); + ..add(ColorProperty("filledVariantBackgroundColor", filledVariantBackgroundColor)) + ..add(ColorProperty("textVariantTextColor", textVariantTextColor)) + ..add(ColorProperty("textVariantFocusColor", textVariantFocusColor)) + ..add(ColorProperty("textVariantHoverColor", textVariantHoverColor)); } } diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart index 07b3b288..f5f6030e 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/colors.dart @@ -110,10 +110,10 @@ class MoonColors extends ThemeExtension with DiagnosticableTreeMixin /// Secondary body text and icon color. final Color trunks; - /// Primary button text and icon color. + /// filled button text and icon color. final Color goten; - /// Secondary button text and icon color. + /// outlined button text and icon color. final Color popo; /// Secondary hover effect color. diff --git a/lib/src/widgets/accordion/accordion_item.dart b/lib/src/widgets/accordion/accordion_item.dart index df1cf99d..afb34ddd 100644 --- a/lib/src/widgets/accordion/accordion_item.dart +++ b/lib/src/widgets/accordion/accordion_item.dart @@ -445,16 +445,16 @@ class _MoonAccordionItemState extends State> with Single ? Color.alphaBlend(effectiveHoverEffectColor, _backgroundColorAnimation!.value!) : _backgroundColorAnimation!.value; - return FocusableActionDetector( - actions: _actions, - focusNode: _effectiveFocusNode, - autofocus: widget.autofocus, - onFocusChange: _handleFocusChange, - onShowFocusHighlight: _handleFocus, - onShowHoverHighlight: _handleHover, - child: Semantics( - enabled: _isExpanded, - focused: _isFocused, + return Semantics( + enabled: _isExpanded, + focused: _isFocused, + child: FocusableActionDetector( + actions: _actions, + focusNode: _effectiveFocusNode, + autofocus: widget.autofocus, + onFocusChange: _handleFocusChange, + onShowFocusHighlight: _handleFocus, + onShowHoverHighlight: _handleHover, child: RepaintBoundary( child: MoonFocusEffect( show: _isFocused, @@ -463,29 +463,29 @@ class _MoonAccordionItemState extends State> with Single effectDuration: effectiveFocusEffectDuration, effectCurve: effectiveFocusEffectCurve, childBorderRadius: effectiveBorderRadius, - child: AnimatedContainer( - duration: effectiveHoverEffectDuration, - curve: effectiveHoverEffectCurve, - clipBehavior: widget.clipBehavior ?? Clip.none, - decoration: !widget.hasContentOutside - ? ShapeDecoration( - color: resolvedBackgroundColor, - shadows: effectiveShadows, - shape: SmoothRectangleBorder( - side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none, - borderRadius: effectiveBorderRadius, - ), - ) - : null, - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: _handleTap, - child: AnimatedContainer( + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: _handleTap, + child: AnimatedContainer( + duration: effectiveHoverEffectDuration, + curve: effectiveHoverEffectCurve, + clipBehavior: widget.clipBehavior ?? Clip.none, + decoration: !widget.hasContentOutside + ? ShapeDecoration( + color: resolvedBackgroundColor, + shadows: effectiveShadows, + shape: SmoothRectangleBorder( + side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none, + borderRadius: effectiveBorderRadius, + ), + ) + : null, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + AnimatedContainer( height: effectiveHeaderHeight, padding: effectiveHeaderPadding, duration: effectiveHoverEffectDuration, @@ -502,7 +502,16 @@ class _MoonAccordionItemState extends State> with Single : null, child: Row( children: [ - if (widget.leading != null) widget.leading!, + if (widget.leading != null) + Padding( + padding: EdgeInsets.only( + right: + Directionality.of(context) == TextDirection.ltr ? effectiveHeaderPadding.left : 0, + left: + Directionality.of(context) == TextDirection.rtl ? effectiveHeaderPadding.left : 0, + ), + child: widget.leading, + ), AnimatedDefaultTextStyle( style: effectiveMoonAccordionSize.textStyle.copyWith(color: effectiveTextColor), duration: effectiveTransitionDuration, @@ -513,20 +522,20 @@ class _MoonAccordionItemState extends State> with Single ], ), ), - ), - ), - ClipRect( - child: Column( - children: [ - Align( - alignment: widget.expandedAlignment ?? Alignment.topCenter, - heightFactor: _curvedAnimation!.value, - child: child, + ClipRect( + child: Column( + children: [ + Align( + alignment: widget.expandedAlignment ?? Alignment.topCenter, + heightFactor: _curvedAnimation!.value, + child: child, + ), + ], ), - ], - ), + ), + ], ), - ], + ), ), ), ), diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart index 88de353b..ae3e0f21 100644 --- a/lib/src/widgets/buttons/button.dart +++ b/lib/src/widgets/buttons/button.dart @@ -155,10 +155,9 @@ class MoonButton extends StatelessWidget { /// /// See also: /// - /// * [MoonPrimaryButton], MDS primary button. - /// * [MoonSecondaryButton], MDS secondary button. - /// * [MoonTertiaryButton], MDS tertiary button. - /// * [MoonGhostButton], MDS ghost button. + /// * [MoonFilledButton], MDS filled button. + /// * [MoonOutlinedButton], MDS outlined button. + /// * [MoonTextButton], MDS text button. const MoonButton({ super.key, this.onTap, diff --git a/lib/src/widgets/buttons/primary_button.dart b/lib/src/widgets/buttons/filled_button.dart similarity index 85% rename from lib/src/widgets/buttons/primary_button.dart rename to lib/src/widgets/buttons/filled_button.dart index 4e453c18..a69526ad 100644 --- a/lib/src/widgets/buttons/primary_button.dart +++ b/lib/src/widgets/buttons/filled_button.dart @@ -4,7 +4,7 @@ import 'package:moon_design/src/theme/colors.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; -class MoonPrimaryButton extends StatelessWidget { +class MoonFilledButton extends StatelessWidget { /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -50,6 +50,9 @@ class MoonPrimaryButton extends StatelessWidget { /// Whether this button should show a pulse effect. final bool showPulseEffect; + /// The background color of the button. + final Color? backgroundColor; + /// The widget in the left icon slot of the button. final Widget? leftIcon; @@ -59,14 +62,13 @@ class MoonPrimaryButton extends StatelessWidget { /// The widget in the right icon slot of the button. final Widget? rightIcon; - /// MDS primary button variant. + /// MDS filled button variant. /// /// See also: /// - /// * [MoonSecondaryButton], MDS secondary button. - /// * [MoonTertiaryButton], MDS tertiary button. - /// * [MoonGhostButton], MDS ghost button. - const MoonPrimaryButton({ + /// * [MoonOutlinedButton], MDS outlined button. + /// * [MoonTextButton], MDS text button. + const MoonFilledButton({ super.key, this.onTap, this.onLongPress, @@ -83,15 +85,17 @@ class MoonPrimaryButton extends StatelessWidget { this.isFullWidth = false, this.showTooltip = false, this.showPulseEffect = false, - this.label, + this.backgroundColor, this.leftIcon, + this.label, this.rightIcon, }); @override Widget build(BuildContext context) { - final effectiveBackgroundColor = - context.moonTheme?.buttonTheme.colors.primaryBackgroundColor ?? MoonColors.light.piccolo; + final effectiveBackgroundColor = backgroundColor ?? + context.moonTheme?.buttonTheme.colors.filledVariantBackgroundColor ?? + MoonColors.light.piccolo; return MoonButton( onTap: onTap, diff --git a/lib/src/widgets/buttons/secondary_button.dart b/lib/src/widgets/buttons/outlined_button.dart similarity index 91% rename from lib/src/widgets/buttons/secondary_button.dart rename to lib/src/widgets/buttons/outlined_button.dart index 19b4ff1a..7680d9b6 100644 --- a/lib/src/widgets/buttons/secondary_button.dart +++ b/lib/src/widgets/buttons/outlined_button.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; -class MoonSecondaryButton extends StatelessWidget { +class MoonOutlinedButton extends StatelessWidget { /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -57,14 +57,13 @@ class MoonSecondaryButton extends StatelessWidget { /// The widget in the right icon slot of the button. final Widget? rightIcon; - /// MDS secondary button variant. + /// MDS outlined button variant. /// /// See also: /// - /// * [MoonPrimaryButton], MDS primary button. - /// * [MoonTertiaryButton], MDS tertiary button. - /// * [MoonGhostButton], MDS ghost button. - const MoonSecondaryButton({ + /// * [MoonFilledButton], MDS filled button. + /// * [MoonTextButton], MDS text button. + const MoonOutlinedButton({ super.key, this.onTap, this.onLongPress, diff --git a/lib/src/widgets/buttons/tertiary_button.dart b/lib/src/widgets/buttons/tertiary_button.dart deleted file mode 100644 index 3d16313a..00000000 --- a/lib/src/widgets/buttons/tertiary_button.dart +++ /dev/null @@ -1,118 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'package:moon_design/src/theme/colors.dart'; -import 'package:moon_design/src/theme/theme.dart'; -import 'package:moon_design/src/widgets/buttons/button.dart'; - -class MoonTertiaryButton extends StatelessWidget { - /// The callback that is called when the button is tapped or pressed. - final VoidCallback? onTap; - - /// The callback that is called when the button is long-pressed. - final VoidCallback? onLongPress; - - /// The size of the button. - final MoonButtonSize? buttonSize; - - /// {@macro flutter.widgets.Focus.focusNode}. - final FocusNode? focusNode; - - /// The semantic label for the button. - final String? semanticLabel; - - /// The tooltip message for the button. - final String tooltipMessage; - - /// The width of the button. - final double? width; - - /// The height of the button. - final double? height; - - /// The minimum size of the touch target. - final double minTouchTargetSize; - - /// Whether this button should ensure that it has a minimal touch target size. - final bool ensureMinimalTouchTargetSize; - - /// {@macro flutter.widgets.Focus.autofocus} - final bool autofocus; - - /// Whether this button should be focusable. - final bool isFocusable; - - /// Whether this button should be full width. - final bool isFullWidth; - - /// Whether the button should show a tooltip. - final bool showTooltip; - - /// Whether this button should show a pulse effect. - final bool showPulseEffect; - - /// The widget in the left icon slot of the button. - final Widget? leftIcon; - - /// The widget in the label slot of the button. - final Widget? label; - - /// The widget in the right icon slot of the button. - final Widget? rightIcon; - - /// MDS tertiary button variant. - /// - /// See also: - /// - /// * [MoonPrimaryButton], MDS primary button. - /// * [MoonSecondaryButton], MDS secondary button. - /// * [MoonGhostButton], MDS ghost button. - const MoonTertiaryButton({ - super.key, - this.onTap, - this.onLongPress, - this.buttonSize, - this.focusNode, - this.semanticLabel, - this.tooltipMessage = "", - this.width, - this.height, - this.minTouchTargetSize = 40, - this.ensureMinimalTouchTargetSize = false, - this.autofocus = false, - this.isFocusable = true, - this.isFullWidth = false, - this.showTooltip = false, - this.showPulseEffect = false, - this.label, - this.leftIcon, - this.rightIcon, - }); - - @override - Widget build(BuildContext context) { - final effectiveBackgroundColor = - context.moonTheme?.buttonTheme.colors.tertiaryBackgroundColor ?? MoonColors.light.hit; - - return MoonButton( - onTap: onTap, - onLongPress: onLongPress, - buttonSize: buttonSize, - backgroundColor: effectiveBackgroundColor, - focusNode: focusNode, - semanticLabel: semanticLabel, - tooltipMessage: tooltipMessage, - width: width, - height: height, - minTouchTargetSize: minTouchTargetSize, - ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, - autofocus: autofocus, - isFocusable: isFocusable, - isFullWidth: isFullWidth, - showTooltip: showTooltip, - showPulseEffect: showPulseEffect, - label: label, - leftIcon: leftIcon, - rightIcon: rightIcon, - ); - } -} diff --git a/lib/src/widgets/buttons/ghost_button.dart b/lib/src/widgets/buttons/text_button.dart similarity index 87% rename from lib/src/widgets/buttons/ghost_button.dart rename to lib/src/widgets/buttons/text_button.dart index abf75f74..33281d87 100644 --- a/lib/src/widgets/buttons/ghost_button.dart +++ b/lib/src/widgets/buttons/text_button.dart @@ -5,7 +5,7 @@ import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; -class MoonGhostButton extends StatelessWidget { +class MoonTextButton extends StatelessWidget { /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; @@ -60,14 +60,14 @@ class MoonGhostButton extends StatelessWidget { /// The widget in the right icon slot of the button. final Widget? rightIcon; - /// MDS ghost button variant. + /// MDS text button variant. /// /// See also: /// - /// * [MoonPrimaryButton], MDS primary button. - /// * [MoonSecondaryButton], MDS secondary button. - /// * [MoonTertiaryButton], MDS tertiary button. - const MoonGhostButton({ + /// * [MoonFilledButton], MDS filled button. + /// * [MoonOutlinedButton], MDS outlined button. + + const MoonTextButton({ super.key, this.onTap, this.onLongPress, @@ -91,10 +91,10 @@ class MoonGhostButton extends StatelessWidget { @override Widget build(BuildContext context) { - final effectiveTextColor = context.moonTheme?.buttonTheme.colors.ghostTextColor ?? MoonColors.light.trunks; - final effectiveHoverColor = context.moonTheme?.buttonTheme.colors.ghostHoverColor ?? MoonColors.light.jiren; + final effectiveTextColor = context.moonTheme?.buttonTheme.colors.textVariantTextColor ?? MoonColors.light.trunks; + final effectiveHoverColor = context.moonTheme?.buttonTheme.colors.textVariantHoverColor ?? MoonColors.light.jiren; final effectiveFocusColor = - context.moonTheme?.buttonTheme.colors.ghostFocusColor.withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? + context.moonTheme?.buttonTheme.colors.textVariantFocusColor.withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? MoonColors.light.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2); return MoonButton(