fix: 🐛 [JIRA: FIORIDESIGN-12263] fix UI review issues (#752)

* fix: 🐛 [JIRA: FIORIDESIGN-12263] fix UI review issues * fix: 🐛 Addressed the comments --------- Co-authored-by: dyongxu <61523257+dyongxu@users.noreply.github.com>
SAP · Jul 29, 2024 · c0efd8b · c0efd8b
1 parent 217a91a
commit c0efd8b
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 42 deletions.
diff --git a/Apps/Examples/Examples/FioriSwiftUICore/FormCells/StepperViewExample.swift b/Apps/Examples/Examples/FioriSwiftUICore/FormCells/StepperViewExample.swift
@@ -150,3 +150,7 @@ struct DecrementBtnStyle: FioriButtonStyle {
         configuration.label.foregroundColor(Color.purple)
     }
 }
+
+#Preview {
+    StepperViewExample()
+}
diff --git a/Sources/FioriSwiftUICore/_ComponentProtocols/BaseComponentProtocols.swift b/Sources/FioriSwiftUICore/_ComponentProtocols/BaseComponentProtocols.swift
@@ -241,18 +241,20 @@ protocol _MessageContentComponent {
 }
 
 // sourcery: BaseComponent
+// sourcery: importFrameworks = ["FioriThemeManager"]
 protocol _DecrementActionComponent {
     // sourcery: @ViewBuilder
-    // sourcery: defaultValue = "FioriButton { _ in Image(systemName: "minus") }"
-    // sourcery: resultBuilder.defaultValue = "{ FioriButton { _ in Image(systemName: "minus") } }"
+    // sourcery: defaultValue = "FioriButton { _ in FioriIcon.actions.less }"
+    // sourcery: resultBuilder.defaultValue = "{ FioriButton { _ in FioriIcon.actions.less } }"
     var decrementAction: FioriButton? { get }
 }
 
 // sourcery: BaseComponent
+// sourcery: importFrameworks = ["FioriThemeManager"]
 protocol _IncrementActionComponent {
     // sourcery: @ViewBuilder
-    // sourcery: defaultValue = "FioriButton { _ in Image(systemName: "plus") }"
-    // sourcery: resultBuilder.defaultValue = "{ FioriButton { _ in Image(systemName: "plus") } }"
+    // sourcery: defaultValue = "FioriButton { _ in FioriIcon.actions.add }"
+    // sourcery: resultBuilder.defaultValue = "{ FioriButton { _ in FioriIcon.actions.add } }"
     var incrementAction: FioriButton? { get }
 }
 

diff --git a/Sources/FioriSwiftUICore/_ComponentProtocols/CompositeComponentProtocols.swift b/Sources/FioriSwiftUICore/_ComponentProtocols/CompositeComponentProtocols.swift
@@ -122,6 +122,7 @@ protocol _TextFieldFormViewComponent: _TitleComponent, _TitleFormViewComponent,
 protocol _JouleWelcomeScreen: _MediaImageComponent, _GreetingTextComponent, _TitleComponent, _FootnoteComponent, _MessageContentComponent {}
 
 // sourcery: CompositeComponent
+// sourcery: importFrameworks = ["FioriThemeManager"]
 protocol _StepperFieldComponent: _DecrementActionComponent, _TextInputFieldComponent, _IncrementActionComponent {
     /// The step value
     var step: Int? { get }
@@ -131,6 +132,7 @@ protocol _StepperFieldComponent: _DecrementActionComponent, _TextInputFieldCompo
 }
 
 // sourcery: CompositeComponent
+// sourcery: importFrameworks = ["FioriThemeManager"]
 protocol _StepperViewComponent: _TitleComponent, _StepperFieldComponent, _InformationViewComponent {}
 
 /// SideBar: SwiftUI View

