diff --git a/example/assets/code_snippets/breadcrumb.md b/example/assets/code_snippets/breadcrumb.md new file mode 100644 index 00000000..ae71c498 --- /dev/null +++ b/example/assets/code_snippets/breadcrumb.md @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:moon_design/moon_design.dart'; + +class Breadcrumb extends StatelessWidget { + const Breadcrumb({super.key}); + + @override + Widget build(BuildContext context) { + return MoonBreadcrumb( + itemTextStyle: context.moonTypography?.caption.text18, + currentItemTextStyle: context.moonTypography?.heading.text20, + textColor: context.moonColors?.trunks, + hoverTextColor: context.moonColors?.bulma, + divider: const Icon( + Icons.chevron_right, + size: 24, + ), + items: [ + BreadcrumbItem( + leading: const Icon(MoonIcons.generic_home_16_light), + label: const Text('Home'), + onPressed: () {}, + ), + BreadcrumbItem( + label: const Text('Page 1'), + onPressed: () {}, + ), + BreadcrumbItem( + label: const Text('Page 2'), + onPressed: () {}, + ), + ], + ); + } +} diff --git a/example/lib/src/storybook/routing/route_aware_stories.dart b/example/lib/src/storybook/routing/route_aware_stories.dart index 9c153903..0903c017 100644 --- a/example/lib/src/storybook/routing/route_aware_stories.dart +++ b/example/lib/src/storybook/routing/route_aware_stories.dart @@ -71,6 +71,7 @@ final List routeAwareStories = [ name: 'Breadcrumb', routePath: BreadcrumbStory.path, router: router, + codeString: fetchAsset('breadcrumb.md'), ), Story.asRoute( name: 'Button', diff --git a/example/lib/src/storybook/stories/breadcrumb.dart b/example/lib/src/storybook/stories/breadcrumb.dart index b18a033e..d7e2cdcd 100644 --- a/example/lib/src/storybook/stories/breadcrumb.dart +++ b/example/lib/src/storybook/stories/breadcrumb.dart @@ -12,26 +12,29 @@ class BreadcrumbStory extends StatelessWidget { Widget build(BuildContext context) { final textColorKnob = context.knobs.nullable.options( label: "itemTextColor", - description: "MoonColors variants for BreadCramb item text.", + description: "MoonColors variants for MoonBreadcrumb item text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); + final textColor = colorTable(context)[textColorKnob ?? 40]; + final hoverTextColorKnob = context.knobs.nullable.options( label: "itemTextHoverColor", - description: "MoonColors variants for BreadCramb item text on hover.", + description: "MoonColors variants for MoonBreadcrumb item text on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); + final hoverTextColor = colorTable(context)[hoverTextColorKnob ?? 40]; final currentItemColorKnob = context.knobs.nullable.options( label: "currentItemTextColor", - description: "MoonColors variants for current breadcrumb item .", + description: "MoonColors variants for current MoonBreadcrumb item.", enabled: false, initial: 1, // hit @@ -42,21 +45,21 @@ class BreadcrumbStory extends StatelessWidget { final pageAmountKnob = context.knobs.nullable.sliderInt( label: "pageAmount", - description: "Amount of pages in breadcrumb.", + description: "Amount of pages in MoonBreadcrumb.", initial: 7, max: 12, ); final maxItemsKnob = context.knobs.nullable.sliderInt( label: "maxItemsAmount", - description: "Amount of pages to show in breadcrumb.", + description: "Amount of pages to show in MoonBreadcrumb.", initial: 3, max: 12, ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", - description: "Gap between Breadcrumb items.", + description: "Gap between MoonBreadcrumb items.", enabled: false, initial: 4, max: 16, @@ -64,18 +67,18 @@ class BreadcrumbStory extends StatelessWidget { final showLabelKnob = context.knobs.boolean( label: "label", - description: "Show widget in BreadCrumbItem label slot.", + description: "Show widget in MoonBreadcrumb item label slot.", initial: true, ); final showLeadingKnob = context.knobs.boolean( label: "leading", - description: "Show widget in BreadCrumbItem leading slot.", + description: "Show widget in MoonBreadcrumb item leading slot.", ); final isDisabledKnob = context.knobs.boolean( label: "isDisabled", - description: "Disable Breadcrumb.", + description: "Disable MoonBreadcrumb.", ); return Center( @@ -83,7 +86,7 @@ class BreadcrumbStory extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ const TextDivider( - text: "Breadcrumb", + text: "MoonBreadcrumb", paddingTop: 0, ), SingleChildScrollView( @@ -119,7 +122,7 @@ class BreadcrumbStory extends StatelessWidget { ], ), ), - const TextDivider(text: "Breadcrumb with custom divider and text style"), + const TextDivider(text: "MoonBreadcrumb with custom divider and text style"), MoonBreadcrumb( itemTextStyle: context.moonTypography?.caption.text18, currentItemTextStyle: context.moonTypography?.heading.text20, diff --git a/lib/src/theme/breadcrumb/breadcrumb_colors.dart b/lib/src/theme/breadcrumb/breadcrumb_colors.dart index 2e5640f0..0d0be235 100644 --- a/lib/src/theme/breadcrumb/breadcrumb_colors.dart +++ b/lib/src/theme/breadcrumb/breadcrumb_colors.dart @@ -5,13 +5,13 @@ import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonBreadcrumbColors extends ThemeExtension with DiagnosticableTreeMixin { - /// Default text color of breadcrumb item. + /// Default text color of MoonBreadcrumb item. final Color textColor; - /// The text color when breadcrumb item hovered. + /// The text color when MoonBreadcrumb item hovered. final Color? hoverTextColor; - /// Text color of current breadcrumb item. + /// Text color of current MoonBreadcrumb item. final Color? currentItemTextColor; /// Default divider color. diff --git a/lib/src/theme/breadcrumb/breadcrumb_properties.dart b/lib/src/theme/breadcrumb/breadcrumb_properties.dart index eee5754f..6cbd3fe6 100644 --- a/lib/src/theme/breadcrumb/breadcrumb_properties.dart +++ b/lib/src/theme/breadcrumb/breadcrumb_properties.dart @@ -5,25 +5,25 @@ import 'package:flutter/material.dart'; @immutable class MoonBreadcrumbProperties extends ThemeExtension with DiagnosticableTreeMixin { - /// The gap between divider and BreadcrumbItem. + /// The gap between divider and MoonBreadcrumb item. final double gap; - /// Padding around Breadcrumb. + /// Padding around MoonBreadcrumb. final EdgeInsetsGeometry padding; - /// Item text style. + /// MoonBreadcrumb item text style. final TextStyle itemTextStyle; - /// Current item text style. + /// Current MoonBreadcrumb item text style. final TextStyle currentItemTextStyle; /// Icon to use as divider. final IconData dividerIcon; - /// Menu item text style. + /// MoonBreadcrumb more items menu item text style. final TextStyle menuItemTextStyle; - /// Menu max height. + /// MoonBreadcrumb more items menu max height. final double menuMaxHeight; const MoonBreadcrumbProperties({ diff --git a/lib/src/widgets/breadcrumb/breadcrumb.dart b/lib/src/widgets/breadcrumb/breadcrumb.dart index 974865c5..e9cba252 100644 --- a/lib/src/widgets/breadcrumb/breadcrumb.dart +++ b/lib/src/widgets/breadcrumb/breadcrumb.dart @@ -5,29 +5,20 @@ import 'package:moon_design/moon_design.dart'; import 'package:moon_design/src/theme/breadcrumb/breadcrumb_theme.dart'; class MoonBreadcrumb extends StatelessWidget { - const MoonBreadcrumb({ - required this.items, - super.key, - this.divider, - this.gap, - this.itemTextStyle, - this.textColor, - this.hoverTextColor, - this.padding, - this.maxItems = 3, - TextStyle? currentItemTextStyle, - Color? currentItemTextColor, - }) : currentItemTextColor = currentItemTextColor ?? textColor, - currentItemTextStyle = currentItemTextStyle ?? itemTextStyle; + /// Text color of current breadcrumb item. + final Color? currentItemTextColor; - /// Widget to display between items. - final Widget? divider; + /// Text color when breadcrumb item hovered. + final Color? hoverTextColor; + + /// Text color of breadcrumb item. + final Color? textColor; /// The gap between divider and BreadcrumbItem. final double? gap; - /// Items to display as syquence of steps. - final List items; + /// Padding around Breadcrumb. + final EdgeInsetsGeometry? padding; /// Amount of items to display in Breadcrumb. final int maxItems; @@ -38,17 +29,26 @@ class MoonBreadcrumb extends StatelessWidget { /// Current item text style. final TextStyle? currentItemTextStyle; - /// Text color of breadcrumb item. - final Color? textColor; - - /// Text color when breadcrumb item hovered. - final Color? hoverTextColor; + /// Items to display as syquence of steps. + final List items; - /// Text color of current breadcrumb item. - final Color? currentItemTextColor; + /// Widget to display between items. + final Widget? divider; - /// Padding around Breadcrumb. - final EdgeInsetsGeometry? padding; + const MoonBreadcrumb({ + Color? currentItemTextColor, + this.hoverTextColor, + this.textColor, + this.gap, + this.padding, + this.maxItems = 3, + this.itemTextStyle, + TextStyle? currentItemTextStyle, + required this.items, + this.divider, + super.key, + }) : currentItemTextColor = currentItemTextColor ?? textColor, + currentItemTextStyle = currentItemTextStyle ?? itemTextStyle; Widget _buildDivider(MoonBreadcrumbTheme theme) { return IconTheme( @@ -157,22 +157,22 @@ class _MoreButtonState extends State<_MoreButton> { show: show, content: ConstrainedBox( constraints: BoxConstraints(maxHeight: widget.theme.properties.menuMaxHeight), - child: SingleChildScrollView( - child: Column( - children: widget.items - .map( - (item) => MoonMenuItem( - title: DefaultTextStyle( - style: widget.theme.properties.menuItemTextStyle, - child: item.label ?? Container(), - ), - leading: item.leading, - onTap: item.onPressed, - backgroundColor: widget.theme.colors.menuBackgroundColor, + child: ListView( + padding: EdgeInsets.zero, + shrinkWrap: true, + children: widget.items + .map( + (item) => MoonMenuItem( + title: DefaultTextStyle( + style: widget.theme.properties.menuItemTextStyle, + child: item.label ?? Container(), ), - ) - .toList(), - ), + leading: item.leading, + onTap: item.onPressed, + backgroundColor: widget.theme.colors.menuBackgroundColor, + ), + ) + .toList(), ), ), onTapOutside: () => setState(() => show = false), diff --git a/lib/src/widgets/breadcrumb/breadcrumb_item.dart b/lib/src/widgets/breadcrumb/breadcrumb_item.dart index 75fb3b5f..5912f0ac 100644 --- a/lib/src/widgets/breadcrumb/breadcrumb_item.dart +++ b/lib/src/widgets/breadcrumb/breadcrumb_item.dart @@ -1,16 +1,16 @@ import 'package:flutter/material.dart'; class BreadcrumbItem { - /// The widget in the label slot of the tab. + /// The widget in the label slot of the BreadcrumbItem. final Widget? label; - /// The widget in the leading slot of the tab. + /// The widget in the leading slot of the BreadcrumbItem. final Widget? leading; - /// The semantic label for the segment. + /// The semantic label for the BreadcrumbItem. final String? semanticLabel; - /// The callback that is called when the item is tapped or pressed. + /// The callback that is called when the BreadcrumbItem is tapped or pressed. final VoidCallback? onPressed; const BreadcrumbItem({