Skip to content

Commit a406f48

Browse files
jaclyncjaclync
authored
[Woo POS][Design System] Consolidate elevation/shadow style (#15143)
2 parents be8aca0 + 411b3ca commit a406f48

File tree

7 files changed

+67
-12
lines changed

7 files changed

+67
-12
lines changed

‎WooCommerce/Classes/POS/Presentation/ItemListView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ private extension ItemListView {
114114
.fixedSize(horizontal: false, vertical: true)
115115
.background(Color.posSurfaceBright)
116116
.cornerRadius(Constants.bannerCornerRadius)
117-
.shadow(color: Color.posShadow.opacity(0.08), radius: 4, y: 2)
117+
.posShadow(.medium)
118118
.accessibilityAddTraits(.isButton)
119119
.onTapGesture {
120120
showSimpleProductsModal = true

‎WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,7 @@ struct POSFloatingControlView: View {
7070
.frame(height: Constants.size)
7171
.background(Color.clear)
7272
.animation(.default, value: backgroundAppearance)
73-
.shadow(color: Color.posShadow.opacity(0.05), radius: 43, y: 50)
74-
.shadow(color: Color.posShadow.opacity(0.10), radius: 36, y: 30)
75-
.shadow(color: Color.posShadow.opacity(0.18), radius: 27, y: 15)
76-
.shadow(color: Color.posShadow.opacity(0.20), radius: 15, y: 5)
73+
.posShadow(.large)
7774
}
7875
}
7976

‎WooCommerce/Classes/POS/Presentation/Reusable Views/POSConnectivityView.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ struct POSConnectivityView: View {
4040
.frame(minHeight: Constants.height)
4141
.background(Color.posSecondaryContainer)
4242
.cornerRadius(Constants.cornerRadius)
43-
.shadow(color: Color.posShadow.opacity(0.2), radius: 8, x: 0, y: 2)
43+
.posShadow(.medium)
4444
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
4545
}
4646

‎WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemCardBorderStylesModifier.swift‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ struct POSItemCardBorderStylesModifier: ViewModifier {
88
.stroke(Color.posShadow, lineWidth: Constants.nilOutline)
99
}
1010
.clipShape(RoundedRectangle(cornerRadius: Constants.cardCornerRadius))
11-
.shadow(color: Color.posShadow.opacity(0.04), radius: 12, x: 0, y: 8)
12-
.shadow(color: Color.posShadow.opacity(0.08), radius: 4, x: 0, y: 2)
11+
.posShadow(.medium)
1312
}
1413
}
1514

‎WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ struct POSRootModalViewModifier: ViewModifier {
2727
modalManager.getContent()
2828
.background(Color.posSurfaceBright)
2929
.cornerRadius(POSCornerRadiusStyle.extraLarge.value)
30-
.shadow(color: Color.posShadow.opacity(0.02), radius: 43, x: 0, y: 50) // 0px 50px 43px 0px #00000005
31-
.shadow(color: Color.posShadow.opacity(0.04), radius: 36, x: 0, y: 30) // 0px 30px 36px 0px #0000000A
32-
.shadow(color: Color.posShadow.opacity(0.07), radius: 27, x: 0, y: 15) // 0px 15px 27px 0px #00000012
33-
.shadow(color: Color.posShadow.opacity(0.08), radius: 15, x: 0, y: 5) // 0px 5px 15px 0px #00000014
30+
.posShadow(.large)
3431
.padding()
3532
}
3633
.zIndex(1)

‎WooCommerce/Classes/POS/Utils/POSShadowStyle.swift‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import Foundation
2+
import SwiftUI
3+
4+
/// Defines shadow styles used across POS UI components.
5+
/// Design ref: 1qcjzXitBHU7xPnpCOWnNM-fi-22_7198
6+
enum POSShadowStyle {
7+
case medium
8+
case large
9+
}
10+
11+
/// A ViewModifier that applies predefined shadow styles.
12+
struct POSShadowStyleModifier: ViewModifier {
13+
let style: POSShadowStyle
14+
15+
func body(content: Content) -> some View {
16+
switch style {
17+
case .medium:
18+
content
19+
.shadow(color: Color.posShadow.opacity(0.02), radius: 16, x: 0, y: 16)
20+
.shadow(color: Color.posShadow.opacity(0.03), radius: 8, x: 0, y: 4)
21+
.shadow(color: Color.posShadow.opacity(0.04), radius: 5, x: 0, y: 4)
22+
.shadow(color: Color.posShadow.opacity(0.05), radius: 3, x: 0, y: 2)
23+
case .large:
24+
content
25+
.shadow(color: Color.posShadow.opacity(0.02), radius: 43, x: 0, y: 50)
26+
.shadow(color: Color.posShadow.opacity(0.04), radius: 36, x: 0, y: 30)
27+
.shadow(color: Color.posShadow.opacity(0.07), radius: 27, x: 0, y: 15)
28+
.shadow(color: Color.posShadow.opacity(0.08), radius: 15, x: 0, y: 5)
29+
}
30+
}
31+
}
32+
33+
extension View {
34+
/// Applies a shadow style to the view.
35+
/// - Parameter style: The shadow style to apply.
36+
func posShadow(_ style: POSShadowStyle) -> some View {
37+
modifier(POSShadowStyleModifier(style: style))
38+
}
39+
}
40+
41+
#Preview {
42+
VStack(spacing: 40) {
43+
Text("Medium Shadow")
44+
.padding()
45+
.frame(width: 200, height: 100)
46+
.foregroundStyle(Color.posOnSecondaryContainer)
47+
.background(Color.posOutlineVariant)
48+
.posShadow(.medium)
49+
50+
Text("Large Shadow")
51+
.padding()
52+
.frame(width: 200, height: 100)
53+
.foregroundStyle(Color.posOnSecondaryContainer)
54+
.background(Color.posOutlineVariant)
55+
.posShadow(.large)
56+
}
57+
.padding(100)
58+
}

