[Woo POS] [Design System] Spacing and padding consolidation (#15217)

woocommerce · Feb 21, 2025 · e097814 · e097814
2 parents 2d6713b + 795a764
commit e097814
Show file tree

Hide file tree

Showing 43 changed files with 237 additions and 218 deletions.
diff --git a/...mmerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift b/...mmerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift
@@ -115,16 +115,16 @@ private extension CardReaderConnectionStatusView {
 @available(iOS 17.0, *)
 private extension CardReaderConnectionStatusView {
     enum Constants {
-        static let buttonImageAndTextSpacing: CGFloat = 16
+        static let buttonImageAndTextSpacing: CGFloat = POSSpacing.medium
         static let imageDimension: CGFloat = 14
         static let progressIndicatorDimension: CGFloat = 10
         static let progressIndicatorLineWidth: CGFloat = 2
         static let font = POSFontStyle.posBodyMediumRegular()
-        static let horizontalPadding: CGFloat = 24
-        static let disconnectedBorderAndContentSpacing: CGFloat = 16
+        static let horizontalPadding: CGFloat = POSPadding.large
+        static let disconnectedBorderAndContentSpacing: CGFloat = POSSpacing.medium
         static let disconnectedBorderCornerRadius: CGFloat = POSCornerRadiusStyle.small.value
         static let disconnectedBorderWidth: CGFloat = 2
-        static let disconnectedBorderInset: CGFloat = 8
+        static let disconnectedBorderInset: CGFloat = POSSpacing.small
     }
 }
 

diff --git a/...n/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift b/...n/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift
@@ -100,19 +100,27 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView {
 
 private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView {
     enum Layout {
-        static let padding: EdgeInsets = .init(top: 0, leading: 16, bottom: 0, trailing: 16)
-        static let headerPadding: EdgeInsets = .init(top: 20, leading: 4, bottom: 20, trailing: 4)
-        static let buttonPadding: EdgeInsets = .init(top: 16, leading: 0, bottom: 16, trailing: 0)
-        static let horizontalSpacing: CGFloat = 16
-        static let rowVerticalPadding: CGFloat = 4
+        static let padding: EdgeInsets = .init(top: POSPadding.none,
+                                               leading: POSPadding.medium,
+                                               bottom: POSPadding.none,
+                                               trailing: POSPadding.medium)
+        static let headerPadding: EdgeInsets = .init(top: POSPadding.medium,
+                                                     leading: POSPadding.xSmall,
+                                                     bottom: POSPadding.medium,
+                                                     trailing: POSPadding.xSmall)
+        static let buttonPadding: EdgeInsets = .init(top: POSPadding.medium,
+                                                     leading: POSPadding.none,
+                                                     bottom: POSPadding.medium,
+                                                     trailing: POSPadding.none)
+        static let horizontalSpacing: CGFloat = POSSpacing.medium
+        static let rowVerticalPadding: CGFloat = POSPadding.xSmall
     }
 }
 
 #Preview {
-    @Namespace var namespace
     return PointOfSaleCardPresentPaymentFoundMultipleReadersView(
         viewModel: .init(readerIDs: ["Reader 1", "Reader 2"],
                          selectionHandler: { _ in }),
-        animation: .init(namespace: namespace)
+        animation: .init(namespace: Namespace().wrappedValue)
     )
 }
diff --git a/...ReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift b/...ReaderConnection/UI States/Connection Alerts/PointOfSaleReaderConnectionModalLayout.swift
@@ -1,9 +1,9 @@
 import Foundation
 
 enum PointOfSaleReaderConnectionModalLayout {
-    static var contentButtonSpacing: CGFloat = 24
-    static var imageTextSpacing: CGFloat = 24
-    static var textSpacing: CGFloat = 16
-    static var buttonSpacing: CGFloat = 24
-    static var contentPadding: CGFloat = 40
+    static var contentButtonSpacing: CGFloat = POSSpacing.large
+    static var imageTextSpacing: CGFloat = POSSpacing.large
+    static var textSpacing: CGFloat = POSSpacing.medium
+    static var buttonSpacing: CGFloat = POSSpacing.large
+    static var contentPadding: CGFloat = POSPadding.xxLarge
 }
diff --git a/...sses/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorLayout.swift b/...sses/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorLayout.swift
@@ -1,7 +1,7 @@
 import Foundation
 
 enum PointOfSaleItemListErrorLayout {
-    static let headerSpacing: CGFloat = 16
+    static let headerSpacing: CGFloat = POSSpacing.medium
     static let buttonWidth: CGFloat = 600
-    static let verticalPadding: CGFloat = 16
+    static let verticalPadding: CGFloat = POSPadding.medium
 }
diff --git a/...erce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift b/...erce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleLoadingView.swift
@@ -36,13 +36,6 @@ private extension PointOfSaleLoadingView {
     }
 }
 
-private extension PointOfSaleLoadingView {
-    enum Layout {
-        static let textSpacing: CGFloat = 16
-        static let progressViewSpacing: CGFloat = 72
-    }
-}
-
 #Preview {
     PointOfSaleLoadingView()
 }
