fix: limit label text in Text Input Component to max 2 lines with ellipsis overflow (#333)(#50)

app/CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 ### Fixed
+- [Library] Label text overflow `Text Input` ([#333](https://github.com/Orange-OpenSource/ouds-flutter/issues/333))
 - [DemoApp][Library] Checkbox indeterminate status : no difference with not checked status ([#361](https://github.com/Orange-OpenSource/ouds-flutter/issues/#361))
 - [DemoApp] token 1.3 update missing  ([#336](https://github.com/Orange-OpenSource/ouds-flutter/issues/336))
 - [DemoApp] tag layout consistency ([#324](https://github.com/Orange-OpenSource/ouds-flutter/issues/324))

ouds_core/CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 ### Fixed
+- [Library] Label text overflow `Text Input` ([#333](https://github.com/Orange-OpenSource/ouds-flutter/issues/333))
 - [Library] Checkbox indeterminate status : no difference with not checked status ([#361](https://github.com/Orange-OpenSource/ouds-flutter/issues/#361))
 - [Library] Tag with bullet/icon has incorrect name a11y ([#366](https://github.com/Orange-OpenSource/ouds-flutter/issues/366))
 - [Library] move dartdoc to dev_dependencies ([#350](https://github.com/Orange-OpenSource/ouds-flutter/issues/350))

ouds_core/lib/components/text_input/ouds_text_input.dart

@@ -10,6 +10,7 @@ import 'package:ouds_core/components/utilities/app_assets.dart';
 import 'package:ouds_core/l10n/gen/ouds_localizations.dart';
 import 'package:ouds_theme_contract/config/ouds_theme_config_model.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
+import 'package:ouds_core/components/utilities/input_utils.dart';
 
 /// The [OudsTextInputStyle] defines the style visual behavior and feedback.
 enum OudsTextInputStyle {
@@ -312,15 +313,25 @@ class _OudsTextInputState extends State<OudsTextInput> {
                               readOnly: widget.readOnly ?? false,
                               decoration: InputDecoration(
                                 border: InputBorder.none,
-
                                 // Label text widget, shown if labelText is provided
                                 label: widget.decoration.labelText != null
-                                    ? Text(
-                                        widget.decoration.labelText ?? "",
-                                        style: theme.typographyTokens.typeLabelDefaultLarge(context).copyWith(
-                                              color: inputTextTextModifier.getTextColor(state, isError),
-                                            ),
-                                      )
+                                    ? Container(
+                                  constraints: BoxConstraints(
+                                    maxHeight: textInput.sizeLabelMaxHeight
+                                  ),
+                                  child: Text(
+                                    maxLines:
+                                    InputUtils.getLabelMaxLines(
+                                        decoration : widget.decoration,
+                                        controller: widget.controller,
+                                        isFocused:  effectiveIsFocused),
+                                    overflow: TextOverflow.ellipsis,
+                                    widget.decoration.labelText ?? "",
+                                    style: theme.typographyTokens.typeLabelDefaultLarge(context).copyWith(
+                                      color: inputTextTextModifier.getTextColor(state, isError),
+                                    ),
+                                  ),
+                                )
                                     : null,
 
                                 // Floating label behavior: always float if both labelText and hintText are provided
@@ -329,7 +340,9 @@ class _OudsTextInputState extends State<OudsTextInput> {
                                 // Hint text widget, shown if hintText is provided
                                 hint: widget.decoration.hintText != null
                                     ? Text(
-                                        widget.decoration.hintText!,
+                                  maxLines : 1,
+                                  overflow: TextOverflow.ellipsis,
+                                  widget.decoration.hintText!,
                                         style: theme.typographyTokens.typeLabelDefaultLarge(context).copyWith(
                                               color: inputTextTextModifier.getHintTextColor(state),
                                             ),

ouds_core/lib/components/utilities/input_utils.dart

@@ -0,0 +1,34 @@
+
+import 'package:flutter/cupertino.dart';
+import 'package:ouds_core/components/text_input/ouds_text_input.dart';
+
+/// A utility class for handling common input-related operations in Flutter.
+class InputUtils {
+
+  /// Returns the maximum number of lines for a label based on the input state.
+  ///
+  /// Rules:
+  /// - If a hint text is provided, the label is limited to 1 line.
+  /// - If the input is focused, the label is limited to 1 line.
+  /// - If the controller has a non-empty text, the label is limited to 1 line.
+  /// - Otherwise, the label can use up to 2 lines.
+  ///
+  /// Parameters:
+  /// [decoration] The input decoration containing optional hint text.
+  /// [isFocused] Whether the input field is currently focused.
+  /// [controller] The text controller for the input field (optional).
+  ///
+  /// Returns:
+  /// `1` if any of the above conditions are true, otherwise `2`.
+  static int getLabelMaxLines({
+    required OudsInputDecoration decoration,
+    required bool isFocused,
+    TextEditingController? controller,
+  }) {
+    return (decoration.hintText != null ||
+        isFocused ||
+        (controller != null && controller.text.isNotEmpty))
+        ? 1
+        : 2;
+  }
+}