[#400] Create Link component #401

ludovic35 · 2025-01-23T09:28:42Z

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

Related issues

Description

Motivation & Context

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)

pylapp · 2025-01-23T12:27:00Z

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

@@ -58,25 +62,36 @@ final class ButtonConfigurationModel: ComponentConfiguration {
        }
    }

+    private var coloredSurfaceCodeModifier: String {


Il y a moyen de faire plus simple sans if/else/return mais avec une expression ternaire :

onColoredSurface ? ".oudsColoredSurface(color: Color.orange)" : ""

pylapp · 2025-01-23T12:28:42Z

DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift

@@ -88,14 +72,13 @@ private struct ButtonDemo: View {
    @Environment(\.theme) private var theme

    @StateObject var model: ButtonConfigurationModel
-    let coloredSurface: Bool

    var body: some View {
        HStack(alignment: .center) {
            Spacer()

            // It is not allowed to place a Negative bnutton on colored surface


button au lieu de bnutton

pylapp · 2025-01-23T12:29:03Z

DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift

@@ -112,6 +95,6 @@ private struct ButtonDemo: View {
        }
        .disabled(!model.enabled)
        .padding(.all, theme.spaces.spaceFixedMedium)
-        .modifier(BackgroundModifier(coloredSurface: coloredSurface))
+        .modifier(DesignToolColoredBackgroundModifier(coloredSurface: model.onColoredSurface))


DesignToolboxColoredBackgroundModifier au lieu de DesignToolColoredBackgroundModifier

pylapp · 2025-01-23T12:29:44Z

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

+
+    // MARK: Initializer
+
+    override init() {


Pas besoin de faire des appels à self ici

pylapp · 2025-01-23T12:31:04Z

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

+
+    // MARK: Component Configuration
+
+    private var coloredSurfaceCodeModifier: String {


Il y a moyen de faire plus simple sans if/else/return mais avec une expression ternaire :

onColoredSurface ? ".oudsColoredSurface(color: Color.orange)" : ""

pylapp · 2025-01-23T12:31:40Z

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

+    }
+}
+
+// MARK: - Button Layout


"Link" Layout plutôt ?

pylapp · 2025-01-23T12:33:10Z

OUDS/Core/Components/Sources/Link/OUDSLink.swift

+        self.action = action
+    }
+
+    /// Create a link with an `Arrow` before `OUDSLink.Arrow.back` or after `OUDSLink.Arrow.Next` the text.


Pas compris ta phrase

pylapp · 2025-01-23T12:35:56Z

OUDS/Core/Components/Sources/Extensions/Bundle.swift

+import Foundation
+
+extension Bundle {
+    /// The ouds bundle, useful to find resources


"OUDS" et non "ouds"

pylapp · 2025-01-23T12:37:22Z

OUDS/Core/Components/Sources/Link/Internal/LinkTextModifier.swift

+    }
+}
+
+struct LinkUnderlineModifier: ViewModifier {


Pourquoi LinkUnderlineModifier n'est pas dans un fichier à part ? Ou alors renommer le fichier qui ne doit plus être "LinktextModifier.swift"

B3nz01d · 2025-01-24T11:10:38Z

@ludovic35 in the link component the option "on colored background" is defaulted to off. This is good.
But in the button component this same option is defaulted to on. They should both behave the same and the button option should also be defaulted to off.

ludovic35 · 2025-01-24T15:18:23Z

@ludovic35 in the link component the option "on colored background" is defaulted to off. This is good. But in the button component this same option is defaulted to on. They should both behave the same and the button option should also be defaulted to off.

I will fix that.

Additional rermarks from designer review:

add the issue in changelog file (nothing on privious alpha build)
multiline text alignment should be leading
the undeline grows during transition (pressed to unpressed). It should stay always to 1 point
add long text option in configuration to see the link with long text (same for button)
align next chevron to bottom

ludovic35 linked an issue Jan 23, 2025 that may be closed by this pull request

[Component] Create component - Link #400

Open

pylapp self-assigned this Jan 23, 2025

ludovic35 added 6 commits January 23, 2025 13:28

Add OUDSLink api

bfa55f4

Add Link screen in demo app

2873f90

First good version without the underline

2d6bfa3

Add last token and colored surface on demo app

93947f9

fix compilation issue

3be0e03

Update documentation and small refactor to remove theme from public api

70a7fd9

ludovic35 force-pushed the 400-create-component---link branch from de33c42 to 70a7fd9 Compare January 23, 2025 12:31

pylapp requested changes Jan 23, 2025

View reviewed changes

ludovic35 added 4 commits January 23, 2025 15:47

Updaee shanpshots

c5c19e2

review fix some mistakes

b195cd9

Add tests without snapshots and move button snapshots

03bb452

Add snapshots

0d406f1

review: fix remarks rised by po and designer

f83a22a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#400] Create Link component #401

[#400] Create Link component #401

ludovic35 commented Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

pylapp Jan 23, 2025

B3nz01d commented Jan 24, 2025

ludovic35 commented Jan 24, 2025


		// MARK: Component Configuration

		private var coloredSurfaceCodeModifier: String {

[#400] Create Link component #401

Are you sure you want to change the base?

[#400] Create Link component #401

Conversation

ludovic35 commented Jan 23, 2025

Related issues

Description

Motivation & Context

Types of change

Previews

Checklist

Contribution

Accessibility

Design

Development

Documentation

Checklist (for Core Team only)

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

B3nz01d commented Jan 24, 2025

ludovic35 commented Jan 24, 2025