diff --git a/changelog.md b/changelog.md index 2bb9b08e8..e1ad429d2 100644 --- a/changelog.md +++ b/changelog.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - \[Lib\] Update `OdsChip` API to use a unique leading parameter ([#705](https://github.com/Orange-OpenSource/ods-android/issues/705)) - \[Lib\] Update most API types to be clearer for v1 launch ([#701](https://github.com/Orange-OpenSource/ods-android/issues/701)) - \[Lib\] Update `OdsBanner` to allow banner without button and avoid text truncation in banner for accessibility purpose ([#643](https://github.com/Orange-OpenSource/ods-android/issues/643)) +- \[Lib\] Update `OdsSmallCard` to show full title and subtitle when the card is not clickable for accessibility purpose ([#722](https://github.com/Orange-OpenSource/ods-android/issues/722)) ### Fixed diff --git a/docs/components/Cards.md b/docs/components/Cards.md index 4864060f7..e45e3e248 100644 --- a/docs/components/Cards.md +++ b/docs/components/Cards.md @@ -168,10 +168,10 @@ Row( Parameter | Default value | Description -- | -- | -- -`title: String` | | Title displayed into the card +`title: String` | | Title displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for accessibility reasons. `image: OdsCard.Image` | | Image displayed into the card `modifier: Modifier` | `Modifier` | `Modifier` applied to the layout of the card -`subtitle: String?` | `null` | Subtitle displayed into the card +`subtitle: String?` | `null` | Subtitle displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for accessibility reasons. `onClick: (() -> Unit)?` | `null` | Callback invoked on card click {:.table} diff --git a/lib/src/main/java/com/orange/ods/compose/component/card/OdsSmallCard.kt b/lib/src/main/java/com/orange/ods/compose/component/card/OdsSmallCard.kt index 13e2b9467..e340f5315 100644 --- a/lib/src/main/java/com/orange/ods/compose/component/card/OdsSmallCard.kt +++ b/lib/src/main/java/com/orange/ods/compose/component/card/OdsSmallCard.kt @@ -14,14 +14,19 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.unit.dp import com.orange.ods.R import com.orange.ods.compose.component.OdsComposable +import com.orange.ods.compose.component.utilities.BasicPreviewParameterProvider import com.orange.ods.compose.component.utilities.Preview import com.orange.ods.compose.component.utilities.UiModePreviews import com.orange.ods.compose.theme.OdsTheme @@ -31,10 +36,12 @@ import com.orange.ods.compose.theme.OdsTheme * * Cards contain content and actions about a single subject. * - * @param title Title displayed into the card. + * @param title Title displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for + * accessibility reasons. * @param image [OdsCard.Image] displayed into the card. * @param modifier [Modifier] applied to the layout of the card. - * @param subtitle Subtitle displayed into the card. + * @param subtitle Subtitle displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed + * entirely for accessibility reasons. * @param onClick Callback invoked on card click. */ @Composable @@ -60,29 +67,56 @@ fun OdsSmallCard( modifier = Modifier .padding(dimensionResource(id = R.dimen.spacing_m)) ) { - Text( - text = title, - style = OdsTheme.typography.h6, - maxLines = 1, - overflow = TextOverflow.Ellipsis - ) + SmallCardText(text = title, style = OdsTheme.typography.h6, isClickableCard = onClick != null) subtitle?.let { - Text( - text = it, - style = OdsTheme.typography.subtitle2 - ) + SmallCardText(text = it, style = OdsTheme.typography.subtitle2, isClickableCard = onClick != null) } } } } } +@Composable +private fun SmallCardText(text: String, style: TextStyle, isClickableCard: Boolean) { + Text( + text = text, + style = style, + maxLines = if (isClickableCard) 1 else Int.MAX_VALUE, + overflow = if (isClickableCard) TextOverflow.Ellipsis else TextOverflow.Clip + ) +} + @UiModePreviews.Default @Composable -private fun PreviewOdsSmallCard() = Preview { +private fun PreviewOdsSmallCard(@PreviewParameter(OdsSmallCardPreviewParameterProvider::class) parameter: OdsSmallCardPreviewParameter) = Preview { OdsSmallCard( - title = "Title", - subtitle = "Subtitle", - image = OdsCard.Image(painterResource(id = R.drawable.placeholder), "") + modifier = Modifier.width(200.dp), + title = parameter.title, + subtitle = parameter.subtitle, + image = OdsCard.Image(painterResource(id = R.drawable.placeholder), ""), + onClick = parameter.onClick ) } + +internal data class OdsSmallCardPreviewParameter( + val title: String, + val subtitle: String?, + val onClick: (() -> Unit)? = {} +) + +private class OdsSmallCardPreviewParameterProvider : + BasicPreviewParameterProvider(*previewParameterValues.toTypedArray()) + +private val previewParameterValues: List + get() { + val shortTitle = "Title" + val longTitle = "Here is a long title that don't fit" + val shortSubtitle = "Subtitle" + val longSubtitle = "Here is a very very very long subtitle" + + return listOf( + OdsSmallCardPreviewParameter(shortTitle, shortSubtitle), + OdsSmallCardPreviewParameter(longTitle, longSubtitle), + OdsSmallCardPreviewParameter(longTitle, longSubtitle, null), + ) + } \ No newline at end of file