[#594] Adjust typography modifier to be coform with line height token by adding line spacing and paddings

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-ios/compare/0.15.0...develop)
 
+### Fixed
+
+- Adjust typography modifier to be coform with line height token by adding line spacing and paddings (Orange-OpenSource/ouds-ios#594)
+
 ## [0.15.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.14.0...0.15.0) - 2025-05-28
 
 ### Added
@@ -24,6 +28,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bad wording key for accessibility label of switch item (#642)
 - Missing accessibility hint for switch (#642)
 - Missing token `colorBorderMuted` (#643)
+- Set border as inner stroke (Orange-OpenSource/ouds-ios#680)
+- Bad wording key for accessibility label of switch item (Orange-OpenSource/ouds-ios#642)
+- Missing accessibility hint for switch (Orange-OpenSource/ouds-ios#642)
+- Missing token `colorBorderMuted` (Orange-OpenSource/ouds-ios#643)
 
 ## [0.14.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.13.0...0.14.0) - 2024-04-29
 

OUDS/Core/Components/Sources/Internal/ControlItem/ControlItemLabel.swift

@@ -54,7 +54,7 @@ struct ControlItemLabel: View {
     // MARK: - Layout Items
 
     private func texts() -> some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: theme.spaces.spaceFixedNone) {
             Text(layoutData.label)
                 .typeLabelDefaultLarge(theme)
                 .multilineTextAlignment(.leading)

OUDS/Core/Components/Sources/ViewModifiers/TypographyModifiers/TypographyModifier.swift

@@ -54,67 +54,78 @@ struct TypographyModifier: ViewModifier {
     }
 
     /// Returns the `FontCompositeRawToken` to apply depending to the layour mode
-    private var adaptiveFont: FontCompositeRawToken {
+    private var adaptiveFontToken: FontCompositeRawToken {
         isCompactMode ? font.compact : font.regular
     }
 
     #if canImport(UIKit)
     /// According to the current `OUDSTheme` and if a custom font is applied or not, returns the suitable `Font`
-    private var adaptiveTypography: Font {
+    private var adaptiveFont: Font {
         if let fontFamilyName = fontFamily {
-            let composedFontFamily = fontFamilyName.compose(withFont: "\(adaptiveFont.weight.fontWeight)")
-            let customFont: Font = .custom(composedFontFamily, size: adaptiveFont.size)
+            let composedFontFamily = fontFamilyName.compose(withFont: "\(adaptiveFontToken.weight.fontWeight)")
+            let customFont: Font = .custom(composedFontFamily, size: adaptiveFontToken.size)
             return customFont
         } else {
             // Apply the system font with weight, responsive to Dynamic Type
-            return .system(size: scaledFontSize, weight: adaptiveFont.weight.fontWeight, design: .default)
+            return .system(size: scaledFontSize, weight: adaptiveFontToken.weight.fontWeight, design: .default)
         }
     }
 
-    /// Computes the line spacing value to apply on the typography.
-    /// Difference between the line height tokenand  line height of computed font to apply depending the the scaled font size.
-    /// The line spacing token cannot be used as is.
-    private var adaptiveLineHeight: CGFloat {
-        adaptiveFont.lineHeight - UIFont.systemFont(ofSize: scaledFontSize).lineHeight
+    /// Adjusts the lignt height dynamically based on the user's accessibility settings
+    /// using UIFontMetrics to scale the line height, ensuring Dynamic Type support
+    private var scaledLineHeight: CGFloat {
+        UIFontMetrics.default.scaledValue(for: adaptiveFontToken.lineHeight)
     }
 
     /// Adjusts the font size dynamically based on the user's accessibility settings
     /// using UIFontMetrics to scale the font size, ensuring Dynamic Type support
     private var scaledFontSize: CGFloat {
-        UIFontMetrics.default.scaledValue(for: adaptiveFont.size)
+        UIFontMetrics.default.scaledValue(for: adaptiveFontToken.size)
+    }
+
+    /// Computes the line spacing value to apply on the typography.
+    /// Difference between the token line height and the font size (both scaled according to Dynamic Type)
+    private var lineSpacing: CGFloat {
+        scaledLineHeight - scaledFontSize
+    }
+
+    /// Computes the extra padding should be added at top and bottom to conform the line height.
+    private var padding: CGFloat {
+        lineSpacing / 2
     }
 
     /// Applies to the `Content` the *adaptive font* (i.e. *font family*, *font weight* and *font size*
     /// depending to the current `MultipleFontCompositeRawTokens`.
     func body(content: Content) -> some View {
-        // `tracking()` only available for iOS 16+
-        // `minimumScaleFactor()` ensures text remains readable by allowing scaling down
+        // `kerning()` only available for iOS 16+
+        // `lineSpacing` to conform to the line height token when text is on sevral lines
+        // `padding` to conform to the line height height token when text is in one line
         // `.onChange(of: sizeCategory) { _ in }` triggers view update when Dynamic Type size changes
         if #available(iOS 16.0, *) {
             content
-                .font(adaptiveTypography)
-                .lineSpacing(adaptiveLineHeight)
-                .tracking(adaptiveFont.letterSpacing)
-                .minimumScaleFactor(0.5)
+                .font(adaptiveFont)
+                .kerning(adaptiveFontToken.letterSpacing * UIScreen.main.scale)
+                .lineSpacing(lineSpacing)
+                .padding(.vertical, padding)
                 .onChange(of: sizeCategory) { _ in }
         } else {
             content
-                .font(adaptiveTypography)
-                .lineSpacing(adaptiveLineHeight)
-                .minimumScaleFactor(0.5)
+                .font(adaptiveFont)
+                .lineSpacing(lineSpacing)
+                .padding(.vertical, padding)
                 .onChange(of: sizeCategory) { _ in }
         }
     }
     #else
     /// Applies to the `Content` the *adaptive font* (i.e. *font family*, *font weight* and *font size*
     /// depending to the current `MultipleFontCompositeRawTokens`.
     func body(content: Content) -> some View {
-        // `tracking()` only available for iOS 16+
+        // `kerning()` only available for iOS 16+
         // `minimumScaleFactor()` ensures text remains readable by allowing scaling down
         // `.onChange(of: sizeCategory) { _ in }` triggers view update when Dynamic Type size changes
         if #available(iOS 16.0, *) {
             content
-                .tracking(adaptiveFont.letterSpacing)
+                .kerning(adaptiveFontToken.letterSpacing * UIScreen.main.scale)
                 .minimumScaleFactor(0.5)
                 .onChange(of: sizeCategory) { _ in }
         } else {
@@ -125,5 +136,4 @@ struct TypographyModifier: ViewModifier {
     }
     #endif
 }
-
 // swiftlint:enable line_length