feat(rich-text): For alert message, switch, radio, checkbox, text input, PIN code put, phone number input components, update API to use rich text

Author: nouha06

ouds_core/lib/components/alert/ouds_alert_message.dart

@@ -24,6 +24,7 @@ import 'package:ouds_core/components/common/OudsBorder.dart';
 import 'package:ouds_core/components/common/ouds_icon_status.dart';
 import 'package:ouds_core/components/link/ouds_link.dart';
 import 'package:ouds_core/components/utilities/app_assets.dart';
+import 'package:ouds_core/components/utilities/markdown_span_builder.dart';
 import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 
@@ -92,16 +93,24 @@ class OudsAlertMessageActionLayout {
 /// Each variant conveys a clear semantic meaning and must always be paired with its dedicated functional icon to ensure clarity and accessibility.
 /// Use functional alerts to inform user about state changes, confirmations, or issues that are directly connected to system logic or user actions. These
 /// messages carry functional meaning and help guide user response or acknowledgment.
-/// - [description]: Optional supplementary text in an alert message. Use only when additional detail or guidance is needed beyond the label. It should remain
-/// short, clear and scannable, helping the user to understand what happened and what he can do next.
+/// - [description]: Optional supplementary text displayed below the alert label. Use it only when additional context, guidance or next steps are needed.
+///  The content should remain concise, clear and easy to scan.
+///  Supports lightweight markdown rich text formatting:
+///  - Strong text using `**bold**`,
+///  - Underline bold text using `__**underline bold**__`,
+///  - Hyperlinks using `[link](https://example.com)`
+///
+/// - [onDescriptionLinkTapped]: Callback invoked when a link in the description is tapped. The URL of the link is passed as an argument.
 /// - [onClose]: Callback invoked when the close button is clicked. If `null`, the close button is not displayed and the alert message remains visible until
 ///   the context changes (e.g., the issue is resolved, the screen is refreshed). Otherwise, the alert message is dismissable and includes a close button,
 ///   allowing the user to dismiss it when he has acknowledged the message.
 ///   Some alerts must remain visible to ensure user is aware of important information; others can be closed to reduce visual clutter.
 /// - [actionLayout]: An optional action link to be displayed in the alert message. It can be used to trigger an action.
-/// - [bulletList]: An optional list of bullet points to be displayed in the alert message following the label or the optional [description].
-///   Add this list when you need to highlight multiple points, such as service features, plan details, or next steps. Each bullet should be short and written
-///   as a clear phrase or fragment — avoid long sentences or complex structures.
+/// - [bulletList]: An optional list of bullet points displayed below the label or the optional [description].
+///   Use this list to highlight multiple items such as service features, plan details or next steps.
+///   Each bullet should remain short, clear and easy to scan. Avoid long sentences or complex structures.
+///   Supports lightweight inline markdown formatting for text emphasis :
+///   - Strong text `**bold**`.
 ///
 /// ## Usage Example:
 ///
@@ -121,6 +130,7 @@ class OudsAlertMessage extends StatefulWidget {
     required this.status,
     this.description,
     this.onClose,
+    this.onDescriptionLinkTapped,
     this.actionLayout,
     this.bulletList,
   });
@@ -137,6 +147,9 @@ class OudsAlertMessage extends StatefulWidget {
   /// A callback invoked when the close button is clicked. If `null`, the close button is not shown.
   final VoidCallback? onClose;
 
+  /// A callback invoked when a link in the description is tapped.
+  final ValueChanged<String>? onDescriptionLinkTapped;
+
   /// An optional clickable link to trigger an action.
   final OudsAlertMessageActionLayout? actionLayout;
 
@@ -182,16 +195,7 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
       // Optional description text.
       if (widget.description != null && widget.description!.isNotEmpty) ...[
         SizedBox(height: alertTokens.spaceRowGap),
-        Text(
-          widget.description!,
-          style: theme.typographyTokens
-              .typeLabelDefaultMedium(context)
-              .copyWith(
-                color: alertMessageStatusModifier.getStatusTextColor(
-                  widget.status,
-                ),
-              ),
-        ),
+        _buildDescription(context),
       ],
       // Optional bullet list. A gap is added only if the list is not empty.
       if (widget.bulletList != null &&
@@ -376,6 +380,27 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
     );
   }
 
