diff --git a/example/lib/src/storybook/stories/primitives/tag.dart b/example/lib/src/storybook/stories/primitives/tag.dart index a8923790..e0e3c1e2 100644 --- a/example/lib/src/storybook/stories/primitives/tag.dart +++ b/example/lib/src/storybook/stories/primitives/tag.dart @@ -68,6 +68,14 @@ class TagStory extends StatelessWidget { max: 32, ); + final gapKnob = context.knobs.nullable.sliderInt( + label: "gap", + description: "Gap between MoonTag leading, label and trailing slots.", + enabled: false, + initial: 4, + max: 24, + ); + final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonTag leading slot.", @@ -85,34 +93,31 @@ class TagStory extends StatelessWidget { initial: true, ); + final icon = HugeIcon( + icon: HugeIcons.strokeRoundedCancel01, + color: iconColor ?? Colors.black, + size: 12.0, + ); + return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonTag( + gap: gapKnob?.toDouble(), + tagSize: tagSizeKnob, + backgroundColor: backgroundColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, onTap: () {}, - tagSize: tagSizeKnob, - backgroundColor: backgroundColor, - leading: showLeadingKnob - ? Icon( - MoonIcons.controls_close_small_16_light, - color: iconColor, - ) - : null, + leading: showLeadingKnob ? icon : null, + trailing: showTrailingKnob ? icon : null, label: showLabelKnob ? Text( customLabelTextKnob, style: TextStyle(color: textColor), ) : null, - trailing: showTrailingKnob - ? Icon( - MoonIcons.controls_close_small_16_light, - color: iconColor, - ) - : null, ), ), ); diff --git a/lib/moon_design.dart b/lib/moon_design.dart index a470b57d..ed1e7640 100644 --- a/lib/moon_design.dart +++ b/lib/moon_design.dart @@ -1,6 +1,8 @@ /// Moon Design for Flutter library moon_design; +export 'package:hugeicons/hugeicons.dart'; + export 'package:moon_design/src/theme/accordion/accordion_theme.dart'; export 'package:moon_design/src/theme/alert/alert_theme.dart'; export 'package:moon_design/src/theme/auth_code/auth_code_theme.dart'; diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart index 21866d04..0c230b62 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -1,13 +1,12 @@ import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:mix/mix.dart'; import 'package:moon_core/moon_core.dart'; import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; import 'package:moon_design/src/theme/tag/tag_sizes.dart'; -import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; -import 'package:moon_design/src/utils/extensions.dart'; -import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; @@ -82,18 +81,13 @@ class MoonTag extends StatelessWidget { MoonTagSizeProperties _getMoonTagSize( BuildContext context, MoonTagSize? moonTagSize, - ) { - return switch (moonTagSize) { - MoonTagSize.x2s => context.moonTheme?.tagTheme.sizes.x2s ?? - MoonTagSizes(tokens: MoonTokens.light).x2s, - MoonTagSize.xs => context.moonTheme?.tagTheme.sizes.xs ?? - MoonTagSizes(tokens: MoonTokens.light).xs, - MoonTagSize.sm => context.moonTheme?.tagTheme.sizes.sm ?? - MoonTagSizes(tokens: MoonTokens.light).sm, - _ => context.moonTheme?.tagTheme.sizes.xs ?? - MoonTagSizes(tokens: MoonTokens.light).xs, - }; - } + ) => + switch (moonTagSize) { + MoonTagSize.x2s => MoonTagSizes(tokens: MoonTokens.light).x2s, + MoonTagSize.xs => MoonTagSizes(tokens: MoonTokens.light).xs, + MoonTagSize.sm => MoonTagSizes(tokens: MoonTokens.light).sm, + _ => MoonTagSizes(tokens: MoonTokens.light).xs, + }; @override Widget build(BuildContext context) { @@ -103,17 +97,12 @@ class MoonTag extends StatelessWidget { final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? effectiveMoonTagSize.borderRadius; - final Color effectiveBackgroundColor = backgroundColor ?? - context.moonTheme?.tagTheme.colors.backgroundColor ?? - MoonColors.light.goku; + final Color effectiveBackgroundColor = + backgroundColor ?? MoonColors.light.goku; - final Color effectiveTextColor = - context.moonTheme?.tagTheme.colors.textColor ?? - MoonColors.light.textPrimary; + final Color effectiveTextColor = MoonColors.light.textPrimary; - final Color effectiveIconColor = - context.moonTheme?.tagTheme.colors.iconColor ?? - MoonColors.light.iconPrimary; + final Color effectiveIconColor = MoonColors.light.iconPrimary; final double effectiveHeight = height ?? effectiveMoonTagSize.height; @@ -122,77 +111,51 @@ class MoonTag extends StatelessWidget { final EdgeInsetsGeometry effectivePadding = padding ?? effectiveMoonTagSize.padding; - final EdgeInsets resolvedDirectionalPadding = - effectivePadding.resolve(Directionality.of(context)); - - final EdgeInsetsGeometry correctedPadding = padding == null - ? EdgeInsetsDirectional.fromSTEB( - leading == null && label != null - ? resolvedDirectionalPadding.left - : 0, - resolvedDirectionalPadding.top, - trailing == null && label != null - ? resolvedDirectionalPadding.right - : 0, - resolvedDirectionalPadding.bottom, - ) - : resolvedDirectionalPadding; - - return Semantics( - label: semanticLabel, - button: false, - focusable: false, - child: GestureDetector( - excludeFromSemantics: true, - onTap: onTap, - onLongPress: onLongPress, - child: MouseRegion( - cursor: onTap != null - ? SystemMouseCursors.click - : SystemMouseCursors.basic, - child: Container( - width: width, - height: effectiveHeight, - padding: correctedPadding, - constraints: BoxConstraints(minWidth: effectiveHeight), - decoration: decoration ?? - ShapeDecorationWithPremultipliedAlpha( - color: effectiveBackgroundColor, - shape: MoonSquircleBorder( - borderRadius: - effectiveBorderRadius.squircleBorderRadius(context), - ), - ), - child: IconTheme( - data: IconThemeData( - color: effectiveIconColor, - size: effectiveMoonTagSize.iconSizeValue, - ), - child: DefaultTextStyle( - style: effectiveMoonTagSize.textStyle.copyWith( - color: effectiveTextColor, - ), - child: Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - if (leading != null) - Padding( - padding: EdgeInsets.symmetric(horizontal: effectiveGap), - child: leading, - ), - if (label != null) label!, - if (trailing != null) - Padding( - padding: EdgeInsets.symmetric(horizontal: effectiveGap), - child: trailing, - ), - ], - ), - ), + final TextStyle resolvedTextStyle = + effectiveMoonTagSize.textStyle.copyWith(color: effectiveTextColor); + + final SystemMouseCursor effectiveMouseCursor = + (onTap != null || onLongPress != null) + ? SystemMouseCursors.click + : SystemMouseCursors.basic; + + final Style tagStyle = Style( + $box.chain + ..height(effectiveHeight) + ..constraints(minWidth: effectiveHeight) + ..padding.as(effectivePadding), + width != null ? $box.width(width!) : null, + decorationToAttribute( + decoration ?? + ShapeDecorationWithPremultipliedAlpha( + color: effectiveBackgroundColor, + shape: MoonBorder(borderRadius: effectiveBorderRadius), ), - ), - ), + ), + $flex.chain + ..gap(effectiveGap) + ..mainAxisSize.min() + ..mainAxisAlignment.center(), + $with.defaultTextStyle.style.as(resolvedTextStyle), + $with.iconTheme.data( + color: effectiveIconColor, + size: effectiveMoonTagSize.iconSizeValue, + ), + ); + + return MoonBaseInteractiveWidget( + semanticLabel: semanticLabel, + mouseCursor: effectiveMouseCursor, + focusNode: FocusNode(skipTraversal: true), + onTap: onTap, + onLongPress: onLongPress, + child: HBox( + style: tagStyle, + children: [ + if (leading != null) leading!, + if (label != null) label!, + if (trailing != null) trailing!, + ], ), ); } diff --git a/pubspec.yaml b/pubspec.yaml index 5da726ce..0c77daad 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -12,6 +12,7 @@ environment: dependencies: flutter: sdk: flutter + hugeicons: ^0.0.3 moon_core: git: url: https://github.com/coingaming/moon_flutter_core