diff --git a/changelog.md b/changelog.md index aa562cfad..c0310d2e7 100644 --- 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 index dd9dbdccf..d137542bb 100644 --- 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 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 index f4d744ef9..d1296c827 100644 --- 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 index 00ca0ba25..8077f18c0 100644 --- 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 index 50911b7ea..9613ef08e 100644 --- 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 index 581de027f..b0b0b74c5 100644 --- 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 + ) } } }