New Snackbar spec #306

yamal-alm · 2023-10-17T10:24:43Z

🥅 What's the goal?

New Snackbar definition. Main changes:

New possibility to set an indefinite duration of the Snackbar
Dismiss button
- It will appear when the duration was set to indefinite and there is no action or if the action triggers some event different than dismiss.
- It also can be forced to appear

🚧 How do we do it?

The new dismiss button is included in the Material 3 definition but it is not supported yet in the Material Android library that we are using. Instead I had to overwrite the layout of Snackbar class and do some adaptations to include this new button and logic:

Retrieve Snackbar::snackbarLayout that is fortunately a public method and remove all of its child views
Inflate our new custom Snackbar layout including the dismiss button and make it visible according to the previously described logic
Implement existing logic where the "action" should be placed in a different line if it exceeds a max width.

☑️ Checks

I updated the documentation, including readmes and wikis. If this is a breaking change, update UPGRADING.md to inform users how to proceed. If no updates are necessary, indicate so.
Tested with dark mode.
Tested with API 23.

🧪 How can I test this?

Reviewed by Mistica design team
Mistica App download link
🖼️ Screenshots

Action and 10 seconds	Dismiss forced	Indefinite duration, long action and action that closes	Indefinite duration, long action that doesn't close	Indefinite duration, short action that close	Indefinite duration, short action that doesn't close

github-actions · 2023-10-17T10:38:27Z

📱 New catalog for testing generated: Download

github-actions · 2023-10-17T14:31:23Z

📱 New catalog for testing generated: Download

github-actions · 2023-10-19T08:47:59Z

📱 New catalog for testing generated: Download

yamal-alm · 2023-10-19T09:16:20Z

library/src/main/java/com/telefonica/mistica/feedback/snackbar/CustomSnackbarLayout.kt

+        if (actionIsTooLong()) {
+            rearrangeLayout()
+        }


rearranging the ConstraintLayout to place the snackbar action in a new line if it exceeds its maximum length which is 128dp

yamal-alm · 2023-10-19T09:16:51Z

library/src/main/res/layout/snackbar_custom_layout_merge.xml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:android="http://schemas.android.com/apk/res/android"


file almost indentical to the original layout from Material library implementation

yamal-alm · 2023-10-19T09:19:21Z

library/src/main/java/com/telefonica/mistica/feedback/SnackbarBuilder.kt

+        snackbar.getCustomLayout().setText(text)
+        snackbar.setCustomAction()
+        snackbar.showDismissActionIfNeeded(hasInfiniteDuration = snackbarLength == SnackbarLength.INDEFINITE)


all these customizations are managed inside CustomSnackbarLayout class

yamal-alm · 2023-10-19T09:20:54Z

library/src/main/java/com/telefonica/mistica/feedback/SnackbarBuilder.kt

+        if (isDismissible || userShouldBeAbleToDismissSnackbar) {
+            getCustomLayout().setOnDismissClickListener { dismiss() }
+        }


if the snackbar has an indefinite duration, the user should be able to manually dismiss it. In case the action opens some screen or trigger some event that the user doesn't want to execute, then we should provide an alternative way to dismiss the snackbar by showing the dismiss button

jdelga

Good job! I have added some questions.

jdelga · 2023-10-19T10:34:07Z

library/src/main/java/com/telefonica/mistica/feedback/SnackbarBuilder.kt

@@ -52,7 +59,7 @@ open class SnackbarBuilder(view: View?, text: String) {
    }

    @JvmOverloads
