[#630] Update cards to align buttons when text is too long (#641)

* Update all cards with the same Flow * Update chagelog Reviewed-by: Pierre-Yves Lapersonne <[email protected]>
Orange-OpenSource · Jan 25, 2024 · e398e17 · e398e17
1 parent a0f3777
commit e398e17
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ods-ios/compare/0.16.0...qualif)
 
+- [SDK] Update cards to align buttons when text is too long ([#630](https://github.com/Orange-OpenSource/ods-ios/issues/6380))
 - [Tooling] Upgrate to xcode 15 ([#638](https://github.com/Orange-OpenSource/ods-ios/issues/638))
 - [Tooling] Upgrade tools versions and internal librairies ([#639](https://github.com/Orange-OpenSource/ods-ios/issues/639))
 - [Docs] Update documentation with illustration ([#602](https://github.com/Orange-OpenSource/ods-ios/issues/602))

diff --git a/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardHorizontal.swift b/OrangeDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardHorizontal.swift
@@ -12,6 +12,7 @@
 //
 
 import SwiftUI
+import Flow
 
 ///
 /// <a href="https://system.design.orange.com/0c1af118d/p/66bac5-cards/b/1591fb" target="_blank">ODS Card</a>.
@@ -139,7 +140,7 @@ public struct ODSCardHorizontal: View {
 
     public var body: some View {
 
-        VStack(spacing: ODSSpacing.none) {
+        VStack(alignment: .leading, spacing: ODSSpacing.none) {
             HStack(alignment: .center, spacing: ODSSpacing.none) {
                 if case .leading = imagePosition {
                     image
@@ -192,14 +193,16 @@ public struct ODSCardHorizontal: View {
             if dividerEnabled {
                 Divider()
             }
-
-            HStack(alignment: .center, spacing: ODSSpacing.none) {
-                firstButton()
-                    .odsEmphasisButtonStyle(emphasis: .lowest)
-                secondButton?()
-                    .odsEmphasisButtonStyle(emphasis: .lowest)
-
-                Spacer()
+            if #available(iOS 16.0, *) {
+                HFlow(alignment: .top, spacing: ODSSpacing.none) {
+                    firstButton().odsEmphasisButtonStyle(emphasis: .lowest)
+                    secondButton?().odsEmphasisButtonStyle(emphasis: .lowest)
+                }
+            } else {
+                HStack(alignment: .center, spacing: ODSSpacing.none) {
+                    firstButton().odsEmphasisButtonStyle(emphasis: .lowest)
+                    secondButton?().odsEmphasisButtonStyle(emphasis: .lowest)
+                }
             }
         }
     }

diff --git a/...DesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardVerticalHeaderFirst.swift b/...DesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardVerticalHeaderFirst.swift
@@ -12,6 +12,7 @@
 //
 
 import SwiftUI
+import Flow
 
 ///
 /// <a href="https://system.design.orange.com/0c1af118d/p/66bac5-cards/b/1591fb" target="_blank">ODS Card</a>.
@@ -173,13 +174,17 @@ public struct ODSCardVerticalHeaderFirst: View {
     @ViewBuilder
     private func buttons() -> some View {
         if let firstButton = firstButton {
-            HStack(alignment: .center, spacing: ODSSpacing.none) {
-                firstButton()
-                    .odsEmphasisButtonStyle(emphasis: .lowest)
-                secondButton?()
-                    .odsEmphasisButtonStyle(emphasis: .lowest)
-
-                Spacer()
+            if #available(iOS 16.0, *) {
+                HFlow(alignment: .top, spacing: ODSSpacing.none) {
+                    firstButton().odsEmphasisButtonStyle(emphasis: .lowest)
+                    secondButton?().odsEmphasisButtonStyle(emphasis: .lowest)
+                }
+            } else {
+                HStack(alignment: .center, spacing: ODSSpacing.none) {
+                    firstButton().odsEmphasisButtonStyle(emphasis: .lowest)
+                    secondButton?().odsEmphasisButtonStyle(emphasis: .lowest)
+                    Spacer()
+                }
             }
         }
     }

diff --git a/...eDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardVerticalImageFirst.swift b/...eDesignSystem/Sources/OrangeDesignSystem/Components/Cards/ODSCardVerticalImageFirst.swift
@@ -12,6 +12,7 @@
 //
 
 import SwiftUI
+import Flow
 
 ///
 /// <a href="https://system.design.orange.com/0c1af118d/p/66bac5-cards/b/1591fb" target="_blank">ODS Card</a>.
@@ -145,13 +146,17 @@ public struct ODSCardVerticalImageFirst: View {
     @ViewBuilder
     private func buttons() -> some View {
         if let firstButton = firstButton {
-            HStack(alignment: .center, spacing: ODSSpacing.none) {
-                firstButton()
-                    .odsEmphasisButtonStyle(emphasis: .lowest)
-                secondButton?()
-                    .odsEmphasisButtonStyle(emphasis: .lowest)
-
-                Spacer()
+            if #available(iOS 16.0, *) {
+                HFlow(alignment: .top, spacing: ODSSpacing.none) {
+                    firstButton().odsEmphasisButtonStyle(emphasis: .lowest)
+                    secondButton?().odsEmphasisButtonStyle(emphasis: .lowest)
+                }
+            } else {
+                HStack(alignment: .center, spacing: ODSSpacing.none) {
+                    firstButton().odsEmphasisButtonStyle(emphasis: .lowest)
+                    secondButton?().odsEmphasisButtonStyle(emphasis: .lowest)
+                    Spacer()
+                }
             }
         }
     }