Update CardNudge to allow multi-line title and message action (#1851)

* Remove title line limit * Fix dismiss button spacing * Add message action * Add more hover effects * Update demo
microsoft · Jul 28, 2023 · 5a04fc6 · 5a04fc6
1 parent 92e5bb7
commit 5a04fc6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/CardNudgeDemoController.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/CardNudgeDemoController.swift
@@ -79,7 +79,8 @@ class CardNudgeDemoController: DemoTableViewController {
              .accentIcon,
              .accentText,
              .dismissButton,
-             .actionButton:
+             .actionButton,
+             .messageAction:
             guard let cell: BooleanCell = tableView.dequeueReusableCell(withIdentifier: BooleanCell.identifier, for: indexPath) as? BooleanCell else {
                 preconditionFailure("Wrong kind of cell in BooleanCell index path")
             }
@@ -135,6 +136,15 @@ class CardNudgeDemoController: DemoTableViewController {
                     self.present(alert, animated: true)
                 } : nil)
             }
+        case .messageAction:
+            cardNudges.forEach { cardNudge in
+                cardNudge.state.messageButtonAction = (isOn ? { state in
+                    let alert = UIAlertController(title: "\(state.title) message action performed", message: nil, preferredStyle: .alert)
+                    let action = UIAlertAction(title: "OK", style: .default, handler: nil)
+                    alert.addAction(action)
+                    self.present(alert, animated: true)
+                } : nil)
+            }
         }
     }
 
@@ -195,7 +205,8 @@ class CardNudgeDemoController: DemoTableViewController {
                         .accentIcon,
                         .accentText,
                         .dismissButton,
-                        .actionButton]
+                        .actionButton,
+                        .messageAction]
             }
         }
     }
@@ -209,6 +220,7 @@ class CardNudgeDemoController: DemoTableViewController {
         case accentText
         case dismissButton
         case actionButton
+        case messageAction
 
         var text: String {
             switch self {
@@ -227,6 +239,8 @@ class CardNudgeDemoController: DemoTableViewController {
                 return "Dismiss Button"
             case .actionButton:
                 return "Action Button"
+            case .messageAction:
+                return "Message Action"
             }
         }
     }

diff --git a/ios/FluentUI/Card Nudge/CardNudge.swift b/ios/FluentUI/Card Nudge/CardNudge.swift
@@ -40,6 +40,9 @@ public typealias CardNudgeButtonAction = ((_ state: MSFCardNudgeState) -> Void)
 
     /// Action to be dispatched by the dismiss ("close") button on the trailing edge of the control.
     @objc var dismissButtonAction: CardNudgeButtonAction? { get set }
+
+    /// Action to be dispatched by tapping on the `CardNudge`.
+    @objc var messageButtonAction: CardNudgeButtonAction? { get set }
 }
 
 /// View that represents the CardNudge.
@@ -76,7 +79,6 @@ public struct CardNudge: View, TokenizedControlView {
     var textContainer: some View {
         VStack(alignment: .leading, spacing: CardNudgeTokenSet.interTextVerticalPadding) {
             Text(state.title)
-                .lineLimit(1)
                 .foregroundColor(Color(tokenSet[.textColor].uiColor))
                 .showsLargeContentViewer(text: state.title, image: state.mainIcon)
                 .font(.init(tokenSet[.titleFont].uiFont))
@@ -111,7 +113,7 @@ public struct CardNudge: View, TokenizedControlView {
 
     @ViewBuilder
     var buttons: some View {
-        HStack(spacing: 0) {
+        HStack(spacing: CardNudgeTokenSet.buttonInnerPaddingHorizontal) {
             if let actionTitle = state.actionButtonTitle,
                       let action = state.actionButtonAction {
                 SwiftUI.Button(actionTitle) {
@@ -127,6 +129,7 @@ public struct CardNudge: View, TokenizedControlView {
                         .foregroundColor(Color(tokenSet[.buttonBackgroundColor].uiColor))
                 )
                 .showsLargeContentViewer(text: actionTitle)
+                .hoverEffect()
             }
             if let dismissAction = state.dismissButtonAction {
                 let dismissImage = UIImage.staticImageNamed("dismiss-20x20")
@@ -138,17 +141,18 @@ public struct CardNudge: View, TokenizedControlView {
                         Image(uiImage: image)
                     }
                 })
-                .padding(.horizontal, CardNudgeTokenSet.buttonInnerPaddingHorizontal)
                 .padding(.vertical, CardNudgeTokenSet.verticalPadding)
                 .accessibility(identifier: dismissLabel)
                 .foregroundColor(Color(tokenSet[.subtitleTextColor].uiColor))
                 .showsLargeContentViewer(text: dismissLabel, image: dismissImage)
+                .hoverEffect()
             }
         }
     }
 
     @ViewBuilder
     var innerContents: some View {
+        let messageAction = state.messageButtonAction
         HStack(spacing: 0) {
             icon
             textContainer
@@ -159,6 +163,16 @@ public struct CardNudge: View, TokenizedControlView {
         .padding(.vertical, CardNudgeTokenSet.mainContentVerticalPadding)
         .padding(.horizontal, CardNudgeTokenSet.horizontalPadding)
         .frame(minHeight: CardNudgeTokenSet.minimumHeight)
+        .modifyIf(messageAction != nil) { view in
+            view.accessibilityAddTraits(.isButton)
+                .hoverEffect()
+                .onTapGesture {
+                    guard let messageAction else {
+                        return
+                    }
+                    messageAction(state)
+                }
+        }
     }
 
     public var body: some View {
@@ -245,6 +259,9 @@ class MSFCardNudgeStateImpl: ControlState, MSFCardNudgeState {
     /// Action to be dispatched by the dismiss ("close") button on the trailing edge of the control.
     @Published var dismissButtonAction: CardNudgeButtonAction?
 
+    /// Action to be dispatched by tapping on the `CardNudge`.
+    @Published var messageButtonAction: CardNudgeButtonAction?
+
     /// Style to draw the control.
     @Published var style: MSFCardNudgeStyle
 

diff --git a/ios/FluentUI/Card Nudge/CardNudgeModifiers.swift b/ios/FluentUI/Card Nudge/CardNudgeModifiers.swift
@@ -51,4 +51,10 @@ public extension CardNudge {
         state.dismissButtonAction = dismissButtonAction
         return self
     }
+
+    /// Action to be dispatched by tapping on the `CardNudge`.
+    func messageButtonAction(_ messageButtonAction: CardNudgeButtonAction?) -> CardNudge {
+        state.messageButtonAction = messageButtonAction
+        return self
+    }
 }