IOS-9356 Adjust crouton constraints above the tabbar or the safe area #422

L-Trujillo26 · 2025-01-29T16:25:53Z

Warning

Should a designer need to review/verify this PR?

🎟️ Jira ticket

🥅 What's the goal?

The Crouton design is deprecated and replaced with a new design that matches the appearance and behavior of the snackbar, as specified in the Figma:

https://www.figma.com/design/yCHLIfy4WMfRdlADwyL4kZ/%F0%9F%94%B8-Snackbar-Specs?t=bb57Dv8A0XsJVGqF-0

The component name has not yet been changed, but a floating design is implemented that respects the safe area and elements like the TabBar ensuring proper display in the view hierarchy.

🚧 How do we do it?

Design changes have been made(behavior is aligns with the Figma specifications)

🧪 How can I verify this?

MisticaCatalog -> Crouton (UIKit)-> show Crouton

This screenshot shows the Snackbar in SwiftUI and the Crouton in UIKit.

animationSnackbar.mov

🏑 AppCenter build

https://appcenter.ms/orgs/Tuenti-Organization/apps/Mistica-SwiftUI-iOS/distribute/releases

github-actions · 2025-01-29T16:33:48Z

Screenshot tests report

✔️ All passing

… constraints logic

L-Trujillo26 · 2025-01-31T17:42:21Z

Record screenshots on PR comment: succeeded ✅
https://github.com/Telefonica/mistica-ios/actions/runs/13077931349

…when a TabTar is present

…n file

amegias

Really good work!!

amegias · 2025-02-13T15:10:02Z

Sources/Mistica/Components/Crouton/Presentation/CroutonView.swift


