Update Compound and add some new snapshot tests. (#4311)

* Update Compound. * Add some snapshot tests for PillView on a bubble background. Version 5.0.0 of compound-design-tokens changed the pill colour but all our snapshots are on white so we didn't notice the difference in contrast. This doesn't fix anything, it purely adds the snapshots.
2026-11-03 06:55:59 +00:00 · 2025-07-09 11:24:14 +01:00
parent 61a8ab44d2
commit 5065ed6735
9 changed files with 80 additions and 5 deletions
@@ -0,0 +1,53 @@
+//
+// Copyright 2025 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+/// A very simple mock layout of some pills within messages bubbles and the composer.
+struct PillViewOnBubble_Previews: PreviewProvider, TestablePreview {
+    static let mockMediaProvider = MediaProviderMock(configuration: .init())
+    static let mentionContext = PillContext.mock(viewState: makeViewState(isOwnMention: false))
+    static let ownMentionContext = PillContext.mock(viewState: makeViewState(isOwnMention: true))
+    
+    static var previews: some View {
+        VStack(spacing: 16) {
+            mockMessage
+                .bubbleBackground(isOutgoing: false, color: .compound._bgBubbleIncoming)
+                .frame(maxWidth: .infinity, alignment: .leading)
+            
+            mockMessage
+                .bubbleBackground(isOutgoing: true, color: .compound._bgBubbleOutgoing)
+                .frame(maxWidth: .infinity, alignment: .trailing)
+            
+            HStack(spacing: 8) {
+                mockMessage
+                    .offset(y: -1)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .messageComposerStyle(isEncrypted: false)
+                
+                SendButton { }
+            }
+            .padding(.top)
+        }
+        .padding(16)
+    }
+    
+    static var mockMessage: some View {
+        HStack(spacing: 4) {
+            Text("Hello").foregroundStyle(.compound.textPrimary)
+            PillView(mediaProvider: mockMediaProvider, context: mentionContext) { }
+            PillView(mediaProvider: mockMediaProvider, context: ownMentionContext) { }
+        }
+    }
+    
+    static func makeViewState(isOwnMention: Bool) -> PillViewState {
+        .mention(isOwnMention: isOwnMention,
+                 displayText: PillUtilities.userPillDisplayText(username: isOwnMention ? "Alice" : "Bob",
+                                                                userID: isOwnMention ? "@alice:matrix.org" : "@bob:matrix.org"))
+    }
+}