+  /// Builds the description text with support for bold and hyperlinks.
+  Widget _buildDescription(BuildContext context) {
+    final theme = OudsTheme.of(context);
+    final alertMessageStatusModifier = OudsAlertStatusModifier(context);
+
+    final textStyle = theme.typographyTokens
+        .typeLabelDefaultMedium(context)
+        .copyWith(
+          color: alertMessageStatusModifier.getStatusTextColor(widget.status),
+        );
+
+    return Text.rich(
+      MarkdownSpanBuilder.buildRichText(
+        context,
+        widget.description ?? '',
+        baseStyle: textStyle,
+        onLinkTap: widget.onDescriptionLinkTapped,
+      ),
+    );
+  }
+
   /// Builds a single bullet list item for the alert message.
   ///
   /// This widget creates a row containing a bullet icon and a text label,
@@ -436,7 +461,9 @@ class _OudsAlertMessageState extends State<OudsAlertMessage> {
           Flexible(
             child: ConstrainedBox(
               constraints: BoxConstraints(maxWidth: maxTextWidth),
-              child: Text(label, style: textStyle),
+              child: Text.rich(
+                MarkdownSpanBuilder.buildBoldOnly(label, baseStyle: textStyle),
+              ),
             ),
           ),
         ],

ouds_core/lib/components/checkbox/ouds_checkbox_item.dart

@@ -53,6 +53,9 @@ import 'package:ouds_core/components/control/ouds_control_item.dart';
 /// - [constrainedMaxWidth]: When `true`, the item width is constrained to a maximum value defined by the design system.
 ///   When `false`, no specific width constraint is applied, allowing the component to size itself or follow external modifiers.
 ///   Defaults to `false`.
+/// - [errorText]: Text shown below the checkbox item indicating an error state. Supports only strong text formatting using `**bold**`.
+///   Rich text is supported only for error messages.
+///
 ///
 /// ### You can use [OudsCheckboxItem] component in your project, customizing parameters as needed :
 ///

ouds_core/lib/components/control/ouds_control_item.dart

@@ -22,13 +22,13 @@ import 'package:ouds_core/components/control/internal/modifier/ouds_control_back
 import 'package:ouds_core/components/control/internal/modifier/ouds_control_border_modifier.dart';
 import 'package:ouds_core/components/control/internal/modifier/ouds_control_indicator.dart';
 import 'package:ouds_core/components/control/internal/modifier/ouds_control_text_modifier.dart';
+import 'package:ouds_core/components/control/internal/modifier/ouds_control_tick_modifier.dart';
 import 'package:ouds_core/components/control/internal/ouds_control_state.dart';
 import 'package:ouds_core/components/divider/ouds_divider.dart';
 import 'package:ouds_core/components/utilities/app_assets.dart';
+import 'package:ouds_core/components/utilities/markdown_span_builder.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 
-import 'internal/modifier/ouds_control_tick_modifier.dart';
-
 enum OudsControlItemType { switchButton, checkbox, radio }
 
 /// Refactor of controls for [Checkbox], [Switch], and [RadioButton].
@@ -264,15 +264,17 @@ class OudsControlItemState extends State<OudsControlItem> {
                 top: controlItemTokens.spacePaddingBlockTopHelperText,
                 end: controlItemTokens.spacePaddingInline,
               ),
-              child: Text(
-                widget.errorText ?? '',
-                style: OudsTheme.of(context).typographyTokens
-                    .typeLabelDefaultMedium(context)
-                    .copyWith(
-                      color: controlItemTextModifier.getErrorMessageTextColor(
-                        controlItemState,
+              child: Text.rich(
+                MarkdownSpanBuilder.buildBoldOnly(
+                  widget.errorText ?? '',
+                  baseStyle: OudsTheme.of(context).typographyTokens
+                      .typeLabelDefaultMedium(context)
+                      .copyWith(
+                        color: controlItemTextModifier.getErrorMessageTextColor(
+                          controlItemState,
+                        ),
                       ),
-                    ),
+                ),
               ),
             ),
         ],

