diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md index fe7338ad8..9aac441dc 100644 --- a/app/CHANGELOG.md +++ b/app/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.1...develop) ### Added ### Changed +- [Library] Update text input component to v1.4 ([#692](https://github.com/Orange-OpenSource/ouds-flutter/issues/692)) - [Library] update `Password input` component to v1.3 ([#689](https://github.com/Orange-OpenSource/ouds-flutter/issues/689)) - [Library] `filter chip` and `suggestion chip` component update to v1.4 ([#688](https://github.com/Orange-OpenSource/ouds-flutter/issues/688)) - [DemoApp][Library] update `badge icon` component to 1.3.0 ([#680](https://github.com/Orange-OpenSource/ouds-flutter/issues/680)) diff --git a/ouds_core/CHANGELOG.md b/ouds_core/CHANGELOG.md index 2d54ea724..f13c7a5ce 100644 --- a/ouds_core/CHANGELOG.md +++ b/ouds_core/CHANGELOG.md @@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.1...develop) ### Added ### Changed +- [Library] Update text input component to v1.4 ([#692](https://github.com/Orange-OpenSource/ouds-flutter/issues/692)) - [Library] update `Password input` component to v1.3 ([#689](https://github.com/Orange-OpenSource/ouds-flutter/issues/689)) - [Library] `filter chip` and `suggestion chip` component update to v1.4 ([#688](https://github.com/Orange-OpenSource/ouds-flutter/issues/688)) - [Library] update `badge` icon component to 1.3.0 ([#680](https://github.com/Orange-OpenSource/ouds-flutter/issues/680)) diff --git a/ouds_core/lib/components/circular_progress_indicator/ouds_circular_progress_indicator.dart b/ouds_core/lib/components/circular_progress_indicator/ouds_circular_progress_indicator.dart new file mode 100644 index 000000000..2a940f5e7 --- /dev/null +++ b/ouds_core/lib/components/circular_progress_indicator/ouds_circular_progress_indicator.dart @@ -0,0 +1,55 @@ +// Software Name: OUDS Flutter +// SPDX-FileCopyrightText: Copyright (c) Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license, +// the text of which is available at https://opensource.org/license/MIT/ +// or see the "LICENSE" file for more details. +// +// Software description: Flutter library of reusable graphical components +// + +/// @nodoc +library; + +import 'package:flutter/material.dart'; +import 'package:ouds_theme_contract/ouds_theme.dart'; + +/// A temporary circular progress indicator component +/// used internally by several public components like text input. +class OudsCircularProgressIndicator extends StatelessWidget { + const OudsCircularProgressIndicator({ + super.key, + required this.color, + this.progress, + }); + + final Color color; + + /// If null => indeterminate loader + /// If not null => determinate loader + final double? progress; + + @override + Widget build(BuildContext context) { + final baseSize = OudsTheme.of( + context, + ).componentsTokens(context).button.sizeLoader; + + const double baseStrokeWidth = 3; + + return ExcludeSemantics( + child: SizedBox( + width: baseSize, + height: baseSize, + child: CircularProgressIndicator( + value: progress, + strokeWidth: baseStrokeWidth, + strokeCap: StrokeCap.square, + backgroundColor: Colors.transparent, + valueColor: AlwaysStoppedAnimation(color), + ), + ), + ); + } +} diff --git a/ouds_core/lib/components/form_input/ouds_text_input.dart b/ouds_core/lib/components/form_input/ouds_text_input.dart index f309eac24..5039acc1e 100644 --- a/ouds_core/lib/components/form_input/ouds_text_input.dart +++ b/ouds_core/lib/components/form_input/ouds_text_input.dart @@ -15,6 +15,7 @@ library; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:ouds_core/components/button/ouds_button.dart'; +import 'package:ouds_core/components/circular_progress_indicator/ouds_circular_progress_indicator.dart'; import 'package:ouds_core/components/form_input/internal/modifier/ouds_form_input_background_modifier.dart'; import 'package:ouds_core/components/form_input/internal/modifier/ouds_form_input_border_modifier.dart'; import 'package:ouds_core/components/form_input/internal/modifier/ouds_form_input_foreground_modifier.dart'; @@ -31,7 +32,7 @@ import 'package:ouds_theme_contract/theme/tokens/components/ouds_textInput_token /// [OUDS Text Input Design Guidelines](https://r.orange.fr/r/S-ouds-doc-text-input) /// -/// **Reference design version : 1.3.0** +/// **Reference design version : 1.4.0** /// /// Text input is a UI element that allows to enter, edit, or select single-line textual data. Text input is one of the most fundamental form elements used /// to capture user input such as names, emails, passwords, or search queries. It provides a visual and interactive affordance for text entry @@ -258,6 +259,9 @@ class _OudsTextInputState extends State { final hintLabel = contentText.isEmpty ? widget.decoration.hintText ?? "" : ""; + final loadingLabel = widget.decoration.loader == true + ? l10n?.core_common_loading_a11y + : ''; // Build Semantics value final semanticsValue = [ @@ -269,11 +273,12 @@ class _OudsTextInputState extends State { helperText, statusLabel, hintLabel, + loadingLabel, ].where((s) => s != null && s.isNotEmpty).join(", "); return Semantics( label: semanticsValue, - hint: l10n?.core_common_hint_a11y, + hint: widget.decoration.loader == true ? '' : l10n?.core_common_hint_a11y, value: isError ? l10n?.core_common_error_a11y : null, focused: effectiveFocusNode != null, focusable: true, @@ -493,7 +498,7 @@ class _OudsTextInputState extends State { controller: widget.controller, keyboardType: widget.keyboardType, style: theme.typographyTokens - .typeLabelDefaultLarge(context) + .typeLabelModerateLarge(context) .copyWith(color: inputTextTextModifier.getTextColor(state, isError)), enabled: widget.enabled, readOnly: widget.readOnly ?? false, @@ -524,7 +529,7 @@ class _OudsTextInputState extends State { border: InputBorder.none, // Label text widget, shown if labelText is provided label: widget.decoration.labelText != null - ? ConstrainedBox( + ? Container( constraints: BoxConstraints( maxHeight: textInput.sizeLabelMaxHeight, ), @@ -616,11 +621,12 @@ class _OudsTextInputState extends State { ), ), ), + SizedBox(width: textInput.spacePaddingInlineDefault), ], ) : null, isDense: true, - contentPadding: EdgeInsets.zero, + contentPadding: EdgeInsetsGeometry.zero, ), ); } @@ -680,8 +686,7 @@ class _OudsTextInputState extends State { /// Cases handled: /// /// 1. **Loader active** (`loader == true`): - /// - Displays a minimal hierarchy [OudsButton] in loading style. - /// - Uses `suffixIcon` if provided; otherwise, reserves space with an empty 24×24 box. + /// - Displays a circular loading indicator. /// /// 2. **Suffix icon provided** (`suffixIcon != null`): /// - Displays the suffix icon inside a minimal hierarchy [OudsButton]. @@ -703,6 +708,7 @@ class _OudsTextInputState extends State { ) { final theme = OudsTheme.of(context); final textInput = theme.componentsTokens(context).textInput; + final buttonTokens = theme.componentsTokens(context).button; final inputTextForegroundModifier = OudsFormFieldsForegroundColorModifier( context, ); @@ -715,15 +721,17 @@ class _OudsTextInputState extends State { SizedBox(width: textInput.spaceColumnGapDefault), ConstrainedBox( constraints: BoxConstraints( - minHeight: 0, - maxHeight: double.infinity, + minWidth: buttonTokens.sizeMinWidth, + minHeight: buttonTokens.sizeMinHeight, + maxHeight: buttonTokens.sizeMaxHeightIconOnly, ), - child: OudsButton( - icon: AppAssets.icons.functionalSocialAndEngagementHeartEmpty, - package: OudsTheme.of(context).packageName, - appearance: OudsButtonAppearance.minimal, - loader: Loader(progress: null), - onPressed: () {}, + child: Padding( + padding: EdgeInsetsGeometry.all(buttonTokens.spaceInsetIconOnly), + child: Center( + child: OudsCircularProgressIndicator( + color: theme.colorScheme(context).contentDefault, + ), + ), ), ), ], @@ -736,6 +744,7 @@ class _OudsTextInputState extends State { mainAxisSize: MainAxisSize.min, children: [ if (widget.decoration.errorText != null) ...[ + SizedBox(width: textInput.spaceColumnGapDefault), SvgPicture.asset( excludeFromSemantics: true, AppAssets.icons.componentAlertImportantFill,