feat: UIKit chip component

.config/dictionaries/project.dic

@@ -215,4 +215,5 @@ xcworkspace
 yoroi
 multiasset
 unawaited
-Gitbook
+Gitbook
+trailings

catalyst_voices/integration_test/scenarios/robots/login_robot.dart

@@ -1,5 +1,5 @@
 import 'package:catalyst_voices/pages/login/login.dart';
-import 'package:catalyst_voices/pages/widgets/widgets.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 final class LoginRobot {

catalyst_voices/lib/pages/login/login_form.dart

@@ -1,5 +1,5 @@
 import 'package:catalyst_voices/pages/login/login.dart';
-import 'package:catalyst_voices/pages/widgets/widgets.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:flutter/material.dart';

catalyst_voices/lib/widgets/chips/voices_chip.dart

@@ -0,0 +1,113 @@
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:flutter/material.dart';
+
+/// A contextual chip acting as a label with some extra
+/// small piece of information.
+class VoicesChip extends StatelessWidget {
+  /// The main content of the chip, usually a [Text] widget.
+  final Widget content;
+
+  /// The widget in front of the [content].
+  final Widget? leading;
+
+  /// The widget in back of the [content].
+  final Widget? trailing;
+
+  /// The color of the background, transparent by default.
+  final Color? backgroundColor;
+
+  /// The radius of rounded corners of the chip.
+  final BorderRadius borderRadius;
+
+  /// The internal padding from the widget borders to the internal content.
+  final EdgeInsets padding;
+
+  /// The callback called when the widget is tapped.
+  final VoidCallback? onTap;
+
+  /// The default constructor for the [VoicesChip].
+  const VoicesChip({
+    super.key,
+    required this.content,
+    this.leading,
+    this.trailing,
+    this.backgroundColor,
+    required this.borderRadius,
+    this.padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+    this.onTap,
+  });
+
+  /// A constructor that creates a [VoicesChip] with fully rounded corners.
+  const VoicesChip.round({
+    super.key,
+    required this.content,
+    this.leading,
+    this.trailing,
+    this.backgroundColor,
+    this.padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+    this.onTap,
+  }) : borderRadius = const BorderRadius.all(Radius.circular(32));
+
+  /// A constructor that creates a [VoicesChip] with slightly rounded,
+  /// rectangular corners.
+  const VoicesChip.rectangular({
+    super.key,
+    required this.content,
+    this.leading,
+    this.trailing,
+    this.backgroundColor,
+    this.padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+    this.onTap,
+  }) : borderRadius = const BorderRadius.all(Radius.circular(8));
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        border: backgroundColor != null
+            ? null
+            : Border.all(
+                color: Theme.of(context).colors.outlineBorderVariant!,
+              ),
+        borderRadius: borderRadius,
+      ),
+      child: Material(
+        type: MaterialType.transparency,
+        borderRadius: borderRadius,
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onTap,
+          child: Padding(
+            padding: padding,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if (leading != null)
+                  Padding(
+                    padding: const EdgeInsetsDirectional.only(end: 8),
+                    child: IconTheme(
+                      data: const IconThemeData(size: 18),
+                      child: leading!,
+                    ),
+                  ),
+                DefaultTextStyle(
+                  style: Theme.of(context).textTheme.labelLarge!,
+                  child: content,
+                ),
+                if (trailing != null)
+                  Padding(
+                    padding: const EdgeInsetsDirectional.only(start: 8),
+                    child: IconTheme(
+                      data: const IconThemeData(size: 18),
+                      child: trailing!,
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

catalyst_voices/lib/pages/widgets/menu/voices_expandable_list_tile.dart → catalyst_voices/lib/widgets/menu/voices_expandable_list_tile.dart

@@ -1,4 +1,4 @@
-import 'package:catalyst_voices/pages/widgets/menu/voices_list_tile.dart';
+import 'package:catalyst_voices/widgets/menu/voices_list_tile.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:flutter/material.dart';
 

catalyst_voices/lib/pages/widgets/voices_app_bar/voices_app_bar.dart → catalyst_voices/lib/widgets/voices_app_bar/voices_app_bar.dart

@@ -1,4 +1,4 @@
-import 'package:catalyst_voices/pages/widgets/voices_app_bar/actions/voices_app_bar_actions.dart';
+import 'package:catalyst_voices/widgets/voices_app_bar/actions/voices_app_bar_actions.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';

catalyst_voices/lib/pages/widgets/voices_drawer/voices_drawer.dart → catalyst_voices/lib/widgets/voices_drawer/voices_drawer.dart

@@ -1,4 +1,4 @@
-import 'package:catalyst_voices/pages/widgets/menu/voices_list_tile.dart';
+import 'package:catalyst_voices/widgets/menu/voices_list_tile.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:flutter/material.dart';

catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml

@@ -56,6 +56,8 @@
     <color name="light_avatars_warning">#FDE1CE</color>
     <color name="light_avatars_error">#FFD1D1</color>
     <color name="light_elevations_on_surface_neutral_lv0">#FFFFFF</color>
+    <color name="light_outline_border_outline">#FFD9DEE8</color>
+    <color name="light_outline_border_outline_variant">#61BFC8D9</color>
     <color name="dark_text_primary">#FFFFFF</color>
     <color name="dark_text_on_primary">#E6E9F0</color>
     <color name="dark_text_on_primary_container">#0C288D</color>
@@ -112,4 +114,6 @@
     <color name="dark_avatars_warning">#B64E07</color>
     <color name="dark_avatars_error">#AD0000</color>
     <color name="dark_elevations_on_surface_neutral_lv0">#121721</color>
+    <color name="dark_outline_border_outline">#FF7F90B3</color>
+    <color name="dark_outline_border_outline_variant">#FF364463</color>
 </resources>

catalyst_voices/packages/catalyst_voices_brands/lib/src/theme_extensions/voices_color_scheme.dart

@@ -49,6 +49,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
   final Color? avatarsWarning;
   final Color? avatarsError;
   final Color? elevationsOnSurfaceNeutralLv0;
+  final Color? outlineBorder;
+  final Color? outlineBorderVariant;
 
   const VoicesColorScheme({
     required this.textPrimary,
@@ -93,6 +95,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     required this.avatarsWarning,
     required this.avatarsError,
     required this.elevationsOnSurfaceNeutralLv0,
+    required this.outlineBorder,
+    required this.outlineBorderVariant,
   });
 
   @override
@@ -139,6 +143,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     Color? avatarsWarning,
     Color? avatarsError,
     Color? elevationsOnSurfaceNeutralLv0,
+    Color? outlineBorder,
+    Color? outlineBorderVariant,
   }) {
     return VoicesColorScheme(
       textPrimary: textPrimary ?? this.textPrimary,
@@ -191,6 +197,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
       avatarsError: avatarsError ?? this.avatarsError,
       elevationsOnSurfaceNeutralLv0:
           elevationsOnSurfaceNeutralLv0 ?? this.elevationsOnSurfaceNeutralLv0,
+      outlineBorder: outlineBorder ?? this.outlineBorder,
+      outlineBorderVariant: outlineBorderVariant ?? this.outlineBorderVariant,
     );
   }
 
@@ -279,6 +287,9 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
         other.elevationsOnSurfaceNeutralLv0,
         t,
       ),
+      outlineBorder: Color.lerp(outlineBorder, other.outlineBorder, t),
+      outlineBorderVariant:
+          Color.lerp(outlineBorderVariant, other.outlineBorderVariant, t),
     );
   }
 }

