Skip to content

feat(top-app-bar): add the option to add a badge on an icon in the top app bar #969

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

Merged
paulinea merged 12 commits into from
Dec 11, 2025
Merged

feat(top-app-bar): add the option to add a badge on an icon in the top app bar #969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
84a658f
Add OudsComponentIconBadge and an icon badge parameter in OudsButton
florentmaitre Dec 5, 2025
71e75f0
Add snapshot tests for OudsButton with icon badge
florentmaitre Dec 5, 2025
b21fd4b
Add OudsBadgedIcon and use it in OudsNavigationBarItem
florentmaitre Dec 5, 2025
a9b2146
Add snapshot tests for OudsBadgedIcon
florentmaitre Dec 8, 2025
3bc3f75
Add OudsTopAppBarActionBadge
florentmaitre Dec 8, 2025
4f10f5b
Add top app bar action badge to the demo screen
florentmaitre Dec 8, 2025
a2206ad
Add KDoc to OudsBadgedIcon
florentmaitre Dec 8, 2025
53dd874
Fix accessibility on OudsBadgedIcon
florentmaitre Dec 8, 2025
3346c2d
Various fixes
florentmaitre Dec 8, 2025
3f33ace
Fix layout of standard OudsBadgedIcon in RTL
florentmaitre Dec 9, 2025
364d61c
Review: Remove guard condition in when
florentmaitre Dec 10, 2025
a28c918
Review: Change appearance of button to minimal in icon badge preview
florentmaitre Dec 10, 2025
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
7 changes: 6 additions & 1 deletion 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 @@ -13,6 +13,7 @@
package com.orange.ouds.app.ui.components

import androidx.annotation.DrawableRes
import androidx.annotation.PluralsRes
import androidx.annotation.StringRes
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
Expand Down Expand Up @@ -49,7 +50,11 @@ fun FunctionCall.Builder.stringArgument(name: String, @StringRes id: Int) = form

fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int) = stringArgument(Argument.ContentDescription, id)
fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int, vararg formatArgs: Any) =
stringResourceArgument(Argument.ContentDescription, id, formatArgs)
stringResourceArgument(Argument.ContentDescription, id, *formatArgs)

fun FunctionCall.Builder.contentDescriptionArgument(@PluralsRes id: Int, count: Int, vararg formatArgs: Any) =
pluralStringResourceArgument(Argument.ContentDescription, id, count, *formatArgs)


fun FunctionCall.Builder.enabledArgument(value: Boolean) = typedArgument(Argument.Enabled, value)

