Skip to content

chore(app): add rich text to demo app #1332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
florentmaitre wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

chore(app): add rich text to demo app #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9d005bd
Add rich text to alert message demo
florentmaitre Jun 17, 2026
ac085d3
Add rich text to control item demos
florentmaitre Jun 17, 2026
05139f7
Add rich text to bullet list demo
florentmaitre Jun 17, 2026
9462ac2
Add rich text to password input, pin code input, text area and text i…
florentmaitre Jun 18, 2026
d49f309
Annotated text switch is now disabled when error is disabled in contr…
florentmaitre Jun 18, 2026
0893d54
Minor fixes
florentmaitre Jun 19, 2026
8e6e04c
Use string resources instead of hardcoded values to display rich text…
florentmaitre Jun 22, 2026
70fa9d4
Minor fixes
florentmaitre Jun 22, 2026
5fb6605
Review: Fix a bug in alert message where the title and the icon are n…
florentmaitre Jul 1, 2026
0ec8e38
Review: Update wording
florentmaitre Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/components/ComponentCode.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ import com.orange.ouds.app.ui.utilities.Code
import com.orange.ouds.app.ui.utilities.FunctionCall
import com.orange.ouds.core.component.OudsColoredBoxColor
import com.orange.ouds.core.component.common.OudsError
import com.orange.ouds.core.component.common.text.OudsAnnotatedErrorMessage
import com.orange.ouds.core.component.common.text.OudsAnnotatedHelperText
import com.orange.ouds.core.component.common.text.OudsAnnotatedString