catalyst_voices/packages/catalyst_voices_brands/lib/src/themes/catalyst.dart

@@ -218,6 +218,8 @@ const VoicesColorScheme lightVoicesColorScheme = VoicesColorScheme(
   avatarsError: VoicesColors.lightAvatarsError,
   elevationsOnSurfaceNeutralLv0:
       VoicesColors.lightElevationsOnSurfaceNeutralLv0,
+  outlineBorder: VoicesColors.lightOutlineBorderOutline,
+  outlineBorderVariant: VoicesColors.lightOutlineBorderOutlineVariant,
 );
 
 const ColorScheme darkColorScheme = ColorScheme.dark(
@@ -278,6 +280,8 @@ const VoicesColorScheme darkVoicesColorScheme = VoicesColorScheme(
   avatarsWarning: VoicesColors.darkAvatarsWarning,
   avatarsError: VoicesColors.darkAvatarsError,
   elevationsOnSurfaceNeutralLv0: VoicesColors.darkElevationsOnSurfaceNeutralLv0,
+  outlineBorder: VoicesColors.darkOutlineBorderOutline,
+  outlineBorderVariant: VoicesColors.darkOutlineBorderOutlineVariant,
 );
 
 final BrandAssets lightBrandAssets = BrandAssets(

catalyst_voices/uikit_example/lib/examples/voices_chip_example.dart

@@ -0,0 +1,57 @@
+import 'package:catalyst_voices/widgets/chips/voices_chip.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:flutter/material.dart';
+
+class VoicesChipExample extends StatelessWidget {
+  static const String route = '/chips-example';
+
+  const VoicesChipExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final backgrounds = [
+      null,
+      Theme.of(context).colorScheme.primaryContainer,
+    ];
+
+    final leadings = [
+      null,
+      const Icon(CatalystVoicesIcons.library_icon),
+    ];
+
+    final trailings = [
+      null,
+      const Icon(CatalystVoicesIcons.x),
+    ];
+
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Wrap(
+          spacing: 16,
+          runSpacing: 16,
+          children: [
+            for (final background in backgrounds)
+              for (final leading in leadings)
+                for (final trailing in trailings) ...[
+                  VoicesChip.round(
+                    content: const Text('Label'),
+                    leading: leading,
+                    trailing: trailing,
+                    backgroundColor: background,
+                    onTap: () {},
+                  ),
+                  VoicesChip.rectangular(
+                    content: const Text('Label'),
+                    leading: leading,
+                    trailing: trailing,
+                    backgroundColor: background,
+                    onTap: () {},
+                  ),
+                ],
+          ],
+        ),
+      ),
+    );
+  }
+}

