Merge pull request #5334 from woocommerce/issue/4787-address-form-dynamic-type

Order Editing: Add Address Form fields dynamic type support

Author: ealeksandrov

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/AdaptiveStack.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+struct AdaptiveStack<Content: View>: View {
+    @Environment(\.sizeCategory) var sizeCategory
+    @Environment(\.horizontalSizeClass) var horizontalSizeClass
+
+    let horizontalAlignment: HorizontalAlignment
+    let verticalAlignment: VerticalAlignment
+    let spacing: CGFloat?
+    let content: () -> Content
+
+    init(horizontalAlignment: HorizontalAlignment = .center,
+         verticalAlignment: VerticalAlignment = .center,
+         spacing: CGFloat? = nil,
+         @ViewBuilder content: @escaping () -> Content) {
+        self.horizontalAlignment = horizontalAlignment
+        self.verticalAlignment = verticalAlignment
+        self.spacing = spacing
+        self.content = content
+    }
+
+    var body: some View {
+        Group {
+            if sizeCategory.isAccessibilityCategory, horizontalSizeClass == .compact {
+                VStack(alignment: horizontalAlignment, spacing: spacing, content: content)
+            } else {
+                HStack(alignment: verticalAlignment, spacing: spacing, content: content)
+            }
+        }
+    }
+}

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TitleAndTextFieldRow.swift

@@ -25,22 +25,23 @@ struct TitleAndTextFieldRow: View {
     }
 
     var body: some View {
-        HStack {
+        AdaptiveStack(horizontalAlignment: .leading) {
             Text(title)
                 .bodyStyle()
                 .lineLimit(1)
                 .fixedSize()
-            Spacer()
-            TextField(placeholder, text: $text, onEditingChanged: onEditingChanged ?? { _ in })
-                .multilineTextAlignment(.trailing)
-                .font(.body)
-                .keyboardType(keyboardType)
-            if let symbol = symbol {
-                Text(symbol)
-                    .bodyStyle()
+            HStack {
+                TextField(placeholder, text: $text, onEditingChanged: onEditingChanged ?? { _ in })
+                    .multilineTextAlignment(.trailing)
+                    .font(.body)
+                    .keyboardType(keyboardType)
+                if let symbol = symbol {
+                    Text(symbol)
+                        .bodyStyle()
+                }
             }
         }
-        .frame(height: Constants.height)
+        .frame(minHeight: Constants.height)
         .padding([.leading, .trailing], Constants.padding)
     }
 }
@@ -77,5 +78,23 @@ struct TitleAndTextFieldRow_Previews: PreviewProvider {
                              keyboardType: .default)
             .previewLayout(.fixed(width: 375, height: 100))
             .previewDisplayName("With symbol")
+
+        TitleAndTextFieldRow(title: "Add your text",
+                             placeholder: "Start typing",
+                             text: .constant("Hello"),
+                             symbol: nil,
+                             keyboardType: .default)
+            .environment(\.sizeCategory, .accessibilityExtraLarge)
+            .previewLayout(.fixed(width: 375, height: 150))
+            .previewDisplayName("Dynamic Type: Large Font Size")
+
+        TitleAndTextFieldRow(title: "Total package weight",
+                             placeholder: "Value",
+                             text: .constant(""),
+                             symbol: "oz",
+                             keyboardType: .default)
+            .environment(\.sizeCategory, .accessibilityExtraLarge)
+            .previewLayout(.fixed(width: 375, height: 150))
+            .previewDisplayName("Dynamic Type: Large Font Size with symbol")
     }
 }

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TitleAndValueRow.swift

