Merge pull request #6206 from woocommerce/issue/6203-variable-product-style

rachelmcr · web-flow · commit 7e38109d835f · 2022-02-17T09:50:11.000Z
Order Creation: Fix styles for variable product rows in the product list
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Creation/ProductsSection/AddProductToOrder.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Creation/ProductsSection/AddProductToOrder.swift
@@ -65,7 +65,12 @@ struct AddProductToOrder: View {
         if rowViewModel.numberOfVariations > 0,
            let addVariationToOrderVM = viewModel.getVariationsViewModel(for: rowViewModel.productOrVariationID) {
             LazyNavigationLink(destination: AddProductVariationToOrder(isPresented: $isPresented, viewModel: addVariationToOrderVM)) {
-                ProductRow(viewModel: rowViewModel)
+                HStack {
+                    ProductRow(viewModel: rowViewModel)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+
+                    DisclosureIndicator()
+                }
             }
         } else {
             ProductRow(viewModel: rowViewModel)
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Order Creation/ProductsSection/ProductRow.swift b/WooCommerce/Classes/ViewRelated/Orders/Order Creation/ProductsSection/ProductRow.swift
@@ -30,6 +30,7 @@ struct ProductRow: View {
                     // Product details
                     VStack(alignment: .leading) {
                         Text(viewModel.name)
+                            .bodyStyle()
                         Text(viewModel.productDetailsLabel)
                             .subheadlineStyle()
                         Text(viewModel.skuLabel)
diff --git a/WooCommerce/Classes/ViewRelated/Orders/Simple Payments/Method/SimplePaymentsMethod.swift b/WooCommerce/Classes/ViewRelated/Orders/Simple Payments/Method/SimplePaymentsMethod.swift
@@ -150,13 +150,7 @@ private struct MethodRow: View {
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
 
-                Image(uiImage: .chevronImage)
-                    .resizable()
-                    .flipsForRightToLeftLayoutDirection(true)
-                    .frame(width: SimplePaymentsMethod.Layout.chevronWidthHeight(scale: scale),
-                           height: SimplePaymentsMethod.Layout.chevronWidthHeight(scale: scale))
-                    .foregroundColor(Color(.systemGray))
-                    .accessibility(hidden: true)
+                DisclosureIndicator()
             }
             .padding(.vertical, SimplePaymentsMethod.Layout.verticalPadding)
             .padding(.horizontal, insets: safeAreaInsets)
@@ -206,10 +200,6 @@ private extension SimplePaymentsMethod {
         static func iconWidthHeight(scale: CGFloat) -> CGFloat {
             24 * scale
         }
-
-        static func chevronWidthHeight(scale: CGFloat) -> CGFloat {
-            22 * scale
-        }
     }
 }
 
diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DisclosureIndicator.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/DisclosureIndicator.swift
@@ -0,0 +1,32 @@
+import SwiftUI
+
+struct DisclosureIndicator: View {
+    /// Keeps track of the current screen scale
+    ///
+    @ScaledMetric private var scale = 1
+
+    var body: some View {
+        Image(uiImage: .chevronImage)
+            .resizable()
+            .flipsForRightToLeftLayoutDirection(true)
+            .frame(width: Constants.chevronSize(scale: scale), height: Constants.chevronSize(scale: scale))
+            .foregroundColor(Color(.systemGray))
+            .accessibility(hidden: true)
+    }
+}
+
+// MARK: Constants
+private extension DisclosureIndicator {
+    enum Constants {
+        static func chevronSize(scale: CGFloat) -> CGFloat {
+            22 * scale
+        }
+    }
+}
+
+struct DisclosureIndicator_Previews: PreviewProvider {
+    static var previews: some View {
+        DisclosureIndicator()
+            .previewLayout(.sizeThatFits)
+    }
+}
diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/NavigationRow.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/NavigationRow.swift
@@ -16,10 +16,6 @@ struct NavigationRow<Content: View>: View {
     ///
     let action: () -> Void
 
-    /// Keeps track of the current screen scale
-    ///
-    @ScaledMetric private var scale = 1
-
     /// Environment safe areas
     ///
     @Environment(\.safeAreaInsets) var safeAreaInsets: EdgeInsets
@@ -37,13 +33,7 @@ struct NavigationRow<Content: View>: View {
             HStack {
                 content
                 Spacer()
-                Image(uiImage: .chevronImage)
-                    .resizable()
-                    .flipsForRightToLeftLayoutDirection(true)
-                    .frame(width: Layout.chevronWidthHeight(scale: scale),
-                           height: Layout.chevronWidthHeight(scale: scale))
-                    .foregroundColor(Color(.systemGray))
-                    .accessibility(hidden: true)
+                DisclosureIndicator()
                     .renderedIf(selectable)
             }
             .padding()
@@ -56,9 +46,6 @@ struct NavigationRow<Content: View>: View {
 
 private enum Layout {
     static let minHeight: CGFloat = 44
-    static func chevronWidthHeight(scale: CGFloat) -> CGFloat {
-        22 * scale
-    }
 }
 
 struct NavigationRow_Previews: PreviewProvider {
diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TitleAndValueRow.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TitleAndValueRow.swift
@@ -41,11 +41,8 @@ struct TitleAndValueRow: View {
                         .padding(.vertical, Constants.verticalPadding)
                 }
 
-                Image(uiImage: .chevronImage)
-                    .flipsForRightToLeftLayoutDirection(true)
+                DisclosureIndicator()
                     .renderedIf(selectionStyle == .disclosure)
-                    .frame(width: Constants.imageSize, height: Constants.imageSize)
-                    .foregroundColor(Color(UIColor.gray(.shade30)))
             }
             .contentShape(Rectangle())
         })
@@ -107,7 +104,6 @@ private extension Text {
 
 private extension TitleAndValueRow {
     enum Constants {
-        static let imageSize: CGFloat = 22
         static let minHeight: CGFloat = 44
         static let maxHeight: CGFloat = 136
         static let horizontalPadding: CGFloat = 16
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj
@@ -1190,6 +1190,7 @@
 		CC593A6B26EA640800EF0E04 /* PackageCreationError+UI.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC593A6A26EA640800EF0E04 /* PackageCreationError+UI.swift */; };
 		CC69236226010946002FB669 /* LoginProloguePages.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC69236126010946002FB669 /* LoginProloguePages.swift */; };
 		CC6923AC26010D8D002FB669 /* LoginProloguePageViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC6923AB26010D8D002FB669 /* LoginProloguePageViewController.swift */; };
+		CC72BB6427BD842500837876 /* DisclosureIndicator.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC72BB6327BD842500837876 /* DisclosureIndicator.swift */; };
 		CC770C8A27B1497700CE6ABC /* SearchHeader.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC770C8927B1497700CE6ABC /* SearchHeader.swift */; };
 		CC77488E2719A07D0043CDD7 /* ShippingLabelAddressTopBannerFactoryTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC77488D2719A07D0043CDD7 /* ShippingLabelAddressTopBannerFactoryTests.swift */; };
 		CC8413E423F5C48E00EFC277 /* stop.sh in Resources */ = {isa = PBXBuildFile; fileRef = CCFC011123E9E40B00157A78 /* stop.sh */; };
@@ -2825,6 +2826,7 @@
 		CC593A6A26EA640800EF0E04 /* PackageCreationError+UI.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "PackageCreationError+UI.swift"; sourceTree = "<group>"; };
 		CC69236126010946002FB669 /* LoginProloguePages.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginProloguePages.swift; sourceTree = "<group>"; };
 		CC6923AB26010D8D002FB669 /* LoginProloguePageViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginProloguePageViewController.swift; sourceTree = "<group>"; };
+		CC72BB6327BD842500837876 /* DisclosureIndicator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DisclosureIndicator.swift; sourceTree = "<group>"; };
 		CC770C8927B1497700CE6ABC /* SearchHeader.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SearchHeader.swift; sourceTree = "<group>"; };
 		CC77488D2719A07D0043CDD7 /* ShippingLabelAddressTopBannerFactoryTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingLabelAddressTopBannerFactoryTests.swift; sourceTree = "<group>"; };
 		CCB366AE274518EC007D437A /* NewOrderViewModelTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewOrderViewModelTests.swift; sourceTree = "<group>"; };
@@ -5095,6 +5097,7 @@
 				AEACCB6C2785FF4A000D01F0 /* NavigationRow.swift */,
 				CCF87BBD279047BC00461C43 /* InfiniteScrollList.swift */,
 				CC770C8927B1497700CE6ABC /* SearchHeader.swift */,
+				CC72BB6327BD842500837876 /* DisclosureIndicator.swift */,
 			);
 			path = "SwiftUI Components";
 			sourceTree = "<group>";
