diff --git a/NOTICE.txt b/NOTICE.txt index f1bca1d3c..e7e1f4003 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -121,6 +121,11 @@ ouds_theme_orange/assets/functional/social-and-engagement/heart-empty.svg ouds_theme_orange/assets/functional/settings-and-tools/hide.svg ouds_theme_orange/assets/functional/navigation/menu.svg ouds_theme_orange/assets/component/bullet-list/bullet-level-0.svg +ouds_theme_orange/assets/component/badge-icon/warning-external-shape.svg +ouds_theme_orange/assets/component/badge-icon/warning-internal-shape.svg +ouds_theme_orange/assets/component/badge-icon/error-fill.svg +ouds_theme_orange/assets/component/badge-icon/info-fill.svg +ouds_theme_orange/assets/component/badge-icon/tick-confirmation-fill.svg ouds_theme_orange/fonts/Roboto-Black.ttf @@ -167,6 +172,12 @@ ouds_theme_orange_compact/assets/functional/social-and-engagement/heart-empty.sv ouds_theme_orange_compact/assets/functional/settings-and-tools/hide.svg ouds_theme_orange_compact/assets/functional/navigation/menu.svg ouds_theme_orange_compact/assets/component/bullet-list/bullet-level-0.svg +ouds_theme_orange_compact/assets/component/badge-icon/warning-external-shape.svg +ouds_theme_orange_compact/assets/component/badge-icon/warning-internal-shape.svg +ouds_theme_orange_compact/assets/component/badge-icon/error-fill.svg +ouds_theme_orange_compact/assets/component/badge-icon/info-fill.svg +ouds_theme_orange_compact/assets/component/badge-icon/tick-confirmation-fill.svg + ouds_theme_orange_compact/fonts/Roboto-Black.ttf ouds_theme_orange_compact/fonts/Roboto-Bold.ttf @@ -211,6 +222,12 @@ ouds_theme_sosh/assets/functional/social-and-engagement/heart-empty.svg ouds_theme_sosh/assets/functional/settings-and-tools/hide.svg ouds_theme_sosh/assets/functional/navigation/menu.svg ouds_theme_sosh/assets/component/bullet-list/bullet-level-0.svg +ouds_theme_sosh/assets/component/badge-icon/warning-external-shape.svg +ouds_theme_sosh/assets/component/badge-icon/warning-internal-shape.svg +ouds_theme_sosh/assets/component/badge-icon/error-fill.svg +ouds_theme_sosh/assets/component/badge-icon/info-fill.svg +ouds_theme_sosh/assets/component/badge-icon/tick-confirmation-fill.svg + ouds_theme_sosh/fonts/Sosh-Black.ttf ouds_theme_sosh/fonts/Sosh-Bold.ttf @@ -249,6 +266,12 @@ ouds_theme_wireframe/assets/component/tag/close.svg ouds_theme_wireframe/assets/functional/social-and-engagement/heart-empty.svg ouds_theme_wireframe/assets/functional/settings-and-tools/hide.svg ouds_theme_wireframe/assets/functional/navigation/menu.svg +ouds_theme_wireframe/assets/component/badge-icon/warning-external-shape.svg +ouds_theme_wireframe/assets/component/badge-icon/warning-internal-shape.svg +ouds_theme_wireframe/assets/component/badge-icon/error-fill.svg +ouds_theme_wireframe/assets/component/badge-icon/info-fill.svg +ouds_theme_wireframe/assets/component/badge-icon/tick-confirmation-fill.svg + ouds_theme_wireframe/fonts/ShantellSans-Bold.ttf ouds_theme_wireframe/fonts/ShantellSans-BoldItalic.ttf diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md index 9ce6c5558..6d6c052d9 100644 --- a/app/CHANGELOG.md +++ b/app/CHANGELOG.md @@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14 ### Added ### Changed +- [DemoApp][Library] update `badge icon` component to 1.3.0 ([#680](https://github.com/Orange-OpenSource/ouds-flutter/issues/680)) +- [DemoApp][Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726)) + ### Fixed - [Library] Null check operator used on a null value in all components has isHighContrastEnabled ([#756](https://github.com/Orange-OpenSource/ouds-flutter/issues/756)) - [DemoApp] Layout Overflow on Demo Screen for component version when system font size is increased for accessibility. ([#748](https://github.com/Orange-OpenSource/ouds-flutter/issues/748)) diff --git a/app/lib/ui/components/badge/badge_customization.dart b/app/lib/ui/components/badge/badge_customization.dart index 378b21876..bda64b375 100644 --- a/app/lib/ui/components/badge/badge_customization.dart +++ b/app/lib/ui/components/badge/badge_customization.dart @@ -91,9 +91,7 @@ class BadgeCustomizationState final isSmallSize = selectedState == BadgeEnumSize.xsmall || selectedState == BadgeEnumSize.small; - final isTypeTrigger = - selectedType == BadgeEnumType.icon || - selectedType == BadgeEnumType.count; + final isTypeTrigger = selectedType == BadgeEnumType.count; if (isSmallSize && isTypeTrigger) { selectedState = BadgeEnumSize.medium; @@ -101,9 +99,7 @@ class BadgeCustomizationState } bool isSizeDisabled(BadgeEnumSize size) { - final isTypeTrigger = - selectedType == BadgeEnumType.icon || - selectedType == BadgeEnumType.count; + final isTypeTrigger = selectedType == BadgeEnumType.count; if (isTypeTrigger && (size == BadgeEnumSize.xsmall || size == BadgeEnumSize.small)) { return true; diff --git a/app/lib/ui/components/badge/badge_demo_screen.dart b/app/lib/ui/components/badge/badge_demo_screen.dart index b325b7dbf..e237ed491 100644 --- a/app/lib/ui/components/badge/badge_demo_screen.dart +++ b/app/lib/ui/components/badge/badge_demo_screen.dart @@ -105,10 +105,25 @@ class _Body extends StatefulWidget { class _BodyState extends State<_Body> { @override Widget build(BuildContext context) { + final customizationState = BadgeCustomization.of(context)!; ThemeController? themeController = Provider.of( context, listen: false, ); + + //after update of badge component, each variant of badge component have his only version, + // so we need to retrieve the version based on the selected type + String getVersion() { + switch (customizationState.selectedType) { + case BadgeEnumType.standard: + return OudsComponentVersion.badge; + case BadgeEnumType.count: + return OudsComponentVersion.badgeCount; + case BadgeEnumType.icon: + return OudsComponentVersion.badgeIcon; + } + } + return DetailScreenDescription( description: context.l10n.app_components_badge_description_text, widget: Column( @@ -120,7 +135,9 @@ class _BodyState extends State<_Body> { .fixedMedium, ), Code(code: BadgeCodeGenerator.updateCode(context)), - ReferenceDesignVersionComponent(version: OudsComponentVersion.badge), + //after update of badge component, each variant of badge component have his only version, + // so we need to retrieve the version based on the selected type + ReferenceDesignVersionComponent(version: getVersion()), ], ), ); @@ -280,7 +297,6 @@ class _CustomizationContentState extends State<_CustomizationContent> { onSelected: (selectedOption) { setState(() { bool isTypeTrigger = - customizationState.selectedType == BadgeEnumType.icon || customizationState.selectedType == BadgeEnumType.count; bool isSizeTrigger = selectedOption == BadgeEnumSize.xsmall || diff --git a/ouds_core/CHANGELOG.md b/ouds_core/CHANGELOG.md index 97bae6427..924edb728 100644 --- a/ouds_core/CHANGELOG.md +++ b/ouds_core/CHANGELOG.md @@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [1.3.1](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.0...1.3.1) - 2026-05-14 ### Added ### Changed +- [Library] update `badge` icon component to 1.3.0 ([#680](https://github.com/Orange-OpenSource/ouds-flutter/issues/680)) +- [Library] update tokens 2.4.0 ([#726](https://github.com/Orange-OpenSource/ouds-flutter/issues/726)) + ### Fixed - [Library] Null check operator used on a null value in all components has isHighContrastEnabled ([#756](https://github.com/Orange-OpenSource/ouds-flutter/issues/756)) - [Library] `Pin code input` Paste of less than 4 characters drops or merges characters ([#749](https://github.com/Orange-OpenSource/ouds-flutter/issues/749)) diff --git a/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart b/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart index f0f6660c7..b0ad5845d 100644 --- a/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart +++ b/ouds_core/lib/components/badge/internal/ouds_badge_size_modifier.dart @@ -15,8 +15,9 @@ library; import 'package:flutter/material.dart'; -import 'package:ouds_theme_contract/ouds_theme.dart'; import 'package:ouds_core/components/badge/ouds_badge.dart'; +import 'package:ouds_core/components/common/ouds_icon_status.dart'; +import 'package:ouds_theme_contract/ouds_theme.dart'; class OudsBadgeSizeModifier { final BuildContext context; @@ -40,4 +41,29 @@ class OudsBadgeSizeModifier { return theme.sizeMedium; } } + + double getBadgeIconOffsetsPadding( + OudsBadgeStatus? state, + OudsBadgeSize? size, + OudsIconStatus? status, + ) { + final badgeToken = OudsTheme.of(context).componentsTokens(context).badge; + if ((state != null && + (state != OudsBadgeStatus.neutral && + state != OudsBadgeStatus.accent)) || + !OudsIconStatus.functionalStatuses.contains(status.runtimeType)) { + switch (size) { + case OudsBadgeSize.xsmall: + return badgeToken.spaceInsetXsmall; + case OudsBadgeSize.small: + return badgeToken.spaceInsetSmall; + case OudsBadgeSize.medium: + case OudsBadgeSize.large: + return badgeToken.spaceInsetMediumLarge; + case null: + return badgeToken.sizeMedium; + } + } + return 0.0; + } } diff --git a/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart b/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart index 91e3ca455..90c773e69 100644 --- a/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart +++ b/ouds_core/lib/components/badge/internal/ouds_badge_status_modifier.dart @@ -28,14 +28,35 @@ class OudsBadgeStatusModifier { /// Returns the background color based on the badge status. //deprecation remove: The param state will be removed after deprecation - Color? getStatusColor(OudsBadgeStatus? state, OudsIconStatus? status,bool isEnabled) { + Color? getStatusColor( + OudsBadgeStatus? state, + OudsIconStatus? status, + bool isEnabled, + bool iconType, + ) { final colorTheme = OudsTheme.of(context).colorScheme(context); if (!isEnabled) { - return colorTheme.actionDisabled; + return (iconType && + status is! Warning && + status is! Accent && + status is! Neutral) + ? Colors.transparent + : colorTheme.actionDisabled; + } + + if (iconType && + ((state != null && + (state != OudsBadgeStatus.neutral && + state != OudsBadgeStatus.accent)) || + (status != null && + (OudsIconStatus.functionalStatuses.contains( + status.runtimeType, + ))))) { + return colorTheme.opacityTransparent; } //deprecation remove: will be removed after deprecation - if(state != null) { + if (state != null) { switch (state) { case OudsBadgeStatus.neutral: return colorTheme.surfaceInverseHigh; @@ -50,14 +71,16 @@ class OudsBadgeStatusModifier { case OudsBadgeStatus.negative: return colorTheme.surfaceStatusNegativeEmphasized; } - }else{ - if(status != null){ + } else { + if (status != null) { + final iconTokens = OudsTheme.of(context).componentsTokens(context).icon; + return switch (status) { Neutral() => colorTheme.surfaceInverseHigh, Accent() => colorTheme.surfaceStatusAccentEmphasized, Positive() => colorTheme.surfaceStatusPositiveEmphasized, Info() => colorTheme.surfaceStatusInfoEmphasized, - Warning() => colorTheme.surfaceStatusWarningEmphasized, + Warning() => iconTokens.colorContentStatusWarningExternalShape, Negative() => colorTheme.surfaceStatusNegativeEmphasized, }; } @@ -65,17 +88,20 @@ class OudsBadgeStatusModifier { return null; } - /// Returns the text and icon color based on the badge status. + /// Returns the background color based on the badge status. //deprecation remove: The param state will be removed after deprecation - Color getStatusTextAndIconColor(OudsBadgeStatus? state, OudsIconStatus? status, bool isEnabled) { + Color? getTextColor( + OudsBadgeStatus? state, + OudsIconStatus? status, + bool isEnabled, + ) { final colorTheme = OudsTheme.of(context).colorScheme(context); if (!isEnabled) { return colorTheme.contentOnActionDisabled; } - //deprecation remove: will be removed after deprecation - if(state != null) { + if (state != null) { switch (state) { case OudsBadgeStatus.neutral: return colorTheme.contentInverse; @@ -90,14 +116,66 @@ class OudsBadgeStatusModifier { case OudsBadgeStatus.negative: return colorTheme.contentOnStatusNegativeEmphasized; } - }else if(status != null){ + } else { + if (status != null) { + return switch (status) { + Neutral() => colorTheme.contentInverse, + Accent() => colorTheme.contentOnStatusAccentEmphasized, + Positive() => colorTheme.contentOnStatusPositiveEmphasized, + Info() => colorTheme.contentOnStatusInfoEmphasized, + Warning() => colorTheme.contentOnStatusWarningEmphasized, + Negative() => colorTheme.contentOnStatusNegativeEmphasized, + }; + } + } + return null; + } + + /// Returns the icon color based on the badge status. + //deprecation remove: The param state will be removed after deprecation + Color getIconColor( + OudsBadgeStatus? state, + OudsIconStatus? status, + bool isEnabled, + ) { + final colorTheme = OudsTheme.of(context).colorScheme(context); + + if (!isEnabled) { + if ((state == OudsBadgeStatus.accent || + state == OudsBadgeStatus.neutral) || + (!OudsIconStatus.functionalStatuses.contains(status.runtimeType))) { + return colorTheme.contentOnActionDisabled; + } else { + return colorTheme.actionDisabled; + } + } + + //deprecation remove: will be removed after deprecation + if (state != null) { + switch (state) { + case OudsBadgeStatus.neutral: + return colorTheme.contentInverse; + case OudsBadgeStatus.accent: + return colorTheme.contentOnStatusAccentEmphasized; + case OudsBadgeStatus.positive: + return colorTheme.contentStatusPositive; + case OudsBadgeStatus.info: + return colorTheme.contentStatusInfo; + case OudsBadgeStatus.warning: + return colorTheme.contentOnStatusWarningEmphasized; + case OudsBadgeStatus.negative: + return colorTheme.contentStatusNegative; + } + } else if (status != null) { + final iconTokens = OudsTheme.of(context).componentsTokens(context).icon; + return switch (status) { Neutral() => colorTheme.contentInverse, Accent() => colorTheme.contentOnStatusAccentEmphasized, - Positive() => colorTheme.contentOnStatusPositiveEmphasized, - Info() => colorTheme.contentOnStatusInfoEmphasized, - Warning() => colorTheme.contentOnStatusWarningEmphasized, - Negative() => colorTheme.contentOnStatusNegativeEmphasized, + Positive() => colorTheme.contentStatusPositive, + Info() => colorTheme.contentStatusInfo, + Warning() => iconTokens.colorContentStatusWarningInternalShape, + Negative() => colorTheme.contentStatusNegative, }; } return Colors.black; @@ -106,34 +184,33 @@ class OudsBadgeStatusModifier { /// Return the icon based on badge status //deprecation remove: The param state will be removed after deprecation String? getIcon(OudsBadgeStatus? state, OudsIconStatus? status) { - //deprecation remove: will be removed after deprecation - if(state != null) { + if (state != null) { switch (state) { case OudsBadgeStatus.positive: - return AppAssets.icons.componentAlertTickConfirmationFill; + return AppAssets.icons.badgeIconTickConfirmationFill; case OudsBadgeStatus.info: - return AppAssets.icons.componentAlertInformationFill; + return AppAssets.icons.badgeIconInfoFill; case OudsBadgeStatus.warning: return AppAssets.icons.componentAlertWarningExternalShape; case OudsBadgeStatus.negative: - return AppAssets.icons.componentAlertImportantFill; + return AppAssets.icons.badgeIconErrorFill; case OudsBadgeStatus.neutral: case OudsBadgeStatus.accent: return null; } - }else{ + } else { // Handle the new 'iconStatus' API if (status != null) { return switch (status) { - // For those statuses, the icon is fixed and defined here. - Positive() => AppAssets.icons.componentAlertTickConfirmationFill, - Info() => AppAssets.icons.componentAlertInformationFill, - Warning() => AppAssets.icons.componentAlertWarningExternalShape, - Negative() => AppAssets.icons.componentAlertImportantFill, - - // For the other Accent and Neutral the icon should be defined by user - _ => null + // For those statuses, the icon is fixed and defined here. + Positive() => AppAssets.icons.badgeIconTickConfirmationFill, + Info() => AppAssets.icons.badgeIconInfoFill, + Warning() => null, + Negative() => AppAssets.icons.badgeIconErrorFill, + + // For the other Accent and Neutral the icon should be defined by user + _ => null, }; } } @@ -141,18 +218,18 @@ class OudsBadgeStatusModifier { } /// Retrieve the asset name defined by user in iconStatus - String? getAssetsName(OudsIconStatus? status){ + String? getAssetsName(OudsIconStatus? status) { if (status == null) { return null; } // Extract the 'icon' property only from Neutral and Accent types. return switch (status) { - // If the type is Neutral or Accent, extract the 'icon' value into the 'assets' variable and return it. + // If the type is Neutral or Accent, extract the 'icon' value into the 'assets' variable and return it. Neutral(icon: final assets) => assets, Accent(icon: final assets) => assets, - // For all other status types (Positive, Info, etc.), return null - // as their icons are fixed and not user-defined. + // For all other status types (Positive, Info, etc.), return null + // as their icons are fixed and not user-defined. _ => null, }; } diff --git a/ouds_core/lib/components/badge/ouds_badge.dart b/ouds_core/lib/components/badge/ouds_badge.dart index 72825205b..b6a8c7f35 100644 --- a/ouds_core/lib/components/badge/ouds_badge.dart +++ b/ouds_core/lib/components/badge/ouds_badge.dart @@ -19,6 +19,7 @@ import 'package:flutter_svg/flutter_svg.dart'; import 'package:ouds_core/components/badge/internal/ouds_badge_size_modifier.dart'; import 'package:ouds_core/components/badge/internal/ouds_badge_status_modifier.dart'; import 'package:ouds_core/components/common/ouds_icon_status.dart'; +import 'package:ouds_core/components/utilities/app_assets.dart'; import 'package:ouds_theme_contract/ouds_theme.dart'; /// @nodoc @@ -228,7 +229,7 @@ class OudsBadge extends StatefulWidget { this.semanticsLabel, }) : _deprecatedStatus = status, status = null, - _withIcon = null; + _withIcon = icon != null; const OudsBadge.icon({ super.key, @@ -337,39 +338,40 @@ class _OudsBadgeState extends State { : widget.size == OudsBadgeSize.medium ? AlignmentDirectional(2, -1.3) : null, - padding: widget.size == OudsBadgeSize.large - ? EdgeInsets.only( - left: badge.spaceInsetMediumLarge, - right: badge.spaceInsetMediumLarge, - ) - : null, backgroundColor: badgeStatusModifier.getStatusColor( widget._deprecatedStatus, _effectiveStatus, widget.enabled, + false, ), child: widget.child, ) : Badge( - padding: widget.icon != null || hasIcon - ? EdgeInsets.only( - left: badge.spaceInsetMediumLarge, - right: badge.spaceInsetMediumLarge, + padding: + _OudsBadgeType.icon == type && + (widget.icon != null || hasIcon) + ? EdgeInsetsDirectional.all( + badgeSizeModifier.getBadgeIconOffsetsPadding( + widget._deprecatedStatus, + widget.size, + _effectiveStatus, + ), ) : widget.size == OudsBadgeSize.large - ? EdgeInsets.only( - left: badge.spacePaddingInlineLarge, - right: badge.spacePaddingInlineLarge, + ? EdgeInsetsDirectional.only( + start: badge.spacePaddingInlineLarge, + end: badge.spacePaddingInlineLarge, ) - : EdgeInsets.only( - left: badge.spacePaddingInlineMedium, - right: badge.spacePaddingInlineMedium, + : EdgeInsetsDirectional.only( + start: badge.spacePaddingInlineMedium, + end: badge.spacePaddingInlineMedium, ), backgroundColor: badgeStatusModifier.getStatusColor( widget._deprecatedStatus, _effectiveStatus, widget.enabled, + _OudsBadgeType.icon == type, ), label: badgeLabel, child: widget.child, @@ -392,7 +394,7 @@ class _OudsBadgeState extends State { ? theme.typographyTokens .typeLabelDefaultMedium(context) .copyWith( - color: badgeStatusModifier.getStatusTextAndIconColor( + color: badgeStatusModifier.getTextColor( widget._deprecatedStatus, _effectiveStatus, widget.enabled, @@ -401,7 +403,7 @@ class _OudsBadgeState extends State { : theme.typographyTokens .typeLabelDefaultSmall(context) .copyWith( - color: badgeStatusModifier.getStatusTextAndIconColor( + color: badgeStatusModifier.getTextColor( widget._deprecatedStatus, _effectiveStatus, widget.enabled, @@ -431,28 +433,74 @@ class _OudsBadgeState extends State { // The deprecated `assetName` is also included for backward compatibility. final iconPath = fixedIcon ?? assetName ?? userDefinedIcon ?? ""; - // this condition is two eliminate the text when we are in XSmall or Small - return widget.size == OudsBadgeSize.large || - widget.size == OudsBadgeSize.medium - ? SizedBox.expand( - child: SvgPicture.asset( - excludeFromSemantics: true, - iconPath, - fit: BoxFit.contain, - package: fixedIcon != null - ? OudsTheme.of(context).packageName - : null, - colorFilter: ColorFilter.mode( - badgeStatusModifier.getStatusTextAndIconColor( - widget._deprecatedStatus, - _effectiveStatus, - widget.enabled, + if (_effectiveStatus is Warning || + widget._deprecatedStatus == OudsBadgeStatus.warning) { + final iconTokens = OudsTheme.of(context).componentsTokens(context).icon; + + return widget.enabled + ? Stack( + alignment: Alignment.center, + children: [ + // Background shape + SizedBox.expand( + child: SvgPicture.asset( + excludeFromSemantics: true, + fit: BoxFit.contain, + AppAssets.icons.badgeIconWarningExternalShape, + 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.badgeIconWarningInternalShape, + colorFilter: ColorFilter.mode( + iconTokens.colorContentStatusWarningInternalShape, + BlendMode.srcIn, + ), + package: OudsTheme.of(context).packageName, + ), + ), + ], + ) + : SizedBox.expand( + child: SvgPicture.asset( + excludeFromSemantics: true, + AppAssets.icons.badgeIconWarningInternalShape, + fit: BoxFit.contain, + package: OudsTheme.of(context).packageName, + colorFilter: ColorFilter.mode( + OudsTheme.of( + context, + ).colorScheme(context).contentOnActionDisabled, + BlendMode.srcIn, ), - BlendMode.srcIn, ), - ), - ) - : Container(); + ); + } + + return SizedBox.expand( + child: SvgPicture.asset( + excludeFromSemantics: true, + iconPath, + fit: BoxFit.contain, + package: fixedIcon != null ? OudsTheme.of(context).packageName : null, + colorFilter: ColorFilter.mode( + badgeStatusModifier.getIconColor( + widget._deprecatedStatus, + _effectiveStatus, + widget.enabled, + ), + BlendMode.srcIn, + ), + ), + ); } /// Formats a numeric label, replacing values >= 100 with "+99" diff --git a/ouds_core/lib/components/common/ouds_icon_status.dart b/ouds_core/lib/components/common/ouds_icon_status.dart index f7e3f01b9..862a6d9da 100644 --- a/ouds_core/lib/components/common/ouds_icon_status.dart +++ b/ouds_core/lib/components/common/ouds_icon_status.dart @@ -59,9 +59,25 @@ import 'package:ouds_core/components/badge/ouds_badge.dart'; /// ``` /// sealed class OudsIconStatus { - const OudsIconStatus(); + /// A static list containing the types of all functional statuses. + /// + /// This can be used to easily check if a given status instance belongs + /// to the functional category (Positive, Info, Warning, Negative). + /// + /// ### Example + /// ```dart + /// final myStatus = Positive(); + /// final isFunctional = OudsIconStatus.functionalStatuses.contains(myStatus.runtimeType); + /// // isFunctional will be true + /// ``` + static const List functionalStatuses = [ + Positive, + Info, + Warning, + Negative, + ]; } /// A status for general-purpose labels where the icon is customizable. @@ -103,4 +119,4 @@ class Warning extends OudsIconStatus {} /// A status that draws attention to errors or critical information. /// /// This status uses a fixed, predefined icon from the design system. -class Negative extends OudsIconStatus {} \ No newline at end of file +class Negative extends OudsIconStatus {} diff --git a/ouds_core/lib/components/utilities/app_assets.dart b/ouds_core/lib/components/utilities/app_assets.dart index 19e24f485..7eeb60f1f 100644 --- a/ouds_core/lib/components/utilities/app_assets.dart +++ b/ouds_core/lib/components/utilities/app_assets.dart @@ -72,6 +72,15 @@ class _Icons { 'assets/functional/social-and-engagement/heart-empty.svg'; final String functionalNavigationMenu = 'assets/functional/navigation/menu.svg'; + final String badgeIconWarningExternalShape = + 'assets/component/badge-icon/warning-external-shape.svg'; + final String badgeIconWarningInternalShape = + 'assets/component/badge-icon/warning-internal-shape.svg'; + final String badgeIconErrorFill = + 'assets/component/badge-icon/error-fill.svg'; + final String badgeIconInfoFill = 'assets/component/badge-icon/info-fill.svg'; + final String badgeIconTickConfirmationFill = + 'assets/component/badge-icon/tick-confirmation-fill.svg'; } class _Fonts { diff --git a/ouds_global_raw_tokens/CHANGELOG.md b/ouds_global_raw_tokens/CHANGELOG.md index a82803f6c..988b3ca61 100644 --- a/ouds_global_raw_tokens/CHANGELOG.md +++ b/ouds_global_raw_tokens/CHANGELOG.md @@ -6,7 +6,10 @@ 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 diff --git a/ouds_theme_orange/assets/component/badge-icon/error-fill.svg b/ouds_theme_orange/assets/component/badge-icon/error-fill.svg new file mode 100644 index 000000000..b101f4589 --- /dev/null +++ b/ouds_theme_orange/assets/component/badge-icon/error-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange/assets/component/badge-icon/info-fill.svg b/ouds_theme_orange/assets/component/badge-icon/info-fill.svg new file mode 100644 index 000000000..5b8da60ce --- /dev/null +++ b/ouds_theme_orange/assets/component/badge-icon/info-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange/assets/component/badge-icon/tick-confirmation-fill.svg b/ouds_theme_orange/assets/component/badge-icon/tick-confirmation-fill.svg new file mode 100644 index 000000000..f3e87e2f4 --- /dev/null +++ b/ouds_theme_orange/assets/component/badge-icon/tick-confirmation-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange/assets/component/badge-icon/warning-external-shape.svg b/ouds_theme_orange/assets/component/badge-icon/warning-external-shape.svg new file mode 100644 index 000000000..9f34c31c9 --- /dev/null +++ b/ouds_theme_orange/assets/component/badge-icon/warning-external-shape.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange/assets/component/badge-icon/warning-internal-shape.svg b/ouds_theme_orange/assets/component/badge-icon/warning-internal-shape.svg new file mode 100644 index 000000000..9e4b7e8d8 --- /dev/null +++ b/ouds_theme_orange/assets/component/badge-icon/warning-internal-shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/ouds_theme_orange/pubspec.yaml b/ouds_theme_orange/pubspec.yaml index 52e41599f..74b09dd9f 100644 --- a/ouds_theme_orange/pubspec.yaml +++ b/ouds_theme_orange/pubspec.yaml @@ -57,6 +57,7 @@ flutter: - assets/component/alert/ - assets/component/checkbox/ - assets/component/chip/ + - assets/component/badge-icon/ - assets/component/bullet-list/ - assets/component/button/ - assets/component/link/ diff --git a/ouds_theme_orange_compact/assets/component/badge-icon/error-fill.svg b/ouds_theme_orange_compact/assets/component/badge-icon/error-fill.svg new file mode 100644 index 000000000..b101f4589 --- /dev/null +++ b/ouds_theme_orange_compact/assets/component/badge-icon/error-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange_compact/assets/component/badge-icon/info-fill.svg b/ouds_theme_orange_compact/assets/component/badge-icon/info-fill.svg new file mode 100644 index 000000000..5b8da60ce --- /dev/null +++ b/ouds_theme_orange_compact/assets/component/badge-icon/info-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange_compact/assets/component/badge-icon/tick-confirmation-fill.svg b/ouds_theme_orange_compact/assets/component/badge-icon/tick-confirmation-fill.svg new file mode 100644 index 000000000..f3e87e2f4 --- /dev/null +++ b/ouds_theme_orange_compact/assets/component/badge-icon/tick-confirmation-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange_compact/assets/component/badge-icon/warning-external-shape.svg b/ouds_theme_orange_compact/assets/component/badge-icon/warning-external-shape.svg new file mode 100644 index 000000000..9f34c31c9 --- /dev/null +++ b/ouds_theme_orange_compact/assets/component/badge-icon/warning-external-shape.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_orange_compact/assets/component/badge-icon/warning-internal-shape.svg b/ouds_theme_orange_compact/assets/component/badge-icon/warning-internal-shape.svg new file mode 100644 index 000000000..9e4b7e8d8 --- /dev/null +++ b/ouds_theme_orange_compact/assets/component/badge-icon/warning-internal-shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/ouds_theme_orange_compact/pubspec.yaml b/ouds_theme_orange_compact/pubspec.yaml index ef692e320..9e0e17978 100644 --- a/ouds_theme_orange_compact/pubspec.yaml +++ b/ouds_theme_orange_compact/pubspec.yaml @@ -58,6 +58,7 @@ flutter: - assets/component/alert/ - assets/component/checkbox/ - assets/component/chip/ + - assets/component/badge-icon/ - assets/component/bullet-list/ - assets/component/button/ - assets/component/link/ diff --git a/ouds_theme_sosh/assets/component/badge-icon/error-fill.svg b/ouds_theme_sosh/assets/component/badge-icon/error-fill.svg new file mode 100644 index 000000000..fae8276ce --- /dev/null +++ b/ouds_theme_sosh/assets/component/badge-icon/error-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_sosh/assets/component/badge-icon/info-fill.svg b/ouds_theme_sosh/assets/component/badge-icon/info-fill.svg new file mode 100644 index 000000000..5e9b6fa26 --- /dev/null +++ b/ouds_theme_sosh/assets/component/badge-icon/info-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_sosh/assets/component/badge-icon/tick-confirmation-fill.svg b/ouds_theme_sosh/assets/component/badge-icon/tick-confirmation-fill.svg new file mode 100644 index 000000000..183d19780 --- /dev/null +++ b/ouds_theme_sosh/assets/component/badge-icon/tick-confirmation-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_sosh/assets/component/badge-icon/warning-external-shape.svg b/ouds_theme_sosh/assets/component/badge-icon/warning-external-shape.svg new file mode 100644 index 000000000..bc5bf133f --- /dev/null +++ b/ouds_theme_sosh/assets/component/badge-icon/warning-external-shape.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_sosh/assets/component/badge-icon/warning-internal-shape.svg b/ouds_theme_sosh/assets/component/badge-icon/warning-internal-shape.svg new file mode 100644 index 000000000..869a5aaf5 --- /dev/null +++ b/ouds_theme_sosh/assets/component/badge-icon/warning-internal-shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/ouds_theme_sosh/pubspec.yaml b/ouds_theme_sosh/pubspec.yaml index a40db3758..b66e1d6a7 100644 --- a/ouds_theme_sosh/pubspec.yaml +++ b/ouds_theme_sosh/pubspec.yaml @@ -48,6 +48,7 @@ flutter: - assets/component/alert/ - assets/component/checkbox/ - assets/component/chip/ + - assets/component/badge-icon/ - assets/component/bullet-list/ - assets/component/button/ - assets/component/link/ diff --git a/ouds_theme_wireframe/assets/component/badge-icon/error-fill.svg b/ouds_theme_wireframe/assets/component/badge-icon/error-fill.svg new file mode 100644 index 000000000..50c000458 --- /dev/null +++ b/ouds_theme_wireframe/assets/component/badge-icon/error-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_wireframe/assets/component/badge-icon/info-fill.svg b/ouds_theme_wireframe/assets/component/badge-icon/info-fill.svg new file mode 100644 index 000000000..13d1811ce --- /dev/null +++ b/ouds_theme_wireframe/assets/component/badge-icon/info-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_wireframe/assets/component/badge-icon/tick-confirmation-fill.svg b/ouds_theme_wireframe/assets/component/badge-icon/tick-confirmation-fill.svg new file mode 100644 index 000000000..d61854588 --- /dev/null +++ b/ouds_theme_wireframe/assets/component/badge-icon/tick-confirmation-fill.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_wireframe/assets/component/badge-icon/warning-external-shape.svg b/ouds_theme_wireframe/assets/component/badge-icon/warning-external-shape.svg new file mode 100644 index 000000000..337cf1974 --- /dev/null +++ b/ouds_theme_wireframe/assets/component/badge-icon/warning-external-shape.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ouds_theme_wireframe/assets/component/badge-icon/warning-internal-shape.svg b/ouds_theme_wireframe/assets/component/badge-icon/warning-internal-shape.svg new file mode 100644 index 000000000..87fb8f355 --- /dev/null +++ b/ouds_theme_wireframe/assets/component/badge-icon/warning-internal-shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/ouds_theme_wireframe/pubspec.yaml b/ouds_theme_wireframe/pubspec.yaml index f99b16fc3..a4606c02b 100644 --- a/ouds_theme_wireframe/pubspec.yaml +++ b/ouds_theme_wireframe/pubspec.yaml @@ -52,6 +52,7 @@ flutter: - assets/component/alert/ - assets/component/checkbox/ - assets/component/chip/ + - assets/component/badge-icon/ - assets/component/bullet-list/ - assets/component/button/ - assets/component/link/