@@ -17,12 +17,14 @@ struct TitleAndValueRow: View {
             action()
         }, label: {
             HStack {
-                Text(title)
-                    .bodyStyle()
-                Spacer()
-                Text(value.text)
-                    .style(for: value)
-                    .padding(.vertical, Constants.verticalPadding)
+                AdaptiveStack(horizontalAlignment: .leading) {
+                    Text(title)
+                        .bodyStyle()
+                    Text(value.text)
+                        .style(for: value)
+                        .frame(maxWidth: .infinity, alignment: .trailing)
+                        .padding(.vertical, Constants.verticalPadding)
+                }
 
                 Image(uiImage: .chevronImage)
                     .flipsForRightToLeftLayoutDirection(true)
@@ -96,5 +98,10 @@ struct TitleAndValueRow_Previews: PreviewProvider {
         TitleAndValueRow(title: "Package selected", value: .placeholder("Small package 2"), selectable: false, action: { })
             .previewLayout(.fixed(width: 375, height: 100))
             .previewDisplayName("Row Not Selectable")
+
+        TitleAndValueRow(title: "Package selected", value: .placeholder("Small"), selectable: true, action: { })
+            .environment(\.sizeCategory, .accessibilityExtraLarge)
+            .previewLayout(.fixed(width: 375, height: 150))
+            .previewDisplayName("Dynamic Type: Large Font Size")
     }
 }

WooCommerce/WooCommerce.xcodeproj/project.pbxproj

@@ -874,6 +874,7 @@
 		A650BE872578E76600C655E0 /* MockStorageManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = A650BE852578E76600C655E0 /* MockStorageManager.swift */; };
 		A6557218258B7510008AE7CA /* OrderListCellViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = A6557217258B7510008AE7CA /* OrderListCellViewModel.swift */; };
 		A655725D258B91AE008AE7CA /* OrderListCellViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = A655725C258B91AE008AE7CA /* OrderListCellViewModelTests.swift */; };
+		AE6DBE3B2732CAAD00957E7A /* AdaptiveStack.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE6DBE3A2732CAAD00957E7A /* AdaptiveStack.swift */; };
 		AEB73C0C25CD734200A8454A /* AttributePickerViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = AEB73C0B25CD734200A8454A /* AttributePickerViewModel.swift */; };
 		AEB73C1725CD8E5800A8454A /* AttributePickerViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AEB73C1625CD8E5800A8454A /* AttributePickerViewModelTests.swift */; };
 		AECD57D226DFDF7500A3B580 /* EditOrderAddressForm.swift in Sources */ = {isa = PBXBuildFile; fileRef = AECD57D126DFDF7500A3B580 /* EditOrderAddressForm.swift */; };
@@ -2304,6 +2305,7 @@
 		A650BE852578E76600C655E0 /* MockStorageManager.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = MockStorageManager.swift; path = ../../../Yosemite/YosemiteTests/Mocks/MockStorageManager.swift; sourceTree = "<group>"; };
 		A6557217258B7510008AE7CA /* OrderListCellViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderListCellViewModel.swift; sourceTree = "<group>"; };
 		A655725C258B91AE008AE7CA /* OrderListCellViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderListCellViewModelTests.swift; sourceTree = "<group>"; };
+		AE6DBE3A2732CAAD00957E7A /* AdaptiveStack.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AdaptiveStack.swift; sourceTree = "<group>"; };
 		AEB73C0B25CD734200A8454A /* AttributePickerViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AttributePickerViewModel.swift; sourceTree = "<group>"; };
 		AEB73C1625CD8E5800A8454A /* AttributePickerViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AttributePickerViewModelTests.swift; sourceTree = "<group>"; };
 		AECD57D126DFDF7500A3B580 /* EditOrderAddressForm.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditOrderAddressForm.swift; sourceTree = "<group>"; };
@@ -4540,6 +4542,7 @@
 				DEE6437726D8DAD900888A75 /* InProgressView.swift */,
 				26C6E8E926E8FD3900C7BB0F /* LazyView.swift */,
 				26C6E8EB26E8FF4800C7BB0F /* LazyNavigationLink.swift */,
+				AE6DBE3A2732CAAD00957E7A /* AdaptiveStack.swift */,
 			);
 			path = "SwiftUI Components";
 			sourceTree = "<group>";
@@ -7594,6 +7597,7 @@
 				028296EC237D28B600E84012 /* TextViewViewController.swift in Sources */,
 				02B8650F24A9E2D800265779 /* Product+SwiftUIPreviewHelpers.swift in Sources */,
 				454B28BE23BF63C600CD2091 /* DateIntervalFormatter+Helpers.swift in Sources */,
+				AE6DBE3B2732CAAD00957E7A /* AdaptiveStack.swift in Sources */,
 				024DF3052372ADCD006658FE /* KeyboardScrollable.swift in Sources */,
 				0212276324498CDC0042161F /* ProductFormBottomSheetAction.swift in Sources */,
 				E1D4E84426776A6B00256B83 /* HeadlineTableViewCell.swift in Sources */,