Create PlusButtonStyle for buttons with a plus icon

Author: rachelmcr

WooCommerce/Classes/ViewRelated/Orders/Order Creation/NewOrder.swift

@@ -93,9 +93,10 @@ private struct ProductsSection: View {
                 // TODO: Add a product row for each product added to the order
                 ProductRow()
 
-                AddButton(title: NewOrder.Localization.addProduct) {
+                Button(NewOrder.Localization.addProduct) {
                     // TODO: Open Add Product modal view
                 }
+                .buttonStyle(PlusButtonStyle())
             }
             .padding(.horizontal, insets: geometry.safeAreaInsets)
             .padding()
@@ -196,26 +197,6 @@ private struct ProductsSection: View {
     }
 }
 
-// MARK: Custom Views
-/// Represents a button with a plus icon.
-/// Used for any button that adds details to the order.
-///
-private struct AddButton: View {
-    let title: String
-    let onButtonTapped: () -> Void
-
-    var body: some View {
-        Button(action: { onButtonTapped() }) {
-            Label {
-                Text(title)
-            } icon: {
-                Image(uiImage: .plusImage)
-            }
-            Spacer()
-        }
-    }
-}
-
 // MARK: Constants
 private extension NewOrder {
     enum Layout {

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

@@ -23,6 +23,12 @@ struct LinkButtonStyle: ButtonStyle {
     }
 }
 
+struct PlusButtonStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        return PlusButton(configuration: configuration)
+    }
+}
+
 /// Adds a primary button style while showing a progress view on top of the button when required.
 ///
 struct PrimaryLoadingButtonStyle: PrimitiveButtonStyle {
@@ -191,6 +197,28 @@ private struct LinkButton: View {
     }
 }
 
+private struct PlusButton: View {
+    let configuration: ButtonStyleConfiguration
+    
+    var body: some View {
+        HStack {
+            Label {
+                configuration.label
+            } icon: {
+                Image(uiImage: .plusImage)
+            }
+            Spacer()
+        }
+        .frame(maxWidth: .infinity)
+        .foregroundColor(Color(foregroundColor))
+        .background(Color(.clear))
+    }
+    
+    var foregroundColor: UIColor {
+        configuration.isPressed ? .accentDark : .accent
+    }
+}
+
 private enum Style {
     static let defaultCornerRadius = CGFloat(8.0)
     static let defaultBorderWidth = CGFloat(1.0)
@@ -216,6 +244,9 @@ struct PrimaryButton_Previews: PreviewProvider {
 
             Button("Link button") {}
                 .buttonStyle(LinkButtonStyle())
+
+            Button("Plus button") {}
+                .buttonStyle(PlusButtonStyle())
         }
         .padding()
     }