skydoves / Balloon

:balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.
https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html
Apache License 2.0
3.69k stars 289 forks source link

ArrowOrientation.BOTTOM and END not working in M3 ModalBottomSheet #627

Closed easyhooon closed 3 weeks ago

easyhooon commented 4 months ago

Describe the Bug: When I use Ballon in M3 Modal BottomSheet ArrowOrientation.BOTTOM is applied as ArrowOrientation.TOP also, ArrowOrientation.END is applied as ArrowOrientation.START

Add a clear description about the problem.

        // setup Ballon
        val builder = rememberBalloonBuilder {
            setArrowSize(10)
            setArrowPosition(0.1f)
            setArrowOrientation(ArrowOrientation.BOTTOM) // <- ArrowOrientation Setup
            setWidth(BalloonSizeSpec.WRAP)
            setHeight(BalloonSizeSpec.WRAP)
            setPadding(9)
            setCornerRadius(8f)
            setBackgroundColor(Color(0xFFF5687E))
            setBalloonAnimation(BalloonAnimation.FADE)
            setDismissWhenClicked(true)
            setDismissWhenTouchOutside(false)
            setFocusable(false)
        }
        // ...other codes
                        Balloon(
                            builder = builder,
                            balloonContent = {
                                Text(
                                    modifier = Modifier
                                        .wrapContentWidth()
                                        .noRippleClickable {
                                            onFestivalUiAction(FestivalUiAction.OnTooltipClick)
                                        },
                                    text = stringResource(id = R.string.festival_search_onboarding_title),
                                    textAlign = TextAlign.Center,
                                    color = Color.White,
                                    style = Content5,
                                )
                            },
                        ) { balloonWindow ->
                            LaunchedEffect(key1 = Unit) {
                                scope.launch {
                                    delay(500L)
                                    balloonWindow.awaitAlignEnd()
                                }
                            }
                        }

result) ArrowOrientation.BOTTOM is applied liked this(like ArrowOrientation.TOP)

image

ArrowOrientation.END is applied liked this(like ArrowOrientation.START)

image

ArrowOrientation.TOP and START is works normally as I intended.

Other Composable liked Screen in M3 Scaffold works normally as I inteded

full code is here. https://github.com/Project-Unifest/unifest-android/blob/develop/core/ui/src/main/kotlin/com/unifest/android/core/ui/component/FestivalBottomSheet.kt

Expected Behavior: ArrowOrientation.BOTTOM and END should be expressed as Orientation is set.

skydoves commented 1 month ago

Hey @easyhooon, sorry for the late response. Have you fixed this issue using your own solution?

skydoves commented 3 weeks ago

I will close this issue for now. If you still have any troubles from this issue, please reopen this!

easyhooon commented 3 weeks ago

@skydoves Currently, I have disabled the use of balloon in this bottom sheet. Since the issues mentioned above do not occur within the other Screen, i'm only using it in the TopAppBar within the screen. If I use it again in the future(in bottomSheet), I will check to see if the problem still persists :).