diff --git a/...ses/POS/Presentation/CardReaderConnection/UI States/PointOfSaleUnsupportedWidthView.swift b/...ses/POS/Presentation/CardReaderConnection/UI States/PointOfSaleUnsupportedWidthView.swift
@@ -26,7 +26,7 @@ struct PointOfSaleUnsupportedWidthView: View {
                 .fixedSize(horizontal: false, vertical: true)
                 .multilineTextAlignment(.center)
             }
-            .padding(.horizontal, 16)
+            .padding(.horizontal, POSPadding.medium)
 
             Spacer()
         }

diff --git a/...I States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift b/...I States/Reader Messages/PointOfSaleCardPresentPaymentActivityIndicatingMessageView.swift
@@ -34,7 +34,7 @@ struct PointOfSaleCardPresentPaymentActivityIndicatingMessageView: View {
 private extension PointOfSaleCardPresentPaymentActivityIndicatingMessageView {
     enum Constants {
         static let headerDimension: CGFloat = 160
-        static let imageAndTextSpacing: CGFloat = 32
+        static let imageAndTextSpacing: CGFloat = POSSpacing.xLarge
     }
 }
 

diff --git a/...tion/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift b/...tion/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift
@@ -12,7 +12,7 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View {
     }
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             POSErrorXMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 
@@ -48,7 +48,6 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View {
                 }
                 .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             }
-            .frame(width: width * 0.5)
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)

diff --git a/...tion/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift b/...tion/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift
@@ -11,7 +11,7 @@ struct PointOfSaleCardPresentPaymentReaderDisconnectedMessageView: View {
     }
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             Image(decorative: PointOfSaleAssets.readerDisconnected.imageName)
 
             Spacer()