Expand Down
17 changes: 12 additions & 5 deletions app/src/main/java/com/orange/ouds/app/ui/components/navigationbar/NavigationBarDemoScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ 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.Component
import com.orange.ouds.app.ui.components.contentDescriptionArgument
import com.orange.ouds.app.ui.components.labelArgument
import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoState.Companion.ItemBadgeCount
import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoState.Companion.MaxNavigationBarItemCount
Expand Down Expand Up @@ -88,9 +89,6 @@ private fun NavigationBarDemoContent(state: NavigationBarDemoState) {
items = navigationBarItems.take(itemCount).mapIndexed { index, item ->
val label = stringResource(id = item.labelRes)
val isLastItem = index == itemCount - 1
val standardBadgeContentDescription = stringResource(id = R.string.app_components_common_unreadNotificationsBadge_a11y)
val countBadgeContentDescription =
pluralStringResource(id = R.plurals.app_components_common_unreadMessageCountBadge_a11y, count = ItemBadgeCount, ItemBadgeCount)
OudsNavigationBarItem(
selected = selectedItemId == index,
onClick = { selectedItemId = index },
Expand All @@ -99,9 +97,9 @@ private fun NavigationBarDemoContent(state: NavigationBarDemoState) {
badge = if (isLastItem) {
when (lastItemBadge) {
NavigationBarDemoState.ItemBadge.None -> null
NavigationBarDemoState.ItemBadge.Standard -> OudsNavigationBarItemBadge(standardBadgeContentDescription)
NavigationBarDemoState.ItemBadge.Standard -> OudsNavigationBarItemBadge(stringResource(id = R.string.app_components_common_unreadNotificationsBadge_a11y))
NavigationBarDemoState.ItemBadge.Count -> OudsNavigationBarItemBadge(
contentDescription = countBadgeContentDescription,
contentDescription = pluralStringResource(id = R.plurals.app_components_common_unreadMessageCountBadge_a11y, count = ItemBadgeCount, ItemBadgeCount),
count = ItemBadgeCount
)
}
Expand Down Expand Up @@ -131,6 +129,15 @@ private fun Code.Builder.navigationBarDemoCodeSnippet(state: NavigationBarDemoSt
}
if (isLastItem && lastItemBadge != NavigationBarDemoState.ItemBadge.None) {
functionCallArgument("badge", OudsNavigationBarItemBadge::class.simpleName.orEmpty()) {
when (lastItemBadge) {
NavigationBarDemoState.ItemBadge.None -> {}
NavigationBarDemoState.ItemBadge.Standard -> contentDescriptionArgument(id = R.string.app_components_common_unreadNotificationsBadge_a11y)
NavigationBarDemoState.ItemBadge.Count -> contentDescriptionArgument(
id = R.plurals.app_components_common_unreadMessageCountBadge_a11y,
count = ItemBadgeCount,
ItemBadgeCount
)
}
if (lastItemBadge == NavigationBarDemoState.ItemBadge.Count) {
typedArgument("count", ItemBadgeCount)
}
Expand Down
92 changes: 65 additions & 27 deletions app/src/main/java/com/orange/ouds/app/ui/components/topappbar/TopAppBarDemoScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.pluralStringResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.app.R
Expand All @@ -25,6 +26,7 @@ import com.orange.ouds.app.ui.components.colorArgument
import com.orange.ouds.app.ui.components.contentDescriptionArgument
import com.orange.ouds.app.ui.components.onClickArgument
import com.orange.ouds.app.ui.components.painterArgument
import com.orange.ouds.app.ui.components.topappbar.TopAppBarDemoState.Companion.ActionIconBadgeCount
import com.orange.ouds.app.ui.utilities.Code
import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
import com.orange.ouds.app.ui.utilities.ThemeDrawableResources
Expand All @@ -39,6 +41,7 @@ import com.orange.ouds.core.component.OudsLargeTopAppBar
import com.orange.ouds.core.component.OudsMediumTopAppBar
import com.orange.ouds.core.component.OudsTopAppBar
import com.orange.ouds.core.component.OudsTopAppBarAction
import com.orange.ouds.core.component.OudsTopAppBarActionBadge
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
import com.orange.ouds.core.theme.OudsTheme
import com.orange.ouds.foundation.extensions.orElse
Expand Down Expand Up @@ -88,16 +91,23 @@ private fun TopAppBarDemoBottomSheetContent(state: TopAppBarDemoState) {
)
CustomizationFilterChips(
applyTopPadding = true,
label = stringResource(R.string.app_components_topAppBar_avatar_label),
chipLabels = TopAppBarDemoState.Avatar.entries.map { stringResource(it.labelRes) },
selectedChipIndex = TopAppBarDemoState.Avatar.entries.indexOf(avatar),
onSelectionChange = { id -> avatar = TopAppBarDemoState.Avatar.entries[id] }
label = stringResource(R.string.app_components_topAppBar_actionIconBadge_label),
chipLabels = TopAppBarDemoState.ActionIconBadge.entries.map { it.name },
selectedChipIndex = TopAppBarDemoState.ActionIconBadge.entries.indexOf(actionIconBadge),
onSelectionChange = { id -> actionIconBadge = TopAppBarDemoState.ActionIconBadge.entries[id] }
)
CustomizationFilterChips(
applyTopPadding = true,
label = stringResource(R.string.app_components_topAppBar_actionAvatar_label),
chipLabels = TopAppBarDemoState.ActionAvatar.entries.map { stringResource(it.labelRes) },
selectedChipIndex = TopAppBarDemoState.ActionAvatar.entries.indexOf(actionAvatar),
onSelectionChange = { id -> actionAvatar = TopAppBarDemoState.ActionAvatar.entries[id] }
)
CustomizationTextField(
label = stringResource(R.string.app_components_topAppBar_avatarMonogram_label),
value = avatarMonogram.toString().trim(),
onValueChange = { value -> avatarMonogram = value.firstOrNull().orElse { ' ' } },
enabled = avatarMonogramTextFieldEnabled
label = stringResource(R.string.app_components_topAppBar_actionAvatarMonogram_label),
value = actionAvatarMonogram.toString().trim(),
onValueChange = { value -> actionAvatarMonogram = value.firstOrNull().orElse { ' ' } },
enabled = actionAvatarMonogramTextFieldEnabled
)
}
}
Expand All @@ -118,29 +128,41 @@ private fun TopAppBarDemoContent(state: TopAppBarDemoState) {
onClick = {}
)
}
val avatarContentDescription = stringResource(R.string.app_components_topAppBar_secondAction_a11y)
val avatarAction = when (avatar) {
TopAppBarDemoState.Avatar.Image -> OudsTopAppBarAction.Avatar(

val firstAction = OudsTopAppBarAction.Icon(
painter = painterResource(id = LocalThemeDrawableResources.current.tipsAndTricks),
contentDescription = stringResource(R.string.app_components_topAppBar_firstAction_a11y),
badge = when (actionIconBadge) {
TopAppBarDemoState.ActionIconBadge.None -> null
TopAppBarDemoState.ActionIconBadge.Standard -> OudsTopAppBarActionBadge(contentDescription = stringResource(id = R.string.app_components_common_unreadNotificationsBadge_a11y))
TopAppBarDemoState.ActionIconBadge.Count -> OudsTopAppBarActionBadge(
contentDescription = pluralStringResource(
id = R.plurals.app_components_common_unreadMessageCountBadge_a11y,
count = ActionIconBadgeCount,
ActionIconBadgeCount
),
count = ActionIconBadgeCount
)
},
onClick = {}
)
val secondActionContentDescription = stringResource(R.string.app_components_topAppBar_secondAction_a11y)
val secondAction = when (actionAvatar) {
TopAppBarDemoState.ActionAvatar.Image -> OudsTopAppBarAction.Avatar(
painter = painterResource(id = R.drawable.il_top_app_bar_avatar),
contentDescription = avatarContentDescription,
contentDescription = secondActionContentDescription,
onClick = {}
)
TopAppBarDemoState.Avatar.Monogram -> OudsTopAppBarAction.Avatar(
monogram = avatarMonogram,
TopAppBarDemoState.ActionAvatar.Monogram -> OudsTopAppBarAction.Avatar(
monogram = actionAvatarMonogram,
color = Color.White,
backgroundColor = Color(0xff138126),
contentDescription = avatarContentDescription,
contentDescription = secondActionContentDescription,
onClick = {}
)
}
val actions = listOf(
OudsTopAppBarAction.Icon(
painter = painterResource(id = LocalThemeDrawableResources.current.tipsAndTricks),
contentDescription = stringResource(R.string.app_components_topAppBar_firstAction_a11y),
onClick = {}
),
avatarAction
)
val actions = listOf(firstAction, secondAction)

when (size) {
TopAppBarDemoState.Size.Small -> {
if (centerAligned) {
Expand Down Expand Up @@ -205,15 +227,31 @@ private fun Code.Builder.topAppBarDemoCodeSnippet(state: TopAppBarDemoState, the
constructorCallArgument<OudsTopAppBarAction.Icon>(null) {
painterArgument(themeDrawableResources.tipsAndTricks)
contentDescriptionArgument(R.string.app_components_topAppBar_firstAction_a11y)
if (actionIconBadge != TopAppBarDemoState.ActionIconBadge.None) {
functionCallArgument("badge", OudsTopAppBarActionBadge::class.simpleName.orEmpty()) {
when (actionIconBadge) {
TopAppBarDemoState.ActionIconBadge.None -> {}
TopAppBarDemoState.ActionIconBadge.Standard -> contentDescriptionArgument(id = R.string.app_components_common_unreadNotificationsBadge_a11y)
TopAppBarDemoState.ActionIconBadge.Count -> contentDescriptionArgument(
id = R.plurals.app_components_common_unreadMessageCountBadge_a11y,
count = ActionIconBadgeCount,
ActionIconBadgeCount
)
}
if (actionIconBadge == TopAppBarDemoState.ActionIconBadge.Count) {
typedArgument("count", ActionIconBadgeCount)
}
}
}
onClickArgument()
}
constructorCallArgument<OudsTopAppBarAction.Avatar>(null) {
when (avatar) {
TopAppBarDemoState.Avatar.Image -> {
when (actionAvatar) {
TopAppBarDemoState.ActionAvatar.Image -> {
painterArgument(R.drawable.il_top_app_bar_avatar)
}
TopAppBarDemoState.Avatar.Monogram -> {
typedArgument("monogram", avatarMonogram)
TopAppBarDemoState.ActionAvatar.Monogram -> {
typedArgument("monogram", actionAvatarMonogram)
colorArgument("color", Color.White)
colorArgument("backgroundColor", Color(0xff138126))
}
Expand Down
52 changes: 33 additions & 19 deletions app/src/main/java/com/orange/ouds/app/ui/components/topappbar/TopAppBarDemoState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,26 @@ fun rememberTopAppBarDemoState(
centerAligned: Boolean = false,
navigationIcon: TopAppBarDemoState.NavigationIcon = TopAppBarDemoState.NavigationIcon.None,
title: String = "Title",
avatar: TopAppBarDemoState.Avatar = TopAppBarDemoState.Avatar.Image,
avatarMonogram: Char = 'A'
) = rememberSaveable(size, centerAligned, navigationIcon, title, avatar, avatarMonogram, saver = TopAppBarDemoState.Saver) {
TopAppBarDemoState(size, centerAligned, navigationIcon, title, avatar, avatarMonogram)
actionIconBadge: TopAppBarDemoState.ActionIconBadge = TopAppBarDemoState.ActionIconBadge.None,
actionAvatar: TopAppBarDemoState.ActionAvatar = TopAppBarDemoState.ActionAvatar.Image,
actionAvatarMonogram: Char = 'A'
) = rememberSaveable(size, centerAligned, navigationIcon, title, actionIconBadge, actionAvatar, actionAvatarMonogram, saver = TopAppBarDemoState.Saver) {
TopAppBarDemoState(size, centerAligned, navigationIcon, title, actionIconBadge, actionAvatar, actionAvatarMonogram)
}

class TopAppBarDemoState(
size: Size,
centerAligned: Boolean,
navigationIcon: NavigationIcon,
title: String,
avatar: Avatar,
avatarMonogram: Char
actionIconBadge: ActionIconBadge,
actionAvatar: ActionAvatar,
actionAvatarMonogram: Char
) {
companion object {

const val ActionIconBadgeCount = 1

val Saver = listSaver(
save = { state ->
with(state) {
Expand All @@ -51,8 +55,9 @@ class TopAppBarDemoState(
centerAligned,
navigationIcon,
title,
avatar,
avatarMonogram
actionIconBadge,
actionAvatar,
actionAvatarMonogram
)
}
},
Expand All @@ -62,8 +67,9 @@ class TopAppBarDemoState(
list[1] as Boolean,
list[2] as NavigationIcon,
list[3] as String,
list[4] as Avatar,
list[5] as Char
list[4] as ActionIconBadge,
list[5] as ActionAvatar,
list[6] as Char
)
}
)
Expand All @@ -85,32 +91,40 @@ class TopAppBarDemoState(

var title: String by mutableStateOf(title)

var avatar: Avatar by mutableStateOf(avatar)
var actionIconBadge: ActionIconBadge by mutableStateOf(actionIconBadge)

var actionAvatar: ActionAvatar by mutableStateOf(actionAvatar)

var avatarMonogram: Char by mutableStateOf(avatarMonogram)
var actionAvatarMonogram: Char by mutableStateOf(actionAvatarMonogram)

val centerAlignedSwitchEnabled: Boolean
get() = size == Size.Small

val avatarMonogramTextFieldEnabled: Boolean
get() = avatar == Avatar.Monogram
val actionAvatarMonogramTextFieldEnabled: Boolean
get() = actionAvatar == ActionAvatar.Monogram

enum class Size(@StringRes val labelRes: Int) {
Small(R.string.app_components_topAppBar_smallSize_label),
Medium(R.string.app_components_topAppBar_mediumSize_label),
Large(R.string.app_components_topAppBar_largeSize_label)
}

enum class Avatar(@StringRes val labelRes: Int) {
Image(R.string.app_components_topAppBar_imageAvatar_label),
Monogram(R.string.app_components_topAppBar_monogramAvatar_label)
}

enum class NavigationIcon(@StringRes val labelRes: Int) {
None(R.string.app_components_common_none_label),
Back(R.string.app_components_topAppBar_backNavigationIcon_label),
Close(R.string.app_components_topAppBar_closeNavigationIcon_label),
Menu(R.string.app_components_topAppBar_menuNavigationIcon_label),
Custom(R.string.app_components_topAppBar_customNavigationIcon_label)
}

enum class ActionIconBadge(@StringRes val labelRes: Int) {
None(R.string.app_components_common_none_label),
Standard(R.string.app_components_badge_standardType_label),
Count(R.string.app_components_badge_countType_label)
}

enum class ActionAvatar(@StringRes val labelRes: Int) {
Image(R.string.app_components_topAppBar_imageActionAvatar_label),
Monogram(R.string.app_components_topAppBar_monogramActionAvatar_label)
}
}
Loading