feat(tag): update tag component v1.4

NOTICE.txt

@@ -60,6 +60,7 @@ ouds_theme_orange/assets/ic_important_alert.svg
 ouds_theme_orange/assets/ic_password_vision_hide.svg
 ouds_theme_orange/assets/ic_password_vision.svg
 ouds_theme_orange/assets/ic_password_lock.svg
+ouds_theme_orange/assets/ic_warning_external_shape.svg
 
 ouds_theme_sosh/fonts/Roboto-Black.ttf
 ouds_theme_sosh/fonts/Roboto-Bold.ttf
@@ -99,6 +100,7 @@ ouds_theme_sosh/assets/ic_important_alert.svg
 ouds_theme_sosh/assets/ic_password_vision_hide.svg
 ouds_theme_sosh/assets/ic_password_vision.svg
 ouds_theme_sosh/assets/ic_password_lock.svg
+ouds_theme_sosh/assets/ic_warning_external_shape.svg
 
 ouds_theme_sosh/fonts/Sosh-Black.ttf
 ouds_theme_sosh/fonts/Sosh-Bold.ttf
@@ -129,6 +131,7 @@ ouds_theme_wireframe/assets/ic_error.svg
 ouds_theme_wireframe/assets/ic_heart.svg
 ouds_theme_wireframe/assets/ic_bullet_tag.svg
 ouds_theme_wireframe/assets/ic_important_alert.svg
+ouds_theme_wireframe/assets/ic_warning_external_shape.svg
 
 ouds_theme_wireframe/fonts/ShantellSans-Bold.ttf
 ouds_theme_wireframe/fonts/ShantellSans-BoldItalic.ttf

