From 6c843e238efdc6ada84e2192a7a14c41f91df911 Mon Sep 17 00:00:00 2001 From: GittHub-d Date: Tue, 11 Feb 2025 14:33:22 +0200 Subject: [PATCH 1/2] [MDS-1597] Create tag component --- .../src/storybook/stories/primitives/tag.dart | 32 +++--- lib/src/widgets/tag/tag.dart | 97 ++++++++----------- 2 files changed, 58 insertions(+), 71 deletions(-) diff --git a/example/lib/src/storybook/stories/primitives/tag.dart b/example/lib/src/storybook/stories/primitives/tag.dart index a8923790..61d66da5 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.slider( + 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,30 @@ class TagStory extends StatelessWidget { initial: true, ); + final Icon icon = Icon( + MoonIcons.controls_close_small_16_light, + color: iconColor, + ); + return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonTag( + gap: gapKnob, + 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/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart index 21866d04..906db953 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -1,14 +1,10 @@ import 'package:flutter/material.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'; enum MoonTagSize { @@ -129,70 +125,57 @@ class MoonTag extends StatelessWidget { ? EdgeInsetsDirectional.fromSTEB( leading == null && label != null ? resolvedDirectionalPadding.left - : 0, + : effectiveGap, resolvedDirectionalPadding.top, trailing == null && label != null ? resolvedDirectionalPadding.right - : 0, + : effectiveGap, 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 ?? + final TextStyle resolvedTextStyle = + effectiveMoonTagSize.textStyle.copyWith(color: effectiveTextColor); + + return MoonBaseInteractiveWidget( + semanticLabel: semanticLabel, + focusNode: FocusNode(skipTraversal: true), + onTap: onTap, + onLongPress: onLongPress, + mouseCursor: (onTap != null || onLongPress != null) + ? SystemMouseCursors.click + : SystemMouseCursors.basic, + child: HBox( + style: Style( + $box.chain + ..height(effectiveHeight) + ..constraints(minWidth: effectiveHeight) + ..color(Colors.white) + ..borderRadius(4.0) + ..padding.as(correctedPadding), + width != null ? $box.width(width!) : null, + decorationToAttribute( + decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, - shape: MoonSquircleBorder( - borderRadius: - effectiveBorderRadius.squircleBorderRadius(context), - ), + shape: MoonBorder(borderRadius: effectiveBorderRadius), ), - 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, - ), - ], - ), - ), - ), + ), + $flex.chain + ..mainAxisAlignment.center() + ..mainAxisSize.min() + ..gap(effectiveGap), + $with.defaultTextStyle.style.as(resolvedTextStyle), + $with.iconTheme.data( + color: effectiveIconColor, + size: effectiveMoonTagSize.iconSizeValue, ), ), + children: [ + if (leading != null) leading!, + if (label != null) label!, + if (trailing != null) trailing!, + ], ), ); } From 6bad05be3dc9df25f6e32495d579be12e16effa6 Mon Sep 17 00:00:00 2001 From: GittHub-d Date: Tue, 11 Feb 2025 16:54:29 +0200 Subject: [PATCH 2/2] [MDS-1597] Create tag component --- .../src/storybook/stories/primitives/tag.dart | 11 +- lib/moon_design.dart | 2 + lib/src/widgets/tag/tag.dart | 112 +++++++----------- pubspec.yaml | 1 + 4 files changed, 55 insertions(+), 71 deletions(-) diff --git a/example/lib/src/storybook/stories/primitives/tag.dart b/example/lib/src/storybook/stories/primitives/tag.dart index 61d66da5..e0e3c1e2 100644 --- a/example/lib/src/storybook/stories/primitives/tag.dart +++ b/example/lib/src/storybook/stories/primitives/tag.dart @@ -68,7 +68,7 @@ class TagStory extends StatelessWidget { max: 32, ); - final gapKnob = context.knobs.nullable.slider( + final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonTag leading, label and trailing slots.", enabled: false, @@ -93,16 +93,17 @@ class TagStory extends StatelessWidget { initial: true, ); - final Icon icon = Icon( - MoonIcons.controls_close_small_16_light, - color: iconColor, + 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, + gap: gapKnob?.toDouble(), tagSize: tagSizeKnob, backgroundColor: backgroundColor, borderRadius: borderRadiusKnob != 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 906db953..0c230b62 100644 --- a/lib/src/widgets/tag/tag.dart +++ b/lib/src/widgets/tag/tag.dart @@ -1,10 +1,13 @@ 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_tokens/moon_tokens.dart'; enum MoonTagSize { @@ -78,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) { @@ -99,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; @@ -118,59 +111,46 @@ 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 - : effectiveGap, - resolvedDirectionalPadding.top, - trailing == null && label != null - ? resolvedDirectionalPadding.right - : effectiveGap, - resolvedDirectionalPadding.bottom, - ) - : resolvedDirectionalPadding; - 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, - mouseCursor: (onTap != null || onLongPress != null) - ? SystemMouseCursors.click - : SystemMouseCursors.basic, child: HBox( - style: Style( - $box.chain - ..height(effectiveHeight) - ..constraints(minWidth: effectiveHeight) - ..color(Colors.white) - ..borderRadius(4.0) - ..padding.as(correctedPadding), - width != null ? $box.width(width!) : null, - decorationToAttribute( - decoration ?? - ShapeDecorationWithPremultipliedAlpha( - color: effectiveBackgroundColor, - shape: MoonBorder(borderRadius: effectiveBorderRadius), - ), - ), - $flex.chain - ..mainAxisAlignment.center() - ..mainAxisSize.min() - ..gap(effectiveGap), - $with.defaultTextStyle.style.as(resolvedTextStyle), - $with.iconTheme.data( - color: effectiveIconColor, - size: effectiveMoonTagSize.iconSizeValue, - ), - ), + style: tagStyle, children: [ if (leading != null) leading!, if (label != null) label!, 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