From 53523fe82353a812b731ec83b40dd98a61910293 Mon Sep 17 00:00:00 2001 From: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com> Date: Wed, 19 Apr 2023 18:58:52 +0300 Subject: [PATCH] fix: [MDS-502] Add additional storybook knobs to components (#145) --- .../lib/src/storybook/stories/accordion.dart | 94 +++++++++++++++++-- example/lib/src/storybook/stories/alert.dart | 10 +- .../lib/src/storybook/stories/authcode.dart | 12 +-- example/lib/src/storybook/stories/avatar.dart | 37 +++++++- example/lib/src/storybook/stories/button.dart | 69 ++++++++++---- .../lib/src/storybook/stories/checkbox.dart | 30 +++--- example/lib/src/storybook/stories/chip.dart | 62 ++++++++---- .../storybook/stories/circular_loader.dart | 8 +- .../storybook/stories/circular_progress.dart | 6 +- .../src/storybook/stories/linear_loader.dart | 12 +-- .../storybook/stories/linear_progress.dart | 12 +-- .../lib/src/storybook/stories/popover.dart | 22 +++-- example/lib/src/storybook/stories/radio.dart | 10 +- example/lib/src/storybook/stories/switch.dart | 10 +- example/lib/src/storybook/stories/tag.dart | 38 +++++--- example/lib/src/storybook/stories/toast.dart | 20 ++-- .../lib/src/storybook/stories/tooltip.dart | 41 +++++--- lib/src/widgets/avatar/avatar.dart | 8 +- lib/src/widgets/buttons/button.dart | 3 +- lib/src/widgets/buttons/outlined_button.dart | 5 + lib/src/widgets/loaders/circular_loader.dart | 6 +- lib/src/widgets/loaders/linear_loader.dart | 6 +- lib/src/widgets/popover/popover.dart | 1 + lib/src/widgets/progress/linear_progress.dart | 6 +- lib/src/widgets/tooltip/tooltip.dart | 2 +- 25 files changed, 365 insertions(+), 165 deletions(-) diff --git a/example/lib/src/storybook/stories/accordion.dart b/example/lib/src/storybook/stories/accordion.dart index ac802943..8bfb507e 100644 --- a/example/lib/src/storybook/stories/accordion.dart +++ b/example/lib/src/storybook/stories/accordion.dart @@ -14,7 +14,7 @@ class AccordionStory extends Story { name: "Accordion", builder: (context) { final accordionSizesKnob = context.knobs.options( - label: "MoonAccordionItemSize", + label: "accordionSize", description: "Accordion size variants.", initial: MoonAccordionItemSize.md, options: const [ @@ -25,10 +25,37 @@ class AccordionStory extends Story { ], ); + final textColorsKnob = context.knobs.options( + label: "textColor", + description: "MoonColors variants for Accordion text.", + initial: 40, // null + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob]; + + final iconColorsKnob = context.knobs.options( + label: "iconColor", + description: "MoonColors variants for Accordion trailing icon.", + initial: 40, // null + options: colorOptions, + ); + + final iconColor = colorTable(context)[iconColorsKnob]; + + final expandedIconColorsKnob = context.knobs.options( + label: "expandedIconColor", + description: "MoonColors variants for expanded Accordion trailing icon.", + initial: 40, // null + options: colorOptions, + ); + + final expandedIconColor = colorTable(context)[expandedIconColorsKnob]; + final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for Accordion background.", - initial: 4, // gohan + initial: 40, // null options: colorOptions, ); @@ -37,16 +64,35 @@ class AccordionStory extends Story { final expandedBackgroundColorsKnob = context.knobs.options( label: "expandedBackgroundColor", description: "MoonColors variants for expanded Accordion background.", - initial: 4, // gohan + initial: 40, // null options: colorOptions, ); final expandedBackgroundColor = colorTable(context)[expandedBackgroundColorsKnob]; - final showDividerKnob = context.knobs.boolean( - label: "showDivider", - description: "Show divider in the Accordion.", - initial: true, + final borderColorsKnob = context.knobs.options( + label: "borderColor", + description: "MoonColors variants for Accordion border.", + initial: 40, // null + options: colorOptions, + ); + + final borderColor = colorTable(context)[borderColorsKnob]; + + final dividerColorsKnob = context.knobs.options( + label: "dividerColor", + description: "MoonColors variants for expanded Accordion divider.", + initial: 40, // null + options: colorOptions, + ); + + final dividerColor = colorTable(context)[dividerColorsKnob]; + + final borderRadiusKnob = context.knobs.sliderInt( + max: 12, + initial: 8, + label: "borderRadius", + description: "Border radius for Accordion.", ); final showBorderKnob = context.knobs.boolean( @@ -54,6 +100,12 @@ class AccordionStory extends Story { description: "Show border around the Accordion.", ); + final showDividerKnob = context.knobs.boolean( + label: "showDivider", + description: "Show divider between Accordion header and body.", + initial: true, + ); + final showShadowKnob = context.knobs.boolean( label: "Show shadows", description: "Show shadows under the Accordion.", @@ -79,8 +131,14 @@ class AccordionStory extends Story { identityValue: AccordionItems.first, groupIdentityValue: currentlyOpenAccordionItem, accordionSize: accordionSizesKnob, + textColor: textColor, + borderColor: borderColor, + trailingIconColor: iconColor, + expandedTrailingIconColor: expandedIconColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, + dividerColor: dividerColor, + borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], @@ -100,8 +158,14 @@ class AccordionStory extends Story { groupIdentityValue: currentlyOpenAccordionItem, initiallyExpanded: true, accordionSize: accordionSizesKnob, + textColor: textColor, + borderColor: borderColor, + trailingIconColor: iconColor, + expandedTrailingIconColor: expandedIconColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, + dividerColor: dividerColor, + borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], @@ -120,10 +184,15 @@ class AccordionStory extends Story { const SizedBox(height: 32), MoonAccordionItem( accordionSize: accordionSizesKnob, - backgroundColor: backgroundColor, initiallyExpanded: true, hasContentOutside: true, + textColor: textColor, + borderColor: borderColor, + trailingIconColor: iconColor, + expandedTrailingIconColor: expandedIconColor, + backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, + borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], @@ -138,11 +207,16 @@ class AccordionStory extends Story { const SizedBox(height: 8), MoonAccordionItem( accordionSize: accordionSizesKnob, - backgroundColor: backgroundColor, hasContentOutside: true, + textColor: textColor, + borderColor: borderColor, + trailingIconColor: iconColor, + expandedTrailingIconColor: expandedIconColor, + backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, + dividerColor: dividerColor, + borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, - showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.symmetric(vertical: 12), title: const Text("Ungrouped accordion item #2"), diff --git a/example/lib/src/storybook/stories/alert.dart b/example/lib/src/storybook/stories/alert.dart index c44b77c9..d5282dcb 100644 --- a/example/lib/src/storybook/stories/alert.dart +++ b/example/lib/src/storybook/stories/alert.dart @@ -14,7 +14,7 @@ class AlertStory extends Story { final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for background.", - initial: 4, // Gohan + initial: 40, // null options: colorOptions, ); @@ -23,7 +23,7 @@ class AlertStory extends Story { final textColorsKnob = context.knobs.options( label: "textColor", description: "MoonColors variants for text.", - initial: 5, // Bulma + initial: 40, // null options: colorOptions, ); @@ -32,7 +32,7 @@ class AlertStory extends Story { final leadingColorsKnob = context.knobs.options( label: "leadingColor", description: "MoonColors variants for leading.", - initial: 5, // Bulma + initial: 40, // null options: colorOptions, ); @@ -41,7 +41,7 @@ class AlertStory extends Story { final trailingColorsKnob = context.knobs.options( label: "trailingColor", description: "MoonColors variants for trailing.", - initial: 5, // Bulma + initial: 40, // null options: colorOptions, ); @@ -50,7 +50,7 @@ class AlertStory extends Story { final borderColorsKnob = context.knobs.options( label: "borderColor", description: "MoonColors variants for border.", - initial: 5, // Bulma + initial: 40, // null options: colorOptions, ); diff --git a/example/lib/src/storybook/stories/authcode.dart b/example/lib/src/storybook/stories/authcode.dart index ba2a9f06..ff5702c6 100644 --- a/example/lib/src/storybook/stories/authcode.dart +++ b/example/lib/src/storybook/stories/authcode.dart @@ -41,7 +41,7 @@ class AuthCodeStory extends Story { final selectedFillColorsKnob = context.knobs.options( label: "selectedFillColor", - description: "MoonColors variants for MoonAuthCode.", + description: "MoonColors variants for selected auth input field.", initial: 40, // null options: colorOptions, ); @@ -50,7 +50,7 @@ class AuthCodeStory extends Story { final activeFillColorsKnob = context.knobs.options( label: "activeFillColor", - description: "MoonColors variants for MoonAuthCode.", + description: "MoonColors variants for active auth input fields.", initial: 40, // null options: colorOptions, ); @@ -59,7 +59,7 @@ class AuthCodeStory extends Story { final inactiveFillColorsKnob = context.knobs.options( label: "inactiveFillColor", - description: "MoonColors variants for MoonAuthCode.", + description: "MoonColors variants for inactive auth input fields.", initial: 40, // null options: colorOptions, ); @@ -68,7 +68,7 @@ class AuthCodeStory extends Story { final selectedBorderColorsKnob = context.knobs.options( label: "selectedBorderColor", - description: "MoonColors variants for MoonAuthCode.", + description: "MoonColors variants for selected auth input field border.", initial: 40, // null options: colorOptions, ); @@ -77,7 +77,7 @@ class AuthCodeStory extends Story { final activeBorderColorsKnob = context.knobs.options( label: "activeBorderColor", - description: "MoonColors variants for MoonAuthCode.", + description: "MoonColors variants for active auth input fields borders.", initial: 40, // null options: colorOptions, ); @@ -86,7 +86,7 @@ class AuthCodeStory extends Story { final inactiveBorderColorsKnob = context.knobs.options( label: "inactiveBorderColor", - description: "MoonColors variants for MoonAuthCode.", + description: "MoonColors variants for inactive auth input fields borders.", initial: 40, // null options: colorOptions, ); diff --git a/example/lib/src/storybook/stories/avatar.dart b/example/lib/src/storybook/stories/avatar.dart index facbc592..11e6771e 100644 --- a/example/lib/src/storybook/stories/avatar.dart +++ b/example/lib/src/storybook/stories/avatar.dart @@ -10,7 +10,7 @@ class AvatarStory extends Story { name: "Avatar", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "content", initial: "MD", ); @@ -28,10 +28,19 @@ class AvatarStory extends Story { ], ); + final avatarTextColorKnob = context.knobs.options( + label: "textColor", + description: "MoonColors variants for Avatar text.", + initial: 40, // null + options: colorOptions, + ); + + final textColor = colorTable(context)[avatarTextColorKnob]; + final avatarBackgroundColorKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for Avatar background.", - initial: 5, // bulma + initial: 40, // null options: colorOptions, ); @@ -40,7 +49,7 @@ class AvatarStory extends Story { final badgeColorKnob = context.knobs.options( label: "badgeColor", description: "MoonColors variants for the Avatar badge.", - initial: 18, // roshi100 + initial: 40, // null options: colorOptions, ); @@ -65,6 +74,20 @@ class AvatarStory extends Story { description: "Border radius for the Avatar.", ); + final badgeMarginKnob = context.knobs.sliderInt( + max: 8, + initial: 4, + label: "badgeMarginValue", + description: "Badge margin value for the Avatar.", + ); + + final badgeSizeKnob = context.knobs.sliderInt( + max: 16, + initial: 8, + label: "badgeSize", + description: "Badge Size for the Avatar.", + ); + final showBadgeKnob = context.knobs.boolean( label: "showBadge", description: "Show Avatar badge.", @@ -86,13 +109,16 @@ class AvatarStory extends Story { const TextDivider(text: "Customisable Avatar"), const SizedBox(height: 32), MoonAvatar( + textColor: textColor, avatarSize: avatarSizesKnob, + badgeSize: badgeSizeKnob.toDouble(), borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), + badgeMarginValue: badgeMarginKnob.toDouble(), backgroundColor: backgroundColor, showBadge: showBadgeKnob, badgeColor: badgeColor, badgeAlignment: avatarBadgeAlignmentKnob, - child: Padding( + content: Padding( padding: const EdgeInsets.only(top: 1.0), child: Text(customLabelTextKnob), ), @@ -102,6 +128,9 @@ class AvatarStory extends Story { const SizedBox(height: 32), MoonAvatar( avatarSize: avatarSizesKnob, + badgeSize: badgeSizeKnob.toDouble(), + borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), + badgeMarginValue: badgeMarginKnob.toDouble(), backgroundColor: backgroundColor, showBadge: showBadgeKnob, badgeColor: badgeColor, diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart index 6dc81628..6a96d5e0 100644 --- a/example/lib/src/storybook/stories/button.dart +++ b/example/lib/src/storybook/stories/button.dart @@ -10,13 +10,13 @@ class ButtonStory extends Story { name: "Button", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "label text", initial: "MoonButton", ); final buttonSizesKnob = context.knobs.options( - label: "MoonButtonSize", - description: "Button size variants.", + label: "buttonSize", + description: "MoonButton size variants.", initial: MoonButtonSize.md, options: const [ Option(label: "xs", value: MoonButtonSize.xs), @@ -27,14 +27,23 @@ class ButtonStory extends Story { ], ); - final colorsKnob = context.knobs.options( + final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", - description: "MoonColors variants for base MoonButton.", - initial: 5, // bulma + description: "MoonColors variants for base MoonButton background.", + initial: 0, // piccolo options: colorOptions, ); - final color = colorTable(context)[colorsKnob]; + final backgroundColor = colorTable(context)[backgroundColorsKnob]; + + final borderColorsKnob = context.knobs.options( + label: "borderColor", + description: "MoonColors variants for MoonButton border.", + initial: 40, // null + options: colorOptions, + ); + + final borderColor = colorTable(context)[borderColorsKnob]; final borderRadiusKnob = context.knobs.sliderInt( max: 28, @@ -49,14 +58,9 @@ class ButtonStory extends Story { initial: true, ); - final showDisabledKnob = context.knobs.boolean( - label: "Disabled", - description: "onTap() or onLongPress() is null.", - ); - - final setFullWidthKnob = context.knobs.boolean( - label: "isFullWidth", - description: "Set Button to full width.", + final showTooltipKnob = context.knobs.boolean( + label: "showTooltip", + description: "Show tooltip for MoonButton.", ); final showPulseEffectKnob = context.knobs.boolean( @@ -70,22 +74,32 @@ class ButtonStory extends Story { ); final showLeadingKnob = context.knobs.boolean( - label: "Show leading", + label: "leading", description: "Show widget in the leading slot.", initial: true, ); final showLabelKnob = context.knobs.boolean( - label: "Show label", + label: "label", description: "Show widget in the label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( - label: "Show trailing", + label: "trailing", description: "Show widget in the trailing slot.", ); + final setFullWidthKnob = context.knobs.boolean( + label: "isFullWidth", + description: "Set Button to full width.", + ); + + final showDisabledKnob = context.knobs.boolean( + label: "Disabled", + description: "onTap() or onLongPress() is null.", + ); + final setRtlModeKnob = context.knobs.boolean( label: "RTL mode", description: "Switch between LTR and RTL modes.", @@ -124,9 +138,12 @@ class ButtonStory extends Story { onTap: showDisabledKnob ? null : () {}, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, + showTooltip: showTooltipKnob, + tooltipMessage: 'This is tooltip', buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, - backgroundColor: color, + backgroundColor: backgroundColor, + borderColor: borderColor, showPulseEffect: showPulseEffectKnob, showPulseEffectJiggle: showPulseEffectJiggleKnob, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, @@ -138,8 +155,11 @@ class ButtonStory extends Story { onTap: showDisabledKnob ? null : () {}, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, + showTooltip: showTooltipKnob, + tooltipMessage: 'This is tooltip', buttonSize: buttonSizesKnob, - backgroundColor: color, + backgroundColor: backgroundColor, + borderColor: borderColor, showPulseEffect: showPulseEffectKnob, showPulseEffectJiggle: showPulseEffectJiggleKnob, icon: showLeadingKnob ? Icon(resolvedIconVariant) : null, @@ -151,6 +171,8 @@ class ButtonStory extends Story { onTap: showDisabledKnob ? null : () {}, buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, + showTooltip: showTooltipKnob, + tooltipMessage: 'This is tooltip', showPulseEffect: showPulseEffectKnob, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonFilledButton") : null, @@ -161,7 +183,10 @@ class ButtonStory extends Story { onTap: showDisabledKnob ? null : () {}, buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, + showTooltip: showTooltipKnob, + tooltipMessage: 'This is tooltip', showPulseEffect: showPulseEffectKnob, + borderColor: borderColor, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonOutlinedButton") : null, trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null, @@ -171,6 +196,8 @@ class ButtonStory extends Story { onTap: showDisabledKnob ? null : () {}, buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, + showTooltip: showTooltipKnob, + tooltipMessage: 'This is tooltip', showPulseEffect: showPulseEffectKnob, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonTextButton") : null, @@ -189,6 +216,8 @@ class ButtonStory extends Story { ), buttonSize: buttonSizesKnob, isFullWidth: setFullWidthKnob, + showTooltip: showTooltipKnob, + tooltipMessage: 'This is tooltip', backgroundColor: context.moonTheme!.colors.krillin100, showPulseEffect: showPulseEffectKnob, showPulseEffectJiggle: showPulseEffectJiggleKnob, diff --git a/example/lib/src/storybook/stories/checkbox.dart b/example/lib/src/storybook/stories/checkbox.dart index 64a353bd..b08e1e4a 100644 --- a/example/lib/src/storybook/stories/checkbox.dart +++ b/example/lib/src/storybook/stories/checkbox.dart @@ -15,7 +15,7 @@ class CheckboxStory extends Story { final checkColorsKnob = context.knobs.options( label: "checkColor", description: "MoonColors variants for the Checkbox icon.", - initial: 7, // goten + initial: 40, // null options: colorOptions, ); @@ -23,8 +23,8 @@ class CheckboxStory extends Story { final activeColorsKnob = context.knobs.options( label: "activeColor", - description: "MoonColors variants for when Checkbox is checked.", - initial: 0, // piccolo + description: "MoonColors variants for the checked Checkbox.", + initial: 40, // null options: colorOptions, ); @@ -32,8 +32,8 @@ class CheckboxStory extends Story { final inactiveColorsKnob = context.knobs.options( label: "inactiveColor", - description: "MoonColors variants for when Checkbox is unchecked.", - initial: 39, // transparent + description: "MoonColors variants for the unchecked Checkbox.", + initial: 40, // null options: colorOptions, ); @@ -42,22 +42,22 @@ class CheckboxStory extends Story { final borderColorsKnob = context.knobs.options( label: "borderColor", description: "MoonColors variants for Checkbox border.", - initial: 6, // trunks + initial: 40, // null options: colorOptions, ); final borderColor = colorTable(context)[borderColorsKnob]; - final isDisabled = context.knobs.boolean( - label: "Disabled", - description: "onChanged() is null.", - ); - final isTristate = context.knobs.boolean( label: "tristate", description: "Whether the Checkbox uses tristate.", ); + final isDisabled = context.knobs.boolean( + label: "Disabled", + description: "onChanged() is null.", + ); + final setRtlModeKnob = context.knobs.boolean( label: "RTL mode", description: "Switch between LTR and RTL modes.", @@ -76,9 +76,9 @@ class CheckboxStory extends Story { builder: (context, setState) { return MoonCheckbox( activeColor: activeColor, - borderColor: borderColor, - checkColor: checkColor, inactiveColor: inactiveColor, + checkColor: checkColor, + borderColor: borderColor, tristate: isTristate, value: value, onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), @@ -92,13 +92,13 @@ class CheckboxStory extends Story { builder: (context, setState) { return MoonCheckbox.withLabel( context, - checkColor: checkColor, + label: "With label", activeColor: activeColor, inactiveColor: inactiveColor, + checkColor: checkColor, tristate: isTristate, value: value, onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), - label: "With label", ); }, ), diff --git a/example/lib/src/storybook/stories/chip.dart b/example/lib/src/storybook/stories/chip.dart index 50a5b150..c11f508b 100644 --- a/example/lib/src/storybook/stories/chip.dart +++ b/example/lib/src/storybook/stories/chip.dart @@ -10,12 +10,12 @@ class ChipStory extends Story { name: "Chip", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "label text", initial: "MoonChip", ); final chipSizesKnob = context.knobs.options( - label: "MoonChipSize", + label: "chipSize", description: "Chip size variants.", initial: MoonChipSize.md, options: const [ @@ -24,14 +24,41 @@ class ChipStory extends Story { ], ); - final colorsKnob = context.knobs.options( + final textColorsKnob = context.knobs.options( + label: "textColor", + description: "MoonColors variants for Chip text.", + initial: 40, // null + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob]; + + final activeColorsKnob = context.knobs.options( + label: "activeColor", + description: "MoonColors variants for the active Chip.", + initial: 40, // null + options: colorOptions, + ); + + final activeColor = colorTable(context)[activeColorsKnob]; + + final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", - description: "MoonColors variants for the Chip.", - initial: 5, // bulma + description: "MoonColors variants for the Chip background.", + initial: 40, // null + options: colorOptions, + ); + + final backgroundColor = colorTable(context)[backgroundColorsKnob]; + + final borderColorsKnob = context.knobs.options( + label: "borderColor", + description: "MoonColors variants for Chip border.", + initial: 40, // null options: colorOptions, ); - final color = colorTable(context)[colorsKnob]; + final borderColor = colorTable(context)[borderColorsKnob]; final borderRadiusKnob = context.knobs.sliderInt( max: 28, @@ -40,30 +67,30 @@ class ChipStory extends Story { description: "Border radius for the Chip.", ); - final isActiveKnob = context.knobs.boolean( - label: "isActive", - description: "Whether the Chip is active/selected.", - ); - final showBorderKnob = context.knobs.boolean( label: "showBorder", description: "Show border when isActive.", ); + final isActiveKnob = context.knobs.boolean( + label: "isActive", + description: "Whether the Chip is active/selected.", + ); + final showLeadingKnob = context.knobs.boolean( - label: "Show leading", + label: "leading", description: "Show widget in the leading slot.", initial: true, ); final showLabelKnob = context.knobs.boolean( - label: "Show label", + label: "label", description: "Show widget in the label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( - label: "Show trailing", + label: "trailing", description: "Show widget in the trailing slot.", ); @@ -82,14 +109,17 @@ class ChipStory extends Story { mainAxisAlignment: MainAxisAlignment.center, children: [ const SizedBox(height: 64), - const TextDivider(text: "Regular Chip"), + const TextDivider(text: "Default Chip"), const SizedBox(height: 32), MoonChip( + activeColor: activeColor, + textColor: textColor, + borderColor: borderColor, isActive: isActiveKnob, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), showBorder: showBorderKnob, chipSize: chipSizesKnob, - backgroundColor: color, + backgroundColor: backgroundColor, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null, diff --git a/example/lib/src/storybook/stories/circular_loader.dart b/example/lib/src/storybook/stories/circular_loader.dart index 748d9dbe..0addc4b3 100644 --- a/example/lib/src/storybook/stories/circular_loader.dart +++ b/example/lib/src/storybook/stories/circular_loader.dart @@ -9,7 +9,7 @@ class CircularLoaderStory extends Story { name: "Loader/CircularLoader", builder: (context) { final loaderSizesKnob = context.knobs.options( - label: "MoonCircularLoaderSize", + label: "circularLoaderSize", description: "CircularLoader size variants.", initial: MoonCircularLoaderSize.md, options: const [ @@ -24,7 +24,7 @@ class CircularLoaderStory extends Story { final loaderColorKnob = context.knobs.options( label: "color", description: "MoonColors variants for CircularLoader color.", - initial: 1, // hit + initial: 40, // null options: colorOptions, ); @@ -33,7 +33,7 @@ class CircularLoaderStory extends Story { final loaderBackgroundColorKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for CircularLoader background.", - initial: 39, // none + initial: 40, // null options: colorOptions, ); @@ -58,7 +58,7 @@ class CircularLoaderStory extends Story { MoonCircularLoader( color: color, backgroundColor: backgroundColor, - loaderSize: loaderSizesKnob, + circularLoaderSize: loaderSizesKnob, strokeCap: loaderStrokeCapKnob, ), const SizedBox(height: 64), diff --git a/example/lib/src/storybook/stories/circular_progress.dart b/example/lib/src/storybook/stories/circular_progress.dart index ce9d76fc..d120e1b2 100644 --- a/example/lib/src/storybook/stories/circular_progress.dart +++ b/example/lib/src/storybook/stories/circular_progress.dart @@ -9,7 +9,7 @@ class CircularProgressStory extends Story { name: "Progress/CircularProgress", builder: (context) { final circularProgressSizesKnob = context.knobs.options( - label: "MoonCircularProgressSize", + label: "circularProgressSize", description: "CircularProgress size variants.", initial: MoonCircularProgressSize.md, options: const [ @@ -24,7 +24,7 @@ class CircularProgressStory extends Story { final circularProgressColorKnob = context.knobs.options( label: "color", description: "MoonColors variants for CircularProgress color.", - initial: 0, // piccolo + initial: 40, // null options: colorOptions, ); @@ -33,7 +33,7 @@ class CircularProgressStory extends Story { final circularProgressBackgroundColorKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for CircularProgress background.", - initial: 6, // trunks + initial: 40, // null options: colorOptions, ); diff --git a/example/lib/src/storybook/stories/linear_loader.dart b/example/lib/src/storybook/stories/linear_loader.dart index 31bd28bf..764925f5 100644 --- a/example/lib/src/storybook/stories/linear_loader.dart +++ b/example/lib/src/storybook/stories/linear_loader.dart @@ -9,7 +9,7 @@ class LinearLoaderStory extends Story { name: "Loader/LinearLoader", builder: (context) { final loaderSizesKnob = context.knobs.options( - label: "MoonLinearLoaderSize", + label: "linearLoaderSize", description: "LinearLoader size variants.", initial: MoonLinearLoaderSize.x4s, options: const [ @@ -24,7 +24,7 @@ class LinearLoaderStory extends Story { final loaderColorKnob = context.knobs.options( label: "color", description: "MoonColors variants for LinearLoader color.", - initial: 1, // hit + initial: 40, // null options: colorOptions, ); @@ -33,17 +33,17 @@ class LinearLoaderStory extends Story { final loaderBackgroundColorKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for LinearLoader background.", - initial: 39, // none + initial: 40, // null options: colorOptions, ); final backgroundColor = colorTable(context)[loaderBackgroundColorKnob]; final borderRadiusKnob = context.knobs.sliderInt( + max: 12, + initial: 8, label: "borderRadius", description: "LinearLoader border radius.", - initial: 8, - max: 12, ); return Center( @@ -52,7 +52,7 @@ class LinearLoaderStory extends Story { children: [ const SizedBox(height: 64), MoonLinearLoader( - loaderSize: loaderSizesKnob, + linearLoaderSize: loaderSizesKnob, color: color, backgroundColor: backgroundColor, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), diff --git a/example/lib/src/storybook/stories/linear_progress.dart b/example/lib/src/storybook/stories/linear_progress.dart index 4ed5372d..710dfb88 100644 --- a/example/lib/src/storybook/stories/linear_progress.dart +++ b/example/lib/src/storybook/stories/linear_progress.dart @@ -9,7 +9,7 @@ class LinearProgressStory extends Story { name: "Progress/LinearProgress", builder: (context) { final progressSizesKnob = context.knobs.options( - label: "MoonLinearProgressSize", + label: "linearProgressSize", description: "LinearProgress size variants.", initial: MoonLinearProgressSize.x4s, options: const [ @@ -24,7 +24,7 @@ class LinearProgressStory extends Story { final progressColorKnob = context.knobs.options( label: "color", description: "MoonColors variants for LinearProgress color.", - initial: 0, // piccolo + initial: 40, // null options: colorOptions, ); @@ -33,17 +33,17 @@ class LinearProgressStory extends Story { final progressBackgroundColorKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for LinearProgress background.", - initial: 6, // trunks + initial: 40, // null options: colorOptions, ); final backgroundColor = colorTable(context)[progressBackgroundColorKnob]; final borderRadiusKnob = context.knobs.sliderInt( + max: 12, + initial: 8, label: "borderRadius", description: "LinearProgress border radius.", - initial: 8, - max: 12, ); final linearProgressValueKnob = context.knobs.slider( @@ -59,7 +59,7 @@ class LinearProgressStory extends Story { const SizedBox(height: 64), MoonLinearProgress( value: linearProgressValueKnob, - progressSize: progressSizesKnob, + linearProgressSize: progressSizesKnob, color: color, backgroundColor: backgroundColor, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), diff --git a/example/lib/src/storybook/stories/popover.dart b/example/lib/src/storybook/stories/popover.dart index ebc46c03..87cbf009 100644 --- a/example/lib/src/storybook/stories/popover.dart +++ b/example/lib/src/storybook/stories/popover.dart @@ -11,7 +11,7 @@ class PopoverStory extends Story { name: "Popover", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "label text", initial: "Custom popover text", ); @@ -33,14 +33,23 @@ class PopoverStory extends Story { ], ); - final colorsKnob = context.knobs.options( + final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for Popover background.", - initial: 4, // gohan + initial: 40, // null options: colorOptions, ); - final color = colorTable(context)[colorsKnob]; + final backgroundColor = colorTable(context)[backgroundColorsKnob]; + + final borderColorsKnob = context.knobs.options( + label: "borderColor", + description: "MoonColors variants for Popover border.", + initial: 40, // null + options: colorOptions, + ); + + final borderColor = colorTable(context)[borderColorsKnob]; final borderRadiusKnob = context.knobs.sliderInt( max: 20, @@ -78,7 +87,8 @@ class PopoverStory extends Story { builder: (context, setState) { return MoonPopover( show: show, - backgroundColor: color, + borderColor: borderColor ?? Colors.transparent, + backgroundColor: backgroundColor, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), distanceToTarget: distanceToTargetKnob, popoverPosition: popoverPositionsKnob, @@ -94,7 +104,7 @@ class PopoverStory extends Story { children: [ MoonAvatar( backgroundColor: context.moonColors?.heles, - child: const Icon(MoonIcons.rocket_24), + content: const Icon(MoonIcons.rocket_24), ), const SizedBox(width: 12), Expanded(child: Text(customLabelTextKnob)), diff --git a/example/lib/src/storybook/stories/radio.dart b/example/lib/src/storybook/stories/radio.dart index d82f1322..57fd7e35 100644 --- a/example/lib/src/storybook/stories/radio.dart +++ b/example/lib/src/storybook/stories/radio.dart @@ -19,8 +19,8 @@ class RadioStory extends Story { builder: (context) { final activeColorsKnob = context.knobs.options( label: "activeColor", - description: "MoonColors variants for when Radio is checked.", - initial: 0, // piccolo + description: "MoonColors variants for checked Radio.", + initial: 40, // null options: colorOptions, ); @@ -28,8 +28,8 @@ class RadioStory extends Story { final inactiveColorsKnob = context.knobs.options( label: "inactiveColor", - description: "MoonColors variants for when Radio is unchecked.", - initial: 6, // trunks + description: "MoonColors variants for unchecked Radio.", + initial: 40, // null options: colorOptions, ); @@ -87,6 +87,7 @@ class RadioStory extends Story { groupValue: valueLabel, label: "With label #1", onChanged: isDisabled ? null : (ChoiceLabel? choice) => setState(() => valueLabel = choice), + toggleable: isToggleable, ), const SizedBox(height: 8), MoonRadio.withLabel( @@ -95,6 +96,7 @@ class RadioStory extends Story { groupValue: valueLabel, label: "With label #2", onChanged: isDisabled ? null : (ChoiceLabel? choice) => setState(() => valueLabel = choice), + toggleable: isToggleable, ), const SizedBox(height: 64), ], diff --git a/example/lib/src/storybook/stories/switch.dart b/example/lib/src/storybook/stories/switch.dart index 506344f3..8de786c7 100644 --- a/example/lib/src/storybook/stories/switch.dart +++ b/example/lib/src/storybook/stories/switch.dart @@ -14,7 +14,7 @@ class SwitchStory extends Story { name: "Switch", builder: (context) { final switchSizesKnob = context.knobs.options( - label: "MoonSwitchSize", + label: "switchSize", description: "Switch size variants.", initial: MoonSwitchSize.xs, options: const [ @@ -27,7 +27,7 @@ class SwitchStory extends Story { final thumbColorsKnob = context.knobs.options( label: "thumbColor", description: "MoonColors variants for the Switch thumb.", - initial: 7, // goten + initial: 40, // null options: colorOptions, ); @@ -36,7 +36,7 @@ class SwitchStory extends Story { final activeTrackColorsKnob = context.knobs.options( label: "activeTrackColor", description: "MoonColors variants for the active Switch track.", - initial: 0, // piccolo + initial: 40, // null options: colorOptions, ); @@ -44,8 +44,8 @@ class SwitchStory extends Story { final inactiveTrackColorsKnob = context.knobs.options( label: "inactiveTrackColor", - description: "MoonColors variants for the active Switch track.", - initial: 2, // beerus + description: "MoonColors variants for the inactive Switch track.", + initial: 40, // null options: colorOptions, ); diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart index 097c0b61..b6bc09df 100644 --- a/example/lib/src/storybook/stories/tag.dart +++ b/example/lib/src/storybook/stories/tag.dart @@ -9,7 +9,7 @@ class TagStory extends Story { name: "Tag", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "label text", initial: "MoonTag", ); @@ -23,14 +23,23 @@ class TagStory extends Story { ], ); - final colorsKnob = context.knobs.options( + final textColorsKnob = context.knobs.options( + label: "textColor", + description: "MoonColors variants for Tag text.", + initial: 40, // null + options: colorOptions, + ); + + final textColor = colorTable(context)[textColorsKnob]; + + final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", - description: "MoonColors variants for Tag.", - initial: 5, // bulma + description: "MoonColors variants for Tag background.", + initial: 40, // null options: colorOptions, ); - final color = colorTable(context)[colorsKnob]; + final backgroundColor = colorTable(context)[backgroundColorsKnob]; final borderRadiusKnob = context.knobs.sliderInt( max: 12, @@ -39,28 +48,28 @@ class TagStory extends Story { description: "Border radius for Tag.", ); - final setUpperCase = context.knobs.boolean( - label: "isUpperCase", - description: "Sets the text style of the Tag to upper case.", - ); - final showLeadingKnob = context.knobs.boolean( - label: "Show leading", + label: "leading", description: "Show widget in the leading slot.", ); final showLabelKnob = context.knobs.boolean( - label: "Show label", + label: "label", description: "Show widget in the label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( - label: "Show trailing", + label: "trailing", description: "Show widget in the trailing slot.", initial: true, ); + final setUpperCase = context.knobs.boolean( + label: "isUpperCase", + description: "Sets the text style of the Tag to upper case.", + ); + final setRtlModeKnob = context.knobs.boolean( label: "RTL mode", description: "Switch between LTR and RTL modes.", @@ -78,7 +87,8 @@ class TagStory extends Story { onTap: () {}, tagSize: tagSizesKnob, isUpperCase: setUpperCase, - backgroundColor: color, + textColor: textColor, + backgroundColor: backgroundColor, leading: showLeadingKnob ? const Icon(MoonIcons.close_small_16) : null, label: showLabelKnob ? Text(setUpperCase ? customLabelTextKnob.toUpperCase() : customLabelTextKnob) diff --git a/example/lib/src/storybook/stories/toast.dart b/example/lib/src/storybook/stories/toast.dart index cb856b27..c8f362f8 100644 --- a/example/lib/src/storybook/stories/toast.dart +++ b/example/lib/src/storybook/stories/toast.dart @@ -9,12 +9,12 @@ class ToastStory extends Story { name: "Toast", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "label text", initial: "This is a custom MoonToast text", ); final toastPositionKnob = context.knobs.options( - label: "MoonToastPosition", + label: "position", description: "The position of the MoonToast.", initial: MoonToastPosition.bottom, options: const [ @@ -24,7 +24,7 @@ class ToastStory extends Story { ); final toastVariantKnob = context.knobs.options( - label: "MoonToastVariant", + label: "variant", description: "The color variant of the MoonToast.", initial: MoonToastVariant.original, options: const [ @@ -42,6 +42,13 @@ class ToastStory extends Story { final backgroundColor = colorTable(context)[backgroundColorsKnob]; + final borderRadiusKnob = context.knobs.sliderInt( + max: 20, + initial: 8, + label: "borderRadius", + description: "Border radius for MoonToast.", + ); + final displayDurationKnob = context.knobs.sliderInt( min: 1, max: 10, @@ -50,13 +57,6 @@ class ToastStory extends Story { description: "The duration to show the MoonToast.", ); - final borderRadiusKnob = context.knobs.sliderInt( - max: 20, - initial: 8, - label: "borderRadius", - description: "Border radius for MoonToast.", - ); - final setRtlModeKnob = context.knobs.boolean( label: "RTL mode", description: "Switch between LTR and RTL modes.", diff --git a/example/lib/src/storybook/stories/tooltip.dart b/example/lib/src/storybook/stories/tooltip.dart index 9a24a5d9..5a800e32 100644 --- a/example/lib/src/storybook/stories/tooltip.dart +++ b/example/lib/src/storybook/stories/tooltip.dart @@ -12,7 +12,7 @@ class TooltipStory extends Story { name: "Tooltip", builder: (context) { final customLabelTextKnob = context.knobs.text( - label: "Custom label text", + label: "label text", initial: "Custom tooltip text", ); @@ -34,14 +34,23 @@ class TooltipStory extends Story { ], ); - final colorsKnob = context.knobs.options( + final backgroundColorsKnob = context.knobs.options( label: "backgroundColor", description: "MoonColors variants for Tooltip background.", - initial: 4, // gohan + initial: 40, // null options: colorOptions, ); - final color = colorTable(context)[colorsKnob]; + final backgroundColor = colorTable(context)[backgroundColorsKnob]; + + final borderColorsKnob = context.knobs.options( + label: "borderColor", + description: "MoonColors variants for Tooltip border.", + initial: 40, // null + options: colorOptions, + ); + + final borderColor = colorTable(context)[borderColorsKnob]; final borderRadiusKnob = context.knobs.sliderInt( max: 20, @@ -51,36 +60,36 @@ class TooltipStory extends Story { ); final arrowOffsetKnob = context.knobs.slider( + max: 100, + min: -100, + initial: 0, label: "arrowOffsetValue", description: "Set the offset of the Tooltip arrow.", - initial: 0, - min: -100, - max: 100, ); final arrowTipDistanceKnob = context.knobs.slider( + max: 100, + initial: 8, label: "arrowTipDistance", description: "Set the distance to target child widget.", - initial: 8, - max: 100, ); final arrowBaseWidthKnob = context.knobs.slider( + max: 100, + initial: 16, label: "arrowBaseWidth", description: "Set the base width of the Tooltip arrow.", - initial: 16, - max: 100, ); final arrowLengthKnob = context.knobs.slider( + max: 100, + initial: 8, label: "arrowLength", description: "Set the length of the Tooltip arrow.", - initial: 8, - max: 100, ); final showShadowKnob = context.knobs.boolean( - label: "Show shadows", + label: "tooltipShadows", description: "Show shadows under the Tooltip.", initial: true, ); @@ -109,7 +118,9 @@ class TooltipStory extends Story { builder: (context, setState) { return MoonTooltip( show: show, - backgroundColor: color, + backgroundColor: backgroundColor, + borderWidth: 1, + borderColor: borderColor ?? Colors.transparent, borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), tooltipPosition: tooltipPositionsKnob, hasArrow: showArrowKnob, diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart index 86649d5f..a00edc7a 100644 --- a/lib/src/widgets/avatar/avatar.dart +++ b/lib/src/widgets/avatar/avatar.dart @@ -62,8 +62,8 @@ class MoonAvatar extends StatelessWidget { /// The semantic label for the avatar. final String? semanticLabel; - /// The child of the avatar. - final Widget? child; + /// The content of the avatar. + final Widget? content; /// MDS avatar widget. const MoonAvatar({ @@ -81,7 +81,7 @@ class MoonAvatar extends StatelessWidget { this.badgeAlignment = MoonBadgeAlignment.bottomRight, this.backgroundImage, this.semanticLabel, - this.child, + this.content, }); Alignment _avatarAlignmentMapper(BuildContext context) { @@ -202,7 +202,7 @@ class MoonAvatar extends StatelessWidget { ) : null, ), - child: Center(child: child), + child: Center(child: content), ), ), ), diff --git a/lib/src/widgets/buttons/button.dart b/lib/src/widgets/buttons/button.dart index 7e81c48b..ab1d8681 100644 --- a/lib/src/widgets/buttons/button.dart +++ b/lib/src/widgets/buttons/button.dart @@ -234,7 +234,6 @@ class MoonButton extends StatelessWidget { bool showScaleAnimation = true, Color? backgroundColor, Color? borderColor, - Color? textColor, Color? focusEffectColor, Color? hoverEffectColor, Color? pulseEffectColor, @@ -277,7 +276,6 @@ class MoonButton extends StatelessWidget { showScaleAnimation: showScaleAnimation, backgroundColor: backgroundColor, borderColor: borderColor, - textColor: textColor, focusEffectColor: focusEffectColor, hoverEffectColor: hoverEffectColor, pulseEffectColor: pulseEffectColor, @@ -352,6 +350,7 @@ class MoonButton extends StatelessWidget { final Color effectiveBorderColor = borderColor ?? context.moonTheme?.buttonTheme.colors.borderColor ?? MoonColors.light.trunks; + final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonButtonSize.borderRadius; final double effectiveBorderWidth = diff --git a/lib/src/widgets/buttons/outlined_button.dart b/lib/src/widgets/buttons/outlined_button.dart index c5f44d4a..adf543aa 100644 --- a/lib/src/widgets/buttons/outlined_button.dart +++ b/lib/src/widgets/buttons/outlined_button.dart @@ -48,6 +48,9 @@ class MoonOutlinedButton extends StatelessWidget { /// Whether this button should show a pulse effect. final bool showPulseEffect; + /// The border color of the button. + final Color? borderColor; + /// The widget in the leading slot of the button. final Widget? leading; @@ -80,6 +83,7 @@ class MoonOutlinedButton extends StatelessWidget { this.isFullWidth = false, this.showTooltip = false, this.showPulseEffect = false, + this.borderColor, this.label, this.leading, this.trailing, @@ -103,6 +107,7 @@ class MoonOutlinedButton extends StatelessWidget { isFullWidth: isFullWidth, showTooltip: showTooltip, showPulseEffect: showPulseEffect, + borderColor: borderColor, showBorder: true, label: label, leading: leading, diff --git a/lib/src/widgets/loaders/circular_loader.dart b/lib/src/widgets/loaders/circular_loader.dart index 15d285b6..3531d1a0 100644 --- a/lib/src/widgets/loaders/circular_loader.dart +++ b/lib/src/widgets/loaders/circular_loader.dart @@ -15,7 +15,7 @@ enum MoonCircularLoaderSize { class MoonCircularLoader extends StatelessWidget { /// Size of the circular loader widget. - final MoonCircularLoaderSize? loaderSize; + final MoonCircularLoaderSize? circularLoaderSize; /// Size value of the circular loader widget. final double? sizeValue; @@ -35,7 +35,7 @@ class MoonCircularLoader extends StatelessWidget { /// MDS circular loader widget. const MoonCircularLoader({ super.key, - this.loaderSize, + this.circularLoaderSize, this.sizeValue, this.strokeWidth, this.strokeCap, @@ -69,7 +69,7 @@ class MoonCircularLoader extends StatelessWidget { final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; - final MoonCircularLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, loaderSize); + final MoonCircularLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, circularLoaderSize); final double effectiveSize = sizeValue ?? effectiveLoaderSize.loaderSizeValue; final double effectiveStrokeWidth = strokeWidth ?? effectiveLoaderSize.loaderStrokeWidth; diff --git a/lib/src/widgets/loaders/linear_loader.dart b/lib/src/widgets/loaders/linear_loader.dart index 67fb8bf5..319b54b9 100644 --- a/lib/src/widgets/loaders/linear_loader.dart +++ b/lib/src/widgets/loaders/linear_loader.dart @@ -15,7 +15,7 @@ enum MoonLinearLoaderSize { class MoonLinearLoader extends StatelessWidget { /// Size of the linear loader widget. - final MoonLinearLoaderSize? loaderSize; + final MoonLinearLoaderSize? linearLoaderSize; /// Height of the linear loader widget. final double? height; @@ -32,7 +32,7 @@ class MoonLinearLoader extends StatelessWidget { /// MDS linear loader widget. const MoonLinearLoader({ super.key, - this.loaderSize, + this.linearLoaderSize, this.height, this.color, this.backgroundColor, @@ -63,7 +63,7 @@ class MoonLinearLoader extends StatelessWidget { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.linearLoaderTheme.colors.backgroundColor ?? MoonColors.light.trunks; - final MoonLinearLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, loaderSize); + final MoonLinearLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, linearLoaderSize); final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveLoaderSize.borderRadius; final double effectiveHeight = height ?? effectiveLoaderSize.loaderHeight; diff --git a/lib/src/widgets/popover/popover.dart b/lib/src/widgets/popover/popover.dart index 2d18944f..981b4029 100644 --- a/lib/src/widgets/popover/popover.dart +++ b/lib/src/widgets/popover/popover.dart @@ -463,6 +463,7 @@ class MoonPopoverState extends State with RouteAware, SingleTickerP shadows: effectivePopoverShadows, shape: SmoothRectangleBorder( borderRadius: effectiveBorderRadius.smoothBorderRadius, + side: BorderSide(color: widget.borderColor), ), ), child: widget.content, diff --git a/lib/src/widgets/progress/linear_progress.dart b/lib/src/widgets/progress/linear_progress.dart index 772cbc1e..76585bba 100644 --- a/lib/src/widgets/progress/linear_progress.dart +++ b/lib/src/widgets/progress/linear_progress.dart @@ -15,7 +15,7 @@ enum MoonLinearProgressSize { class MoonLinearProgress extends StatelessWidget { /// Size of the linear progress widget. - final MoonLinearProgressSize? progressSize; + final MoonLinearProgressSize? linearProgressSize; /// Value of the linear progress widget. final double value; @@ -38,7 +38,7 @@ class MoonLinearProgress extends StatelessWidget { /// MDS linear progress widget. const MoonLinearProgress({ super.key, - this.progressSize, + this.linearProgressSize, required this.value, this.height, this.color, @@ -75,7 +75,7 @@ class MoonLinearProgress extends StatelessWidget { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.linearProgressTheme.colors.backgroundColor ?? MoonColors.light.trunks; - final MoonLinearProgressSizeProperties effectiveProgressSize = _getMoonProgressSize(context, progressSize); + final MoonLinearProgressSizeProperties effectiveProgressSize = _getMoonProgressSize(context, linearProgressSize); final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveProgressSize.borderRadius; final double effectiveHeight = height ?? effectiveProgressSize.progressHeight; diff --git a/lib/src/widgets/tooltip/tooltip.dart b/lib/src/widgets/tooltip/tooltip.dart index 48df2302..3def9000 100644 --- a/lib/src/widgets/tooltip/tooltip.dart +++ b/lib/src/widgets/tooltip/tooltip.dart @@ -76,7 +76,7 @@ class MoonTooltip extends StatefulWidget { /// The margin around tooltip. Used to prevent the tooltip from touching the edges of the viewport. final double tooltipMargin; - /// The color of the tooltip border. + /// The color of the tooltip border. Is shown when [borderWidth] is larger than 0. final Color borderColor; /// The color of the tooltip background.