chore: update list item v0.1

Author: AhmedAmineZr

NOTICE.txt

@@ -117,14 +117,24 @@ ouds_theme_orange/assets/component/radio-button/radio-button-selected.svg
 ouds_theme_orange/assets/component/switch/selected-switch.svg
 ouds_theme_orange/assets/component/tag/close.svg
 ouds_theme_orange/assets/functional/social-and-engagement/heart-empty.svg
+ouds_theme_orange/assets/functional/actions/delete.svg
 ouds_theme_orange/assets/functional/settings-and-tools/hide.svg
 ouds_theme_orange/assets/functional/navigation/menu.svg
+ouds_theme_orange/assets/functional/navigation/form-chevron-left.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/assets/component/list-item/expanded-false.svg
+ouds_theme_orange/assets/component/list-item/expanded-reverse-false.svg
+ouds_theme_orange/assets/component/list-item/expanded-reverse-true.svg
+ouds_theme_orange/assets/component/list-item/expanded-true.svg
+ouds_theme_orange/assets/component/list-item/external-link.svg
+ouds_theme_orange/assets/component/list-item/next.svg
+ouds_theme_orange/assets/component/list-item/previous.svg
+ouds_theme_orange/assets/component/list-item/select.svg
 
 
 ouds_theme_orange/fonts/Roboto-Black.ttf
@@ -171,12 +181,21 @@ ouds_theme_orange_compact/assets/functional/actions/copy.svg
 ouds_theme_orange_compact/assets/functional/social-and-engagement/heart-empty.svg
 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/functional/navigation/form-chevron-left.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/assets/component/list-item/expanded-false.svg
+ouds_theme_orange_compact/assets/component/list-item/expanded-reverse-false.svg
+ouds_theme_orange_compact/assets/component/list-item/expanded-reverse-true.svg
+ouds_theme_orange_compact/assets/component/list-item/expanded-true.svg
+ouds_theme_orange_compact/assets/component/list-item/external-link.svg
+ouds_theme_orange_compact/assets/component/list-item/next.svg
+ouds_theme_orange_compact/assets/component/list-item/previous.svg
+ouds_theme_orange_compact/assets/component/list-item/select.svg
 
 
 ouds_theme_orange_compact/fonts/Roboto-Black.ttf
@@ -192,6 +211,7 @@ ouds_theme_orange_compact/fonts/SF-Pro-Display-Black-Thin.ttf
 
 ## OUDS / Themes / Sosh
 ouds_theme_orange/assets/communication/accessibility/accessibility-vision.svg
+ouds_theme_sosh/assets/communication/accessibility/accessibility-vision.svg
 ouds_theme_sosh/assets/communication/security-and-safety/lock.svg
 ouds_theme_sosh/assets/component/alert/error-fill.svg
 ouds_theme_sosh/assets/component/alert/important-fill.svg
@@ -220,14 +240,24 @@ ouds_theme_sosh/assets/component/radio-button/radio-button-selected.svg
 ouds_theme_sosh/assets/component/switch/selected-switch.svg
 ouds_theme_sosh/assets/component/tag/close.svg
 ouds_theme_sosh/assets/functional/social-and-engagement/heart-empty.svg
+ouds_theme_sosh/assets/functional/actions/delete.svg
 ouds_theme_sosh/assets/functional/settings-and-tools/hide.svg
 ouds_theme_sosh/assets/functional/navigation/menu.svg
+ouds_theme_sosh/assets/functional/navigation/form-chevron-left.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/assets/component/list-item/expanded-false.svg
+ouds_theme_sosh/assets/component/list-item/expanded-reverse-false.svg
+ouds_theme_sosh/assets/component/list-item/expanded-reverse-true.svg
+ouds_theme_sosh/assets/component/list-item/expanded-true.svg
+ouds_theme_sosh/assets/component/list-item/external-link.svg
+ouds_theme_sosh/assets/component/list-item/next.svg
+ouds_theme_sosh/assets/component/list-item/previous.svg
+ouds_theme_sosh/assets/component/list-item/select.svg
 
 
 ouds_theme_sosh/fonts/Sosh-Black.ttf
@@ -238,6 +268,7 @@ ouds_theme_sosh/fonts/Sosh-Thin.ttf
 
 ## OUDS / Themes / Wireframe
 ouds_theme_orange/assets/communication/accessibility/accessibility-vision.svg
