Skip to content

Commit

Permalink
fix: [MDS-451] Button types should be separated via intrinsic propert…
Browse files Browse the repository at this point in the history 
…ies (#91)
  • Loading branch information
@Kypsis
Kypsis authored Mar 23, 2023
1 parent b006b81 commit a87dadc
Show file tree
Hide file tree
Showing 14 changed files with 142 additions and 268 deletions.
6 changes: 4 additions & 2 deletions example/lib/src/storybook/stories/accordion.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<AccordionItems>(
identityValue: AccordionItems.first,
groupIdentityValue: currentlyOpenAccordionItem,
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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<AccordionItems>(
accordionSize: accordionSizesKnob,
backgroundColor: backgroundColor,
Expand Down
24 changes: 7 additions & 17 deletions example/lib/src/storybook/stories/button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
4 changes: 2 additions & 2 deletions example/lib/src/storybook/stories/modal.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -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),
);
Expand Down
2 changes: 1 addition & 1 deletion example/lib/src/storybook/stories/popover.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ class PopoverStory extends Story {
],
),
const SizedBox(height: 16),
MoonPrimaryButton(
MoonFilledButton(
buttonSize: MoonButtonSize.sm,
isFullWidth: true,
onTap: () {
Expand Down
4 changes: 2 additions & 2 deletions example/lib/src/storybook/stories/tooltip.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
7 changes: 3 additions & 4 deletions lib/moon_design.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
82 changes: 36 additions & 46 deletions lib/src/theme/button/button_colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,65 +6,57 @@ import 'package:moon_design/src/theme/colors.dart';
class MoonButtonColors extends ThemeExtension<MoonButtonColors> 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,
);
}

Expand All @@ -74,11 +66,10 @@ class MoonButtonColors extends ThemeExtension<MoonButtonColors> 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)!,
);
}

Expand All @@ -88,10 +79,9 @@ class MoonButtonColors extends ThemeExtension<MoonButtonColors> 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));
}
}
4 changes: 2 additions & 2 deletions lib/src/theme/colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,10 @@ class MoonColors extends ThemeExtension<MoonColors> 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.
Expand Down
Loading

0 comments on commit a87dadc

Please sign in to comment.