ouds_core/lib/components/form_input/internal/ouds_form_input_decoration.dart

@@ -10,7 +10,8 @@
  * // Software description: Flutter library of reusable graphical components
  * //
  */
-/// @nodoc
+/// {@category Text input}
+/// {@category Phone number input}
 library;
 
 import 'dart:ui';
@@ -43,7 +44,7 @@ class OudsInputDecoration extends OudsFormInputDecoration {
   });
 }
 
-/// Configuration for decorating the [OudsformInput] widget.
+/// Configuration for decorating the [OudsTextField] and [OudsPhoneNumberInput] widgets.
 ///
 /// Provides properties to customize labels, hints, icons, helper and error texts,
 /// loading states, and styling.
@@ -52,8 +53,9 @@ class OudsInputDecoration extends OudsFormInputDecoration {
 ///
 /// - [labelText]: The main label text displayed above or inside the input field.
 ///
-/// - [helperText]: Additional information displayed below the input,
-///   often used to guide or assist the user.
+/// - [helperText]: Additional information displayed below the input, often used to guide or assist the user.
+///   Supports strong text formatting using `**bold**`.
+///   Hyperlinks are not supported in helper text. Use the dedicated helper link component instead.
 ///
 /// - [hintText]: A short placeholder or hint shown inside the input when empty,
 ///   describing the expected input.
@@ -72,6 +74,7 @@ class OudsInputDecoration extends OudsFormInputDecoration {
 /// - [suffix]: A string displayed after the user's input, often used for units or context.
 ///
 /// - [errorText]: Text shown below the input indicating an error state or invalid input.
+///   Supports strong text formatting using `**bold**`.
 ///
 /// - [loader]: When true, displays a loading indicator inside the input.
 ///

ouds_core/lib/components/form_input/ouds_phone_number_input.dart

@@ -29,6 +29,7 @@ import 'package:ouds_core/components/form_input/internal/ouds_form_input_control
 import 'package:ouds_core/components/form_input/internal/ouds_form_input_decoration.dart';
 import 'package:ouds_core/components/utilities/app_assets.dart';
 import 'package:ouds_core/components/utilities/input_utils.dart';
+import 'package:ouds_core/components/utilities/markdown_span_builder.dart';
 import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 import 'package:ouds_theme_contract/ouds_theme_contract.dart';
@@ -776,13 +777,15 @@ class _OudsPhoneNumberInputState extends State<OudsPhoneNumberInput> {
         left: textInput.spacePaddingInlineDefault,
         right: textInput.spacePaddingInlineDefault,
       ),
-      child: Text(
-        text,
-        style: theme.typographyTokens
-            .typeLabelDefaultMedium(context)
-            .copyWith(
-              color: inputTextTextModifier.getHelperTextColor(state, isError),
-            ),
+      child: Text.rich(
+        MarkdownSpanBuilder.buildBoldOnly(
+          text,
+          baseStyle: theme.typographyTokens
+              .typeLabelDefaultMedium(context)
+              .copyWith(
+                color: inputTextTextModifier.getHelperTextColor(state, isError),
+              ),
+        ),
       ),
     );
   }

ouds_core/lib/components/form_input/ouds_text_input.dart

@@ -24,6 +24,7 @@ import 'package:ouds_core/components/form_input/internal/ouds_form_input_decorat
 import 'package:ouds_core/components/link/ouds_link.dart';
 import 'package:ouds_core/components/utilities/app_assets.dart';
 import 'package:ouds_core/components/utilities/input_utils.dart';
+import 'package:ouds_core/components/utilities/markdown_span_builder.dart';
 import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 import 'package:ouds_theme_contract/ouds_theme_contract.dart';
@@ -660,13 +661,15 @@ class _OudsTextInputState extends State<OudsTextField> {
         left: textInput.spacePaddingInlineDefault,
         right: textInput.spacePaddingInlineDefault,
       ),
-      child: Text(
-        text,
-        style: theme.typographyTokens
-            .typeLabelDefaultMedium(context)
-            .copyWith(
-              color: inputTextTextModifier.getHelperTextColor(state, isError),
-            ),
+      child: Text.rich(
+        MarkdownSpanBuilder.buildBoldOnly(
+          text,
+          baseStyle: theme.typographyTokens
+              .typeLabelDefaultMedium(context)
+              .copyWith(
+                color: inputTextTextModifier.getHelperTextColor(state, isError),
+              ),
+        ),
       ),
     );
   }

