[Woo POS][Design System] Consolidate icon style (#15115)

iamgabrielma · web-flow · commit 29d1a4919c44 · 2025-02-13T14:23:35.000+01:00
diff --git a/WooCommerce/Classes/POS/Presentation/ItemListView.swift b/WooCommerce/Classes/POS/Presentation/ItemListView.swift
@@ -58,8 +58,8 @@ private extension ItemListView {
                         ServiceLocator.analytics.track(.pointOfSaleSimpleProductsExplanationDialogShown)
                         showSimpleProductsModal = true
                     }, label: {
-                        Image(systemName: "info.circle")
-                            .font(.posButtonSymbol)
+                        Text(Image(systemName: "info.circle"))
+                            .font(.posButtonSymbolLarge)
                     })
                     .foregroundColor(.posOnSurface)
                     .padding(.trailing, Constants.infoIconPadding)
@@ -76,10 +76,8 @@ private extension ItemListView {
         HStack(alignment: .top, spacing: 0) {
             VStack {
                 Spacer()
-                Image(systemName: "info.circle")
-                    .resizable()
-                    .aspectRatio(contentMode: .fit)
-                    .frame(width: Constants.bannerInfoIconSize, height: Constants.bannerInfoIconSize)
+                Text(Image(systemName: "info.circle"))
+                    .font(.posButtonSymbolLarge)
                     .padding(Constants.iconPadding)
                     .foregroundColor(Color.posOnSurface)
                     .accessibilityHidden(true)
@@ -103,8 +101,8 @@ private extension ItemListView {
                 Button(action: {
                     isHeaderBannerDismissed = true
                 }, label: {
-                    Image(systemName: "xmark")
-                        .font(.posBodyLargeRegular())
+                    Text(Image(systemName: "xmark"))
+                        .font(.posButtonSymbolSmall)
                         .foregroundColor(Color.posOnSurfaceVariantLowest)
                         .accessibilityLabel(Localization.dismissBannerAccessibilityLabel)
                 })
@@ -226,7 +224,6 @@ private extension ItemListView {
         static let bannerTextSpacing: CGFloat = 4
         static let bannerTitleSpacing: CGFloat = 8
         static let infoIconPadding: CGFloat = 16
-        static let bannerInfoIconSize: CGFloat = 44
         static let iconPadding: CGFloat = 26
         static let itemListPadding: CGFloat = 16
         static let bannerCardPadding: CGFloat = 16
diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift
@@ -42,8 +42,8 @@ struct ItemRowView: View {
                 Button(action: {
                     onItemRemoveTapped()
                 }, label: {
-                    Image(systemName: "xmark.circle")
-                        .font(.posBodyLargeRegular())
+                    Text(Image(systemName: "xmark.circle"))
+                        .font(.posButtonSymbolMedium)
                 })
                 .accessibilityLabel(Localization.removeFromCartAccessibilityLabel)
                 .padding(.trailing, Constants.cardContentHorizontalPadding)
diff --git a/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift
@@ -39,3 +39,8 @@ private extension PointOfSaleOrderSyncErrorMessageView {
         static let buttonBottomPadding: CGFloat = 16
     }
 }
+
+#Preview {
+    PointOfSaleOrderSyncErrorMessageView(viewModel: PointOfSaleOrderSyncErrorMessageViewModel(message: "An error happened!",
+                                                                                              handler: {}))
+}
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift
@@ -15,8 +15,8 @@ struct PointOfSaleExitPosAlertView: View {
                 Button {
                     isPresented = false
                 } label: {
-                    Image(systemName: "xmark")
-                        .font(.posButtonSymbol)
+                    Text(Image(systemName: "xmark"))
+                        .font(.posButtonSymbolSmall)
                 }
                 .foregroundColor(Color.posOnSurfaceVariantLowest)
             }
@@ -63,3 +63,9 @@ private extension PointOfSaleExitPosAlertView {
         )
     }
 }
+
+#if DEBUG
+#Preview {
+    PointOfSaleExitPosAlertView(isPresented: .constant(true))
+}
+#endif
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemImageView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemImageView.swift
@@ -11,7 +11,7 @@ struct POSItemImageView: View {
             .foregroundColor(Constants.placeholderBackgroundColor)
             .overlay {
                 Text(Image(systemName: "archivebox"))
-                    .font(.posButtonSymbol)
+                    .font(.posButtonSymbolLarge)
                     .foregroundColor(Constants.placeholderIconColor)
             }
     }
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalCloseButton.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalCloseButton.swift
@@ -21,8 +21,8 @@ struct POSModalCloseButton: ViewModifier {
             HStack {
                 Spacer()
                 Button(action: closeAction, label: {
-                    Image(systemName: "xmark")
-                        .font(.posButtonSymbol)
+                    Text(Image(systemName: "xmark"))
+                        .font(.posButtonSymbolSmall)
                 })
                 .foregroundColor(Color.posOnSurfaceVariantLowest)
                 .accessibilityLabel(accessibilityLabel)
diff --git a/WooCommerce/Classes/POS/Utils/POSFontStyle.swift b/WooCommerce/Classes/POS/Utils/POSFontStyle.swift
@@ -13,7 +13,9 @@ enum POSFontStyle {
     case posBodySmallRegular(underline: Bool = false)
     case posCaptionBold
     case posCaptionRegular
-    case posButtonSymbol
+    case posButtonSymbolSmall
+    case posButtonSymbolMedium
+    case posButtonSymbolLarge
 
     func font(maximumContentSizeCategory: UIContentSizeCategory? = nil) -> Font {
         switch self {
@@ -40,8 +42,12 @@ enum POSFontStyle {
             Font.system(size: scaledValue(FontSize.caption, maximumContentSizeCategory: maximumContentSizeCategory), weight: .bold)
         case .posCaptionRegular:
             Font.system(size: scaledValue(FontSize.caption, maximumContentSizeCategory: maximumContentSizeCategory), weight: .regular)
-        case .posButtonSymbol:
-            Font.system(size: scaledValue(32, maximumContentSizeCategory: maximumContentSizeCategory), weight: .medium)
+        case .posButtonSymbolSmall:
+            Font.system(size: scaledValue(20, maximumContentSizeCategory: maximumContentSizeCategory), weight: .semibold)
+        case .posButtonSymbolMedium:
+            Font.system(size: scaledValue(24, maximumContentSizeCategory: maximumContentSizeCategory), weight: .semibold)
+        case .posButtonSymbolLarge:
+            Font.system(size: scaledValue(30, maximumContentSizeCategory: maximumContentSizeCategory), weight: .semibold)
         }
     }
 
@@ -104,6 +110,7 @@ extension View {
 }
 
 // MARK: - Preview
+#if DEBUG
 #Preview {
     ScrollView {
         VStack(alignment: .leading, spacing: 20) {
@@ -134,10 +141,15 @@ extension View {
                     .font(.posCaptionBold)
                 Text("Caption Regular")
                     .font(.posCaptionRegular)
-                Text("Button Symbol")
-                    .font(.posButtonSymbol)
+                Text("Button Symbol Small")
+                    .font(.posButtonSymbolSmall)
+                Text("Button Symbol Medium")
+                    .font(.posButtonSymbolMedium)
+                Text("Button Symbol Large")
+                    .font(.posButtonSymbolLarge)
             }
         }
         .padding()
     }
 }
+#endif

Original file line number	Diff line number	Diff line change
`@@ -39,3 +39,8 @@ private extension PointOfSaleOrderSyncErrorMessageView {`
`39`	`39`	`static let buttonBottomPadding: CGFloat = 16`
`40`	`40`	`}`
`41`	`41`	`}`
	`42`	`+`
	`43`	`+#Preview {`
	`44`	`+ PointOfSaleOrderSyncErrorMessageView(viewModel: PointOfSaleOrderSyncErrorMessageViewModel(message: "An error happened!",`
	`45`	`+ handler: {}))`
	`46`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,8 @@ struct PointOfSaleExitPosAlertView: View {`
`15`	`15`	`Button {`
`16`	`16`	`isPresented = false`
`17`	`17`	`} label: {`
`18`		`- Image(systemName: "xmark")`
`19`		`- .font(.posButtonSymbol)`
	`18`	`+ Text(Image(systemName: "xmark"))`
	`19`	`+ .font(.posButtonSymbolSmall)`
`20`	`20`	`}`
`21`	`21`	`.foregroundColor(Color.posOnSurfaceVariantLowest)`
`22`	`22`	`}`
`@@ -63,3 +63,9 @@ private extension PointOfSaleExitPosAlertView {`
`63`	`63`	`)`
`64`	`64`	`}`
`65`	`65`	`}`
	`66`	`+`
	`67`	`+#if DEBUG`
	`68`	`+#Preview {`
	`69`	`+ PointOfSaleExitPosAlertView(isPresented: .constant(true))`
	`70`	`+}`
	`71`	`+#endif`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ struct POSItemImageView: View {`
`11`	`11`	`.foregroundColor(Constants.placeholderBackgroundColor)`
`12`	`12`	`.overlay {`
`13`	`13`	`Text(Image(systemName: "archivebox"))`
`14`		`- .font(.posButtonSymbol)`
	`14`	`+ .font(.posButtonSymbolLarge)`
`15`	`15`	`.foregroundColor(Constants.placeholderIconColor)`
`16`	`16`	`}`
`17`	`17`	`}`