feat(checkbox,radio-button,switch): update design (#490)

* chore : add radius-item-only token : radio/checkbo

* chore : checkbox

* chore : radio button

* chore : switch

* chore : l10n description

* update : helper text to description control item

* chore : new token read only

* chore : add CHANGELOG

* chore : doc readOnly code

* add errror message and update additional text

* fix : conditional error text message in demo app

* fix : add getErrorMessageTextColor function token

* add icon error

* chore : add changelog

* chore : delete readOnly inherited interaction

* chore : add error message and fix icon when error

* fix : read only on tap

* review : fix padding inline horizontal

* fix : delete padding horizontal behind component

* chore : add grid margin token

* fix : accessibility ghost doc app demo

* fix : delete security margin app demo

* fix : token grid margin

* review : design 25/11 padding indicator and error

* fix : change additionnal label to extra label

* review : add helvetica neue font family ios orange

Author: Tayebsed93

app/CHANGELOG.md

@@ -14,6 +14,13 @@ 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] Component Update - Standalone checkbox and radio button rounded corners ([#466](https://github.com/Orange-OpenSource/ouds-flutter/issues/437))
+- [DemoApp][Library] Component Update - Radio button v1.4.0 ([#466](https://github.com/Orange-OpenSource/ouds-flutter/issues/467))
+- [DemoApp][Library] Component Update - Switch v1.5.0 ([#466](https://github.com/Orange-OpenSource/ouds-flutter/issues/466))
+- [DemoApp][Library] Component Update - Checkbox v2.4.0 ([#465](https://github.com/Orange-OpenSource/ouds-flutter/issues/465))
+- [DemoApp][Library] Component Update - Update of radio item v1.3.0 ([#433](https://github.com/Orange-OpenSource/ouds-flutter/issues/433))
+- [DemoApp][Library] Component Update - Update switch item to v1.4.0 ([#434](https://github.com/Orange-OpenSource/ouds-flutter/issues/434))
+- [DemoApp][Library] Component Update - Update checkbox item to v2.3.0 ([#431](https://github.com/Orange-OpenSource/ouds-flutter/issues/431))
 - [DemoApp][Library] Update `badge` component (badge, badge count, badge icon (v1.2) ([#423](https://github.com/Orange-OpenSource/ouds-flutter/issues/#423))
 - [DemoApp][Library] Update of `button` version v3.1 ([#396](https://github.com/Orange-OpenSource/ouds-flutter/issues/396))
 - [DemoApp][Library] Use Solaris icons ([#245](https://github.com/Orange-OpenSource/ouds-flutter/issues/245))

app/lib/l10n/gen/ouds_flutter_app_localizations.dart

@@ -389,6 +389,12 @@ abstract class AppLocalizations {
   /// **'Error'**
   String get app_components_common_error_label;
 
+  /// No description provided for @app_components_common_error_message.
+  ///
+  /// In en, this message translates to:
+  /// **'Error message'**
+  String get app_components_common_error_message;
+
   /// No description provided for @app_components_common_layout_label.
   ///
   /// In en, this message translates to:
@@ -563,11 +569,11 @@ abstract class AppLocalizations {
   /// **'Indeterminate checkbox item'**
   String get app_components_checkbox_indeterminateCheckboxItem_label;
 
-  /// No description provided for @app_components_controlItem_helperText_label.
+  /// No description provided for @app_components_controlItem_description_label.
   ///
   /// In en, this message translates to:
-  /// **'Helper text'**
-  String get app_components_controlItem_helperText_label;
+  /// **'Description'**
+  String get app_components_controlItem_description_label;
 
   /// No description provided for @app_components_controlItem_icon_label.
   ///
@@ -653,11 +659,11 @@ abstract class AppLocalizations {
   /// **'Outlined'**
   String get app_components_radioButton_radioButtonItem_outlined_label;
 
-  /// No description provided for @app_components_radioButton_radioButtonItem_additionalLabel_label.
+  /// No description provided for @app_components_radioButton_radioButtonItem_extraLabel_label.
   ///
   /// In en, this message translates to:
-  /// **'Additional text'**
-  String get app_components_radioButton_radioButtonItem_additionalLabel_label;
+  /// **'Extra label'**
+  String get app_components_radioButton_radioButtonItem_extraLabel_label;
 
   /// No description provided for @app_components_switch_label.
   ///

app/lib/l10n/gen/ouds_flutter_app_localizations_ar.dart

@@ -161,6 +161,9 @@ class AppLocalizationsAr extends AppLocalizations {
   @override
   String get app_components_common_error_label => 'خطأ';
 
+  @override
+  String get app_components_common_error_message => 'رسالة خطأ';
+
   @override
   String get app_components_common_layout_label => 'التخطيط';
 
@@ -255,7 +258,7 @@ class AppLocalizationsAr extends AppLocalizations {
       'عنصر خانة اختيار ثلاثية الحالات';
 
   @override
-  String get app_components_controlItem_helperText_label => 'نص مساعد';
+  String get app_components_controlItem_description_label => 'الوصف';
 
   @override
   String get app_components_controlItem_icon_label => 'أيقونة';
@@ -304,8 +307,8 @@ class AppLocalizationsAr extends AppLocalizations {
       'مُحَدَّد بخط';
 
   @override
-  String get app_components_radioButton_radioButtonItem_additionalLabel_label =>
-      'نص إضافي';
+  String get app_components_radioButton_radioButtonItem_extraLabel_label =>
+      'تسمية اضافية';
 
   @override
   String get app_components_switch_label => 'مفتاح التبديل';

app/lib/l10n/gen/ouds_flutter_app_localizations_en.dart

@@ -161,6 +161,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get app_components_common_error_label => 'Error';
 
+  @override
+  String get app_components_common_error_message => 'Error message';
+
   @override
   String get app_components_common_layout_label => 'Layout';
 
@@ -254,7 +257,7 @@ class AppLocalizationsEn extends AppLocalizations {
       'Indeterminate checkbox item';
 
   @override
-  String get app_components_controlItem_helperText_label => 'Helper text';
+  String get app_components_controlItem_description_label => 'Description';
 
   @override
   String get app_components_controlItem_icon_label => 'Icon';
@@ -304,8 +307,8 @@ class AppLocalizationsEn extends AppLocalizations {
       'Outlined';
 
   @override
-  String get app_components_radioButton_radioButtonItem_additionalLabel_label =>
-      'Additional text';
+  String get app_components_radioButton_radioButtonItem_extraLabel_label =>
+      'Extra label';
 
   @override
   String get app_components_switch_label => 'Switch';

app/lib/l10n/ouds_flutter_ar.arb

@@ -58,6 +58,7 @@
   "@_components": {},
   "app_components_common_color_label": "اللون",
   "app_components_common_error_label": "خطأ",
+  "app_components_common_error_message": "رسالة خطأ",
   "app_components_common_layout_label": "التخطيط",
   "app_components_common_textOnlyLayout_label": "نص فقط",
   "app_components_common_iconAndTextLayout_label": "نص  + أيقونة",
@@ -93,7 +94,7 @@
   "app_components_checkbox_indeterminateCheckboxItem_label": "عنصر خانة اختيار ثلاثية الحالات",
 
  "@_components_control_item (common strings for checkbox/radio/switch items)": {},
-  "app_components_controlItem_helperText_label": "نص مساعد",
+  "app_components_controlItem_description_label": "الوصف",
   "app_components_controlItem_icon_label": "أيقونة",
   "app_components_controlItem_readOnly_label": "للقراءة فقط",
   "app_components_controlItem_divider_label": "فاصل",
@@ -112,7 +113,7 @@
   "app_components_radioButton_radioButton_label": "زر الاختيار",
   "app_components_radioButton_radioButtonItem_label": "عنصر زر الاختيار",
   "app_components_radioButton_radioButtonItem_outlined_label": "مُحَدَّد بخط",
-  "app_components_radioButton_radioButtonItem_additionalLabel_label": "نص إضافي",
+  "app_components_radioButton_radioButtonItem_extraLabel_label": "تسمية اضافية",
 
   "@_components_switch": {},
   "app_components_switch_label": "مفتاح التبديل",

app/lib/l10n/ouds_flutter_en.arb

@@ -94,6 +94,7 @@
   "@_components": {},
   "app_components_common_color_label": "Color",
   "app_components_common_error_label": "Error",
+  "app_components_common_error_message": "Error message",
   "app_components_common_layout_label": "Layout",
   "app_components_common_textOnlyLayout_label": "Text only",
   "app_components_common_iconAndTextLayout_label": "Text + Icon",
@@ -129,7 +130,7 @@
   "app_components_checkbox_indeterminateCheckboxItem_label": "Indeterminate checkbox item",
 
   "@_components_control_item (common strings for checkbox/radio/switch items)": {},
-  "app_components_controlItem_helperText_label": "Helper text",
+  "app_components_controlItem_description_label": "Description",
   "app_components_controlItem_icon_label": "Icon",
   "app_components_controlItem_readOnly_label": "Read only",
   "app_components_controlItem_divider_label": "Divider",
@@ -148,7 +149,7 @@
   "app_components_radioButton_radioButton_label": "Radio button",
   "app_components_radioButton_radioButtonItem_label": "Radio Button Item",
   "app_components_radioButton_radioButtonItem_outlined_label": "Outlined",
-  "app_components_radioButton_radioButtonItem_additionalLabel_label": "Additional text",
+  "app_components_radioButton_radioButtonItem_extraLabel_label": "Extra label",
 
   "@_components_switch": {},
   "app_components_switch_label": "Switch",

app/lib/ui/components/checkbox/checkbox_code_generator.dart

@@ -1,4 +1,3 @@
-//
 // Software Name: OUDS Flutter
 // SPDX-FileCopyrightText: Copyright (c) Orange SA
 // SPDX-License-Identifier: MIT
@@ -16,45 +15,50 @@ import 'package:ouds_flutter_demo/ui/components/checkbox/checkbox_customization.
 ///
 /// The CheckboxCodeGenerator class is responsible for dynamically generating Flutter
 /// code for the customization of a checkbox component. It leverages the checkbox's
-/// customization state, specifically the enabled and error states, and generates
-/// the corresponding code in string format, which can be used for rendering or
-/// previewing the checkbox with the selected properties.
+/// customization state, specifically the enabled, error, read-only, and tristate states,
+/// and generates the corresponding code in string format, which can be used for rendering
+/// or previewing the checkbox with the selected properties.
 ///
 class CheckboxCodeGenerator {
-  // Static method to generate the code based on checkbox customization state
+  /// Static method to generate the code based on checkbox customization state.
   static String updateCode(BuildContext context, bool indeterminate) {
-    // Get the text value for the checkbox from customization state
-    String value = 'isChecked';
-
-    return """OudsCheckbox(\nvalue: $value,\n${disableCode(context)}\n${errorCode(context)}${tristateCode(context, indeterminate)}""";
-  }
-
-  // Method to generate the disable code for the checkbox onChanged callback
-  static String disableCode(BuildContext context) {
     final CheckboxCustomizationState? customizationState = CheckboxCustomization.of(context);
 
-    // Return the onChanged callback code with its enabled or disabled state
-    return "onChanged: ${customizationState?.hasEnabled == true ? "(bool? value) { \n"
-        "setState(() {\n "
-        "isChecked = value;\n "
-        "});\n}" : 'null'},";
-  }
+    // Base list for building the checkbox code dynamically.
+    final List<String> code = [];
+    code.add('OudsCheckbox(');
+    code.add('  value: isChecked,');
 
-  // Method to generate the error code for the checkbox
-  static String errorCode(BuildContext context) {
-    final CheckboxCustomizationState? customizationState = CheckboxCustomization.of(context);
+    // Add the onChanged callback only when enabled.
+    if (customizationState?.hasEnabled == true) {
+      code.add('  onChanged: (bool? value) {');
+      code.add('    setState(() {');
+      code.add('      isChecked = value;');
+      code.add('    });');
+      code.add('  },');
+    } else {
+      code.add('  onChanged: null,');
+    }
 
-    // Return the isError property based on the customization state
-    return 'isError: ${customizationState?.hasError == true ? 'true' : 'false'},';
-  }
+    // Add the isError property only when true.
+    if (customizationState?.hasError == true) {
+      code.add('  isError: true,');
+    }
+
+    // Add the readOnly property only when true.
+    if (customizationState?.hasReadOnly == true) {
+      code.add('  readOnly: true,');
+    }
 
-  // Method to generate the tristate code for the checkbox
-  static String tristateCode(BuildContext context, bool indeterminate) {
-    String end = """\n);""";
-    if (indeterminate == false) {
-      return end;
+    // Add tristate only when indeterminate is true.
+    if (indeterminate) {
+      code.add('  tristate: true,');
     }
-    // Return the tristate property based on the indeterminate state
-    return "\ntristate: $indeterminate, $end";
+
+    // End of the widget declaration.
+    code.add(');');
+
+    // Return the formatted code as a single string.
+    return code.join('\n');
   }
 }

app/lib/ui/components/checkbox/checkbox_customization.dart

@@ -34,17 +34,25 @@ class CheckboxCustomization extends StatefulWidget {
 /// Button customization state management
 class CheckboxCustomizationState extends CustomizationWidgetState<CheckboxCustomization> {
   late final ErrorState errorState;
+  late final ReadOnlyState readOnly;
 
   @override
   void initState() {
     super.initState();
     errorState = ErrorState(setState, enabledState);
+    readOnly = ReadOnlyState(setState);
   }
 
   // Proxy getters and setters to expose state values directly
   bool get hasError => errorState.value;
   set hasError(bool value) => errorState.value = value;
 
+  // Proxy getters and setters to expose state values directly
+  @override
+  bool get hasReadOnly => readOnly.value;
+  @override
+  set hasReadOnly(bool value) => readOnly.value = value;
+
   // Getter to determine if the 'Enabled' state should be disabled based on the 'Error' state.
   bool get isEnabledWhenError {
     return CheckboxErrorCases.isEnabledWhenError(errorState.value);
@@ -55,6 +63,21 @@ class CheckboxCustomizationState extends CustomizationWidgetState<CheckboxCustom
     return CheckboxErrorCases.isErrorWhenEnabled(hasEnabled);
   }
 
+  // Getter to determine if the 'Enabled' state should be disabled based on the current 'Error' state.
+  bool get isReadOnlyWhenError {
+    return CheckboxErrorCases.isReadOnlyWhenError(errorState.value);
+  }
+
+  // Getter to determine if the 'ReadOnly' state should be disabled based on the current 'Enabled' state.
+  bool get isReadOnlyWhenEnabled {
+    return CheckboxErrorCases.isReadOnlyWhenEnabled(hasEnabled);
+  }
+
+  // Getter to determine if the 'Error' state should be disabled based on the 'Enabled' state.
+  bool get isErrorWhenReadOnly {
+    return CheckboxErrorCases.isErrorWhenReadOnly(hasReadOnly);
+  }
+
   @override
   Widget build(BuildContext context) {
     return _CheckboxCustomization(
@@ -80,6 +103,21 @@ class ErrorState {
   }
 }
 
+/// ReadOnly State Management
+class ReadOnlyState {
+  ReadOnlyState(this._setState);
+
+  final void Function(void Function()) _setState;
+  bool _hasReadOnly = false;
+
+  bool get value => _hasReadOnly;
+  set value(bool newValue) {
+    _setState(() {
+      _hasReadOnly = newValue;
+    });
+  }
+}
+
 /// Error handling for specific button behavior
 class CheckboxErrorCases {
   /// Checks if the 'Enabled' button should be enabled based on the 'error' parameter.
@@ -101,4 +139,34 @@ class CheckboxErrorCases {
   static bool isErrorWhenEnabled(bool hasEnabled) {
     return !hasEnabled;
   }
+
+  /// Determines if the control item should be read-only based on the 'hasError' parameter.
+  ///
+  /// Behavior: The control item is read-only if 'hasError' is true.
+  ///
+  /// @param [hasError] Indicates whether an error is present (true) or not (false).
+  /// @return true if the control item should be read-only, otherwise false.
+  static bool isReadOnlyWhenError(bool hasError) {
+    return hasError;
+  }
+
+  /// Checks if the 'ReadOnly' control item should be disabled when the 'Enabled' control item is activated.
+  ///
+  /// Behavior: The 'ReadOnly' control item is disabled if 'hasEnabled' is false.
+  ///
+  /// @param [hasEnabled] Indicates whether the 'Enabled' control item is activated (true) or not (false).
+  /// @return true if the 'ReadOnly' control item should be disabled, otherwise false.
+  static bool isReadOnlyWhenEnabled(bool hasEnabled) {
+    return !hasEnabled;
+  }
+
+  /// Checks if the 'Error' control item should be activated based on the 'hasReadOnly' parameter.
+  ///
+  /// Behavior: The 'Error' control item is activated if 'hasReadOnly' is true.
+  ///
+  /// @param [hasReadOnly] Indicates whether the control item is read-only (true) or not (false).
+  /// @return true if the 'Error' control item should be activated, otherwise false.
+  static bool isErrorWhenReadOnly(bool hasReadOnly) {
+    return hasReadOnly;
+  }
 }