ouds_core/lib/components/form_input/password_input/ouds_password_input.dart

@@ -23,6 +23,7 @@ import 'package:ouds_core/components/form_input/internal/ouds_form_input_control
 import 'package:ouds_core/components/form_input/password_input/ouds_password_input_decoration.dart';
 import 'package:ouds_core/components/utilities/app_assets.dart';
 import 'package:ouds_core/components/utilities/input_utils.dart';
+import 'package:ouds_core/components/utilities/markdown_span_builder.dart';
 import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 import 'package:ouds_theme_contract/ouds_theme_contract.dart';
@@ -524,13 +525,15 @@ class _OudsPasswordInputState extends State<OudsPasswordInput> {
         left: textInput.spacePaddingInlineDefault,
         right: textInput.spacePaddingInlineDefault,
       ),
-      child: Text(
-        text,
-        style: theme.typographyTokens
-            .typeLabelDefaultMedium(context)
-            .copyWith(
-              color: inputTextTextModifier.getHelperTextColor(state, isError),
-            ),
+      child: Text.rich(
+        MarkdownSpanBuilder.buildBoldOnly(
+          text,
+          baseStyle: theme.typographyTokens
+              .typeLabelDefaultMedium(context)
+              .copyWith(
+                color: inputTextTextModifier.getHelperTextColor(state, isError),
+              ),
+        ),
       ),
     );
   }

ouds_core/lib/components/form_input/password_input/ouds_password_input_decoration.dart

@@ -11,10 +11,10 @@
  * //
  */
 
-/// @nodoc
+/// {@category Password input}
 library;
 
-/// Configuration for decorating the [OudsTextInput] widget.
+/// Configuration for decorating the [OudsPasswordInput] widget.
 ///
 /// Provides properties to customize labels, hints, icons, helper and error texts,
 /// loading states, and styling.

ouds_core/lib/components/radio_button/ouds_radio_button_item.dart

@@ -51,6 +51,8 @@ import 'package:ouds_core/components/radio_button/ouds_radio_button.dart';
 /// - [constrainedMaxWidth]: When `true`, the item width is constrained to a maximum value defined by the design system.
 ///   When `false`, no specific width constraint is applied, allowing the component to size itself or follow external modifiers.
 ///   Defaults to `false`.
+/// - [errorText]: Text shown below the radio button item indicating an error state. Supports only strong text formatting using `**bold**`.
+///   Rich text is supported only for error messages.
 ///
 ///
 /// ### You can use [OudsRadioButtonItem] component in your project, customizing parameters as needed :

ouds_core/lib/components/switch/ouds_switch_item.dart

@@ -45,6 +45,8 @@ import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 /// - [constrainedMaxWidth]: When `true`, the item width is constrained to a maximum value defined by the design system.
 ///   When `false`, no specific width constraint is applied, allowing the component to size itself or follow external modifiers.
 ///   Defaults to `false`.
+/// - [errorText]: Text shown below the switch item indicating an error state. Supports only strong text formatting using `**bold**`.
+///   Rich text is supported only for error messages.
 ///
 ///
 /// ### You can use [OudsSwitchItem] component in your project, customizing parameters as needed :