app/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [DemoApp][Library] Tokens: `link` and `linkMono` ([#390](https://github.com/Orange-OpenSource/ouds-flutter/issues/#390))
 
 ### Changed
+- [DemoApp][Library] Update tag component v1.4 ([#452](https://github.com/Orange-OpenSource/ouds-flutter/issues/452))
 - [Library] Update tokens 1.8.0 ([#436](https://github.com/Orange-OpenSource/ouds-flutter/issues/436))
 - [DemoApp] Components must have hidden divider by default `control item` ([#379](https://github.com/Orange-OpenSource/ouds-flutter/issues/#379))
 - [Library] Update tokens 1.7.0 ([#422](https://github.com/Orange-OpenSource/ouds-flutter/issues/422))

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -509,6 +509,12 @@ abstract class AppLocalizations {
   /// **'Length'**
   String get app_components_common_length_label;
 
+  /// No description provided for @app_components_common_appearance_label.
+  ///
+  /// In en, this message translates to:
+  /// **'Appearance'**
+  String get app_components_common_appearance_label;
+
   /// No description provided for @app_components_button_label.
   ///
   /// In en, this message translates to:
@@ -803,17 +809,17 @@ abstract class AppLocalizations {
   /// **'A tag is a small element that shows short info like a label, keyword, or category.It helps users quickly find, group, or understand content.'**
   String get app_components_tag_description_text;
 
-  /// No description provided for @app_components_tagInput_label.
+  /// No description provided for @app_components_tag_inputTag_label.
   ///
   /// In en, this message translates to:
-  /// **'Tag Input'**
-  String get app_components_tagInput_label;
+  /// **'Input tag'**
+  String get app_components_tag_inputTag_label;
 
-  /// No description provided for @app_components_tagInput_description_text.
+  /// No description provided for @app_components_tag_inputTag_description_text.
   ///
   /// In en, this message translates to:
-  /// **'A Tag Input is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag.'**
-  String get app_components_tagInput_description_text;
+  /// **'An Input tag is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag.'**
+  String get app_components_tag_inputTag_description_text;
 
   /// No description provided for @app_components_text_input_label.
   ///

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -223,6 +223,9 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_common_length_label => 'الطول';
 
+  @override
+  String get app_components_common_appearance_label => 'المظهر';
+
   @override
   String get app_components_button_label => 'زر';
 
@@ -386,10 +389,10 @@ class AppLocalizationsAr extends AppLocalizations {
       'الوسم هو عنصر صغير يُستخدم لعرض معلومات قصيرة مثل تسمية أو كلمة مفتاحية أو تصنيف. يساعد المستخدمين على العثور على المحتوى بسرعة أو تجميعه أو فهمه.';
 
   @override
-  String get app_components_tagInput_label => 'إدخال الوسوم';
+  String get app_components_tag_inputTag_label => 'إدخال الوسوم';
 
   @override
-  String get app_components_tagInput_description_text =>
+  String get app_components_tag_inputTag_description_text =>
       'إدخال الوسوم هو مكوّن يسمح للمستخدمين بإدخال عدة قيم، حيث يتم تمثيل كل قيمة كوسم. عند الكتابة والضغط على زر الإدخال (Enter) أو الفاصلة أو زر الجدولة (Tab)، يتم تحويل كل قيمة إلى وسم.';
 
   @override

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -222,6 +222,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_common_length_label => 'Length';
 
+  @override
+  String get app_components_common_appearance_label => 'Appearance';
+
   @override
   String get app_components_button_label => 'Button';
 
@@ -386,11 +389,11 @@ class AppLocalizationsEn extends AppLocalizations {
       'A tag is a small element that shows short info like a label, keyword, or category.It helps users quickly find, group, or understand content.';
 
   @override
-  String get app_components_tagInput_label => 'Tag Input';
+  String get app_components_tag_inputTag_label => 'Input tag';
 
   @override
-  String get app_components_tagInput_description_text =>
-      'A Tag Input is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag.';
+  String get app_components_tag_inputTag_description_text =>
+      'An Input tag is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag.';
 
   @override
   String get app_components_text_input_label => 'Text input';

app/lib/l10n/ouds_flutter_ar.arb

@@ -78,6 +78,7 @@
   "app_components_common_placeholder_label": "العنصر النائب",
   "app_components_common_helperText_label": "نص مساعد",
   "app_components_common_length_label": "الطول",
+  "app_components_common_appearance_label": "المظهر",
 
   "@_components_button": {},
   "app_components_button_label": "زر",
@@ -146,8 +147,8 @@
   "@_components_tag": {},
   "app_components_tag_label": "وسم",
   "app_components_tag_description_text": "الوسم هو عنصر صغير يُستخدم لعرض معلومات قصيرة مثل تسمية أو كلمة مفتاحية أو تصنيف. يساعد المستخدمين على العثور على المحتوى بسرعة أو تجميعه أو فهمه.",
-  "app_components_tagInput_label": "إدخال الوسوم",
-  "app_components_tagInput_description_text": "إدخال الوسوم هو مكوّن يسمح للمستخدمين بإدخال عدة قيم، حيث يتم تمثيل كل قيمة كوسم. عند الكتابة والضغط على زر الإدخال (Enter) أو الفاصلة أو زر الجدولة (Tab)، يتم تحويل كل قيمة إلى وسم.",
+  "app_components_tag_inputTag_label": "إدخال الوسوم",
+  "app_components_tag_inputTag_description_text": "إدخال الوسوم هو مكوّن يسمح للمستخدمين بإدخال عدة قيم، حيث يتم تمثيل كل قيمة كوسم. عند الكتابة والضغط على زر الإدخال (Enter) أو الفاصلة أو زر الجدولة (Tab)، يتم تحويل كل قيمة إلى وسم.",
 
   "@_components_text_input": {},
   "app_components_text_input_label": "إدخال النص",

app/lib/l10n/ouds_flutter_en.arb

@@ -114,6 +114,7 @@
   "app_components_common_placeholder_label": "Placeholder",
   "app_components_common_helperText_label": "Helper text",
   "app_components_common_length_label": "Length",
+  "app_components_common_appearance_label": "Appearance",
 
   "@_components_button": {},
   "app_components_button_label": "Button",
@@ -182,8 +183,8 @@
   "@_components_tag": {},
   "app_components_tag_label": "Tag",
   "app_components_tag_description_text": "A tag is a small element that shows short info like a label, keyword, or category.It helps users quickly find, group, or understand content.",
-  "app_components_tagInput_label": "Tag Input",
-  "app_components_tagInput_description_text": "A Tag Input is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag.",
+  "app_components_tag_inputTag_label": "Input tag",
+  "app_components_tag_inputTag_description_text": "An Input tag is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a Tag.",
 
   "@_components_text_input": {},
   "app_components_text_input_label": "Text input",

app/lib/ui/components/components.dart

@@ -47,7 +47,7 @@ import 'package:ouds_flutter_demo/ui/components/radio_button/radio_button_item_d
 import 'package:ouds_flutter_demo/ui/components/switch/switch_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/switch/switch_item_demo_screen.dart';
 import 'package:ouds_flutter_demo/ui/components/tag/tag_demo_screen.dart';
-import 'package:ouds_flutter_demo/ui/components/tag/tag_input_demo_screen.dart';
+import 'package:ouds_flutter_demo/ui/components/tag/input_tag_demo_screen.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 
 List<Component> components(BuildContext context) {
@@ -289,7 +289,7 @@ List<Component> components(BuildContext context) {
       context.l10n.app_components_tag_description_text,
       [
         VariantComponent(context.l10n.app_components_tag_label, TagDemoScreen()),
-        VariantComponent(context.l10n.app_components_tagInput_label, TagInputDemoScreen()),
+        VariantComponent(context.l10n.app_components_tag_inputTag_label, InputTagDemoScreen()),
       ],
     ),
     Component(

app/lib/ui/components/tag/tag_input_code_generator.dart → app/lib/ui/components/tag/input_tag_code_generator.dart

@@ -2,13 +2,13 @@ import 'package:flutter/cupertino.dart';
 import 'package:ouds_flutter_demo/ui/components/tag/tag_customization.dart';
 
 ///
-/// The TagInputCodeGenerator class is responsible for dynamically generating Flutter
+/// The InputTagCodeGenerator class is responsible for dynamically generating Flutter
 /// code for the customization of a tag input component. It leverages the tag's
 /// customization state (such as label text) and
 /// generates the corresponding code in string format, which can be used for
 /// rendering or previewing the tag with the selected properties.
 ///
-class TagInputCodeGenerator {
+class InputTagCodeGenerator {
   // Static method to generate the code based on tag customization state
   static String updateCode(BuildContext context) {
     // Fetch the current tag customization state from context
@@ -17,7 +17,7 @@ class TagInputCodeGenerator {
     // Get the text value for the tag from customization state
     String label = customizationState?.labelText ?? "Label";
 
-    return  """OudsTagInput(\nlabel: "$label",\nonPressed: ${customizationState?.hasEnabled == true ? "() {}" : 'null'},\n);""";
+    return  """OudsInputTag(\nlabel: "$label",\nonPressed: ${customizationState?.hasEnabled == true ? "() {}" : 'null'},\n);""";
     }
 
 }

app/lib/ui/components/tag/tag_input_demo_screen.dart → app/lib/ui/components/tag/input_tag_demo_screen.dart

@@ -12,11 +12,11 @@
 
 import 'dart:io';
 import 'package:flutter/material.dart';
-import 'package:ouds_core/components/tag/ouds_tag_input.dart';
+import 'package:ouds_core/components/tag/ouds_input_tag.dart';
 import 'package:ouds_flutter_demo/l10n/app_localizations.dart';
 import 'package:ouds_flutter_demo/main_app_bar.dart';
 import 'package:ouds_flutter_demo/ui/components/tag/tag_customization.dart';
-import 'package:ouds_flutter_demo/ui/components/tag/tag_input_code_generator.dart';
+import 'package:ouds_flutter_demo/ui/components/tag/input_tag_code_generator.dart';
 import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
 import 'package:ouds_flutter_demo/ui/utilities/code.dart';
 import 'package:ouds_flutter_demo/ui/utilities/customizable/customizable_section.dart';
@@ -30,14 +30,14 @@ import 'package:ouds_theme_contract/ouds_component_version.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 import 'package:provider/provider.dart';
 
-class TagInputDemoScreen extends StatefulWidget {
-  const TagInputDemoScreen({super.key});
+class InputTagDemoScreen extends StatefulWidget {
+  const InputTagDemoScreen({super.key});
 
   @override
-  State<StatefulWidget> createState() => _TagInputDemoScreenState();
+  State<StatefulWidget> createState() => _InputTagDemoScreenState();
 }
 
-class _TagInputDemoScreenState extends State<TagInputDemoScreen> {
+class _InputTagDemoScreenState extends State<InputTagDemoScreen> {
   final _scaffoldKey = GlobalKey<ScaffoldState>();
   bool _isBottomSheetExpanded = true;
 
@@ -62,7 +62,7 @@ class _TagInputDemoScreenState extends State<TagInputDemoScreen> {
             title: context.l10n.app_common_customize_label,
           ),
           key: _scaffoldKey,
-          appBar: MainAppBar(title: context.l10n.app_components_tagInput_label),
+          appBar: MainAppBar(title: context.l10n.app_components_tag_inputTag_label),
           body: SafeArea(
             child: ExcludeSemantics(excluding: !_isBottomSheetExpanded, child: _Body()),
           ),
@@ -85,13 +85,13 @@ class _BodyState extends State<_Body> {
   Widget build(BuildContext context) {
     ThemeController? themeController = Provider.of<ThemeController>(context, listen: false);
     return DetailScreenDescription(
-      description: context.l10n.app_components_tagInput_description_text,
+      description: context.l10n.app_components_tag_inputTag_description_text,
       widget: Column(
         children: [
-          _TagInputDemo(),
+          _InputTagDemo(),
           SizedBox(height: themeController.currentTheme.spaceScheme(context).fixedMedium),
           Code(
-            code: TagInputCodeGenerator.updateCode(context),
+            code: InputTagCodeGenerator.updateCode(context),
           ),
           ReferenceDesignVersionComponent(
             version: OudsComponentVersion.tag,
@@ -104,15 +104,15 @@ class _BodyState extends State<_Body> {
 
 /// This widget is now a StatefulWidget for the tag demo.
 ///
-/// Component [ChipSuggestionDemo] demonstrates the behavior and functionality of a tag.
-class _TagInputDemo extends StatefulWidget {
-  const _TagInputDemo();
+/// Component [InputTagDemoScreen] demonstrates the behavior and functionality of a tag.
+class _InputTagDemo extends StatefulWidget {
+  const _InputTagDemo();
 
   @override
-  State<_TagInputDemo> createState() => _TagInputDemoState();
+  State<_InputTagDemo> createState() => _InputTagDemoState();
 }
 
-class _TagInputDemoState extends State<_TagInputDemo> {
+class _InputTagDemoState extends State<_InputTagDemo> {
   ThemeController? themeController;
   TagCustomizationState? customizationState;
 
@@ -126,15 +126,15 @@ class _TagInputDemoState extends State<_TagInputDemo> {
         ThemeBox(
           themeContract: themeController!.currentTheme,
           themeMode: themeController!.isInverseDarkTheme ? ThemeMode.light : ThemeMode.dark,
-          child: OudsTagInput(
+          child: OudsInputTag(
             label: customizationState?.labelText ?? "",
             onPressed: customizationState?.hasEnabled == true ? () {} : null,
           ),
         ),
         ThemeBox(
           themeContract: themeController!.currentTheme,
           themeMode: themeController!.isInverseDarkTheme ? ThemeMode.dark : ThemeMode.light,
-          child: OudsTagInput(
+          child: OudsInputTag(
             label: customizationState?.labelText ?? "",
             onPressed: customizationState?.hasEnabled == true ? () {} : null,
           ),

app/lib/ui/components/tag/tag_code_generator.dart

@@ -33,39 +33,38 @@ class TagCodeGenerator {
 
     // Get the tag's layout from customization state
     OudsTagLayout layout = TagCustomizationUtils.getLayout(customizationState?.selectedLayout as Object);
-    OudsTagHierarchy hierarchy = TagCustomizationUtils.getHierarchy(customizationState?.selectedHierarchy as Object);
+    OudsTagAppearance appearance = TagCustomizationUtils.getAppearance(customizationState?.selectedAppearance as Object);
     OudsTagSize size = TagCustomizationUtils.getSize(customizationState?.selectedSize as Object);
     OudsTagStatus status = TagCustomizationUtils.getStatus(customizationState?.selectedStatus as Object);
 
 
     String code = '';
-    String? hierarchyCode = hierarchy != OudsTagHierarchy.emphasized ? "OudsTagHierarchy.muted" : null ;
-    String? sizeCode = size == OudsTagSize.small ? "OudsTagSize.small" : null ;
-    String? statusCode = status != OudsTagStatus.neutral ? status.toString() : null ;
-    String? layoutCode = layout != OudsTagLayout.textOnly ? layout.toString() : null ;
+    String? appearanceCode = appearance == OudsTagAppearance.muted ? "OudsTagAppearance.muted" : "OudsTagAppearance.emphasized" ;
+    String? sizeCode = size == OudsTagSize.small ? "OudsTagSize.small" : "OudsTagSize.defaultSize" ;
+    String? statusCode =  status.toString();
+    String? layoutCode = layout.toString();
 
     List<String> params = [
       '  label: "$label",',
-      if (hierarchyCode != null) 'hierarchy: $hierarchyCode',
-      if (statusCode != null) 'status: $statusCode',
-      if (sizeCode != null) 'size: $sizeCode',
-      if (layoutCode != null) 'layout : $layoutCode'
+       ' appearance: $appearanceCode,',
+      ' enabled: ${customizationState?.hasEnabled},',
+      ' size: $sizeCode,',
+       ' status: $statusCode,',
+       ' layout: $layoutCode,',
+      ' loading: ${customizationState?.hasLoader}',
     ];
 
-
-
     // Switch on the layout type and generate the corresponding code
     switch (layout) {
       case OudsTagLayout.textOnly:
-      case OudsTagLayout.textAndLoader:
       case OudsTagLayout.textAndBullet:
         code = """OudsTag(\n${params.join('\n  ')}\n);""";
         break;
 
       case OudsTagLayout.textAndIcon:
-        if(status == OudsTagStatus.neutral || status == OudsTagStatus.disabled || status ==  OudsTagStatus.accent) {
+        if(status == OudsTagStatus.neutral || status ==  OudsTagStatus.accent) {
           code = """OudsTag(\n${params.join(
-              '\n  ')},\nicon: 'assets/ic_heart.svg',\n},\n);""";
+              '\n  ')},\nicon: 'assets/ic_heart.svg'\n);""";
         }
         else{
           code = """OudsTag(\n${params.join('\n  ')}\n);""";