fun Code.Builder.coloredBoxCall(onColoredBox: Boolean, content: Code.Builder.() -> Unit) {
if (onColoredBox) {
Expand All @@ -35,6 +38,16 @@ fun Code.Builder.coloredBoxCall(onColoredBox: Boolean, content: Code.Builder.()
}
}

internal inline fun <reified T> FunctionCall.Builder.annotatedStringArgument(name: String?) where T : OudsAnnotatedString<T> {
val functionName = "build${T::class.simpleName}"
functionCallArgument(name, functionName) {
trailingLambda = true
lambdaArgument("builder") {
comment("Build annotated string")
}
}
}

inline fun <reified T> FunctionCall.Builder.iconArgument(
name: String,
@DrawableRes resId: Int,
Expand Down Expand Up @@ -77,9 +90,13 @@ fun FunctionCall.Builder.enabledArgument(value: Boolean) = typedArgument(Argumen

fun FunctionCall.Builder.tintedArgument(value: Boolean) = typedArgument(Argument.Tinted, value)

fun FunctionCall.Builder.errorArgument(message: String) {
fun FunctionCall.Builder.errorArgument(message: String, annotatedMessage: Boolean = false) {
constructorCallArgument<OudsError>(Argument.Error) {
typedArgument("message", message)
if (annotatedMessage) {
annotatedStringArgument<OudsAnnotatedErrorMessage>(Argument.Message)
} else {
typedArgument(Argument.Message, message)
}
}
}

Expand All @@ -96,6 +113,14 @@ fun FunctionCall.Builder.onClickArgument(init: Code.Builder.() -> Unit = {}) = l

fun FunctionCall.Builder.readOnlyArgument(value: Boolean) = typedArgument(Argument.ReadOnly, value)

fun FunctionCall.Builder.helperTextArgument(helperText: String, annotated: Boolean = false) {
if (annotated) {
annotatedStringArgument<OudsAnnotatedHelperText>(Argument.HelperText)
} else if (helperText.isNotBlank()) {
typedArgument(Argument.HelperText, helperText)
}
}

private object Argument {

const val Color = "color"
Expand All @@ -104,6 +129,8 @@ private object Argument {
const val Content = "content"
const val Enabled = "enabled"
const val Error = "error"
const val Message = "message"
const val HelperText = "helperText"
const val Id = "id"
const val Label = "label"
const val OnClick = "onClick"
Expand Down
122 changes: 90 additions & 32 deletions app/src/main/java/com/orange/ouds/app/ui/components/alert/AlertMessageDemoScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,14 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.components.alert.AlertMessageDemoState.Companion.MaxBulletCount
import com.orange.ouds.app.ui.components.annotatedStringArgument
import com.orange.ouds.app.ui.components.iconArgument
import com.orange.ouds.app.ui.components.labelArgument
import com.orange.ouds.app.ui.components.onClickArgument
import com.orange.ouds.app.ui.utilities.Code
import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
import com.orange.ouds.app.ui.utilities.ThemeDrawableResources
import com.orange.ouds.app.ui.utilities.appendHtml
import com.orange.ouds.app.ui.utilities.composable.AppPreview
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenu
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenuItem
Expand All @@ -44,6 +45,10 @@ import com.orange.ouds.core.component.OudsAlertMessage
import com.orange.ouds.core.component.OudsAlertMessageActionLink
import com.orange.ouds.core.component.OudsAlertMessageActionLinkPosition
import com.orange.ouds.core.component.OudsAlertMessageStatus
import com.orange.ouds.core.component.common.text.OudsAnnotatedAlertMessageBulletListLabel
import com.orange.ouds.core.component.common.text.OudsAnnotatedAlertMessageDescription
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedAlertMessageBulletListLabel
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedAlertMessageDescription
import com.orange.ouds.foundation.extensions.toSentenceCase
import com.orange.ouds.foundation.extensions.tryOrNull
import com.orange.ouds.theme.OudsVersion
Expand Down Expand Up @@ -123,7 +128,9 @@ private fun AlertMessageDemoBottomSheetContent(state: AlertMessageDemoState) {
applyTopPadding = true,
label = stringResource(R.string.app_components_common_description_tech),
value = description.orEmpty(),
onValueChange = { value -> description = value }
onValueChange = { value -> description = value },
enabled = descriptionTextInputEnabled,
helperText = stringResource(id = R.string.app_components_common_annotatedTextHelperText_tech)
)
CustomizationTextInput(
applyTopPadding = true,
Expand All @@ -143,16 +150,23 @@ private fun AlertMessageDemoBottomSheetContent(state: AlertMessageDemoState) {
selectedChipIndex = OudsAlertMessageActionLinkPosition.entries.indexOf(actionLinkPosition),
onSelectionChange = { id -> actionLinkPosition = OudsAlertMessageActionLinkPosition.entries[id] }
)
for (id in 1..MaxBulletCount) {
for (index in 0..<AlertMessageDemoState.MaxBulletCount) {
CustomizationTextInput(
applyTopPadding = true,
label = stringResource(R.string.app_components_alert_alertMessage_bullet_tech, id),
value = bulletList?.get(id).orEmpty(),
label = stringResource(R.string.app_components_alert_alertMessage_bullet_tech, index + 1),
value = bulletList[index],
onValueChange = { value ->
bulletList = bulletList.orEmpty().toMutableMap().apply { put(id, value) }
}
bulletList = bulletList.toMutableList().apply { set(index, value) }.toList()
},
enabled = bulletListTextInputsEnabled,
helperText = stringResource(id = R.string.app_components_common_annotatedTextHelperText_tech)

@paulinea paulinea Jun 30, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how to do better but when I tested the app, this helper text suggested me to enter annotated text in the field above but I didn't know how. I needed to scroll to access the "Annotated text" switch.

)
}
CustomizationSwitchItem(
label = stringResource(R.string.app_components_common_annotatedText_tech),
checked = annotatedText,
onCheckedChange = { annotatedText = it },
)
}
}

Expand All @@ -164,27 +178,59 @@ private fun AlertMessageDemoContent(state: AlertMessageDemoState) {
AlertMessageDemoState.Icon.Tinted -> OudsAlertIcon(painter = painterResource(LocalThemeDrawableResources.current.tipsAndTricks), tinted = true)
AlertMessageDemoState.Icon.Untinted -> OudsAlertIcon(painter = rememberUntintedIconPainter(), tinted = false)
}
OudsAlertMessage(
label = label,
description = description,
status = when (status) {
is OudsAlertMessageStatus.Accent -> OudsAlertMessageStatus.Accent(alertIcon)
is OudsAlertMessageStatus.Neutral -> OudsAlertMessageStatus.Neutral(alertIcon)
is OudsAlertMessageStatus.Info -> OudsAlertMessageStatus.Info
is OudsAlertMessageStatus.Negative -> OudsAlertMessageStatus.Negative
is OudsAlertMessageStatus.Positive -> OudsAlertMessageStatus.Positive
is OudsAlertMessageStatus.Warning -> OudsAlertMessageStatus.Warning
},
onClose = if (hasCloseButton) {
{}
} else {
null
},
actionLink = actionLink?.let { actionLinkLabel ->
OudsAlertMessageActionLink(label = actionLinkLabel, onClick = {}, position = actionLinkPosition)
},
bulletList = bulletList?.toSortedMap()?.values?.toList()
)
val alertMessageStatus = when (status) {
is OudsAlertMessageStatus.Accent -> OudsAlertMessageStatus.Accent(alertIcon)
is OudsAlertMessageStatus.Neutral -> OudsAlertMessageStatus.Neutral(alertIcon)
is OudsAlertMessageStatus.Info -> OudsAlertMessageStatus.Info
is OudsAlertMessageStatus.Negative -> OudsAlertMessageStatus.Negative
is OudsAlertMessageStatus.Positive -> OudsAlertMessageStatus.Positive
is OudsAlertMessageStatus.Warning -> OudsAlertMessageStatus.Warning
}
val onClose = if (hasCloseButton) {
{}
} else {
null
}
val alertMessageActionLink = actionLink?.let { actionLinkLabel ->
OudsAlertMessageActionLink(label = actionLinkLabel, onClick = {}, position = actionLinkPosition)
}
if (annotatedText) {
val annotatedDescriptionHtml = stringResource(R.string.app_components_alert_alertMessage_annotatedDescription_text)
val annotatedDescription = buildOudsAnnotatedAlertMessageDescription {
appendHtml(annotatedDescriptionHtml)
}
val annotatedBullet1Html = stringResource(R.string.app_components_alert_alertMessage_annotatedBullet1_text)
val annotatedBullet2Html = stringResource(R.string.app_components_alert_alertMessage_annotatedBullet2_text)
val annotatedBullet3Html = stringResource(R.string.app_components_alert_alertMessage_annotatedBullet3_text)
val annotatedBulletList = listOf(
buildOudsAnnotatedAlertMessageBulletListLabel {
appendHtml(annotatedBullet1Html)
},
buildOudsAnnotatedAlertMessageBulletListLabel {
appendHtml(annotatedBullet2Html)
},
buildOudsAnnotatedAlertMessageBulletListLabel {
appendHtml(annotatedBullet3Html)
}
)
OudsAlertMessage(
label = label,
description = annotatedDescription,
status = alertMessageStatus,
onClose = onClose,
actionLink = alertMessageActionLink,
bulletList = annotatedBulletList
)
} else {
OudsAlertMessage(
label = label,
description = description,
status = alertMessageStatus,
onClose = onClose,
actionLink = alertMessageActionLink,
bulletList = bulletList

@paulinea paulinea Jun 30, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a problem in the display of the OudsAlertMessage, the label and the icon are no more centered vertically. I think we should test in OudsAlertMessage if the bullet list is empty.

Image

)
}
}
}

Expand All @@ -209,7 +255,11 @@ private fun Code.Builder.alertMessageDemoCodeSnippet(state: AlertMessageDemoStat
}
}
labelArgument(label)
description?.let { typedArgument("description", description) }
if (annotatedText) {
annotatedStringArgument<OudsAnnotatedAlertMessageDescription>("description")
} else {
description?.let { typedArgument("description", description) }
}
if (hasCloseButton) {
lambdaArgument("onClose") {
comment("Close alert message")
Expand All @@ -224,10 +274,18 @@ private fun Code.Builder.alertMessageDemoCodeSnippet(state: AlertMessageDemoStat
typedArgument("position", actionLinkPosition)
}
}
bulletList?.let { bulletLabelById ->
if (bulletList.any { it.isNotBlank() } || annotatedText) {
functionCallArgument("bulletList", "listOf") {
bulletLabelById.toSortedMap().values.forEach { label ->
typedArgument(null, label)
if (annotatedText) {
repeat(AlertMessageDemoState.MaxBulletCount) {
annotatedStringArgument<OudsAnnotatedAlertMessageBulletListLabel>(null)
}
} else {
bulletList.forEach { label ->
if (label.isNotBlank()) {
typedArgument(null, label)
}
}
}
}
}
Expand Down
26 changes: 20 additions & 6 deletions app/src/main/java/com/orange/ouds/app/ui/components/alert/AlertMessageDemoState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.res.stringResource
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.components.alert.AlertMessageDemoState.Companion.MaxBulletCount
import com.orange.ouds.core.component.OudsAlertMessageActionLinkPosition
import com.orange.ouds.core.component.OudsAlertMessageDefaults
import com.orange.ouds.core.component.OudsAlertMessageStatus
Expand All @@ -35,7 +36,8 @@ fun rememberAlertMessageDemoState(
description: String? = null,
actionLink: String? = null,
actionLinkPosition: OudsAlertMessageActionLinkPosition = OudsAlertMessageDefaults.ActionLinkPosition,
bulletList: Map<Int, String>? = null,
bulletList: List<String> = List(MaxBulletCount) { "" },
annotatedText: Boolean = false
) = rememberSaveable(
status,
icon,
Expand All @@ -45,9 +47,10 @@ fun rememberAlertMessageDemoState(
actionLink,
actionLinkPosition,
bulletList,
annotatedText,
saver = AlertMessageDemoState.Saver
) {
AlertMessageDemoState(status, icon, hasCloseButton, label, description, actionLink, actionLinkPosition, bulletList)
AlertMessageDemoState(status, icon, hasCloseButton, label, description, actionLink, actionLinkPosition, bulletList, annotatedText)
}

class AlertMessageDemoState(
Expand All @@ -58,7 +61,8 @@ class AlertMessageDemoState(
description: String?,
actionLink: String?,
actionLinkPosition: OudsAlertMessageActionLinkPosition,
bulletList: Map<Int, String>?
bulletList: List<String>,
annotatedText: Boolean
) {

@Suppress("UNCHECKED_CAST")
Expand All @@ -83,7 +87,8 @@ class AlertMessageDemoState(
description,
actionLink,
actionLinkPosition,
bulletList
bulletList,
annotatedText
)
}
},
Expand All @@ -99,7 +104,8 @@ class AlertMessageDemoState(
list[4] as String?,
list[5] as String?,
list[6] as OudsAlertMessageActionLinkPosition,
list[7] as Map<Int, String>?
list[7] as List<String>,
list[8] as Boolean
)
}
)
Expand Down Expand Up @@ -129,8 +135,16 @@ class AlertMessageDemoState(

val actionLinkPositionChipsEnabled: Boolean
get() = !actionLink.isNullOrEmpty()

var bulletList: List<String> by mutableStateOf(bulletList)

var bulletList: Map<Int, String>? by mutableStateOf(bulletList)
val descriptionTextInputEnabled: Boolean
get() = !annotatedText

val bulletListTextInputsEnabled: Boolean
get() = !annotatedText

var annotatedText: Boolean by mutableStateOf(annotatedText)

val enabledIcons: List<Icon>
get() = if (status !in FunctionalStatuses) Icon.entries else listOf(Icon.Tinted)
Expand Down
4 changes: 2 additions & 2 deletions ...src/main/java/com/orange/ouds/app/ui/components/bottomsheet/ModalBottomSheetDemoScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,10 @@ private fun Code.Builder.modalBottomSheetDemoCodeSnippet(state: ModalBottomSheet
typedArgument("sheetGesturesEnabled", state.sheetGesturesEnabled)
functionCallArgument("sheetState", "rememberModalBottomSheetState")
lambdaArgument("onDismissRequest") {
comment("do something on dismiss")
comment("Do something on dismiss")
}
lambdaArgument(null) {
comment("sheet content")
comment("Sheet content")
}
}
}
Expand Down
Loading