fix: 🐛 [JIRA: HCPSDKFIORIUIKIT-2478] banner message style (#746)

* fix: 🐛 [JIRA: HCPSDKFIORIUIKIT-2478] banner message style * fix: 🐛 remove unnecessary styles --------- Co-authored-by: Bill Zhou <bill.zhou01@sap.com>
SAP · Jul 25, 2024 · 011cf26 · 011cf26
1 parent ea6cb14
commit 011cf26
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 19 deletions.
diff --git a/Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMessageCustomInitExample.swift b/Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMessageCustomInitExample.swift
@@ -11,8 +11,12 @@ struct BannerMessageCustomInitExample: View {
     @State var isCustomStyle: Bool = false
     @State var headerSelection: BannerHeader = .object
 
+    let customColor = Color.preferredColor(.blue7)
+
     var bannerView: some View {
         BannerMessage {
+            Image(systemName: "info.circle")
+        } title: {
             Text("This is a banner message")
         } closeAction: {
             Button(action: {
@@ -25,13 +29,16 @@ struct BannerMessageCustomInitExample: View {
         }
         .ifApply(self.isCustomStyle, content: { v in
             v.topDividerStyle { c in
-                c.topDivider.background(Color.preferredColor(.blue7))
+                c.topDivider.background(self.customColor)
+            }
+            .iconStyle { c in
+                c.icon.foregroundStyle(self.customColor)
             }
             .titleStyle { c in
-                c.title.foregroundStyle(Color.preferredColor(.blue7))
+                c.title.foregroundStyle(self.customColor)
             }
             .closeActionStyle { c in
-                c.closeAction.foregroundStyle(Color.preferredColor(.blue7))
+                c.closeAction.foregroundStyle(self.customColor)
             }
         })
     }

diff --git a/Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMessageModifierExample.swift b/Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMessageModifierExample.swift
@@ -6,7 +6,8 @@ struct BannerMessageModifierExample: View {
     @State var pushContentDown: Bool = false
     @State var withLink: Bool = false
     @State var withAttachedAction: Bool = false
-
+    @State var withLongText: Bool = false
+
     @ViewBuilder
     var titleView: some View {
         if self.withAttachedAction {
@@ -28,10 +29,11 @@ struct BannerMessageModifierExample: View {
 
     @ViewBuilder
     var messageContent: some View {
+        let text = self.withLongText ? "This is a very very very very very very very very very very very long banner message" : "This is a banner message"
         if self.withLink {
-            Text("This is a banner message with [link](https://www.sap.com)")
+            Text("\(text) with [link](https://www.sap.com)")
         } else {
-            Text("This is a banner message")
+            Text("\(text)")
         }
     }
 
@@ -51,9 +53,13 @@ struct BannerMessageModifierExample: View {
             Toggle("Push Content Down", isOn: self.$pushContentDown)
             Toggle("With Link", isOn: self.$withLink)
             Toggle("With Attached Action", isOn: self.$withAttachedAction)
+            Toggle("Long Text", isOn: self.$withLongText)
         }
         .bannerMessageView(isPresented: self.$show,
                            pushContentDown: self.$pushContentDown,
+                           icon: {
+                               Image(systemName: "info.circle")
+                           },
                            title: {
                                self.titleView
                            }, bannerTapped: {

diff --git a/Sources/FioriSwiftUICore/_ComponentProtocols/CompositeComponentProtocols.swift b/Sources/FioriSwiftUICore/_ComponentProtocols/CompositeComponentProtocols.swift
@@ -275,7 +275,7 @@ protocol _MenuSelectionComponent: _ActionComponent {
 }
 
 // sourcery: CompositeComponent
-protocol _BannerMessageComponent: _TitleComponent, _CloseActionComponent, _TopDividerComponent {
+protocol _BannerMessageComponent: _IconComponent, _TitleComponent, _CloseActionComponent, _TopDividerComponent {
     /// The action to be performed when the banner is tapped.
     var bannerTapAction: (() -> Void)? { get }
 }

diff --git a/Sources/FioriSwiftUICore/_FioriStyles/BannerMessageStyle.fiori.swift b/Sources/FioriSwiftUICore/_FioriStyles/BannerMessageStyle.fiori.swift
@@ -4,12 +4,12 @@ import SwiftUI
 
 // Base Layout style
 public struct BannerMessageBaseStyle: BannerMessageStyle {
-    @Namespace var namespace
     public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
         VStack(spacing: 0) {
             configuration.topDivider.frame(height: 4)
             HStack {
                 Spacer()
+                configuration.icon
                 configuration.title
                     .padding([.top, .bottom], 13)
                 Spacer()
@@ -32,6 +32,15 @@ extension BannerMessageFioriStyle {
         }
     }
 
+    struct IconFioriStyle: IconStyle {
+        let bannerMessageConfiguration: BannerMessageConfiguration
+
+        func makeBody(_ configuration: IconConfiguration) -> some View {
+            Icon(configuration)
+                .foregroundStyle(Color.preferredColor(.negativeLabel))
+        }
+    }
+
     struct TitleFioriStyle: TitleStyle {
         let bannerMessageConfiguration: BannerMessageConfiguration
 
@@ -70,10 +79,12 @@ public extension View {
     /// - Returns: A new `View` with banner message.
     func bannerMessageView(isPresented: Binding<Bool>,
                            pushContentDown: Binding<Bool> = .constant(false),
+                           @ViewBuilder icon: () -> any View = { EmptyView() },
                            title: AttributedString,
                            bannerTapped: (() -> Void)? = nil) -> some View
     {
-        self.modifier(BannerMessageModifier(title: Text(title),
+        self.modifier(BannerMessageModifier(icon: icon(),
+                                            title: Text(title),
                                             isPresented: isPresented,
                                             pushContentDown: pushContentDown,
                                             bannerTapped: bannerTapped))
@@ -88,10 +99,12 @@ public extension View {
     /// - Returns: A new `View` with banner message.
     func bannerMessageView(isPresented: Binding<Bool>,
                            pushContentDown: Binding<Bool> = .constant(false),
+                           @ViewBuilder icon: () -> any View = { EmptyView() },
                            title: String,
                            bannerTapped: (() -> Void)? = nil) -> some View
     {
-        self.modifier(BannerMessageModifier(title: Text(title),
+        self.modifier(BannerMessageModifier(icon: icon(),
+                                            title: Text(title),
                                             isPresented: isPresented,
                                             pushContentDown: pushContentDown,
                                             bannerTapped: bannerTapped))
@@ -106,26 +119,30 @@ public extension View {
     /// - Returns: A new `View` with banner message.
     func bannerMessageView(isPresented: Binding<Bool>,
                            pushContentDown: Binding<Bool> = .constant(false),
+                           @ViewBuilder icon: () -> any View = { EmptyView() },
                            @ViewBuilder title: () -> any View,
-                           @ViewBuilder action: () -> any View = { EmptyView() },
                            bannerTapped: (() -> Void)? = nil) -> some View
     {
-        self.modifier(BannerMessageModifier(title: title(),
+        self.modifier(BannerMessageModifier(icon: icon(),
+                                            title: title(),
                                             isPresented: isPresented,
                                             pushContentDown: pushContentDown,
                                             bannerTapped: bannerTapped))
     }
 }
 
 struct BannerMessageModifier: ViewModifier {
+    let icon: any View
     let title: any View
     @Binding var isPresented: Bool
     @Binding var pushContentDown: Bool
     var bannerTapped: (() -> Void)?
     @State var offset: CGFloat = 0
 
     @ViewBuilder var bannerMessage: some View {
-        BannerMessage(title: {
+        BannerMessage(icon: {
+            self.icon
+        }, title: {
             self.title
         }, closeAction: {
             FioriButton { state in

diff --git a/...oriSwiftUICore/_generated/StyleableComponents/BannerMessage/BannerMessage.generated.swift b/...oriSwiftUICore/_generated/StyleableComponents/BannerMessage/BannerMessage.generated.swift
@@ -4,6 +4,7 @@ import Foundation
 import SwiftUI
 
 public struct BannerMessage {
+    let icon: any View
     let title: any View
     let closeAction: any View
     let topDivider: any View
@@ -14,11 +15,13 @@ public struct BannerMessage {
 
     fileprivate var _shouldApplyDefaultStyle = true
 
-    public init(@ViewBuilder title: () -> any View,
+    public init(@ViewBuilder icon: () -> any View = { EmptyView() },
+                @ViewBuilder title: () -> any View,
                 @ViewBuilder closeAction: () -> any View = { FioriButton { _ in Image(systemName: "xmark") } },
                 @ViewBuilder topDivider: () -> any View = { Rectangle().fill(Color.clear) },
                 bannerTapAction: (() -> Void)? = nil)
     {
+        self.icon = Icon { icon() }
         self.title = Title { title() }
         self.closeAction = CloseAction { closeAction() }
         self.topDivider = TopDivider { topDivider() }
@@ -27,12 +30,13 @@ public struct BannerMessage {
 }
 
 public extension BannerMessage {
-    init(title: AttributedString,
+    init(icon: Image? = nil,
+         title: AttributedString,
          closeAction: FioriButton? = FioriButton { _ in Image(systemName: "xmark") },
          @ViewBuilder topDivider: () -> any View = { Rectangle().fill(Color.clear) },
          bannerTapAction: (() -> Void)? = nil)
     {
-        self.init(title: { Text(title) }, closeAction: { closeAction }, topDivider: topDivider, bannerTapAction: bannerTapAction)
+        self.init(icon: { icon }, title: { Text(title) }, closeAction: { closeAction }, topDivider: topDivider, bannerTapAction: bannerTapAction)
     }
 }
 
@@ -42,6 +46,7 @@ public extension BannerMessage {
     }
 
     internal init(_ configuration: BannerMessageConfiguration, shouldApplyDefaultStyle: Bool) {
+        self.icon = configuration.icon
         self.title = configuration.title
         self.closeAction = configuration.closeAction
         self.topDivider = configuration.topDivider
@@ -55,7 +60,7 @@ extension BannerMessage: View {
         if self._shouldApplyDefaultStyle {
             self.defaultStyle()
         } else {
-            self.style.resolve(configuration: .init(title: .init(self.title), closeAction: .init(self.closeAction), topDivider: .init(self.topDivider), bannerTapAction: self.bannerTapAction)).typeErased
+            self.style.resolve(configuration: .init(icon: .init(self.icon), title: .init(self.title), closeAction: .init(self.closeAction), topDivider: .init(self.topDivider), bannerTapAction: self.bannerTapAction)).typeErased
                 .transformEnvironment(\.bannerMessageStyleStack) { stack in
                     if !stack.isEmpty {
                         stack.removeLast()
@@ -73,7 +78,7 @@ private extension BannerMessage {
     }
 
     func defaultStyle() -> some View {
-        BannerMessage(.init(title: .init(self.title), closeAction: .init(self.closeAction), topDivider: .init(self.topDivider), bannerTapAction: self.bannerTapAction))
+        BannerMessage(.init(icon: .init(self.icon), title: .init(self.title), closeAction: .init(self.closeAction), topDivider: .init(self.topDivider), bannerTapAction: self.bannerTapAction))
             .shouldApplyDefaultStyle(false)
             .bannerMessageStyle(BannerMessageFioriStyle.ContentFioriStyle())
             .typeErased

diff --git a/...iftUICore/_generated/StyleableComponents/BannerMessage/BannerMessageStyle.generated.swift b/...iftUICore/_generated/StyleableComponents/BannerMessage/BannerMessageStyle.generated.swift
@@ -22,11 +22,13 @@ struct AnyBannerMessageStyle: BannerMessageStyle {
 }
 
 public struct BannerMessageConfiguration {
+    public let icon: Icon
     public let title: Title
     public let closeAction: CloseAction
     public let topDivider: TopDivider
     public let bannerTapAction: (() -> Void)?
 
+    public typealias Icon = ConfigurationViewWrapper
     public typealias Title = ConfigurationViewWrapper
     public typealias CloseAction = ConfigurationViewWrapper
     public typealias TopDivider = ConfigurationViewWrapper
@@ -35,6 +37,7 @@ public struct BannerMessageConfiguration {
 public struct BannerMessageFioriStyle: BannerMessageStyle {
     public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
         BannerMessage(configuration)
+            .iconStyle(IconFioriStyle(bannerMessageConfiguration: configuration))
             .titleStyle(TitleFioriStyle(bannerMessageConfiguration: configuration))
             .closeActionStyle(CloseActionFioriStyle(bannerMessageConfiguration: configuration))
             .topDividerStyle(TopDividerFioriStyle(bannerMessageConfiguration: configuration))

diff --git a/...riSwiftUICore/_generated/SupportingFiles/ComponentStyleProtocol+Extension.generated.swift b/...riSwiftUICore/_generated/SupportingFiles/ComponentStyleProtocol+Extension.generated.swift
@@ -73,6 +73,27 @@ public extension BannerMessageStyle where Self == BannerMessageFioriStyle {
     }
 }
 
+public struct BannerMessageIconStyle: BannerMessageStyle {
+    let style: any IconStyle
+
+    public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
+        BannerMessage(configuration)
+            .iconStyle(self.style)
+            .typeErased
+    }
+}
+
+public extension BannerMessageStyle where Self == BannerMessageIconStyle {
+    static func iconStyle(_ style: some IconStyle) -> BannerMessageIconStyle {
+        BannerMessageIconStyle(style: style)
+    }
+
+    static func iconStyle(@ViewBuilder content: @escaping (IconConfiguration) -> some View) -> BannerMessageIconStyle {
+        let style = AnyIconStyle(content)
+        return BannerMessageIconStyle(style: style)
+    }
+}
+
 public struct BannerMessageTitleStyle: BannerMessageStyle {
     let style: any TitleStyle
 

diff --git a/...s/FioriSwiftUICore/_generated/SupportingFiles/ViewEmptyChecking+Extension.generated.swift b/...s/FioriSwiftUICore/_generated/SupportingFiles/ViewEmptyChecking+Extension.generated.swift
@@ -29,7 +29,8 @@ extension Avatars: _ViewEmptyChecking {
 
 extension BannerMessage: _ViewEmptyChecking {
     public var isEmpty: Bool {
-        title.isEmpty &&
+        icon.isEmpty &&
+            title.isEmpty &&
             closeAction.isEmpty &&
             topDivider.isEmpty
     }