-    open fun showCritical(snackbarLength: SnackbarLength = SnackbarLength.SHORT): Snackbar {
+    open fun showCritical(snackbarLength: SnackbarLength? = null): Snackbar {


Why is the default changed ?

the default duration is calculated when building the snackbar. See my other comment

jdelga · 2023-10-19T10:36:23Z

library/src/main/java/com/telefonica/mistica/feedback/SnackbarBuilder.kt

-            snackbar.setCallback(callback)
-        }
+            areSticky() -> SnackbarLength.INDEFINITE
+            snackbarLength == null -> if (actionListener == null) SnackbarLength.SHORT else SnackbarLength.LONG


I don't understand the relation between the length and if the listener exists or not. IMHO it should default to the previous one which was SHORT

Previous implementation:

There were only two possible snackbar lengths: "short" and "long".

Even if "short" was set on purpose by the user or by default, if any action was provided, then the duration would be set to "long". This is like that by definition.

New implementation:

One more length choice: "indefinite".

If no duration is explicitly selected, we use the same approach as before: if no action is set, then we use "short", if an action is provided then "long" is used instead.

However, I think if (actionListener == null) should be replaced with if (actionText == null)

Then it is more accurate now, thank you very much!

jdelga · 2023-10-19T10:42:11Z

What is the logic to change the snackbar color ?

yamal-alm · 2023-10-19T11:47:46Z

What is the logic to change the snackbar color ?

There is no logic, just the way the Snackbar is shown. We have two methods: showCritical and showInformative

jdelga

Good job!

github-actions · 2023-10-19T13:26:30Z

📱 New catalog for testing generated: Download

github-actions · 2023-10-19T14:03:38Z

📱 New catalog for testing generated: Download

pmartinbTEF

Great job!

idenjoe · 2023-10-20T11:42:45Z

library/src/main/java/com/telefonica/mistica/feedback/SnackbarBuilder.kt

-        }
+            areSticky() -> SnackbarLength.INDEFINITE
+            snackbarLength == null -> if (actionText == null) SnackbarLength.SHORT else SnackbarLength.LONG
+            else -> snackbarLength


This code allows two cases that I think were not specified in the specs:

Create a Snackbar without an action but with an indefinite length.

Create a Snackbar with an action and five seconds length.

@yceballost Should we allow these cases?

Spec has been updated with a more clear description, I'll update this code according to it:

No action: 5 seconds or indefinite with a dismiss x

Action: 10 seconds or indefinite. Optional dimiss X

Discussed offline.

The duration behaviours are explained in: Telefonica/webview-bridge#117

idenjoe · 2023-10-20T11:47:10Z

library/src/main/res/layout/snackbar_custom_layout_merge.xml

+		<ImageView
+				android:layout_width="match_parent"
+				android:layout_height="match_parent"
+				android:contentDescription="@string/close_button_content_description"


@yceballost @aweell According to the specs in this PR we should not include the close button which is for future development. Can you clarify it?

The dismiss action was out of the scope of this task initially. Telefonica/mistica-design#1476

Since the snackbar action didn't perform any custom actions apart from dismiss, the user was able to dismiss the snackbar even changing the duration to infinite.

Telefonica/mistica-design#1461 was intended and labelled as a future development.

Since we were proposing that a custom action can be performed apart from the dismiss action. We need to ensure the user can close the snackbar, that's why the addition of the close icon.

If we're okey to merge both definitions in iOS and Web (@atabel) and follow what android already implemented I'll change the specs to include both in the same task.

I apologize for the misunderstanding @idenjoe

discussed offline: We are going in all platform with the support of the dismiss button (the whole definition). Figma spec has been updated so I'm going to adjust this code a little bit. I'll re-request a new review soon

github-actions · 2023-10-24T08:16:50Z

📱 New catalog for testing generated: Download

github-actions · 2023-10-24T09:12:39Z

📱 New catalog for testing generated: Download

yceballost · 2023-10-27T10:16:31Z

...rc/main/java/com/telefonica/mistica/catalog/ui/classic/components/SnackBarCatalogFragment.kt

                    }
                }