diff --git a/...States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift b/...States/Reader Messages/PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView.swift
@@ -6,14 +6,14 @@ struct PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView: View {
     @Environment(\.dynamicTypeSize) private var dynamicTypeSize
 
     var body: some View {
-        VStack(alignment: .center, spacing: Layout.headerSpacing) {
+        VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.imageAndTextSpacing) {
             ProgressView()
                 .progressViewStyle(CardWaveProgressViewStyle())
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
                 .accessibilityHidden(true)
                 .renderedIf(!dynamicTypeSize.isAccessibilitySize)
 
-            VStack(alignment: .center, spacing: Layout.textSpacing) {
+            VStack(alignment: .center, spacing: PointOfSaleCardPresentPaymentLayout.textSpacing) {
                 Text(viewModel.title)
                     .foregroundColor(.posOnPrimary)
                     .font(.posBodyLargeRegular())
@@ -31,19 +31,11 @@ struct PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView: View {
     }
 }
 
-private extension PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView {
-    enum Layout {
-        static let headerSpacing: CGFloat = 48
-        static let textSpacing: CGFloat = 16
-    }
-}
-
 #Preview {
-    @Namespace var namespace
     return PointOfSaleCardPresentPaymentDisplayReaderMessageMessageView(
         viewModel: PointOfSaleCardPresentPaymentDisplayReaderMessageMessageViewModel(
             message: "Remove card"),
-        animation: .init(namespace: namespace)
+        animation: .init(namespace: Namespace().wrappedValue)
     )
     .background(Color.posPrimary)
 }
diff --git a/...rConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift b/...rConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift
@@ -7,7 +7,7 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View {
     @State private var width: CGFloat = 0
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             POSErrorXMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 
@@ -41,7 +41,6 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View {
                     .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
-            .frame(width: width * 0.5)
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)

diff --git a/... States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift b/... States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift
@@ -7,7 +7,7 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View {
     @State private var width: CGFloat = 0
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             POSErrorXMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 
@@ -41,7 +41,6 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View {
                     .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
-            .frame(width: width * 0.5)
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)

diff --git a/.../CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift b/.../CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentLayout.swift
@@ -2,13 +2,12 @@ import Foundation
 
 enum PointOfSaleCardPresentPaymentLayout {
     static let headerSize: CGSize = .init(width: 156, height: 156)
-    static let headerSpacing: CGFloat = 72
-    static let imageAndTextSpacing: CGFloat = 24
-    static let textAndButtonSpacing: CGFloat = 32
-    static let textSpacing: CGFloat = 8
-    static let buttonSpacing: CGFloat = 24
+    static let imageAndTextSpacing: CGFloat = POSSpacing.large
+    static let textAndButtonSpacing: CGFloat = POSSpacing.xLarge
+    static let textSpacing: CGFloat = POSSpacing.small
+    static let buttonSpacing: CGFloat = POSSpacing.large
     static let errorIconSize: CGFloat = 64
     static let largeErrorIconSize: CGFloat = 84
-    static let horizontalPadding: CGFloat = 40
+    static let horizontalPadding: CGFloat = POSPadding.xxLarge
     static let errorContentMaxWidth: CGFloat = 604
 }
diff --git a/...UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift b/...UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift
@@ -7,7 +7,7 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View {
     @State private var width: CGFloat = 0
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             POSErrorXMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 
@@ -36,7 +36,6 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View {
             Button(viewModel.tryAnotherPaymentMethodButtonViewModel.title,
                    action: viewModel.tryAnotherPaymentMethodButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
-            .frame(width: width * 0.5)
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)

diff --git a/...ection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift b/...ection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift
@@ -32,9 +32,8 @@ struct PointOfSaleCardPresentPaymentProcessingMessageView: View {
 }
 
 #Preview {
-    @Namespace var namespace
     return PointOfSaleCardPresentPaymentProcessingMessageView(
         viewModel: PointOfSaleCardPresentPaymentProcessingMessageViewModel(),
-        animation: .init(namespace: namespace)
+        animation: .init(namespace: Namespace().wrappedValue)
     )
 }
diff --git a/...I States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift b/...I States/Reader Messages/PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView.swift
@@ -33,16 +33,15 @@ struct PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView: View {
 
 private extension PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView {
     enum Constants {
-        static let imageAndTextSpacing: CGFloat = 36
+        static let imageAndTextSpacing: CGFloat = POSSpacing.xLarge
     }
 }
 
 #Preview {
-    @Namespace var namespace
     return PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageView(
         viewModel: PointOfSaleCardPresentPaymentTapSwipeInsertCardMessageViewModel(
             inputMethods: [.tap, .insert]
         ),
-        animation: .init(namespace: namespace)
+        animation: .init(namespace: Namespace().wrappedValue)
     )
 }
diff --git a/...States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift b/...States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift
@@ -8,7 +8,7 @@ struct PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView: View {
     @State private var width: CGFloat = 0
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             POSErrorExclamationMark()
                 .matchedGeometryEffect(id: animation.iconTransitionId, in: animation.namespace, properties: .position)
 

diff --git a/...tation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift b/...tation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift
@@ -3,7 +3,6 @@ import SwiftUI
 @available(iOS 17.0, *)
 struct PointOfSalePaymentSuccessView: View {
     let viewModel: PointOfSalePaymentSuccessViewModel
-    @Environment(\.colorScheme) var colorScheme
     @Environment(\.dynamicTypeSize) var dynamicTypeSize
 
     @State private var isShowingSendReceiptView: Bool = false
@@ -23,7 +22,7 @@ struct PointOfSalePaymentSuccessView: View {
                     successView
                     Spacer()
                 }
-                .padding([.leading, .trailing], dynamicTypeSize.isAccessibilitySize ? nil : 8)
+                .padding([.leading, .trailing], dynamicTypeSize.isAccessibilitySize ? nil : POSPadding.small)
                 .background(Color.posSurfaceBright)
             }
         }
@@ -37,14 +36,16 @@ struct PointOfSalePaymentSuccessView: View {
 
     private var successView: some View {
         ZStack {
-            VStack(alignment: .center, spacing: Constants.headerSpacing) {
+            VStack(alignment: .center, spacing: POSSpacing.none) {
                 Spacer()
 
                 successIcon
                     .renderedIf(!dynamicTypeSize.isAccessibilitySize)
                     .scaleEffect(isViewLoaded ? 1 : 0)
                     .opacity(isViewLoaded ? 1 : 0)
 
+                Spacer().frame(height: POSSpacing.xLarge)
+
                 VStack(alignment: .center, spacing: Constants.textSpacing) {
                     Text(viewModel.title)
                         .font(.posHeadingBold)
@@ -62,9 +63,11 @@ struct PointOfSalePaymentSuccessView: View {
                     }
                 }
 
+                Spacer().frame(height: POSSpacing.xxLarge)
+
                 PaymentsActionButtons(isShowingSendReceiptView: $isShowingSendReceiptView,
                                       isShowingReceiptNotEligibleBanner: $isShowingReceiptNotEligibleBanner)
-                .containerRelativeFrame(.horizontal, count: 2, span: 1, spacing: 0)
+                .containerRelativeFrame(.horizontal, count: 2, span: 1, spacing: POSSpacing.none)
                 .frame(maxWidth: .infinity, alignment: .center)
                 .offset(y: isViewLoaded ? 0 : -Constants.animationOffset)
                 .opacity(isViewLoaded ? 1 : 0)
@@ -112,8 +115,7 @@ private extension PointOfSalePaymentSuccessView {
         static let shadowOpacity: CGFloat = 0.16
         static let shadowRadius: CGFloat = 16
         static let shadowSize: CGSize = .init(width: 0, height: 8)
-        static let headerSpacing: CGFloat = 56
-        static let textSpacing: CGFloat = 16
+        static let textSpacing: CGFloat = POSSpacing.small
         static let animationOffset: CGFloat = 100
     }
 }

diff --git a/...ates/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift b/...ates/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift
@@ -4,7 +4,7 @@ struct PointOfSaleCardPresentPaymentCaptureFailedView: View {
     @Binding var isPresented: Bool
 
     var body: some View {
-        VStack(alignment: .center, spacing: 0) {
+        VStack(alignment: .center, spacing: POSSpacing.none) {
             POSErrorExclamationMark()
                 .accessibilityAddTraits(.isHeader)
 
@@ -42,7 +42,7 @@ struct PointOfSaleCardPresentPaymentCaptureFailedView: View {
 private extension PointOfSaleCardPresentPaymentCaptureFailedView {
     enum Layout {
         static let maxWidth: CGFloat = 896
-        static let contentPadding: CGFloat = 40
+        static let contentPadding: CGFloat = POSPadding.xxLarge
     }
 
     enum Localization {

diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift
@@ -181,17 +181,15 @@ private extension CartView {
 private extension CartView {
     enum Constants {
         static let primaryFont: POSFontStyle = .posHeadingBold
-        static let secondaryFont: POSFontStyle = .posBodyLargeRegular()
+        static let secondaryFont: POSFontStyle = .posBodyMediumRegular()
         static let itemsFont: POSFontStyle = .posBodySmallRegular()
-        static let itemHorizontalPadding: CGFloat = 8
         static let shoppingBagImageSize: CGFloat = 104
         static let scrollViewCoordinateSpaceIdentifier: String = "CartScrollView"
-        static let emptyViewImageTextSpacing: CGFloat = 30 // This should be 40 by designs, but the overlay technique means we have to tweak it
-        static let cartHeaderSpacing: CGFloat = 8
-        static let cartHeaderElementSpacing: CGFloat = 16
+        static let emptyViewImageTextSpacing: CGFloat = POSSpacing.xLarge // This should be 40 by designs, but the overlay technique means we have to tweak it
+        static let cartHeaderElementSpacing: CGFloat = POSSpacing.medium
         static let cartAnimation: Animation = .spring(duration: 0.2)
-        static let checkoutButtonVerticalPadding: CGFloat = 16
-        static let cartItemSpacing: CGFloat = 8
+        static let checkoutButtonVerticalPadding: CGFloat = POSPadding.medium
+        static let cartItemSpacing: CGFloat = POSSpacing.small
     }
 
     enum Localization {

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift
@@ -102,10 +102,6 @@ private extension ChildItemList {
             comment: "Back button title in the child item list screen."
         )
     }
-
-    enum Constants {
-        static let itemListPadding: CGFloat = 16
-    }
 }
 
 #if DEBUG