+ouds_theme_wireframe/assets/communication/accessibility/accessibility-vision.svg
 ouds_theme_wireframe/assets/communication/security-and-safety/lock.svg
 ouds_theme_wireframe/assets/component/alert/error-fill.svg
 ouds_theme_wireframe/assets/component/alert/important-fill.svg
@@ -266,13 +297,24 @@ ouds_theme_wireframe/assets/component/radio-button/radio-button-selected.svg
 ouds_theme_wireframe/assets/component/switch/selected-switch.svg
 ouds_theme_wireframe/assets/component/tag/close.svg
 ouds_theme_wireframe/assets/functional/social-and-engagement/heart-empty.svg
+ouds_theme_wireframe/assets/functional/actions/delete.svg
 ouds_theme_wireframe/assets/functional/settings-and-tools/hide.svg
 ouds_theme_wireframe/assets/functional/navigation/menu.svg
+ouds_theme_wireframe/assets/functional/navigation/form-chevron-left.svg
+ouds_theme_wireframe/assets/component/bullet-list/bullet-level-0.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/assets/component/list-item/expanded-false.svg
+ouds_theme_wireframe/assets/component/list-item/expanded-reverse-false.svg
+ouds_theme_wireframe/assets/component/list-item/expanded-reverse-true.svg
+ouds_theme_wireframe/assets/component/list-item/expanded-true.svg
+ouds_theme_wireframe/assets/component/list-item/external-link.svg
+ouds_theme_wireframe/assets/component/list-item/next.svg
+ouds_theme_wireframe/assets/component/list-item/previous.svg
+ouds_theme_wireframe/assets/component/list-item/select.svg
 
 
 ouds_theme_wireframe/fonts/ShantellSans-Bold.ttf

app/CHANGELOG.md

@@ -7,31 +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/2.0.0...develop)
 ### Added
 ### Changed
