[FluentNotification] Add Expand button behavior (#2260)

* Implement an 'Expand' dismiss button override

Author: nodes11

Demos/FluentUIDemo_iOS/FluentUI.Demo/Demos/NotificationViewDemoController_SwiftUI.swift

@@ -49,6 +49,7 @@ struct NotificationDemoView: View {
     @State var showDefaultDismissActionButton: Bool = true
     @State var showActionButtonAndDismissButton: Bool = false
     @State var swipeToDismissEnabled: Bool = false
+    @State var isExpandableMessageLabel: Bool = false
     @State var showFromBottom: Bool = true
     @State var showBackgroundGradient: Bool = false
     @State var useCustomTheme: Bool = false
@@ -178,6 +179,7 @@ struct NotificationDemoView: View {
                                            message: hasMessage ? message : nil,
                                            attributedMessage: hasAttribute && hasMessage ? attributedMessage : nil,
                                            messageLineLimit: messageLineLimit,
+                                           enableExpandableMessageText: isExpandableMessageLabel,
                                            title: hasTitle ? title : nil,
                                            attributedTitle: hasAttribute && hasTitle ? attributedTitle : nil,
                                            image: image,
@@ -234,6 +236,7 @@ struct NotificationDemoView: View {
                                message: hasMessage ? message : nil,
                                attributedMessage: hasAttribute && hasMessage ? attributedMessage : nil,
                                messageLineLimit: messageLineLimit,
+                               enableExpandableMessageText: isExpandableMessageLabel,
                                isPresented: $isPresented,
                                title: hasTitle ? title : nil,
                                attributedTitle: hasAttribute && hasTitle ? attributedTitle : nil,
@@ -280,6 +283,7 @@ struct NotificationDemoView: View {
                 LabeledContent {
                     TextField("Line Limit", value: $messageLineLimit, formatter: integerFormatter)
                         .keyboardType(.numberPad)
+                        .multilineTextAlignment(.trailing)
                 } label: {
                     Text("Message Line Limit")
                 }
@@ -316,6 +320,8 @@ struct NotificationDemoView: View {
                 Toggle("Can Show Action & Dismiss Buttons", isOn: $showActionButtonAndDismissButton)
                 Toggle("Has Message Action", isOn: $hasMessageAction)
                 Toggle("Swipe to Dismiss Enabled", isOn: $swipeToDismissEnabled)
+                Toggle("Expandable Message Label", isOn: $isExpandableMessageLabel)
+                .frame(maxWidth: .infinity, alignment: .leading)
             }
 
             FluentListSection("Style") {

Sources/FluentUI_iOS/Components/Notification/ExpandableText.swift

@@ -0,0 +1,140 @@
+//
+//  Copyright (c) Microsoft Corporation. All rights reserved.
+//  Licensed under the MIT License.
+//
+
+import SwiftUI
+
+/// A text view that automatically detects truncation and supports expand/collapse functionality.
+///
+/// This component measures the rendered text height and determines if truncation is occurring
+/// based on the specified line limit. It provides an optional callback when expandability changes,
+/// allowing parent components to react (e.g., show/hide an expand button).
+///
+public struct ExpandableText: View {
+    // MARK: - Public Initializers
+
+    /// Creates an expandable text view with plain text.
+    /// - Parameters:
+    ///   - text: The text to display.
+    ///   - lineLimit: Maximum number of lines to show when collapsed. Default is 2.
+    ///   - isExpanded: Optional binding to control expansion state externally.
+    ///   - font: The font to use for measurement and display. If nil, uses system body font.
+    ///   - onExpandabilityChange: Callback invoked when the expandability status changes.
+    public init(
+        _ text: String,
+        lineLimit: Int = 0,
+        isExpanded: Binding<Bool>? = nil,
+        font: UIFont? = nil,
+        onExpandabilityChange: ((Bool) -> Void)? = nil
+    ) {
+        self.text = text
+        self.attributedText = nil
+        self.lineLimit = lineLimit
+        self.externalIsExpanded = isExpanded
+        self.font = font
+        self.onExpandabilityChange = onExpandabilityChange
+    }
+
+    /// Creates an expandable text view with attributed text.
+    /// - Parameters:
+    ///   - attributedText: The attributed text to display.
+    ///   - lineLimit: Maximum number of lines to show when collapsed. Default is 2.
+    ///   - isExpanded: Optional binding to control expansion state externally.
+    ///   - onExpandabilityChange: Callback invoked when the expandability status changes.
+    public init(
+        _ attributedText: NSAttributedString,
+        lineLimit: Int = 0,
+        isExpanded: Binding<Bool>? = nil,
+        onExpandabilityChange: ((Bool) -> Void)? = nil
+    ) {
+        self.text = attributedText.string
+        self.attributedText = attributedText
+        self.lineLimit = lineLimit
+        self.externalIsExpanded = isExpanded
+		self.font = attributedText.attribute(.font, at: 0, effectiveRange: nil) as? UIFont
+        self.onExpandabilityChange = onExpandabilityChange
+    }
+
+    // MARK: - Public Properties
+
+    public var body: some View {
+        Group {
+            if let attributed = attributedText {
+                Text(AttributedString(attributed))
+            } else {
+                Text(text)
+                    .font(font.map { Font($0) } ?? .body)
+            }
+        }
+        .lineLimit(isExpanded ? nil : (lineLimit > 0 ? lineLimit : nil))
+        .fixedSize(horizontal: false, vertical: true)
+        .onGeometryChange(for: CGFloat.self) { geo in
+            geo.size.width
+        } action: { width in
+            calculateTruncation(availableWidth: width)
+        }
+    }
+
+    // MARK: - Private Properties
+
+    private let text: String
+    private let attributedText: NSAttributedString?
+    private let lineLimit: Int
+    private let font: UIFont?
+    private let onExpandabilityChange: ((Bool) -> Void)?
+
+    @State private var isExpandable: Bool = false
+    @State private var internalIsExpanded: Bool = false
+    @State private var availableWidth: CGFloat = 0
+
+    private var externalIsExpanded: Binding<Bool>?
+
+    /// The current expansion state, reading from external binding if provided, otherwise using internal state.
+    private var isExpanded: Bool {
+        get { externalIsExpanded?.wrappedValue ?? internalIsExpanded }
+        nonmutating set {
+            if let binding = externalIsExpanded {
+                binding.wrappedValue = newValue
+            } else {
+                internalIsExpanded = newValue
+            }
+        }
+    }
+
+    /// The font to use for rendering and measurements, with fallback to body style.
+    private var effectiveFont: UIFont {
+        font ?? UIFont.preferredFont(forTextStyle: .body)
+    }
+
+    /// The height of a single line of text using the effective font.
+    private var singleLineHeight: CGFloat {
+        ceil(effectiveFont.lineHeight + max(0, effectiveFont.leading))
+    }
+
+    // MARK: - Private Methods
+
+    /// Calculates whether the text would be truncated by comparing the full text height to the maximum allowed height.
+    /// - Parameter availableWidth: The available width for rendering the text.
+    private func calculateTruncation(availableWidth: CGFloat) {
+        guard availableWidth > 0 else { return }
+
+        let messageText: String
+        if let attributedText {
+            messageText = attributedText.string
+        } else {
+            messageText = text
+        }
+        // Calculate the full height the text would take without line limit
+        let fullHeight = messageText.preferredSize(
+            for: effectiveFont,
+            width: availableWidth,
+            numberOfLines: 0
+        ).height
+        let maxHeight = singleLineHeight * CGFloat(lineLimit < 1 ? Int.max : lineLimit)
+
+        let newExpandable = fullHeight > maxHeight
+        isExpandable = newExpandable
+        onExpandabilityChange?(newExpandable)
+    }
+}

Sources/FluentUI_iOS/Components/Notification/FluentNotification.swift

@@ -23,6 +23,9 @@ import SwiftUI
     /// Integer value that sets the maximum number of lines will show for a message
     var messageLineLimit: Int { get set }
 
+    /// If the message text should be expandabled to view the entire mesage if it is truncated due to the messageLineLimit
+    var enableExpandableMessageText: Bool { get set }
+
     /// Optional text to draw above the message area.
     var title: String? { get set }
 
@@ -99,6 +102,8 @@ public struct FluentNotification: View, TokenizedControlView {
     ///   - isFlexibleWidthToast: Whether the width of the toast is set based  on the width of the screen or on its contents.
     ///   - message: Optional text for the main title area of the control. If there is a title, the message becomes subtext.
     ///   - attributedMessage: Optional attributed text for the main title area of the control. If there is a title, the message becomes subtext. If set, it will override the message parameter.
+    ///   - messageLineLimit: The maximum number of lines the message can show. Any excess text is truncated.
+    ///   - enableExpandableMessageText: If enabled, an expand button will be shown in place of the dimiss icon when the text is truncated. Tapping the expand button will display all lines of text.
     ///   - isPresented: Controls whether the Notification is being presented.
     ///   - title: Optional text to draw above the message area.
     ///   - attributedTitle: Optional attributed text to draw above the message area. If set, it will override the title parameter.
@@ -118,6 +123,7 @@ public struct FluentNotification: View, TokenizedControlView {
                 message: String? = nil,
                 attributedMessage: NSAttributedString? = nil,
                 messageLineLimit: Int = 0,
+                enableExpandableMessageText: Bool = false,
                 isPresented: Binding<Bool>? = nil,
                 title: String? = nil,
                 attributedTitle: NSAttributedString? = nil,
@@ -139,6 +145,7 @@ public struct FluentNotification: View, TokenizedControlView {
                                              message: message,
                                              attributedMessage: attributedMessage,
                                              messageLineLimit: messageLineLimit,
+                                             enableExpandableMessageText: enableExpandableMessageText,
                                              title: title,
                                              attributedTitle: attributedTitle,
                                              image: image,
@@ -158,7 +165,6 @@ public struct FluentNotification: View, TokenizedControlView {
         self.shouldSelfPresent = shouldSelfPresent
         self.isFlexibleWidthToast = isFlexibleWidthToast && style.isToast
         self.triggerModel = triggerModel
-
         self.tokenSet = NotificationTokenSet(style: { state.style })
 
         if let isPresented = isPresented {
@@ -204,11 +210,36 @@ public struct FluentNotification: View, TokenizedControlView {
         @ViewBuilder
         var messageLabel: some View {
             if let attributedMessage = state.attributedMessage {
-                Text(AttributedString(attributedMessage))
-                    .fixedSize(horizontal: false, vertical: true)
+                if state.enableExpandableMessageText {
+                    ExpandableText(
+                        attributedMessage,
+                        lineLimit: state.messageLineLimit,
+                        isExpanded: $isMessageLabelExpanded,
+                        onExpandabilityChange: { isExpandable in
+                            isMessageLabelExpandable = isExpandable
+                        }
+                    )
+                } else {
+                    Text(AttributedString(attributedMessage))
+                        .lineLimit(state.messageLineLimit > 0 ? state.messageLineLimit : nil)
+                        .fixedSize(horizontal: false, vertical: true)
+                }
             } else if let message = state.message {
-                Text(message)
-                    .font(.init(tokenSet[.regularTextFont].uiFont))
+                if state.enableExpandableMessageText {
+                    ExpandableText(
+                        message,
+                        lineLimit: state.messageLineLimit,
+                        isExpanded: $isMessageLabelExpanded,
+                        font: tokenSet[.regularTextFont].uiFont,
+                        onExpandabilityChange: { isExpandable in
+                            isMessageLabelExpandable = isExpandable
+                        }
+                    )
+                } else {
+                    Text(message)
+                        .lineLimit(state.messageLineLimit > 0 ? state.messageLineLimit : nil)
+                        .font(.init(tokenSet[.regularTextFont].uiFont))
+                }
             }
         }
 
@@ -218,7 +249,7 @@ public struct FluentNotification: View, TokenizedControlView {
                 if hasSecondTextRow {
                     titleLabel
                 }
-                messageLabel.lineLimit(state.messageLineLimit > 0 ? state.messageLineLimit : nil)
+                messageLabel
             }
             .padding(.vertical, NotificationTokenSet.verticalPadding)
         }
@@ -266,6 +297,24 @@ public struct FluentNotification: View, TokenizedControlView {
             }
         }
 
+        @ViewBuilder
+        var expandButton: some View {
+            HStack {
+                SwiftUI.Button(action: {
+                    if state.enableExpandableMessageText {
+                        // Default behavior: toggle expansion state
+                        isMessageLabelExpanded.toggle()
+                    } else {
+                        preconditionFailure("FluentNotification expandButton should not be rendered given state")
+                    }
+                }, label: {
+                    Image("chevron-up-20x20", bundle: FluentUIFramework.resourceBundle)
+                        .accessibilityLabel("Accessibility.Expand.Label".localized)
+                })
+                .hoverEffect()
+            }
+        }
+
         let messageButtonAction = state.messageButtonAction
         @ViewBuilder
         var innerContents: some View {
@@ -296,13 +345,22 @@ public struct FluentNotification: View, TokenizedControlView {
                     .buttonStyle(.borderless)
 #endif // os(visionOS)
                     .layoutPriority(1)
-                    if dismissButtonAction != nil {
+                    if state.enableExpandableMessageText && isMessageLabelExpandable && !isMessageLabelExpanded {
                         Spacer()
-                        dismissButton
+                        expandButton
 #if os(visionOS)
                         .buttonStyle(.borderless)
 #endif // os(visionOS)
                         .layoutPriority(1)
+                    } else {
+                        if dismissButtonAction != nil {
+                            Spacer()
+                            dismissButton
+#if os(visionOS)
+                            .buttonStyle(.borderless)
+#endif // os(visionOS)
+                            .layoutPriority(1)
+                        }
                     }
                 }
                 .onSizeChange { newSize in
@@ -504,6 +562,8 @@ public struct FluentNotification: View, TokenizedControlView {
     @State private var attributedTitleSize: CGSize = CGSize()
     @State private var opacity: CGFloat = 0
     @State private var bumpVerticalOffset: CGFloat = 0
+    @State private var isMessageLabelExpandable = false
+    @State private var isMessageLabelExpanded = false
 
     // When true, the notification view will take up all proposed space
     // and automatically position itself within it.
@@ -535,6 +595,7 @@ class MSFNotificationStateImpl: ControlState, MSFNotificationState {
     @Published var verticalOffset: CGFloat
     @Published var onDismiss: (() -> Void)?
     @Published var swipeToDismissEnabled: Bool
+    @Published var enableExpandableMessageText: Bool
 
     /// Title to display in the action button on the trailing edge of the control.
     ///
@@ -566,6 +627,7 @@ class MSFNotificationStateImpl: ControlState, MSFNotificationState {
                   actionButtonAction: nil,
                   showDefaultDismissActionButton: nil,
                   showActionButtonAndDismissButton: false,
+                  defaultDismissButtonAction: nil,
                   messageButtonAction: nil,
                   swipeToDismissEnabled: false,
                   showFromBottom: true,
@@ -576,6 +638,7 @@ class MSFNotificationStateImpl: ControlState, MSFNotificationState {
          message: String? = nil,
          attributedMessage: NSAttributedString? = nil,
          messageLineLimit: Int = 0,
+         enableExpandableMessageText: Bool = false,
          title: String? = nil,
          attributedTitle: NSAttributedString? = nil,
          image: UIImage? = nil,
@@ -608,7 +671,7 @@ class MSFNotificationStateImpl: ControlState, MSFNotificationState {
         self.swipeToDismissEnabled = swipeToDismissEnabled
         self.defaultDismissButtonAction = defaultDismissButtonAction
         self.verticalOffset = verticalOffset
-
+        self.enableExpandableMessageText = enableExpandableMessageText
         super.init()
     }
 }

Sources/FluentUI_iOS/Components/Notification/Notification.resources.xcfilelist

@@ -1 +1,2 @@
+chevron-up-20x20.imageset
 dismiss-20x20.imageset

Sources/FluentUI_iOS/Resources/FluentUI-ios.xcassets/chevron-up-20x20.imageset/Contents.json

@@ -0,0 +1,16 @@
+{
+  "images": [
+    {
+      "filename": "chevron-up-20x20.svg",
+      "idiom": "universal"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  },
+  "properties": {
+    "preserves-vector-representation": true,
+    "template-rendering-intent": "template"
+  }
+}