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

* Add OudsComponentIconBadge and an icon badge parameter in OudsButton

* Add snapshot tests for OudsButton with icon badge

* Add OudsBadgedIcon and use it in OudsNavigationBarItem

* Add snapshot tests for OudsBadgedIcon

* Add OudsTopAppBarActionBadge

* Add top app bar action badge to the demo screen

* Add KDoc to OudsBadgedIcon

* Fix accessibility on OudsBadgedIcon

* Various fixes

* Fix layout of standard OudsBadgedIcon in RTL

* Review: Remove guard condition in when

* Review: Change appearance of button to minimal in icon badge preview

Author: florentmaitre

app/src/main/java/com/orange/ouds/app/ui/components/ComponentCode.kt

@@ -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
@@ -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)
 

app/src/main/java/com/orange/ouds/app/ui/components/navigationbar/NavigationBarDemoScreen.kt

@@ -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
@@ -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 },
@@ -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
                             )
                         }
@@ -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)
                                 }

app/src/main/java/com/orange/ouds/app/ui/components/topappbar/TopAppBarDemoScreen.kt

@@ -12,11 +12,13 @@
 
 package com.orange.ouds.app.ui.components.topappbar
 
+import android.R.attr.label
 import androidx.compose.foundation.layout.PaddingValues
 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
@@ -25,6 +27,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
@@ -39,6 +42,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
@@ -89,17 +93,24 @@ 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(
             applyTopPadding = true,
-            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
         )
     }
 }
@@ -120,29 +131,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) {
@@ -207,15 +230,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))
                         }

app/src/main/java/com/orange/ouds/app/ui/components/topappbar/TopAppBarDemoState.kt

@@ -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) {
@@ -51,8 +55,9 @@ class TopAppBarDemoState(
                         centerAligned,
                         navigationIcon,
                         title,
-                        avatar,
-                        avatarMonogram
+                        actionIconBadge,
+                        actionAvatar,
+                        actionAvatarMonogram
                     )
                 }
             },
@@ -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
                 )
             }
         )
@@ -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)
+    }
 }