-- [Library] `tab bar component`, update the animation of the `selected tab indicator` ([#633](https://github.com/Orange-OpenSource/ouds-flutter/issues/633))
-- [DemoApp][Library] Update `ToolBar Top`, with Badge in Trailing Actions ([#642](https://github.com/Orange-OpenSource/ouds-flutter/issues/642))
-- [DemoApp][Library] update `alert message`, `switch`, `radio`, `checkbox`, `text input`, `pin code input`, `phone number input`, components to use rich text ([#782](https://github.com/Orange-OpenSource/ouds-flutter/issues/782))
-- [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))
-- [Library] update library icons to use the one from v1.6 ([#661](https://github.com/Orange-OpenSource/ouds-flutter/issues/661))
-- [Library] deps downgrade dartdoc from to 8.3.3 to fix meta version ([#786](https://github.com/Orange-OpenSource/ouds-flutter/issues/786))
-- [DemoApp] deps update dependency github.com/apple/swift-protobuf to 1.38.0 ([#773](https://github.com/Orange-OpenSource/ouds-flutter/issues/773))
-- [Library] deps update dependency bump dartdoc to 9.0.4 ([#780](https://github.com/Orange-OpenSource/ouds-flutter/issues/780))
-- [Library] update `Phone number input` component to v1.3 ([#690](https://github.com/Orange-OpenSource/ouds-flutter/issues/690))
-- [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
-- [DemoApp][Library] `Bottom Bar` Inconsistent order of the accessible ([#625](https://github.com/Orange-OpenSource/ouds-flutter/issues/625))
-- [Library] `Bottom Bar` Overlap when zoom is activated ([#627](https://github.com/Orange-OpenSource/ouds-flutter/issues/627))
-- [DemoApp] Update pubspec icons 1.6 ([#794](https://github.com/Orange-OpenSource/ouds-flutter/issues/794))
-- [Library] `Password input` Label is truncated when zoom is applied ([#600](https://github.com/Orange-OpenSource/ouds-flutter/issues/600))
-- [Library] `Filter chip` is not reached by keyboard focus or Switch Access focus ([#474](https://github.com/Orange-OpenSource/ouds-flutter/issues/474))
-- [Library] `Phone number input` Add a hint to explain how to interact with fields  ([#571](https://github.com/Orange-OpenSource/ouds-flutter/issues/571))
-- [Library] `input tag` the whole component should have the role button ([#481](https://github.com/Orange-OpenSource/ouds-flutter/issues/481))
 
 ## [2.0.0](https://github.com/Orange-OpenSource/ouds-flutter/compare/1.3.1...2.0.0) - 2026-06-19
 ### Added

app/lib/ui/components/component_variants_screen.dart

@@ -12,6 +12,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:ouds_core/components/list_item/ouds_list_item.dart';
 import 'package:ouds_flutter_demo/main_app_bar.dart';
 import 'package:ouds_flutter_demo/ui/components/component_entities.dart';
 import 'package:ouds_flutter_demo/ui/theme/theme_controller.dart';
@@ -21,7 +22,11 @@ class ComponentVariantsScreen extends StatelessWidget {
   final Component component;
   final String? previousPageTitle;
 
-  const ComponentVariantsScreen({super.key, required this.component, this.previousPageTitle});
+  const ComponentVariantsScreen({
+    super.key,
+    required this.component,
+    this.previousPageTitle,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -40,22 +45,25 @@ class ComponentVariantsScreen extends StatelessWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
-              Container(
-                child: component.customComponent,
-              ),
+              Container(child: component.customComponent),
               Padding(
-                padding: EdgeInsetsDirectional.all(currentTheme.spaceScheme(context).insetMedium),
+                padding: EdgeInsetsDirectional.all(
+                  currentTheme.spaceScheme(context).insetMedium,
+                ),
                 child: Text(
                   component.description,
-                  style: currentTheme.typographyTokens.typeBodyDefaultLarge(context),
+                  style: currentTheme.typographyTokens.typeBodyDefaultLarge(
+                    context,
+                  ),
                 ),
               ),
               ListView.builder(
                 shrinkWrap: true,
                 physics: NeverScrollableScrollPhysics(),
                 itemCount: component.variants?.length,
                 itemBuilder: (BuildContext context, int index) {
-                  if (component.variants != null && index < component.variants!.length) {
+                  if (component.variants != null &&
+                      index < component.variants!.length) {
                     return VariantEntry(
                       variant: component.variants![index],
                       previousPageTitle: component.title,
@@ -77,24 +85,24 @@ class VariantEntry extends StatelessWidget {
   final VariantComponent variant;
   final String? previousPageTitle;
 
-  const VariantEntry({super.key, required this.variant, this.previousPageTitle});
+  const VariantEntry({
+    super.key,
+    required this.variant,
+    this.previousPageTitle,
+  });
 
   @override
   Widget build(BuildContext context) {
-    final themeController = Provider.of<ThemeController>(context);
-    final currentTheme = themeController.currentTheme;
-
     return Semantics(
       button: true,
-      child: ListTile(
-        title: Text(
-          variant.title,
-          style: currentTheme.typographyTokens.typeHeadingMedium(context),
-        ),
+      child: OudsListItem(
+        size: OudsListItemSize.smallSize,
+        label: variant.title,
+        boldLabel: true,
         onTap: () {
           Get.to(variant.screen);
         },
       ),
     );
   }
-}
+}

app/lib/ui/components/list_item/list_item_code_generator.dart

@@ -62,7 +62,7 @@ class ListItemCodeGenerator {
       if (state.leading != ListItemLeadingEnum.none)
         '  leading: ${_leadingCode(state.leading)},',
       if (state.trailing != ListItemTrailingEnum.none)
-        '  trailing: ${_trailingCode(state.trailing)},',
+        '  trailing: ${_trailingCode(state.trailing, state.trailingTextStyle)},',
       if (!state.divider) '  divider: false,',
       if (state.background) '  background: true,',
       if (state.helperText.trim().isNotEmpty)
@@ -96,7 +96,7 @@ class ListItemCodeGenerator {
         '  leading: ${_smallLeadingCode(state.leading)},',
       if (state.trailing != ListItemTrailingEnum.none &&
           ListItemTrailingEnum.smallOptions.contains(state.trailing))
-        '  trailing: ${_smallTrailingCode(state.trailing)},',
+        '  trailing: ${_smallTrailingCode(state.trailing, state.trailingTextStyle)},',
       if (!state.divider) '  divider: false,',
       '  background: ${state.background},',
       if (state.helperText.trim().isNotEmpty)
@@ -146,10 +146,19 @@ class ListItemCodeGenerator {
 
   static String _trailingCode(
     ListItemTrailingEnum trailing,
+    ListItemTrailingTextStyleEnum trailingTextStyle,
   ) => switch (trailing) {
     ListItemTrailingEnum.none => '',
-    ListItemTrailingEnum.text =>
-      "OudsListItemTrailingText(OudsListItemTrailingLabel('Label'))",
+    ListItemTrailingEnum.text => switch (trailingTextStyle) {
+      ListItemTrailingTextStyleEnum.label =>
+        "OudsListItemTrailingText(OudsListItemTrailingLabel('Label'))",
+      ListItemTrailingTextStyleEnum.labelMuted =>
+        "OudsListItemTrailingText(OudsListItemTrailingLabelMuted('Label'))",
+      ListItemTrailingTextStyleEnum.labelStrong =>
+        "OudsListItemTrailingText(OudsListItemTrailingLabelStrong('Label'))",
+      ListItemTrailingTextStyleEnum.labelAndExtraLabel =>
+        "OudsListItemTrailingText(OudsListItemTrailingLabelAndExtraLabel('Label', 'Extra label'))",
+    },
     // TODO[v0.3]: uncomment badge when available — also add ListItemTrailingEnum.badge to the enum and restore the import
     // ListItemTrailingEnum.badge =>
     //   "OudsListItemTrailingBadge(\n"
@@ -185,8 +194,19 @@ class ListItemCodeGenerator {
 
   static String _smallTrailingCode(
     ListItemTrailingEnum trailing,
+    ListItemTrailingTextStyleEnum trailingTextStyle,
   ) => switch (trailing) {
-    ListItemTrailingEnum.text => "OudsSmallListItemTrailingText('Label')",
+    ListItemTrailingEnum.text => switch (trailingTextStyle) {
+      ListItemTrailingTextStyleEnum.label =>
+        "OudsSmallListItemTrailingText('Label')",
+      ListItemTrailingTextStyleEnum.labelMuted =>
+        "OudsSmallListItemTrailingText('Label', style: OudsListItemTextStyle.labelMuted)",
+      ListItemTrailingTextStyleEnum.labelStrong =>
+        "OudsSmallListItemTrailingText('Label', style: OudsListItemTextStyle.labelStrong)",
+      // labelAndExtraLabel is not supported in small — falls back to label
+      ListItemTrailingTextStyleEnum.labelAndExtraLabel =>
+        "OudsSmallListItemTrailingText('Label')",
+    },
     ListItemTrailingEnum.icon =>
       "OudsSmallListItemTrailingIcon(Neutral(icon: 'assets/ic_heart.svg'))",
     ListItemTrailingEnum.image =>

app/lib/ui/components/list_item/list_item_customization.dart

@@ -59,6 +59,7 @@ class ListItemCustomizationState
   late final ImageSizeState imageSizeState;
   late final ImageFormatState imageFormatState;
   late final ImageRoundedState imageRoundedState;
+  late final TrailingTextStyleState trailingTextStyleState;
 
   @override
   void initState() {
@@ -80,6 +81,7 @@ class ListItemCustomizationState
     imageSizeState = ImageSizeState(setState);
     imageFormatState = ImageFormatState(setState);
     imageRoundedState = ImageRoundedState(setState);
+    trailingTextStyleState = TrailingTextStyleState(setState);
   }
 
   String get label => labelTextState.value;
@@ -138,6 +140,11 @@ class ListItemCustomizationState
   bool get imageRounded => imageRoundedState.value;
   set imageRounded(bool value) => imageRoundedState.value = value;
 
+  ListItemTrailingTextStyleEnum get trailingTextStyle =>
+      trailingTextStyleState.selected;
+  set trailingTextStyle(ListItemTrailingTextStyleEnum value) =>
+      trailingTextStyleState.selected = value;
+
   bool get enable => hasEnabled;
   set enable(bool value) => hasEnabled = value;
 
@@ -397,3 +404,20 @@ class ImageRoundedState {
     });
   }
 }
+
+class TrailingTextStyleState {
+  TrailingTextStyleState(this._setState);
+
+  final void Function(void Function()) _setState;
+  ListItemTrailingTextStyleEnum _selected =
+      ListItemTrailingTextStyleEnum.label;
+  final List<ListItemTrailingTextStyleEnum> list =
+      ListItemTrailingTextStyleEnum.values;
+
+  ListItemTrailingTextStyleEnum get selected => _selected;
+  set selected(ListItemTrailingTextStyleEnum newValue) {
+    _setState(() {
+      _selected = newValue;
+    });
+  }
+}