@@ -8990,6 +8993,7 @@
 				0298430C259351F100979CAE /* ShippingLabelsTopBannerFactory.swift in Sources */,
 				020BE74D23B1F5EB007FE54C /* TitleAndTextFieldTableViewCell.swift in Sources */,
 				023D692E2588BF0900F7DA72 /* ShippingLabelPaperSizeListSelectorCommand.swift in Sources */,
+				CC72BB6427BD842500837876 /* DisclosureIndicator.swift in Sources */,
 				77E53EC52510C193003D385F /* ProductDownloadListViewController+Droppable.swift in Sources */,
 				0259D5F92581F0E6003B1CD6 /* ShippingLabelPaperSizeOptionView.swift in Sources */,
 				D81F2D37225F0D160084BF9C /* EmptyListMessageWithActionView.swift in Sources */,

Original file line number	Diff line number	Diff line change
`@@ -150,13 +150,7 @@ private struct MethodRow: View {`
`150`	`150`	`}`
`151`	`151`	`.frame(maxWidth: .infinity, alignment: .leading)`
`152`	`152`
`153`		`- Image(uiImage: .chevronImage)`
`154`		`- .resizable()`
`155`		`- .flipsForRightToLeftLayoutDirection(true)`
`156`		`- .frame(width: SimplePaymentsMethod.Layout.chevronWidthHeight(scale: scale),`
`157`		`- height: SimplePaymentsMethod.Layout.chevronWidthHeight(scale: scale))`
`158`		`- .foregroundColor(Color(.systemGray))`
`159`		`- .accessibility(hidden: true)`
	`153`	`+ DisclosureIndicator()`
`160`	`154`	`}`
`161`	`155`	`.padding(.vertical, SimplePaymentsMethod.Layout.verticalPadding)`
`162`	`156`	`.padding(.horizontal, insets: safeAreaInsets)`
`@@ -206,10 +200,6 @@ private extension SimplePaymentsMethod {`
`206`	`200`	`static func iconWidthHeight(scale: CGFloat) -> CGFloat {`
`207`	`201`	`24 * scale`
`208`	`202`	`}`
`209`		`-`
`210`		`- static func chevronWidthHeight(scale: CGFloat) -> CGFloat {`
`211`		`- 22 * scale`
`212`		`- }`
`213`	`203`	`}`
`214`	`204`	`}`
`215`	`205`