catalyst_voices/uikit_example/lib/examples/voices_navigation_example.dart

@@ -1,8 +1,8 @@
-import 'package:catalyst_voices/pages/widgets/menu/voices_expandable_list_tile.dart';
-import 'package:catalyst_voices/pages/widgets/menu/voices_list_tile.dart';
-import 'package:catalyst_voices/pages/widgets/voices_app_bar/actions/voices_app_bar_actions.dart';
-import 'package:catalyst_voices/pages/widgets/voices_app_bar/voices_app_bar.dart';
-import 'package:catalyst_voices/pages/widgets/voices_drawer/voices_drawer.dart';
+import 'package:catalyst_voices/widgets/menu/voices_expandable_list_tile.dart';
+import 'package:catalyst_voices/widgets/menu/voices_list_tile.dart';
+import 'package:catalyst_voices/widgets/voices_app_bar/actions/voices_app_bar_actions.dart';
+import 'package:catalyst_voices/widgets/voices_app_bar/voices_app_bar.dart';
+import 'package:catalyst_voices/widgets/voices_drawer/voices_drawer.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:flutter/material.dart';
 

catalyst_voices/uikit_example/lib/main.dart

@@ -1,10 +1,11 @@
 import 'dart:async';
 
-import 'package:catalyst_voices/pages/widgets/menu/voices_list_tile.dart';
+import 'package:catalyst_voices/widgets/menu/voices_list_tile.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:catalyst_voices_localization/generated/catalyst_voices_localizations.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localized_locales/flutter_localized_locales.dart';
+import 'package:uikit_example/examples/voices_chip_example.dart';
 import 'package:uikit_example/examples/voices_navigation_example.dart';
 
 void main() {
@@ -29,6 +30,7 @@ class UIKitExampleApp extends StatelessWidget {
       routes: {
         Navigator.defaultRouteName: (_) => const _ExamplesList(),
         VoicesNavigationExample.route: (_) => const VoicesNavigationExample(),
+        VoicesChipExample.route: (_) => const VoicesChipExample(),
       },
     );
   }
@@ -59,6 +61,10 @@ class _ExamplesList extends StatelessWidget {
         title: 'VoicesNavigation (AppBar + Drawer)',
         route: VoicesNavigationExample.route,
       ),
+      _Example(
+        title: 'Voices Chips',
+        route: VoicesChipExample.route,
+      ),
     ];
   }
 }