Merge pull request #796 from Orange-OpenSource/795-banner-stack-butto…

…ns-if-their-texts-are-too-long-to-fit-on-one-line 795 - OdsBanner - Stack buttons if their texts are too long to fit on one line
Orange-OpenSource · Jan 29, 2024 · 4dcdd34 · 4dcdd34
2 parents 05b1f57 + b9bd3f0
commit 4dcdd34
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 31 deletions.
diff --git a/changelog.md b/changelog.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - \[Lib\] Update typography tokens and rename ODS text composables ([#615](https://github.com/Orange-OpenSource/ods-android/issues/615))
 - \[Lib\] Move placeholder images from `app` to `lib` ([#531](https://github.com/Orange-OpenSource/ods-android/issues/531))
 - \[Lib\] Stack cards buttons when texts are too long to fit on one line ([#620](https://github.com/Orange-OpenSource/ods-android/issues/620))
+- \[Lib\] Stack `OdsBanner` buttons when texts are too long to fit on one line ([#795](https://github.com/Orange-OpenSource/ods-android/issues/795))
 
 ### Fixed
 

diff --git a/lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt b/lib/src/main/java/com/orange/ods/compose/component/banner/OdsBanner.kt
@@ -15,6 +15,8 @@ package com.orange.ods.compose.component.banner
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -54,6 +56,7 @@ import com.orange.ods.compose.theme.OdsTheme
  * @param firstButton Primary button displayed in the banner.
  * @param secondButton Secondary button displayed into the banner next to the primary one.
  */
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 @OdsComposable
 fun OdsBanner(
@@ -115,12 +118,13 @@ fun OdsBanner(
             }
         }
         if (!isSingleLineBanner && buttonCount > 0) {
-            Row(
+            FlowRow(
                 modifier = Modifier
-                    .padding(bottom = dimensionResource(id = R.dimen.spacing_xs))
                     .padding(horizontal = dimensionResource(id = R.dimen.spacing_m))
+                    .padding(bottom = dimensionResource(id = R.dimen.spacing_xs))
                     .align(Alignment.End),
-                horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_s))
+                horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_s), Alignment.End),
+                verticalArrangement = Arrangement.spacedBy((-6).dp)
             ) {
                 firstButton?.Content()
                 secondButton?.Content()
@@ -211,10 +215,12 @@ private val previewParameterValues: List<OdsBannerPreviewParameter>
         val shortMessage = "Here is a short banner message."
         val longMessage = "Here is a long banner message. One to two lines is preferable on mobile and tablet."
         val firstButtonText = "ACTION 1"
+        val firstButtonLongText = "ACTION with a very long label"
         val secondButtonText = "ACTION 2"
 
         return listOf(
             OdsBannerPreviewParameter(longMessage, firstButtonText, secondButtonText, imageRes),
+            OdsBannerPreviewParameter(longMessage, firstButtonLongText, secondButtonText, imageRes),
             OdsBannerPreviewParameter(shortMessage),
             OdsBannerPreviewParameter(shortMessage, firstButtonText),
             OdsBannerPreviewParameter(shortMessage, secondButtonText = secondButtonText),

diff --git a/lib/src/main/java/com/orange/ods/compose/component/card/OdsCardsCommon.kt b/lib/src/main/java/com/orange/ods/compose/component/card/OdsCardsCommon.kt
@@ -13,6 +13,10 @@
 package com.orange.ods.compose.component.card
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Card
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
@@ -23,7 +27,10 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import com.orange.ods.R
 import com.orange.ods.compose.component.button.OdsTextButton
 import com.orange.ods.compose.component.content.OdsComponentCircularImage
 import com.orange.ods.compose.component.content.OdsComponentContent
@@ -39,6 +46,19 @@ internal fun OdsCard(modifier: Modifier, onClick: (() -> Unit)?, content: @Compo
     }
 }
 
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+internal fun OdsCardButtonsFlowRow(modifier: Modifier = Modifier, firstButton: OdsCard.Button? = null, secondButton: OdsCard.Button? = null) {
+    FlowRow(
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_s)),
+        verticalArrangement = Arrangement.spacedBy((-6).dp)
+    ) {
+        firstButton?.Content()
+        secondButton?.Content()
+    }
+}
+
 /**
  * Contains classes to build an [com.orange.ods.compose.component.card.OdsHorizontalCard], an [com.orange.ods.compose.component.card.OdsSmallCard], an [com.orange.ods.compose.component.card.OdsVerticalImageFirstCard] or an [com.orange.ods.compose.component.card.OdsVerticalHeaderFirstCard].
  */

diff --git a/lib/src/main/java/com/orange/ods/compose/component/card/OdsHorizontalCard.kt b/lib/src/main/java/com/orange/ods/compose/component/card/OdsHorizontalCard.kt
@@ -13,7 +13,6 @@
 package com.orange.ods.compose.component.card
 
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -162,14 +161,15 @@ fun OdsHorizontalCard(
                 }
             )
 
-            FlowRow(modifier = Modifier.constrainAs(buttonsRef) {
-                top.linkTo(dividerRef.bottom)
-                start.linkTo(parent.start, margin = smallSpacing)
-                visibility = if (firstButton != null || secondButton != null) Visibility.Visible else Visibility.Gone
-            }) {
-                firstButton?.Content()
-                secondButton?.Content()
-            }
+            OdsCardButtonsFlowRow(
+                modifier = Modifier.constrainAs(buttonsRef) {
+                    top.linkTo(dividerRef.bottom)
+                    start.linkTo(parent.start, margin = smallSpacing)
+                    visibility = if (firstButton != null || secondButton != null) Visibility.Visible else Visibility.Gone
+                },
+                firstButton = firstButton,
+                secondButton = secondButton
+            )
         }
     }
 }

diff --git a/lib/src/main/java/com/orange/ods/compose/component/card/OdsVerticalHeaderFirstCard.kt b/lib/src/main/java/com/orange/ods/compose/component/card/OdsVerticalHeaderFirstCard.kt
@@ -13,10 +13,8 @@
 package com.orange.ods.compose.component.card
 
 import androidx.annotation.DrawableRes
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -108,15 +106,11 @@ fun OdsVerticalHeaderFirstCard(
                 Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.spacing_m)))
             }
 
-            FlowRow(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = dimensionResource(id = R.dimen.spacing_s)),
-                horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_s))
-            ) {
-                firstButton?.Content()
-                secondButton?.Content()
-            }
+            OdsCardButtonsFlowRow(
+                modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.spacing_s)),
+                firstButton = firstButton,
+                secondButton = secondButton
+            )
         }
     }
 }

diff --git a/lib/src/main/java/com/orange/ods/compose/component/card/OdsVerticalImageFirstCard.kt b/lib/src/main/java/com/orange/ods/compose/component/card/OdsVerticalImageFirstCard.kt
@@ -12,10 +12,8 @@
 
 package com.orange.ods.compose.component.card
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -87,13 +85,12 @@ fun OdsVerticalImageFirstCard(
                     )
                 }
             }
-            FlowRow(
+
+            OdsCardButtonsFlowRow(
                 modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.spacing_s)),
-                horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_s))
-            ) {
-                firstButton?.Content()
-                secondButton?.Content()
-            }
+                firstButton = firstButton,
+                secondButton = secondButton
+            )
         }
     }
 }