diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md index 9ce6c5558..990d322e2 100644 --- a/app/CHANGELOG.md +++ b/app/CHANGELOG.md @@ -7,10 +7,13 @@ 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 `tag` component to v1.5 ([#694](https://github.com/Orange-OpenSource/ouds-flutter/issues/694)) +- [Library] update `input tag` component to v1.2 ([#695](https://github.com/Orange-OpenSource/ouds-flutter/issues/695)) - [DemoApp][Library] update tokens 2.5.0 ([#778](https://github.com/Orange-OpenSource/ouds-flutter/issues/778)) - [DemoApp][Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726)) ### Fixed +- [Library] `input tag` the whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481)) ## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14 ### Added diff --git a/ouds_core/CHANGELOG.md b/ouds_core/CHANGELOG.md index 97bae6427..50e21c46d 100644 --- a/ouds_core/CHANGELOG.md +++ b/ouds_core/CHANGELOG.md @@ -7,10 +7,13 @@ 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 `tag` component to v1.5 ([#694](https://github.com/Orange-OpenSource/ouds-flutter/issues/694)) +- [Library] update `input tag` component to v1.2 ([#695](https://github.com/Orange-OpenSource/ouds-flutter/issues/695)) - [Library] update tokens 2.5.0 ([#778](https://github.com/Orange-OpenSource/ouds-flutter/issues/778)) - [Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726)) ### Fixed +- [Library] `input tag` the whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481)) ## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14 ### Added diff --git a/ouds_core/lib/components/tag/ouds_input_tag.dart b/ouds_core/lib/components/tag/ouds_input_tag.dart index b8597d743..e6a740005 100644 --- a/ouds_core/lib/components/tag/ouds_input_tag.dart +++ b/ouds_core/lib/components/tag/ouds_input_tag.dart @@ -58,11 +58,7 @@ class OudsInputTag extends StatefulWidget { final String label; final VoidCallback? onPressed; - const OudsInputTag({ - super.key, - required this.label, - this.onPressed, - }); + const OudsInputTag({super.key, required this.label, this.onPressed}); @override State createState() => _OudsInputTagState(); @@ -93,117 +89,158 @@ class _OudsInputTagState extends State { } void _handleFocusChange(bool focus) { - if (widget.onPressed == null) _isFocused = false; // Ignore focus changes if disabled + if (widget.onPressed == null) + _isFocused = false; // Ignore focus changes if disabled setState(() => _isFocused = focus); } @override Widget build(BuildContext context) { final isDisabled = widget.onPressed == null; - final interactionModelHover = OudsInheritedInteractionModel.of(context, InteractionAspect.hover); - final interactionModelPressed = OudsInheritedInteractionModel.of(context, InteractionAspect.pressed); + final interactionModelHover = OudsInheritedInteractionModel.of( + context, + InteractionAspect.hover, + ); + final interactionModelPressed = OudsInheritedInteractionModel.of( + context, + InteractionAspect.pressed, + ); final isHovered = interactionModelHover?.state.isHovered ?? false; final isPressed = interactionModelPressed?.state.isPressed ?? false; - final tagStateDeterminer = OudsTagControlStateDeterminer(enabled: !isDisabled, isPressed: isPressed || _isPressed, isHovered: isHovered || _isHovered, isFocused: _isFocused); + final tagStateDeterminer = OudsTagControlStateDeterminer( + enabled: !isDisabled, + isPressed: isPressed || _isPressed, + isHovered: isHovered || _isHovered, + isFocused: _isFocused, + ); final tagState = tagStateDeterminer.determineControlState(); final tagBorderModifier = OudsInputTagControlBorderModifier(context); final tagTextColorModifier = OudsTagStyleModifier(context); - final tagBackgroundColorModifier = OudsInputTagControlBackgroundColorModifier(context); + final tagBackgroundColorModifier = + OudsInputTagControlBackgroundColorModifier(context); - return Visibility(visible: isVisible, child: _buildInputTag(context, tagBorderModifier, tagTextColorModifier, tagBackgroundColorModifier, tagState, isDisabled)); + return Visibility( + visible: isVisible, + child: _buildInputTag( + context, + tagBorderModifier, + tagTextColorModifier, + tagBackgroundColorModifier, + tagState, + isDisabled, + ), + ); } - Widget _buildInputTag(BuildContext context, OudsInputTagControlBorderModifier tagBorderModifier, OudsTagStyleModifier tagTextColorModifier, - OudsInputTagControlBackgroundColorModifier tagBgColorModifier, OudsTagControlState tagState, bool isDisabled) { + Widget _buildInputTag( + BuildContext context, + OudsInputTagControlBorderModifier tagBorderModifier, + OudsTagStyleModifier tagTextColorModifier, + OudsInputTagControlBackgroundColorModifier tagBgColorModifier, + OudsTagControlState tagState, + bool isDisabled, + ) { final tagToken = OudsTheme.of(context).componentsTokens(context).tag; - final inputTagToken = OudsTheme.of(context).componentsTokens(context).inputTag; + final inputTagToken = OudsTheme.of( + context, + ).componentsTokens(context).inputTag; final borderTokens = OudsTheme.of(context).borderTokens; final l10n = OudsLocalizations.of(context); - return Semantics( - enabled: !isDisabled, - label: l10n?.core_tag_tag_input_role_a11y, - container: true, - button: true, - child: Material( - color: Colors.transparent, - child: Container( - constraints: BoxConstraints( - minHeight: tagToken.sizeMinHeightInteractiveArea, - ), - child: InkWell( - onTap: () { - if (widget.onPressed != null) { - widget.onPressed!.call(); - SemanticsService.announce(l10n?.core_tag_tag_input_removed_a11y(widget.label) ?? '', TextDirection.ltr); - } - }, - focusNode: _focusNode, - canRequestFocus: !isDisabled, - splashColor: Colors.transparent, - highlightColor: Colors.transparent, - focusColor: Colors.transparent, - hoverColor: Colors.transparent, - onHover: (hovering) { - setState(() { - if (!isDisabled) { - _isHovered = hovering; - } - }); - }, - onHighlightChanged: (highlighted) { - setState(() { - if (!isDisabled) { - _isPressed = highlighted; + return MergeSemantics( + child: Semantics( + enabled: !isDisabled, + container: true, + button: true, + child: Material( + color: Colors.transparent, + child: Container( + constraints: BoxConstraints( + minHeight: tagToken.sizeMinHeightInteractiveArea, + ), + child: InkWell( + onTap: () { + if (widget.onPressed != null) { + widget.onPressed!.call(); + SemanticsService.announce( + l10n?.core_tag_tag_input_removed_a11y(widget.label) ?? '', + TextDirection.ltr, + ); } - }); - }, - child: Stack( - clipBehavior: Clip.none, - alignment: Alignment.center, - children: [ - if (_isFocused) - Positioned( - top: borderTokens.widthFocus / 2, - bottom: borderTokens.widthFocus / 2, - left: -borderTokens.widthFocus / 2, + }, + focusNode: _focusNode, + canRequestFocus: !isDisabled, + splashColor: Colors.transparent, + highlightColor: Colors.transparent, + focusColor: Colors.transparent, + hoverColor: Colors.transparent, + onHover: (hovering) { + setState(() { + if (!isDisabled) { + _isHovered = hovering; + } + }); + }, + onHighlightChanged: (highlighted) { + setState(() { + if (!isDisabled) { + _isPressed = highlighted; + } + }); + }, + child: Stack( + clipBehavior: Clip.none, + alignment: Alignment.center, + children: [ + if (_isFocused) + Positioned( + top: borderTokens.widthFocus / 2, + bottom: borderTokens.widthFocus / 2, + left: -borderTokens.widthFocus / 2, - /// to be changed to enhancement the focus. - right: -borderTokens.widthFocus / 2, + /// to be changed to enhancement the focus. + right: -borderTokens.widthFocus / 2, - /// to be changed to enhancement the focus. - child: Container( - decoration: BoxDecoration( - border: OudsBorder().borderAll( - color: OudsTheme.of(context).colorScheme(context).borderFocus, - width: borderTokens.widthFocus, - ), - borderRadius: BorderRadius.circular( - tagToken.borderRadius + borderTokens.widthFocus, + /// to be changed to enhancement the focus. + child: Container( + decoration: BoxDecoration( + border: OudsBorder().borderAll( + color: OudsTheme.of( + context, + ).colorScheme(context).borderFocus, + width: borderTokens.widthFocus, + ), + borderRadius: BorderRadius.circular( + tagToken.borderRadius + borderTokens.widthFocus, + ), ), ), ), - ), - Container( - decoration: BoxDecoration( - border: OudsBorder().borderAll( - color: _isFocused ? OudsTheme.of(context).colorScheme(context).borderFocusInset : Colors.transparent, - width: inputTagToken.borderWidthDefaultInteraction, + Container( + decoration: BoxDecoration( + border: OudsBorder().borderAll( + color: _isFocused + ? OudsTheme.of( + context, + ).colorScheme(context).borderFocusInset + : Colors.transparent, + width: inputTagToken.borderWidthDefaultInteraction, + ), + borderRadius: BorderRadius.circular( + tagToken.borderRadius, + ), ), - borderRadius: BorderRadius.circular( - tagToken.borderRadius, + child: _buildLayout( + context, + tagBorderModifier, + tagTextColorModifier, + tagBgColorModifier, + tagState, + isDisabled, ), ), - child: _buildLayout( - context, - tagBorderModifier, - tagTextColorModifier, - tagBgColorModifier, - tagState, - isDisabled, - ), - ), - ], + ], + ), ), ), ), @@ -211,8 +248,14 @@ class _OudsInputTagState extends State { ); } - Widget _buildLayout(BuildContext context, OudsInputTagControlBorderModifier tagBorderModifier, OudsTagStyleModifier tagTextColorModifier, - OudsInputTagControlBackgroundColorModifier tagBgColorModifier, OudsTagControlState tagState, bool isDisabled) { + Widget _buildLayout( + BuildContext context, + OudsInputTagControlBorderModifier tagBorderModifier, + OudsTagStyleModifier tagTextColorModifier, + OudsInputTagControlBackgroundColorModifier tagBgColorModifier, + OudsTagControlState tagState, + bool isDisabled, + ) { final tagToken = OudsTheme.of(context).componentsTokens(context).tag; final typographyTokens = OudsTheme.of(context).typographyTokens; @@ -222,18 +265,14 @@ class _OudsInputTagState extends State { child: Container( decoration: BoxDecoration( border: tagBorderModifier.getBorder(tagState), - borderRadius: BorderRadius.circular( - tagToken.borderRadius, - ), + borderRadius: BorderRadius.circular(tagToken.borderRadius), ), ), ), // Content (e.g., Row with icon and label)... ClipRRect( - borderRadius: BorderRadius.circular( - tagToken.borderRadius, - ), + borderRadius: BorderRadius.circular(tagToken.borderRadius), child: Container( color: tagBgColorModifier.getBackgroundColor(tagState), padding: EdgeInsetsDirectional.only( @@ -248,16 +287,22 @@ class _OudsInputTagState extends State { crossAxisAlignment: CrossAxisAlignment.center, children: [ Flexible( - child: Text(widget.label, - textAlign: TextAlign.center, - style: typographyTokens.typeLabelStrongMedium(context).copyWith( - color: tagTextColorModifier.getTextColor(tagState), - )), + child: Text( + widget.label, + textAlign: TextAlign.center, + style: typographyTokens + .typeLabelModerateMedium(context) + .copyWith( + color: tagTextColorModifier.getTextColor(tagState), + ), + ), ), SizedBox(width: tagToken.spaceColumnGapDefault), Semantics( container: true, - label: OudsLocalizations.of(context)?.core_inputTag_delete_a11y, + label: OudsLocalizations.of( + context, + )?.core_inputTag_delete_a11y, button: true, child: SvgPicture.asset( excludeFromSemantics: true, @@ -267,7 +312,9 @@ class _OudsInputTagState extends State { package: OudsTheme.of(context).packageName, fit: BoxFit.contain, colorFilter: ColorFilter.mode( - OudsInputTagControlIconColorModifier(context).getIconColor(tagState)!, + OudsInputTagControlIconColorModifier( + context, + ).getIconColor(tagState)!, BlendMode.srcIn, ), ), diff --git a/ouds_core/lib/components/tag/ouds_tag.dart b/ouds_core/lib/components/tag/ouds_tag.dart index 792671b97..d1d39acb9 100644 --- a/ouds_core/lib/components/tag/ouds_tag.dart +++ b/ouds_core/lib/components/tag/ouds_tag.dart @@ -19,29 +19,21 @@ import 'package:ouds_core/components/tag/internal/ouds_tag_border_modifier.dart' import 'package:ouds_core/components/tag/internal/ouds_tag_size_modifier.dart'; import 'package:ouds_core/components/tag/internal/ouds_tag_status_modifier.dart'; import 'package:ouds_core/components/tag/internal/ouds_tag_text_style_modifier.dart'; +import 'package:ouds_core/components/utilities/app_assets.dart'; import 'package:ouds_core/l10n/gen/ouds_localizations.dart'; import 'package:ouds_theme_contract/ouds_theme.dart'; - ///The [OudsTagLayout] defines the layout of the tag’s content. /// /// This enum controls whether the tag displays text, an icon, a bullet or loader -enum OudsTagLayout { - textOnly, - textAndBullet, - textAndIcon, -} +enum OudsTagLayout { textOnly, textAndBullet, textAndIcon } /// Enum representing the state of the tag control. -@Deprecated('Use OudsIconStatus instead. This enum will be removed in a future version.') -enum OudsTagStatus { - neutral, - accent, - positive, - info, - warning, - negative, -} +@Deprecated( + 'Use OudsIconStatus instead. This enum will be removed in a future version.', +) +enum OudsTagStatus { neutral, accent, positive, info, warning, negative } + /// @nodoc // deprecation remove : this enum is added only to support the deprecated enum and will be removed after deprecation extension OudsTagStatusConverter on OudsTagStatus { @@ -62,16 +54,10 @@ extension OudsTagStatusConverter on OudsTagStatus { } /// The [OudsTagSize] defines the tag's visual size. -enum OudsTagSize { - defaultSize, - small; -} +enum OudsTagSize { defaultSize, small } /// The [OudsTagAppearance] enum defines the visual importance of the tag within the UI. -enum OudsTagAppearance { - emphasized, - muted; -} +enum OudsTagAppearance { emphasized, muted } /// /// [OUDS Tag Design Guidelines](https://r.orange.fr/r/S-ouds-doc-tag) @@ -198,11 +184,15 @@ enum OudsTagAppearance { class OudsTag extends StatefulWidget { final String label; final bool enabled; - @Deprecated('Use status of type OudsIconStatus instead. This parameter will be removed in a future version.') + @Deprecated( + 'Use status of type OudsIconStatus instead. This parameter will be removed in a future version.', + ) final OudsTagStatus? _deprecatedStatus; final OudsTagSize? size; final OudsTagAppearance appearance; - @Deprecated('icon is now defined by status (OudsIconStatus). Use Accent(icon: ...) or Neutral(icon: ...) for custom icons.') + @Deprecated( + 'icon is now defined by status (OudsIconStatus). Use Accent(icon: ...) or Neutral(icon: ...) for custom icons.', + ) final String? icon; final OudsTagLayout layout; final bool loading; @@ -210,95 +200,74 @@ class OudsTag extends StatefulWidget { final bool roundedCorners; /// ⚠️ **DEPRECATED:** Use [OudsTag.text], [OudsTag.icon], or [OudsTag.bullet] constructors instead. - @Deprecated('Use named constructors for clarity: OudsTag.text() for text only type, OudsTag.icon() for text and icon type, or OudsTag.bullet() for text and bullet type.' - ' This constructor will be removed in a future version.') - const OudsTag( - {super.key, - required this.label, - this.enabled = true, - @Deprecated('Use iconStatus instead. This parameter will be removed in a future version.') - final OudsTagStatus? status, - this.appearance = OudsTagAppearance.emphasized, - this.size = OudsTagSize.defaultSize, - @Deprecated('icon is now defined by status (OudsIconStatus). Use Accent(icon: ...) or Neutral(icon: ...) for custom icons.') - this.icon, - this.layout = OudsTagLayout.textOnly, - this.loading = false, - this.roundedCorners = true, - }) : _deprecatedStatus = status, - status = null; - - const OudsTag.text( - {super.key, - required this.label, - this.enabled = true, - required this.status, - this.appearance = OudsTagAppearance.emphasized, - this.size = OudsTagSize.defaultSize, - this.layout = OudsTagLayout.textOnly, - this.loading = false, - this.roundedCorners = true, - }) : icon = null, - _deprecatedStatus = null; + @Deprecated( + 'Use named constructors for clarity: OudsTag.text() for text only type, OudsTag.icon() for text and icon type, or OudsTag.bullet() for text and bullet type.' + ' This constructor will be removed in a future version.', + ) + const OudsTag({ + super.key, + required this.label, + this.enabled = true, + @Deprecated( + 'Use iconStatus instead. This parameter will be removed in a future version.', + ) + final OudsTagStatus? status, + this.appearance = OudsTagAppearance.emphasized, + this.size = OudsTagSize.defaultSize, + @Deprecated( + 'icon is now defined by status (OudsIconStatus). Use Accent(icon: ...) or Neutral(icon: ...) for custom icons.', + ) + this.icon, + this.layout = OudsTagLayout.textOnly, + this.loading = false, + this.roundedCorners = true, + }) : _deprecatedStatus = status, + status = null; - const OudsTag.bullet( - {super.key, - required this.label, - this.enabled = true, - required this.status, - this.appearance = OudsTagAppearance.emphasized, - this.size = OudsTagSize.defaultSize, - this.layout = OudsTagLayout.textAndBullet, - this.loading = false, - this.roundedCorners = true, - }) : icon = null, - _deprecatedStatus = null; + const OudsTag.text({ + super.key, + required this.label, + this.enabled = true, + required this.status, + this.appearance = OudsTagAppearance.emphasized, + this.size = OudsTagSize.defaultSize, + this.layout = OudsTagLayout.textOnly, + this.loading = false, + this.roundedCorners = true, + }) : icon = null, + _deprecatedStatus = null; - const OudsTag.icon( - {super.key, - required this.label, - this.enabled = true, - required this.status, - this.appearance = OudsTagAppearance.emphasized, - this.size = OudsTagSize.defaultSize, - this.layout = OudsTagLayout.textAndIcon, - this.loading = false, - this.roundedCorners = true, - }) : icon = null, - _deprecatedStatus = null; - - //deprecation remove: The param state will be removed after deprecation - static Widget buildIcon( - BuildContext context, - String? assetName, - OudsTagStatus? state, - OudsIconStatus? status, - OudsTagAppearance hierarchy, - bool isEnabled) { - final statusModifier = OudsTagStatusModifier(context); - - //get the asset name from status for neutral and accent status (icon defined by user) - final assetIconName = statusModifier.getAssetsName(status); - final icon = statusModifier.getStatusIcon(state, status); + const OudsTag.bullet({ + super.key, + required this.label, + this.enabled = true, + required this.status, + this.appearance = OudsTagAppearance.emphasized, + this.size = OudsTagSize.defaultSize, + this.layout = OudsTagLayout.textAndBullet, + this.loading = false, + this.roundedCorners = true, + }) : icon = null, + _deprecatedStatus = null; - return SvgPicture.asset( - excludeFromSemantics: true, - icon ?? assetName ?? assetIconName ?? "", - package: icon != null ? OudsTheme.of(context).packageName : null, - fit: BoxFit.contain, - colorFilter: ColorFilter.mode( - statusModifier.getStatusIconColor(state,status, hierarchy, isEnabled), - BlendMode.srcIn, - ), - ); - } + const OudsTag.icon({ + super.key, + required this.label, + this.enabled = true, + required this.status, + this.appearance = OudsTagAppearance.emphasized, + this.size = OudsTagSize.defaultSize, + this.layout = OudsTagLayout.textAndIcon, + this.loading = false, + this.roundedCorners = true, + }) : icon = null, + _deprecatedStatus = null; @override State createState() => _OudsTagState(); } class _OudsTagState extends State { - OudsIconStatus? get _effectiveStatus => widget.status ?? widget._deprecatedStatus?.toIconStatus(); @@ -315,27 +284,124 @@ class _OudsTagState extends State { final l10n = OudsLocalizations.of(context); return Semantics( - label: widget.loading ? "${l10n?.core_common_loading_a11y}, ${widget.label}" : widget.label, + label: widget.loading + ? "${l10n?.core_common_loading_a11y}, ${widget.label}" + : widget.label, enabled: widget.enabled, child: Material( color: Colors.transparent, - child: ExcludeSemantics(child: _buildTag(context, tagStatusModifier, tagSizeModifier, tagStyleModifier)), + child: ExcludeSemantics( + child: _buildTag( + context, + tagStatusModifier, + tagSizeModifier, + tagStyleModifier, + ), + ), ), ); } - Widget _buildTag(BuildContext context, OudsTagStatusModifier tagStatusModifier, OudsTagSizeModifier tagSizeModifier, tagStyleModifier) { + Widget _buildTag( + BuildContext context, + OudsTagStatusModifier tagStatusModifier, + OudsTagSizeModifier tagSizeModifier, + tagStyleModifier, + ) { if (widget.loading) { - return _buildTagTextAndLoader(context, tagStatusModifier, tagSizeModifier, tagStyleModifier); + return _buildTagTextAndLoader( + context, + tagStatusModifier, + tagSizeModifier, + tagStyleModifier, + ); } return switch (widget.layout) { - OudsTagLayout.textOnly => _buildTagTextOnly(context, tagStatusModifier, tagSizeModifier, tagStyleModifier), - OudsTagLayout.textAndBullet => _buildTagTextAndBullet(context, tagStatusModifier, tagSizeModifier, tagStyleModifier), - OudsTagLayout.textAndIcon => _buildTagTextAndIcon(context, tagStatusModifier, tagSizeModifier, tagStyleModifier), + OudsTagLayout.textOnly => _buildTagTextOnly( + context, + tagStatusModifier, + tagSizeModifier, + tagStyleModifier, + ), + OudsTagLayout.textAndBullet => _buildTagTextAndBullet( + context, + tagStatusModifier, + tagSizeModifier, + tagStyleModifier, + ), + OudsTagLayout.textAndIcon => _buildTagTextAndIcon( + context, + tagStatusModifier, + tagSizeModifier, + tagStyleModifier, + ), }; } + //deprecation remove: The param state will be removed after deprecation + Widget _buildIcon( + BuildContext context, + String? assetName, + OudsTagStatus? state, + OudsIconStatus? status, + OudsTagAppearance hierarchy, + bool isEnabled, + ) { + final statusModifier = OudsTagStatusModifier(context); + + //get the asset name from status for neutral and accent status (icon defined by user) + final assetIconName = statusModifier.getAssetsName(status); + final icon = statusModifier.getStatusIcon(state, status); + + if (hierarchy == OudsTagAppearance.muted && + (status is Warning || state == OudsTagStatus.warning)) { + final iconTokens = OudsTheme.of(context).componentsTokens(context).icon; + + return Stack( + alignment: Alignment.center, + children: [ + // Background shape + SizedBox.expand( + child: SvgPicture.asset( + excludeFromSemantics: true, + fit: BoxFit.contain, + AppAssets.icons.componentAlertWarningExternalShape, + colorFilter: ColorFilter.mode( + iconTokens.colorContentStatusWarningExternalShape, + BlendMode.srcIn, + ), + package: OudsTheme.of(context).packageName, + ), + ), + // Foreground shape + SizedBox.expand( + child: SvgPicture.asset( + excludeFromSemantics: true, + fit: BoxFit.contain, + AppAssets.icons.componentAlertWarningInternalShape, + colorFilter: ColorFilter.mode( + iconTokens.colorContentStatusWarningInternalShape, + BlendMode.srcIn, + ), + package: OudsTheme.of(context).packageName, + ), + ), + ], + ); + } + return SvgPicture.asset( + excludeFromSemantics: true, + icon ?? assetName ?? assetIconName ?? "", + package: icon != null ? OudsTheme.of(context).packageName : null, + fit: BoxFit.contain, + colorFilter: ColorFilter.mode( + statusModifier.getStatusIconColor(state, status, hierarchy, isEnabled), + BlendMode.srcIn, + ), + ); + } + Widget _buildTagTextAndLoader( BuildContext context, OudsTagStatusModifier tagStatusModifier, @@ -343,82 +409,135 @@ class _OudsTagState extends State { OudsTagStyleModifier tagStyleModifier, ) { final minWidthAndHeight = tagSizeModifier.getMinWidthAndHeight(widget.size); - final widthAndHeightAssetsContainer = tagSizeModifier.getAssetsSize(widget.size); + final widthAndHeightAssetsContainer = tagSizeModifier.getAssetsSize( + widget.size, + ); return Container( decoration: BoxDecoration( - borderRadius: OudsTagControlBorderModifier.getBorderRadius(context,widget.roundedCorners), + borderRadius: OudsTagControlBorderModifier.getBorderRadius( + context, + widget.roundedCorners, + ), color: OudsTheme.of(context).colorScheme(context).surfaceSecondary, ), - constraints: BoxConstraints(minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0), + constraints: BoxConstraints( + minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, + minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0, + ), padding: tagSizeModifier.getPadding(widget.size, true), child: Row( mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( - width: widthAndHeightAssetsContainer[OudsTagDimensions.width.name], - height: widthAndHeightAssetsContainer[OudsTagDimensions.height.name], + width: MediaQuery.textScalerOf(context).scale( + widthAndHeightAssetsContainer[OudsTagDimensions.width.name] ?? + 0.0, + ), + height: MediaQuery.textScalerOf(context).scale( + widthAndHeightAssetsContainer[OudsTagDimensions.height.name] ?? + 0.0, + ), child: Semantics( child: CircularProgressIndicator( padding: tagSizeModifier.getLoadingAssetsPadding(widget.size), - color: OudsTheme.of(context).colorScheme(context).contentDefault, - strokeWidth: OudsTheme.of(context).spaceScheme(context).scaledThreeExtraSmall, + color: OudsTheme.of( + context, + ).colorScheme(context).contentDefault, + strokeWidth: MediaQuery.textScalerOf(context).scale( + OudsTheme.of( + context, + ).spaceScheme(context).scaledThreeExtraSmall, + ), ), ), ), SizedBox(width: tagSizeModifier.getSizeColumnGap(widget.size)), Flexible( - child: - Text(widget.label, - textAlign: TextAlign.center, - style: tagStyleModifier.buildTagTextStyle( - appearance: widget.appearance, - state: widget._deprecatedStatus, - status: _effectiveStatus, - size: widget.size ?? OudsTagSize.defaultSize, - isLoading: widget.loading, - isEnabled: widget.enabled)), + child: Text( + widget.label, + textAlign: TextAlign.center, + style: tagStyleModifier.buildTagTextStyle( + appearance: widget.appearance, + state: widget._deprecatedStatus, + status: _effectiveStatus, + size: widget.size ?? OudsTagSize.defaultSize, + isLoading: widget.loading, + isEnabled: widget.enabled, + ), + ), ), ], ), ); } - Widget _buildTagTextAndIcon(BuildContext context, OudsTagStatusModifier tagStatusModifier, OudsTagSizeModifier tagSizeModifier, OudsTagStyleModifier tagStyleModifier) { + Widget _buildTagTextAndIcon( + BuildContext context, + OudsTagStatusModifier tagStatusModifier, + OudsTagSizeModifier tagSizeModifier, + OudsTagStyleModifier tagStyleModifier, + ) { final minWidthAndHeight = tagSizeModifier.getMinWidthAndHeight(widget.size); - final widthAndHeightAssetsContainer = tagSizeModifier.getAssetsSize(widget.size); + final widthAndHeightAssetsContainer = tagSizeModifier.getAssetsSize( + widget.size, + ); return Container( decoration: BoxDecoration( - borderRadius: OudsTagControlBorderModifier.getBorderRadius(context,widget.roundedCorners), - color: tagStatusModifier.getStatusColor(widget._deprecatedStatus,_effectiveStatus, widget.appearance, widget.enabled), + borderRadius: OudsTagControlBorderModifier.getBorderRadius( + context, + widget.roundedCorners, + ), + color: tagStatusModifier.getStatusColor( + widget._deprecatedStatus, + _effectiveStatus, + widget.appearance, + widget.enabled, + ), + ), + constraints: BoxConstraints( + minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, + minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0, ), - constraints: BoxConstraints(minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0), padding: tagSizeModifier.getPadding(widget.size, true), child: Row( mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( - padding: tagSizeModifier.getAssetsPadding(widget.size, OudsTagLayout.textAndIcon), - width: widthAndHeightAssetsContainer[OudsTagDimensions.width.name], - height: widthAndHeightAssetsContainer[OudsTagDimensions.height.name], - child: OudsTag.buildIcon( - context, widget.icon, widget._deprecatedStatus,_effectiveStatus, - widget.appearance, widget.enabled), - ), - SizedBox( - width: tagSizeModifier.getSizeColumnGap(widget.size), + padding: tagSizeModifier.getAssetsPadding( + widget.size, + OudsTagLayout.textAndIcon, + ), + width: MediaQuery.textScalerOf(context).scale( + widthAndHeightAssetsContainer[OudsTagDimensions.width.name] ?? 00, + ), + height: MediaQuery.textScalerOf(context).scale( + widthAndHeightAssetsContainer[OudsTagDimensions.height.name] ?? + 00, + ), + child: _buildIcon( + context, + widget.icon, + widget._deprecatedStatus, + _effectiveStatus, + widget.appearance, + widget.enabled, + ), ), + SizedBox(width: tagSizeModifier.getSizeColumnGap(widget.size)), Flexible( child: Text( widget.label, textAlign: TextAlign.center, style: tagStyleModifier.buildTagTextStyle( - appearance: widget.appearance, state: widget._deprecatedStatus, - status: _effectiveStatus, size: widget.size, isEnabled: widget.enabled), + appearance: widget.appearance, + state: widget._deprecatedStatus, + status: _effectiveStatus, + size: widget.size, + isEnabled: widget.enabled, + ), ), ), ], @@ -426,69 +545,119 @@ class _OudsTagState extends State { ); } - Widget _buildTagTextAndBullet(BuildContext context, OudsTagStatusModifier tagStatusModifier, OudsTagSizeModifier tagSizeModifier, OudsTagStyleModifier tagStyleModifier) { + Widget _buildTagTextAndBullet( + BuildContext context, + OudsTagStatusModifier tagStatusModifier, + OudsTagSizeModifier tagSizeModifier, + OudsTagStyleModifier tagStyleModifier, + ) { final tagToken = OudsTheme.of(context).componentsTokens(context).tag; final minWidthAndHeight = tagSizeModifier.getMinWidthAndHeight(widget.size); - final widthAndHeightAssetsContainer = tagSizeModifier.getAssetsSize(widget.size); + final widthAndHeightAssetsContainer = tagSizeModifier.getAssetsSize( + widget.size, + ); return Container( decoration: BoxDecoration( - borderRadius: OudsTagControlBorderModifier.getBorderRadius(context,widget.roundedCorners), - color: tagStatusModifier.getStatusColor(widget._deprecatedStatus, _effectiveStatus, widget.appearance, widget.enabled), + borderRadius: OudsTagControlBorderModifier.getBorderRadius( + context, + widget.roundedCorners, + ), + color: tagStatusModifier.getStatusColor( + widget._deprecatedStatus, + _effectiveStatus, + widget.appearance, + widget.enabled, + ), + ), + constraints: BoxConstraints( + minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, + minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0, ), - constraints: BoxConstraints(minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0), padding: tagSizeModifier.getPadding(widget.size, true), child: Row( mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( - padding: tagSizeModifier.getAssetsPadding(widget.size, OudsTagLayout.textAndBullet), - width: widthAndHeightAssetsContainer[OudsTagDimensions.width.name], - height: widthAndHeightAssetsContainer[OudsTagDimensions.height.name], + padding: tagSizeModifier.getAssetsPadding( + widget.size, + OudsTagLayout.textAndBullet, + ), + width: MediaQuery.textScalerOf(context).scale( + widthAndHeightAssetsContainer[OudsTagDimensions.width.name] ?? 0, + ), + height: MediaQuery.textScalerOf(context).scale( + widthAndHeightAssetsContainer[OudsTagDimensions.height.name] ?? 0, + ), child: Container( width: 10, height: 10, decoration: BoxDecoration( color: tagStatusModifier.getStatusIconColor( - widget._deprecatedStatus, _effectiveStatus, - widget.appearance, widget.enabled), + widget._deprecatedStatus, + _effectiveStatus, + widget.appearance, + widget.enabled, + ), shape: BoxShape.circle, ), ), ), SizedBox( - width: widget.size == OudsTagSize.small ? tagToken.spaceColumnGapSmall : tagToken.spaceColumnGapDefault, + width: widget.size == OudsTagSize.small + ? tagToken.spaceColumnGapSmall + : tagToken.spaceColumnGapDefault, ), Flexible( child: Text( - widget.label, textAlign: TextAlign.center, - style: tagStyleModifier.buildTagTextStyle( - appearance: widget.appearance, state: widget._deprecatedStatus, - status: _effectiveStatus, size: widget.size, - isEnabled: widget.enabled)), + widget.label, + textAlign: TextAlign.center, + style: tagStyleModifier.buildTagTextStyle( + appearance: widget.appearance, + state: widget._deprecatedStatus, + status: _effectiveStatus, + size: widget.size, + isEnabled: widget.enabled, + ), + ), ), ], ), ); } - Widget _buildTagTextOnly(BuildContext context, OudsTagStatusModifier tagStatusModifier, OudsTagSizeModifier tagSizeModifier, OudsTagStyleModifier tagStyleModifier) { + Widget _buildTagTextOnly( + BuildContext context, + OudsTagStatusModifier tagStatusModifier, + OudsTagSizeModifier tagSizeModifier, + OudsTagStyleModifier tagStyleModifier, + ) { final minWidthAndHeight = tagSizeModifier.getMinWidthAndHeight(widget.size); return Semantics( child: Stack( children: [ ClipRRect( - borderRadius: OudsTagControlBorderModifier.getBorderRadius(context,widget.roundedCorners), + borderRadius: OudsTagControlBorderModifier.getBorderRadius( + context, + widget.roundedCorners, + ), child: Container( - constraints: BoxConstraints(minHeight: minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, minWidth: minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0), - color: tagStatusModifier.getStatusColor(widget._deprecatedStatus, - _effectiveStatus, widget.appearance, widget.enabled), + constraints: BoxConstraints( + minHeight: + minWidthAndHeight[OudsTagDimensions.height.name] ?? 0.0, + minWidth: + minWidthAndHeight[OudsTagDimensions.width.name] ?? 0.0, + ), + color: tagStatusModifier.getStatusColor( + widget._deprecatedStatus, + _effectiveStatus, + widget.appearance, + widget.enabled, + ), padding: tagSizeModifier.getPadding(widget.size, false), child: Row( mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Flexible( @@ -496,8 +665,12 @@ class _OudsTagState extends State { widget.label, textAlign: TextAlign.center, style: tagStyleModifier.buildTagTextStyle( - appearance: widget.appearance, state: widget._deprecatedStatus, - status: _effectiveStatus, size: widget.size, isEnabled: widget.enabled), + appearance: widget.appearance, + state: widget._deprecatedStatus, + status: _effectiveStatus, + size: widget.size, + isEnabled: widget.enabled, + ), ), ), ], diff --git a/ouds_global_raw_tokens/CHANGELOG.md b/ouds_global_raw_tokens/CHANGELOG.md index a82803f6c..6e35b8922 100644 --- a/ouds_global_raw_tokens/CHANGELOG.md +++ b/ouds_global_raw_tokens/CHANGELOG.md @@ -7,6 +7,8 @@ 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 tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726)) + ### Fixed ## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14