[#405] Add switch component #439

ludovic35 · 2025-02-03T14:48:22Z

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

#405

Description

Implementation of switch component
Update of documentation
Update of unit tests

Motivation & Context

Implement component of design system

Types of change

New feature (non-breaking change which adds functionality)

Previews

Checklist

Contribution

I have read the contributing guidelines

Accessibility

My change follows accessibility good practices

Design

My change respects the design guidelines of Orange Unified Design System

Development

My change follows the developer guide
I checked my changes do not add new SwiftLint warnings
I have added unit tests to cover my changes (optional)

Documentation

My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

The evolution have been tested and the project builds for iPhones and iPads
Code review has been done by reviewers according to CODEOWNERS file
Design review has been done
Accessibiltiy review has been done
Q/A team has tested the evolution
Documentation has been updated if relevant
Internal files have been updated if relevant (like CONTRIBUTING, DEVELOP, THIRD_PARTY, CONTRIBUTORS, NOTICE)
CHANGELOG has been updated respecting keep a changelog rules and reference the issues
The wiki has been updated if needed (optional)

ludovic35 · 2025-02-04T16:27:21Z

UI tests are missing
Some constants in code (waiting for tokens)

pylapp

Pas mal de typos à corriger.
Un peu de réorganisation de code.
Un peu de renaming.
Le fichier NOTICE pas à jour.

pylapp · 2025-02-05T09:19:32Z

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added

 - [DesignToolbox] Add text field in component configuration to customize text ([#436](https://github.com/Orange-OpenSource/ouds-ios/issues/436))
+- [Library] Switch component ([#405](https://github.com/Orange-OpenSource/ouds-ios/issues/405))


Je mettrais cette ligne en haut, avant celle relative à la carte n°436

pylapp · 2025-02-05T09:20:31Z

DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift

@@ -197,7 +197,7 @@ struct ButtonConfiguration: View {
            }

            if model.layout == .iconAndText || model.layout == .textOnly {
-                DesignToolboxTextField(text: $model.text, prompt: "app_component_common_userText_prompt")
+                DesignToolboxTextField(text: $model.text, prompt: "app_components_common_userText_prompt")


Je trouve curieux d'utiliser du camel case en plus du snake case, c'est normal d'avoir "userText" et pas par exemple "user_text" ? Je ne connais pas les règles appliquées au wording ici :)

cf. règles de naming dans le fichier

pylapp · 2025-02-05T09:21:10Z

DesignToolbox/DesignToolbox/Pages/Components/EmptyState/EmptyState.swift

@@ -26,9 +26,9 @@ struct EmptyState: View {
                    .frame(width: 160, height: 160, alignment: .center)

                VStack(alignment: .center, spacing: theme.spaces.spaceFixedShorter) {
-                    Text("app_component_emptyContent_text")
+                    Text("app_components_emptyContent_text")


Idem que précédemment, "empty_content" plutôt ?

cf règles de naming

pylapp · 2025-02-05T09:21:34Z

DesignToolbox/DesignToolbox/Pages/Components/Link/LinkConfiguration.swift

@@ -167,7 +167,7 @@ struct LinkConfiguration: View {
                }
            }

-            DesignToolboxTextField(text: $model.text, prompt: "app_component_common_userText_prompt")
+            DesignToolboxTextField(text: $model.text, prompt: "app_components_common_userText_prompt")


"user_text" plutôt que "userText" ?

pylapp · 2025-02-05T09:23:05Z

DesignToolbox/DesignToolbox/Pages/Components/Switch/SwitchConfiguration.swift

+
+// MARK: - Switch Configuration Model
+
+/// The model shared between `SwitchPageConfiguration` view and `SwitchPageComponent` view.


SwitchPageConfiguration n'existe pas, SwitchPage plutôt ?
De même, SwitchPageComponent n'existe pas.

pylapp · 2025-02-05T10:12:40Z

OUDS/Core/Components/Sources/ViewModifiers/DividerModifier/DividerModifier.swift

+
+    // MARK: - Stored properties
+
+    @Environment(\.theme) private var theme


Pmutôt :

let show: Bool @Environment(\.theme) private var theme @Environment(\.colorScheme) private var colorScheme

on mis les env en début partout dans le code

pylapp · 2025-02-05T10:13:06Z

OUDS/Core/Components/Sources/ViewModifiers/DividerModifier/DividerModifier.swift

+import SwiftUI
+
+/// A `ViewModifier` which will apply a specific divider under a `View` using color semantic token.
+public struct DividerModifier: ViewModifier {


Attention, c'est une API publique, donc il faut indiquer dans la doc le "Since"

pylapp · 2025-02-05T10:13:39Z

OUDS/Core/Components/Sources/ViewModifiers/DividerModifier/View+Divider.swift

+    /// ```swift
+    ///    var body: some View {
+    ///        SomeView()
+    ///           .divider()


Le code sample n'est ps cohérent ; tu utilsies "divider" et non "oudsDivider(show:)", c'est normal ?

pylapp · 2025-02-05T10:13:47Z

OUDS/Core/Components/Sources/ViewModifiers/DividerModifier/View+Divider.swift

+
+extension View {
+
+    /// Modifies the current `View` to apply a divider under.


"below" plus que "under"

pylapp · 2025-02-05T10:14:31Z

OUDS/Core/Components/Sources/ViewModifiers/DividerModifier/View+Divider.swift

+    ///        SomeView()
+    ///           .divider()
+    /// ```
+    /// - Parameter:


Si tu builds al doc en local tu verras un warning sur ça.

Il faut que ce soit "Parameter show:" plutôt que de faire un saut de ligne (ça amrche avec "Parameters"

ludovic35 linked an issue Feb 3, 2025 that may be closed by this pull request

[Component] Create component - Switch #405

Open

ludovic35 added 8 commits February 4, 2025 14:42

First version of switch without tokens for now

5e9fc86

Add screen for switch component

691f169

Use first verion of tokens

a018eee

Set ListItem as Button

770cdad

Add wordings keys, code example and update changelog file

49b80ee

Add documentation

a9b285d

Adjust the position of the switch and the icon at the top

aa12111

Add orientation

0c0542a

ludovic35 force-pushed the 405-component-create-component---switch branch from 759bc02 to 0c0542a Compare February 4, 2025 14:01

Add two texfields to get text for label and helper text

0c3e7f0

ludovic35 marked this pull request as ready for review February 4, 2025 16:26

ludovic35 requested a review from pylapp as a code owner February 4, 2025 16:26

update wording and apply same rules on key naming

703d865

pylapp requested changes Feb 5, 2025

View reviewed changes

ludovic35 changed the title ~~[#405] Component Switch~~ [#405] Add switch component Feb 5, 2025

ludovic35 added 2 commits February 5, 2025 11:51

review fix typo and remarks

dc7ccdf

review: rename Label to LabelText

637c45a

ludovic35 marked this pull request as draft February 5, 2025 11:06

ludovic35 marked this pull request as ready for review February 5, 2025 11:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#405] Add switch component #439

[#405] Add switch component #439

ludovic35 commented Feb 3, 2025 •

edited

Loading

ludovic35 commented Feb 4, 2025

pylapp left a comment

pylapp Feb 5, 2025

pylapp Feb 5, 2025

ludovic35 Feb 5, 2025

pylapp Feb 5, 2025

ludovic35 Feb 5, 2025

pylapp Feb 5, 2025

pylapp Feb 5, 2025

pylapp Feb 5, 2025

ludovic35 Feb 5, 2025

pylapp Feb 5, 2025

pylapp Feb 5, 2025

pylapp Feb 5, 2025

pylapp Feb 5, 2025


		// MARK: - Switch Configuration Model

		/// The model shared between `SwitchPageConfiguration` view and `SwitchPageComponent` view.


		// MARK: - Stored properties

		@Environment(\.theme) private var theme


		extension View {

		/// Modifies the current `View` to apply a divider under.

[#405] Add switch component #439

Are you sure you want to change the base?

[#405] Add switch component #439

Conversation

ludovic35 commented Feb 3, 2025 • edited Loading

Related issues

Description

Motivation & Context

Types of change

Previews

Checklist

Contribution

Accessibility

Design

Development

Documentation

Checklist (for Core Team only)

ludovic35 commented Feb 4, 2025

pylapp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ludovic35 commented Feb 3, 2025 •

edited

Loading