+                if (alwaysShowDismiss.isChecked()) {
+                    withDismiss()
+                }
                val duration = when {


I think you can replace "5 seconds" & "10 seconds" radio button by "Default" in catalog 🤔

Default

Indefinite lenght

it makes sense. Then I would replace the whole radio group with just a checkbox: ☑️ Indefinite length. WDYT

github-actions · 2023-10-27T12:25:58Z

📱 New catalog for testing generated: Download

yamal-alm added 2 commits October 16, 2023 17:27

ANDROID-13817 Replace snackbar implementaion with custom inflated layout

46d0b2b

ANDROID-13817 Place action in another line if it is too long

95c4b36

ANDROID-13817 Dismiss action

0c5622d

ANDROID-13817 Show dismiss button based on params

b9c2ce5

yamal-alm commented Oct 19, 2023

View reviewed changes

yamal-alm marked this pull request as ready for review October 19, 2023 09:30

yamal-alm requested review from a team, jdelga, pmartinbTEF and yceballost and removed request for a team October 19, 2023 09:30

jdelga reviewed Oct 19, 2023

View reviewed changes

jdelga approved these changes Oct 19, 2023

View reviewed changes

ANDROID-13817 fix condition

8cd5d10

update readme

6271399

pmartinbTEF approved these changes Oct 19, 2023

View reviewed changes

idenjoe reviewed Oct 20, 2023

View reviewed changes

ANDROID-13817 Change dismiss button logic

7688ce9

yamal-alm requested review from aweell and idenjoe October 24, 2023 08:10

ANDROID-13817 Receive correct events on snackbar callback

090587a

idenjoe approved these changes Oct 26, 2023

View reviewed changes

yceballost requested changes Oct 27, 2023

View reviewed changes

yceballost self-requested a review October 27, 2023 12:07

yceballost approved these changes Oct 27, 2023

View reviewed changes

ANDROID-13817 Refactor catalog ui

8bfdf66

yamal-alm merged commit 32738df into main Oct 27, 2023
4 of 5 checks passed

yamal-alm deleted the new-snackbar branch October 27, 2023 12:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Snackbar spec #306

New Snackbar spec #306

yamal-alm commented Oct 17, 2023 •

edited

Loading

github-actions bot commented Oct 17, 2023

github-actions bot commented Oct 17, 2023

github-actions bot commented Oct 19, 2023

yamal-alm Oct 19, 2023

yamal-alm Oct 19, 2023

yamal-alm Oct 19, 2023

yamal-alm Oct 19, 2023

jdelga left a comment

jdelga Oct 19, 2023

yamal-alm Oct 19, 2023

jdelga Oct 19, 2023

yamal-alm Oct 19, 2023

jdelga Oct 19, 2023

jdelga commented Oct 19, 2023

yamal-alm commented Oct 19, 2023 •

edited

Loading

jdelga left a comment

github-actions bot commented Oct 19, 2023

github-actions bot commented Oct 19, 2023

pmartinbTEF left a comment

idenjoe Oct 20, 2023

yamal-alm Oct 23, 2023

aweell Oct 23, 2023 •

edited

Loading

idenjoe Oct 20, 2023

aweell Oct 20, 2023 •

edited

Loading

yamal-alm Oct 23, 2023

github-actions bot commented Oct 24, 2023

github-actions bot commented Oct 24, 2023

yceballost Oct 27, 2023

yamal-alm Oct 27, 2023

yceballost Oct 27, 2023

github-actions bot commented Oct 27, 2023

		@@ -0,0 +1,77 @@
		<?xml version="1.0" encoding="utf-8"?>
		<merge xmlns:android="http://schemas.android.com/apk/res/android"

New Snackbar spec #306

New Snackbar spec #306

Conversation

yamal-alm commented Oct 17, 2023 • edited Loading

🥅 What's the goal?

🚧 How do we do it?

☑️ Checks

🧪 How can I test this?

github-actions bot commented Oct 17, 2023

github-actions bot commented Oct 17, 2023

github-actions bot commented Oct 19, 2023

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

jdelga left a 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

jdelga commented Oct 19, 2023

yamal-alm commented Oct 19, 2023 • edited Loading

jdelga left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 19, 2023

github-actions bot commented Oct 19, 2023

pmartinbTEF left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aweell Oct 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aweell Oct 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 24, 2023

github-actions bot commented Oct 24, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 27, 2023

yamal-alm commented Oct 17, 2023 •

edited

Loading

yamal-alm commented Oct 19, 2023 •

edited

Loading

aweell Oct 23, 2023 •

edited

Loading

aweell Oct 20, 2023 •

edited

Loading