Merge branch '49-create-component---switch' of github.com:Orange-OpenSource/ouds-flutter into 49-create-component---switch

Ahmed Amine Zribi · Ahmed Amine Zribi · commit f2d14b4c0fae · 2025-06-20T11:37:14.000+01:00
diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md
@@ -5,9 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-flutter/compare/0.3.0...develop)
+### Added
+- [DemoApp][Library] Create component - `Switch` ([#49](https://github.com/Orange-OpenSource/ouds-flutter/issues/47))
 
 ### Fixed
-
 - [DemoApp][Library] Token `size` values now adapt based on device type ([#218](https://github.com/Orange-OpenSource/ouds-flutter/issues/218))
 - [DemoApp] Color order mismatch in `Divider` component ([#216](https://github.com/Orange-OpenSource/ouds-flutter/issues/216))
 
diff --git a/ouds_core/lib/components/checkbox/ouds_checkbox_item.dart b/ouds_core/lib/components/checkbox/ouds_checkbox_item.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/checkbox/ouds_checkbox.dart';
 import 'package:ouds_core/components/control/ouds_control_item.dart';
+import 'package:ouds_core/components/switch/ouds_switch_item.dart';
 
 ///
 /// <a href="https://unified-design-system.orange.com/472794e18/p/23f1c1-checkbox" class="external" target="_blank">OUDS Checkbox design guidelines</a>
@@ -102,7 +103,7 @@ class OudsCheckboxItem extends StatelessWidget {
         error: isError,
         readOnly: readOnly,
         errorComponentName: "OudsCheckboxItem",
-        componentName: "OudsCheckboxItem",
+        componentType: OudsControlItemType.checkbox,
         divider: divider,
         reversed: reversed,
         onTap: onChanged != null
diff --git a/ouds_core/lib/components/control/ouds_control_item.dart b/ouds_core/lib/components/control/ouds_control_item.dart
@@ -1,3 +1,14 @@
+// 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
+//
+
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:ouds_core/components/control/internal/controller/ouds_interaction_state_controller.dart';
@@ -8,6 +19,12 @@ import 'package:ouds_core/components/control/internal/modifier/ouds_control_text
 import 'package:ouds_core/components/control/internal/ouds_control_state.dart';
 import 'package:ouds_theme_contract/ouds_theme.dart';
 
+enum OudsControlItemType {
+  switchButton,
+  checkbox,
+  radio,
+}
+
 /// Refactor of controls for [Checkbox], [Switch], and [RadioButton].
 /// This implementation provides a customizable control item with properties such as text, icon, and interaction states.
 /// It manages its own interaction state and can respond to tap events if not in read-only mode.
@@ -22,7 +39,7 @@ class OudsControlItem extends StatefulWidget {
   final bool readOnly;
   final bool error;
   final String errorComponentName;
-  final String componentName;
+  final OudsControlItemType componentType;
   final Widget Function() indicator;
   final String? additionalText;
 
@@ -32,7 +49,7 @@ class OudsControlItem extends StatefulWidget {
     super.key,
     required this.text,
     required this.errorComponentName,
-    required this.componentName,
+    required this.componentType,
     required this.indicator,
     this.helperText,
     this.icon,
@@ -187,8 +204,12 @@ class OudsControlItemState extends State<OudsControlItem> {
             ),
             alignment: Alignment.center,
             child: SizedBox(
-              height: widget.componentName != "OudsSwitchButtonItem" ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader : null,
-              width: widget.componentName != "OudsSwitchButtonItem" ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader : null,
+              height: widget.componentType != OudsControlItemType.switchButton
+                  ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader
+                  : null,
+              width: widget.componentType != OudsControlItemType.switchButton
+                  ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader
+                  : null,
               child: widget.indicator(),
             ),
           ),
@@ -249,8 +270,12 @@ class OudsControlItemState extends State<OudsControlItem> {
             ),
             alignment: Alignment.center,
             child: SizedBox(
-              height: widget.componentName != "OudsSwitchButtonItem" ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader : null,
-              width: widget.componentName != "OudsSwitchButtonItem" ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader : null,
+              height: widget.componentType != OudsControlItemType.switchButton
+                  ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader
+                  : null,
+              width: widget.componentType != OudsControlItemType.switchButton
+                  ? OudsTheme.of(context).componentsTokens(context).controlItem.sizeLoader
+                  : null,
               child: widget.indicator(),
             ),
           ),
@@ -265,39 +290,33 @@ class OudsControlItemState extends State<OudsControlItem> {
     final List<Widget> columnChildren = [
       Text(
         widget.text,
-        style: TextStyle(
-          fontSize: OudsTheme.of(context).fontTokens.sizeLabelLarge,
-          letterSpacing: OudsTheme.of(context).fontTokens.letterSpacingLabelLarge,
-          fontWeight: OudsTheme.of(context).fontTokens.weightLabelDefault,
-          color: controlItemTextModifier.getTextColor(controlItemState, widget.error),
-        ),
+        style: OudsTheme.of(context).typographyTokens.typeLabelDefaultLarge(context).copyWith(
+              color: controlItemTextModifier.getTextColor(controlItemState, widget.error),
+            ),
       ),
     ];
-
     if (hasAdditionalText) {
       columnChildren.add(SizedBox(height: OudsTheme.of(context).componentsTokens(context).controlItem.spaceRowGap));
-      columnChildren.add(Text(
-        widget.additionalText!,
-        style: TextStyle(
-          fontSize: OudsTheme.of(context).fontTokens.sizeLabelMedium,
-          letterSpacing: OudsTheme.of(context).fontTokens.letterSpacingLabelMedium,
-          fontWeight: OudsTheme.of(context).fontTokens.weightStrong,
-          color: controlItemTextModifier.getAdditionalTextColor(controlItemState),
+      columnChildren.add(
+        Text(
+          widget.additionalText!,
+          style: OudsTheme.of(context).typographyTokens.typeLabelStrongMedium(context).copyWith(
+                color: controlItemTextModifier.getAdditionalTextColor(controlItemState),
+              ),
         ),
-      ));
+      );
     }
 
     if (hasHelperText) {
       columnChildren.add(SizedBox(height: OudsTheme.of(context).componentsTokens(context).controlItem.spaceRowGap));
-      columnChildren.add(Text(
-        widget.helperText!,
-        style: TextStyle(
-          fontSize: OudsTheme.of(context).fontTokens.sizeLabelMedium,
-          letterSpacing: OudsTheme.of(context).fontTokens.letterSpacingLabelMedium,
-          fontWeight: OudsTheme.of(context).fontTokens.weightBodyDefault,
-          color: controlItemTextModifier.getHelperTextColor(controlItemState),
+      columnChildren.add(
+        Text(
+          widget.helperText!,
+          style: OudsTheme.of(context).typographyTokens.typeLabelDefaultMedium(context).copyWith(
+                color: controlItemTextModifier.getHelperTextColor(controlItemState),
+              ),
         ),
-      ));
+      );
     }
 
     return Expanded(
diff --git a/ouds_core/lib/components/radio_button/ouds_radio_button_item.dart b/ouds_core/lib/components/radio_button/ouds_radio_button_item.dart
@@ -14,6 +14,7 @@
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/control/ouds_control_item.dart';
 import 'package:ouds_core/components/radio_button/ouds_radio_button.dart';
+import 'package:ouds_core/components/switch/ouds_switch_item.dart';
 
 ///
 /// [OUDS Radio Button Design Guidelines](https://unified-design-system.orange.com/472794e18/p/90c467-radio-button)
@@ -118,7 +119,7 @@ class OudsRadioButtonItem<T> extends StatelessWidget {
         error: isError,
         readOnly: readOnly,
         errorComponentName: "OudsRadioButtonItem",
-        componentName: "OudsRadioButtonItem",
+        componentType: OudsControlItemType.checkbox,
         divider: divider,
         outlined: _selected == true ? outlined : false,
         selected: outlined,
diff --git a/ouds_core/lib/components/switch/ouds_switch.dart b/ouds_core/lib/components/switch/ouds_switch.dart
@@ -1,15 +1,14 @@
-/*
- * // 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
- * //
- */
+// 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
+//
+
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:ouds_core/components/control/internal/interaction/ouds_inherited_interaction_model.dart';
@@ -89,49 +88,52 @@ class _OudsSwitchState extends State<OudsSwitch> {
     final switchTickModifier = OudsControlTickModifier(context);
     final switchButton = OudsTheme.of(context).componentsTokens(context).switchButton;
 
-    return Semantics(
-      enabled: widget.onChanged != null,
-      toggled: widget.value,
-      child: Material(
-        color: Colors.transparent,
-        child: SizedBox(
-          width: switchButton.sizeMinWidth,
-          height: switchButton.sizeMinHeight,
-          child: InkWell(
-            onTap: widget.onChanged != null
-                ? () {
-                    bool? newValue;
-                    setState(() {
-                      newValue = !widget.value;
-                    });
-                    widget.onChanged!(newValue!);
-                  }
-                : null,
-            splashColor: switchBackgroundModifier.getBackgroundColor(switchState),
-            highlightColor: switchBackgroundModifier.getBackgroundColor(switchState),
-            onHover: (hovering) {
-              setState(() {
-                _isHovered = hovering;
-              });
-            },
-            onHighlightChanged: (highlighted) {
-              setState(() {
-                _isPressed = highlighted;
-              });
-            },
-            onFocusChange: (focused) {
-              setState(() {
-                _isFocused = focused;
-              });
-            },
-            child: Container(
-              width: switchButton.sizeWidthTrack,
-              height: switchButton.sizeHeightTrack,
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular(switchButton.borderRadius),
-                color: widget.value ? switchTickModifier.getTickSwitchColor(switchState) : switchButton.colorTrackUnselected,
+    return MergeSemantics(
+      child: Semantics(
+        enabled: widget.onChanged != null,
+        toggled: widget.value,
+        button: true,
+        child: Material(
+          color: Colors.transparent,
+          child: SizedBox(
+            width: switchButton.sizeMinWidth,
+            height: switchButton.sizeMinHeight,
+            child: InkWell(
+              onTap: widget.onChanged != null
+                  ? () {
+                      bool? newValue;
+                      setState(() {
+                        newValue = !widget.value;
+                      });
+                      widget.onChanged!(newValue!);
+                    }
+                  : null,
+              splashColor: switchBackgroundModifier.getBackgroundColor(switchState),
+              highlightColor: switchBackgroundModifier.getBackgroundColor(switchState),
+              onHover: (hovering) {
+                setState(() {
+                  _isHovered = hovering;
+                });
+              },
+              onHighlightChanged: (highlighted) {
+                setState(() {
+                  _isPressed = highlighted;
+                });
+              },
+              onFocusChange: (focused) {
+                setState(() {
+                  _isFocused = focused;
+                });
+              },
+              child: Container(
+                width: switchButton.sizeWidthTrack,
+                height: switchButton.sizeHeightTrack,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(switchButton.borderRadius),
+                  color: widget.value ? switchTickModifier.getTickSwitchColor(switchState) : switchButton.colorTrackUnselected,
+                ),
+                child: _buildCursorIndicator(context, switchState, isPressed, isHovered),
               ),
-              child: _buildCursorIndicator(context, switchState, isPressed, isHovered),
             ),
           ),
         ),
diff --git a/ouds_core/lib/components/switch/ouds_switch_item.dart b/ouds_core/lib/components/switch/ouds_switch_item.dart
@@ -1,15 +1,13 @@
-/*
- * // 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
- * //
- */
+// 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
+//
 
 import 'package:flutter/material.dart';
 import 'package:ouds_core/components/control/ouds_control_item.dart';
@@ -102,7 +100,7 @@ class OudsSwitchButtonItem extends StatelessWidget {
         error: isError,
         readOnly: readOnly,
         errorComponentName: "OudsSwitchButtonItem",
-        componentName: "OudsSwitchButtonItem",
+        componentType: OudsControlItemType.switchButton,
         divider: divider,
         reversed: reversed,
         onTap: onChanged != null