‎WooCommerce/WooCommerce.xcodeproj/project.pbxproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
0204F0CA29C047A400CFC78F /* SelfSizingHostingController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0204F0C929C047A400CFC78F /* SelfSizingHostingController.swift */; };
8282
0205021E27C8B6C600FB1C6B /* InboxEligibilityUseCase.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0205021D27C8B6C600FB1C6B /* InboxEligibilityUseCase.swift */; };
8383
02055B142D5DAB6400E51059 /* POSCornerRadiusStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02055B132D5DAB6400E51059 /* POSCornerRadiusStyle.swift */; };
84+
020564982D5DC96600E51059 /* POSShadowStyle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 020564972D5DC96600E51059 /* POSShadowStyle.swift */; };
8485
020556512D5DA45500E51059 /* GhostItemCardView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 020556502D5DA45500E51059 /* GhostItemCardView.swift */; };
8586
0206483A23FA4160008441BB /* OrdersRootViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0206483923FA4160008441BB /* OrdersRootViewController.swift */; };
8687
0206E296299CD2C900C061C1 /* WooAnalyticsEvent+DomainSettings.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0206E295299CD2C900C061C1 /* WooAnalyticsEvent+DomainSettings.swift */; };
@@ -3285,6 +3286,7 @@
32853286
0204F0C929C047A400CFC78F /* SelfSizingHostingController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelfSizingHostingController.swift; sourceTree = "<group>"; };
32863287
0205021D27C8B6C600FB1C6B /* InboxEligibilityUseCase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InboxEligibilityUseCase.swift; sourceTree = "<group>"; };
32873288
02055B132D5DAB6400E51059 /* POSCornerRadiusStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSCornerRadiusStyle.swift; sourceTree = "<group>"; };
3289+
020564972D5DC96600E51059 /* POSShadowStyle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = POSShadowStyle.swift; sourceTree = "<group>"; };
32883290
020556502D5DA45500E51059 /* GhostItemCardView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GhostItemCardView.swift; sourceTree = "<group>"; };
32893291
0206483923FA4160008441BB /* OrdersRootViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrdersRootViewController.swift; sourceTree = "<group>"; };
32903292
0206E295299CD2C900C061C1 /* WooAnalyticsEvent+DomainSettings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "WooAnalyticsEvent+DomainSettings.swift"; sourceTree = "<group>"; };
@@ -7158,6 +7160,7 @@
71587160
01FB19572C6E901800A44FF0 /* DynamicHStack.swift */,
71597161
68625DE52D4134D50042B231 /* DynamicVStack.swift */,
71607162
02055B132D5DAB6400E51059 /* POSCornerRadiusStyle.swift */,
7163+
020564972D5DC96600E51059 /* POSShadowStyle.swift */,
71617164
);
71627165
path = Utils;
71637166
sourceTree = "<group>";
@@ -16994,6 +16997,7 @@
1699416997
26C98F9829C1247000F96503 /* WPComSitePlan+FreeTrial.swift in Sources */,
1699516998
3120491726DD807900A4EC4F /* LabelAndButtonTableViewCell.swift in Sources */,
1699616999
024DF31423742B7A006658FE /* AztecUnderlineFormatBarCommand.swift in Sources */,
17000+
020564982D5DC96600E51059 /* POSShadowStyle.swift in Sources */,
1699717001
CE32B10D20BEDE1C006FBCF4 /* TwoColumnSectionHeaderView.swift in Sources */,
1699817002
AE7C957D27C3F187007E8E12 /* FeeOrDiscountLineDetailsViewModel.swift in Sources */,
1699917003
4520A15C2721B2A9001FA573 /* FilterOrderListViewModel.swift in Sources */,

0 commit comments

Comments
 (0)