fix: [MDS-827] Add sm version for MoonTag (#297)

coingaming · Nov 21, 2023 · ad0f1ef · ad0f1ef
1 parent 4763c6e
commit ad0f1ef
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/example/lib/src/storybook/stories/tag.dart b/example/lib/src/storybook/stories/tag.dart
@@ -23,6 +23,7 @@ class TagStory extends StatelessWidget {
       options: const [
         Option(label: "x2s", value: MoonTagSize.x2s),
         Option(label: "xs", value: MoonTagSize.xs),
+        Option(label: "sm", value: MoonTagSize.sm),
       ],
     );
 

diff --git a/lib/src/theme/tag/tag_sizes.dart b/lib/src/theme/tag/tag_sizes.dart
@@ -15,41 +15,57 @@ class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeM
   /// Extra small tag properties.
   final MoonTagSizeProperties xs;
 
+  /// Small tag properties.
+  final MoonTagSizeProperties sm;
+
   MoonTagSizes({
     required this.tokens,
     MoonTagSizeProperties? x2s,
     MoonTagSizeProperties? xs,
+    MoonTagSizeProperties? sm,
   })  : x2s = x2s ??
             MoonTagSizeProperties(
               borderRadius: tokens.borders.interactiveXs,
-              gap: tokens.sizes.x5s,
+              gap: tokens.sizes.x6s,
               height: tokens.sizes.x2s,
               iconSizeValue: tokens.sizes.x3s,
               padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s),
-              textStyle: tokens.typography.body.text10,
+              textStyle: tokens.typography.body.text9,
               upperCaseTextStyle: tokens.typography.caption.text9,
             ),
         xs = xs ??
             MoonTagSizeProperties(
               borderRadius: tokens.borders.interactiveXs,
-              gap: tokens.sizes.x5s,
+              gap: tokens.sizes.x6s,
               height: tokens.sizes.xs,
               iconSizeValue: tokens.sizes.x2s,
               padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s),
               textStyle: tokens.typography.body.text12,
               upperCaseTextStyle: tokens.typography.caption.text10,
+            ),
+        sm = sm ??
+            MoonTagSizeProperties(
+              borderRadius: tokens.borders.interactiveSm,
+              gap: tokens.sizes.x4s,
+              height: tokens.sizes.sm,
+              iconSizeValue: tokens.sizes.x2s,
+              padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s),
+              textStyle: tokens.typography.body.text12,
+              upperCaseTextStyle: tokens.typography.caption.text10,
             );
 
   @override
   MoonTagSizes copyWith({
     MoonTokens? tokens,
     MoonTagSizeProperties? x2s,
     MoonTagSizeProperties? xs,
+    MoonTagSizeProperties? sm,
   }) {
     return MoonTagSizes(
       tokens: tokens ?? this.tokens,
       x2s: x2s ?? this.x2s,
       xs: xs ?? this.xs,
+      sm: sm ?? this.sm,
     );
   }
 
@@ -61,6 +77,7 @@ class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeM
       tokens: tokens.lerp(other.tokens, t),
       x2s: x2s.lerp(other.x2s, t),
       xs: xs.lerp(other.xs, t),
+      sm: sm.lerp(other.sm, t),
     );
   }
 
@@ -71,6 +88,7 @@ class MoonTagSizes extends ThemeExtension<MoonTagSizes> with DiagnosticableTreeM
       ..add(DiagnosticsProperty("type", "MoonTagSizes"))
       ..add(DiagnosticsProperty<MoonTokens>("tokens", tokens))
       ..add(DiagnosticsProperty<MoonTagSizeProperties>("x2s", x2s))
-      ..add(DiagnosticsProperty<MoonTagSizeProperties>("xs", xs));
+      ..add(DiagnosticsProperty<MoonTagSizeProperties>("xs", xs))
+      ..add(DiagnosticsProperty<MoonTagSizeProperties>("sm", sm));
   }
 }
diff --git a/lib/src/widgets/tag/tag.dart b/lib/src/widgets/tag/tag.dart
@@ -12,6 +12,7 @@ import 'package:moon_design/src/utils/squircle/squircle_border.dart';
 enum MoonTagSize {
   x2s,
   xs,
+  sm,
 }
 
 class MoonTag extends StatelessWidget {
@@ -81,14 +82,12 @@ class MoonTag extends StatelessWidget {
   });
 
   MoonTagSizeProperties _getMoonTagSize(BuildContext context, MoonTagSize? moonTagSize) {
-    switch (moonTagSize) {
-      case MoonTagSize.x2s:
-        return context.moonTheme?.tagTheme.sizes.x2s ?? MoonTagSizes(tokens: MoonTokens.light).x2s;
-      case MoonTagSize.xs:
-        return context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizes(tokens: MoonTokens.light).xs;
-      default:
-        return context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizes(tokens: MoonTokens.light).xs;
-    }
+    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,
+    };
   }
 
   @override