diff --git a/Sources/FioriSwiftUICore/_FioriStyles/StepperFieldStyle.fiori.swift b/Sources/FioriSwiftUICore/_FioriStyles/StepperFieldStyle.fiori.swift
@@ -17,7 +17,7 @@ import SwiftUI
 // Base Layout style
 public struct StepperFieldBaseStyle: StepperFieldStyle {
     public func makeBody(_ configuration: StepperFieldConfiguration) -> some View {
-        HStack {
+        HStack(spacing: 0) {
             configuration.decrementAction
                 .onSimultaneousTapGesture {
                     if let stepValue = configuration.step, var currentTextValue = Int(configuration.text) {

diff --git a/Sources/FioriSwiftUICore/_FioriStyles/StepperViewStyle.fiori.swift b/Sources/FioriSwiftUICore/_FioriStyles/StepperViewStyle.fiori.swift
@@ -1,31 +1,19 @@
 import FioriThemeManager
-
-// Generated using Sourcery 2.1.7 — https://github.com/krzysztofzablocki/Sourcery
-// DO NOT EDIT
 import Foundation
 import SwiftUI
 
-/**
- This file provides default fiori style for the component.
-
- 1. Uncomment fhe following code.
- 2. Implement layout and style in corresponding places.
- 3. Delete `.generated` from file name.
- 4. Move this file to `_FioriStyles` folder under `FioriSwiftUICore`.
- */
-
 // Base Layout style
 public struct StepperViewBaseStyle: StepperViewStyle {
     public func makeBody(_ configuration: StepperViewConfiguration) -> some View {
         @State var showDescription = !configuration.description.isEmpty
-        return VStack {
+        return VStack(spacing: 0) {
             ViewThatFits {
-                HStack {
+                HStack(spacing: 0) {
                     configuration.title
                     Spacer().layoutPriority(1)
                     configuration._stepperField
                 }
-                VStack(alignment: .leading) {
+                VStack(alignment: .leading, spacing: 0) {
                     configuration.title
                     HStack {
                         Spacer()
@@ -34,7 +22,7 @@ public struct StepperViewBaseStyle: StepperViewStyle {
                 }
             }
             if showDescription {
-                HStack {
+                HStack(spacing: 0) {
                     configuration._informationView
                     Spacer()
                 }.padding(.top, 4)
@@ -47,11 +35,12 @@ public struct StepperViewBaseStyle: StepperViewStyle {
 extension StepperViewFioriStyle {
     struct ContentFioriStyle: StepperViewStyle {
         @Environment(\.isEnabled) var isEnabled: Bool
+        @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
         @FocusState var isFocused: Bool
 
         func makeBody(_ configuration: StepperViewConfiguration) -> some View {
             StepperView(configuration)
-//                .padding(EdgeInsets(top: 9, leading: 16, bottom: 11, trailing: 0))
+                .padding(EdgeInsets(top: 9, leading: self.getPadding(), bottom: 11, trailing: self.getPadding()))
                 .titleStyle(content: { titleConfiguration in
                     Title(titleConfiguration)
                         .foregroundColor(.preferredColor(self.isEnabled ? (self.isFocused ? .tintColor : .primaryLabel) : .separator))
@@ -67,6 +56,12 @@ extension StepperViewFioriStyle {
                         .focused(self.$isFocused)
                 }
         }
+
+        // Compact, regular, and full-width regular containers have leading and trailing padding of 16pt, 24pt, and 48pt, respectively. Fiori defines containers exceeding 768pt in width as full-width regular.
+        func getPadding() -> CGFloat {
+            let padding: CGFloat = self.horizontalSizeClass == .compact ? 16 : (self.horizontalSizeClass == .regular ? (UIScreen.main.bounds.width > 768 ? 48 : 24) : 16)
+            return padding
+        }
     }
 
     struct TitleFioriStyle: TitleStyle {
@@ -85,9 +80,6 @@ extension StepperViewFioriStyle {
 
         func makeBody(_ configuration: DecrementActionConfiguration) -> some View {
             DecrementAction(configuration)
-            // Add default style for DecrementAction
-            // .foregroundStyle(Color.preferredColor(fiori color))
-            // .font(.fiori(forTextStyle: <#fiori font#>))
         }
     }
 
@@ -100,7 +92,7 @@ extension StepperViewFioriStyle {
                 .foregroundColor(.preferredColor(self.isEnabled ? .primaryLabel : .separator))
                 .font(.fiori(forTextStyle: .body))
                 .padding(EdgeInsets(top: 0, leading: 2, bottom: 0, trailing: 2))
-                .frame(minWidth: 30)
+                .frame(minWidth: 44)
                 .multilineTextAlignment(.center)
                 .textFieldStyle(PlainTextFieldStyle())
                 .fixedSize(horizontal: true, vertical: false)
@@ -112,9 +104,6 @@ extension StepperViewFioriStyle {
 
         func makeBody(_ configuration: IncrementActionConfiguration) -> some View {
             IncrementAction(configuration)
-            // Add default style for IncrementAction
-            // .foregroundStyle(Color.preferredColor(fiori color))
-            // .font(.fiori(forTextStyle: <#fiori font#>))
         }
     }
 
@@ -134,7 +123,7 @@ extension StepperViewFioriStyle {
 
         func makeBody(_ configuration: StepperFieldConfiguration) -> some View {
             StepperField(configuration)
-                .frame(minWidth: 150, minHeight: 44)
+                .frame(minWidth: 136, minHeight: 44)
         }
     }
 

diff --git a/...wiftUICore/_generated/StyleableComponents/DecrementAction/DecrementAction.generated.swift b/...wiftUICore/_generated/StyleableComponents/DecrementAction/DecrementAction.generated.swift
@@ -3,20 +3,22 @@
 import Foundation
 import SwiftUI
 
+import FioriThemeManager
+
 public struct DecrementAction {
     let decrementAction: any View
 
     @Environment(\.decrementActionStyle) var style
 
     fileprivate var _shouldApplyDefaultStyle = true
 
-    public init(@ViewBuilder decrementAction: () -> any View = { FioriButton { _ in Image(systemName: "minus") } }) {
+    public init(@ViewBuilder decrementAction: () -> any View = { FioriButton { _ in FioriIcon.actions.less } }) {
         self.decrementAction = decrementAction()
     }
 }
 
 public extension DecrementAction {
-    init(decrementAction: FioriButton? = FioriButton { _ in Image(systemName: "minus") }) {
+    init(decrementAction: FioriButton? = FioriButton { _ in FioriIcon.actions.less }) {
         self.init(decrementAction: { decrementAction })
     }
 }

diff --git a/...wiftUICore/_generated/StyleableComponents/IncrementAction/IncrementAction.generated.swift b/...wiftUICore/_generated/StyleableComponents/IncrementAction/IncrementAction.generated.swift
@@ -3,20 +3,22 @@
 import Foundation
 import SwiftUI
 
+import FioriThemeManager
+
 public struct IncrementAction {
     let incrementAction: any View
 
     @Environment(\.incrementActionStyle) var style
 
     fileprivate var _shouldApplyDefaultStyle = true
 
-    public init(@ViewBuilder incrementAction: () -> any View = { FioriButton { _ in Image(systemName: "plus") } }) {
+    public init(@ViewBuilder incrementAction: () -> any View = { FioriButton { _ in FioriIcon.actions.add } }) {
         self.incrementAction = incrementAction()
     }
 }
 
 public extension IncrementAction {
-    init(incrementAction: FioriButton? = FioriButton { _ in Image(systemName: "plus") }) {
+    init(incrementAction: FioriButton? = FioriButton { _ in FioriIcon.actions.add }) {
         self.init(incrementAction: { incrementAction })
     }
 }

diff --git a/...FioriSwiftUICore/_generated/StyleableComponents/StepperField/StepperField.generated.swift b/...FioriSwiftUICore/_generated/StyleableComponents/StepperField/StepperField.generated.swift
@@ -3,6 +3,8 @@
 import Foundation
 import SwiftUI
 
+import FioriThemeManager
+
 public struct StepperField {
     let decrementAction: any View
     @Binding var text: String
@@ -16,9 +18,9 @@ public struct StepperField {
 
     fileprivate var _shouldApplyDefaultStyle = true
 
-    public init(@ViewBuilder decrementAction: () -> any View = { FioriButton { _ in Image(systemName: "minus") } },
+    public init(@ViewBuilder decrementAction: () -> any View = { FioriButton { _ in FioriIcon.actions.less } },
                 text: Binding<String>,
-                @ViewBuilder incrementAction: () -> any View = { FioriButton { _ in Image(systemName: "plus") } },
+                @ViewBuilder incrementAction: () -> any View = { FioriButton { _ in FioriIcon.actions.add } },
                 step: Int? = nil,
                 stepRange: ClosedRange<Int>)
     {
@@ -31,9 +33,9 @@ public struct StepperField {
 }
 
 public extension StepperField {
-    init(decrementAction: FioriButton? = FioriButton { _ in Image(systemName: "minus") },
+    init(decrementAction: FioriButton? = FioriButton { _ in FioriIcon.actions.less },
          text: Binding<String>,
-         incrementAction: FioriButton? = FioriButton { _ in Image(systemName: "plus") },
+         incrementAction: FioriButton? = FioriButton { _ in FioriIcon.actions.add },
          step: Int? = nil,
          stepRange: ClosedRange<Int>)
     {

diff --git a/...s/FioriSwiftUICore/_generated/StyleableComponents/StepperView/StepperView.generated.swift b/...s/FioriSwiftUICore/_generated/StyleableComponents/StepperView/StepperView.generated.swift
@@ -3,6 +3,8 @@
 import Foundation
 import SwiftUI
 
+import FioriThemeManager
+
 public struct StepperView {
     let title: any View
     let decrementAction: any View
@@ -20,9 +22,9 @@ public struct StepperView {
     fileprivate var _shouldApplyDefaultStyle = true
 
     public init(@ViewBuilder title: () -> any View,
-                @ViewBuilder decrementAction: () -> any View = { FioriButton { _ in Image(systemName: "minus") } },
+                @ViewBuilder decrementAction: () -> any View = { FioriButton { _ in FioriIcon.actions.less } },
                 text: Binding<String>,
-                @ViewBuilder incrementAction: () -> any View = { FioriButton { _ in Image(systemName: "plus") } },
+                @ViewBuilder incrementAction: () -> any View = { FioriButton { _ in FioriIcon.actions.add } },
                 step: Int? = nil,
                 stepRange: ClosedRange<Int>,
                 @ViewBuilder icon: () -> any View = { EmptyView() },
@@ -41,9 +43,9 @@ public struct StepperView {
 
 public extension StepperView {
     init(title: AttributedString,
-         decrementAction: FioriButton? = FioriButton { _ in Image(systemName: "minus") },
+         decrementAction: FioriButton? = FioriButton { _ in FioriIcon.actions.less },
          text: Binding<String>,
-         incrementAction: FioriButton? = FioriButton { _ in Image(systemName: "plus") },
+         incrementAction: FioriButton? = FioriButton { _ in FioriIcon.actions.add },
          step: Int? = nil,
          stepRange: ClosedRange<Int>,
          icon: Image? = nil,

diff --git a/sourcery/.lib/Sources/utils/ForStyleableComponent/Type+Extension.swift b/sourcery/.lib/Sources/utils/ForStyleableComponent/Type+Extension.swift
@@ -4,6 +4,7 @@ import SourceryRuntime
 extension Type {
     var componentDecl: String {
         """
+        \(importStatement)
         \(docText)
         \(accessLevelDecl)struct \(componentName) {
             \(allStoredVariables.propertyListDecl)