-            directionalLayoutMargins = Constants.margins
+    private func findTabBar(in view: UIView) -> UITabBar? {
+        for subview in view.subviews {


I'm afraid of finding the new tabBar in iPad...

https://developer.apple.com/documentation/uikit/elevating-your-ipad-app-with-a-tab-bar-and-sidebar

Could we check if it's a bottom tabBar?

It’s possible to implement a logic to check if a tabBar exists and if it is positioned at the bottom of the device. If this condition isn't met, it would continue searching. I am going to add this logic to prevent cases like this.

done and added tests

amegias · 2025-02-13T15:12:37Z

Sources/Mistica/Components/Crouton/Presentation/CroutonView.swift


-            directionalLayoutMargins = Constants.marginsWhenUsingSafeArea
+        if let tabBar = tabBar, !tabBar.isHidden {
+            bottomConstraint = bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: -(tabBar.bounds.height + 8))


A lot of 8's, I would move it to enum Constants 😄

amegias · 2025-02-13T15:13:05Z

Sources/Mistica/Components/Crouton/Presentation/CroutonView.swift

+        } else if hasSafeArea {
+            bottomConstraint = bottomAnchor.constraint(equalTo: container.safeAreaLayoutGuide.bottomAnchor, constant: -8)


this case is repeated in else. Could we merge it?

amegias · 2025-02-13T15:13:56Z

Sources/Mistica/Components/Crouton/Presentation/CroutonView.swift

        } else {
-            let bottomConstraint: NSLayoutConstraint
+            bottomConstraint = bottomAnchor.constraint(equalTo: container.safeAreaLayoutGuide.bottomAnchor, constant: -8)


curious... let me check

amegias · 2025-02-13T15:14:46Z

Tests/MisticaTests/UI/CroutonTests.swift

+            for: [BrandStyle.movistar],
+            and: [.light],


amegias · 2025-02-13T15:17:05Z

Tests/MisticaTests/UI/CroutonTests.swift

 }

 private extension CroutonTests {
-    func makeCrouton(withText text: String, actionTitle: String? = nil, style: CroutonStyle) -> UIViewController {
-        let viewController = CroutonTestViewController(
+    func makeCrouton(withText text: String, actionTitle: String? = nil, style: CroutonStyle, withTabBar: Bool = false) -> UIViewController {


withTabBar: Bool is a bad practice.

It makes you to add an if inside the method -> create two methods then!

we should avoid having if/guard/... in tests. Otherwise we should test our tests 😄

amegias · 2025-02-13T15:22:28Z

An extra point:
I would remove "all brands" from existing Crouton tests. IMHO, it is more difficult to verify screenshots in the PR. wdyt David/Laura?

DavidMarinCalleja · 2025-02-14T06:46:56Z

An extra point: I would remove "all brands" from existing Crouton tests. IMHO, it is more difficult to verify screenshots in the PR. wdyt David/Laura?

I don't really have a strong opinion about this because testing “all brand” increases the size of the repo, makes it difficult to check the PR but I'm afraid that removing it will hide some bug. But if you agree we can remove it.

amegias · 2025-02-14T08:09:21Z

An extra point: I would remove "all brands" from existing Crouton tests. IMHO, it is more difficult to verify screenshots in the PR. wdyt David/Laura?

I don't really have a strong opinion about this because testing “all brand” increases the size of the repo, makes it difficult to check the PR but I'm afraid that removing it will hide some bug. But if you agree we can remove it.

then, we should add test to the palette, etc

DavidMarinCalleja · 2025-02-14T08:33:31Z

Sources/Mistica/Components/Crouton/Presentation/CroutonView.swift

@L-Trujillo26 I have a doubt, where the crouton is fixed at the end? I mean the view is added to the current view and therefore disappears if we navigate to another site or on the other hand is fixed to the root view of the app and therefore the crouton is fixed even after browsing.

If a exact UIViewController isn't specified, the crouton will be add to the RootViewController making it visible during navigation. Its persistence depends on the configuration set in the initialization. This behavior has been confirmed with the design team.

DavidMarinCalleja

Great job!!

amegias · 2025-02-17T11:41:15Z

I've created a pet project to test this from UIKit.
It works with:

TabBar
TabBar where tab1 presents a modal
TabBar where tab1 push a VC hidding the tabBar
TabBar where tab1 push a VC keeping the tabBar
ViewController

I just found this glitch, could you check it please:

bug_dismiss.mp4

L-Trujillo26 · 2025-02-18T09:51:07Z

I've created a pet project to test this from UIKit. It works with:

TabBar

TabBar where tab1 presents a modal

TabBar where tab1 push a VC hidding the tabBar

TabBar where tab1 push a VC keeping the tabBar

ViewController

I just found this glitch, could you check it please:

bug_dismiss.mp4

This is the animation for the crouton positioned at the bottom. I have updated it to match the snackbar animation (it fades in and out gradually).

Attached video of the Snackbar animation in SwiftUI and UIKit.

animationSnackbar.mov

IOS-9356 Adjust crouton constraints above the tabbar or the safe area

a48024a

L-Trujillo26 and others added 5 commits January 31, 2025 11:28

IOS-9356 adjust crouton border radius and update close button size

0997b66

Run swiftformat

edcd59f

ci(secrets): Update firebase secret (#420)

18bf440

IOS-9356 update the close button of the crouton and optimize the view…

5f1e920

… constraints logic

Run swiftformat

523f4f4

L-Trujillo26 and others added 8 commits January 31, 2025 18:45

Record screenshots automatically launched from GH action

58ded75

IOS-9356 Add tests for floating crouton behavior in UIScrollView and …

65f9e4e

…when a TabTar is present

Run swiftformat

0f63ba7

IOS-9356 update crouton tests and undo changes in GitHub configuratio…

dbf17ee

…n file

IOS-9356 update crouton with tabbar test

8216d64

Run swiftformat

2e9e867

IOS-9356 improved crouton tests

c6a2ba0

Run swiftformat

a553cdd

L-Trujillo26 requested review from DavidMarinCalleja and amegias February 13, 2025 09:52

amegias approved these changes Feb 13, 2025

View reviewed changes

DavidMarinCalleja reviewed Feb 14, 2025

View reviewed changes

L-Trujillo26 and others added 2 commits February 14, 2025 11:51

IOS-9356 ensure crouton only detects bottom tabbar and fix pr comments

b348cad

Run swiftformat

e5b054d

DavidMarinCalleja approved these changes Feb 14, 2025

View reviewed changes

amegias self-requested a review February 17, 2025 11:41

IOS-9356 fix crouton animation

5d5c675

amegias approved these changes Feb 18, 2025

View reviewed changes

L-Trujillo26 requested a review from yceballost February 18, 2025 10:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IOS-9356 Adjust crouton constraints above the tabbar or the safe area #422

IOS-9356 Adjust crouton constraints above the tabbar or the safe area #422

L-Trujillo26 commented Jan 29, 2025 •

edited

Loading

github-actions bot commented Jan 29, 2025 •

edited

Loading

L-Trujillo26 commented Jan 31, 2025 •

edited by github-actions bot

Loading

amegias left a comment

amegias Feb 13, 2025

L-Trujillo26 Feb 13, 2025 •

edited

Loading

L-Trujillo26 Feb 14, 2025

amegias Feb 13, 2025

amegias Feb 13, 2025

amegias Feb 13, 2025

amegias Feb 13, 2025

amegias Feb 13, 2025

amegias commented Feb 13, 2025

DavidMarinCalleja commented Feb 14, 2025

amegias commented Feb 14, 2025

DavidMarinCalleja Feb 14, 2025

L-Trujillo26 Feb 14, 2025

DavidMarinCalleja left a comment

amegias commented Feb 17, 2025

L-Trujillo26 commented Feb 18, 2025

		} else if hasSafeArea {
		bottomConstraint = bottomAnchor.constraint(equalTo: container.safeAreaLayoutGuide.bottomAnchor, constant: -8)

IOS-9356 Adjust crouton constraints above the tabbar or the safe area #422

Are you sure you want to change the base?

IOS-9356 Adjust crouton constraints above the tabbar or the safe area #422

Conversation

L-Trujillo26 commented Jan 29, 2025 • edited Loading

🎟️ Jira ticket

🥅 What's the goal?

🚧 How do we do it?

🧪 How can I verify this?

🏑 AppCenter build

github-actions bot commented Jan 29, 2025 • edited Loading

L-Trujillo26 commented Jan 31, 2025 • edited by github-actions bot Loading

amegias left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

L-Trujillo26 Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amegias commented Feb 13, 2025

DavidMarinCalleja commented Feb 14, 2025

amegias commented Feb 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DavidMarinCalleja left a comment

Choose a reason for hiding this comment

amegias commented Feb 17, 2025

L-Trujillo26 commented Feb 18, 2025

L-Trujillo26 commented Jan 29, 2025 •

edited

Loading

github-actions bot commented Jan 29, 2025 •

edited

Loading

L-Trujillo26 commented Jan 31, 2025 •

edited by github-actions bot

Loading

L-Trujillo26 Feb 13, 2025 •

edited

Loading