[V2 Appbar] Added Tooltips to AppBar

FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2AppBarActivity.kt

@@ -12,8 +12,10 @@ import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Email
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
@@ -35,9 +37,12 @@ import com.microsoft.fluentui.theme.token.FluentColor
 import com.microsoft.fluentui.theme.token.FluentIcon
 import com.microsoft.fluentui.theme.token.FluentStyle
 import com.microsoft.fluentui.theme.token.Icon
+import com.microsoft.fluentui.theme.token.controlTokens.AppBarInfo
 import com.microsoft.fluentui.theme.token.controlTokens.AppBarSize
+import com.microsoft.fluentui.theme.token.controlTokens.AppBarTokens
 import com.microsoft.fluentui.theme.token.controlTokens.AvatarSize
 import com.microsoft.fluentui.theme.token.controlTokens.AvatarStatus
+import com.microsoft.fluentui.theme.token.controlTokens.TooltipControls
 import com.microsoft.fluentui.tokenized.AppBar
 import com.microsoft.fluentui.tokenized.SearchBar
 import com.microsoft.fluentui.tokenized.controls.ToggleSwitch
@@ -59,6 +64,7 @@ const val APP_BAR_BUTTONBAR_PARAM = "App Bar ButtonBar Param"
 const val APP_BAR_SEARCHBAR_PARAM = "App Bar SearchBar Param"
 const val APP_BAR_LOGO_PARAM = "App Bar Logo Param"
 const val APP_BAR_CENTER_ALIGN_PARAM = "App Bar Center Align Param"
+const val APP_BAR_ENABLE_TOOLTIPS_PARAM = "App Bar Enable Tooltips Param"
 const val APP_BAR_NAVIGATION_ICON_PARAM = "App Bar Navigation Icon Param"
 
 class V2AppBarActivity : V2DemoActivity() {
@@ -84,6 +90,7 @@ class V2AppBarActivity : V2DemoActivity() {
             var enableButtonBar: Boolean by rememberSaveable { mutableStateOf(false) }
             var enableBottomBorder: Boolean by rememberSaveable { mutableStateOf(true) }
             var centerAlignAppBar: Boolean by rememberSaveable { mutableStateOf(false) }
+            var enableTooltips: Boolean by rememberSaveable { mutableStateOf(false) }
             var showNavigationIcon: Boolean by rememberSaveable { mutableStateOf(true) }
             var yAxisDelta: Float by rememberSaveable { mutableStateOf(1.0F) }
             var enableLogo: Boolean by rememberSaveable { mutableStateOf(true) }
@@ -276,6 +283,22 @@ class V2AppBarActivity : V2DemoActivity() {
                                 )
                             }
                         )
+                        ListItem.Item(
+                            text = LocalContext.current.resources.getString(R.string.enable_tooltips),
+                            subText = if (enableTooltips)
+                                LocalContext.current.resources.getString(R.string.fluentui_enabled)
+                            else
+                                LocalContext.current.resources.getString(R.string.fluentui_disabled),
+                            trailingAccessoryContent = {
+                                ToggleSwitch(
+                                    onValueChange = {
+                                        enableTooltips = !enableTooltips
+                                    },
+                                    modifier = Modifier.testTag(APP_BAR_ENABLE_TOOLTIPS_PARAM),
+                                    checkedState = enableTooltips
+                                )
+                            }
+                        )
                     }
                 }
 
@@ -316,7 +339,16 @@ class V2AppBarActivity : V2DemoActivity() {
                             ThemeMode.Dark
                         )
                     ).value(FluentTheme.themeMode)
-
+                val appBarTokens = object : AppBarTokens() {
+                    @Composable
+                    override fun tooltipVisibilityControls(info: AppBarInfo): TooltipControls {
+                        return TooltipControls(
+                            enableTitleTooltip = enableTooltips,
+                            enableSubtitleTooltip = enableTooltips,
+                            enableNavigationIconTooltip = enableTooltips,
+                        )
+                    }
+                }
                 AppBar(
                     title = "Fluent UI Demo",
                     navigationIcon = if (showNavigationIcon) {
@@ -400,6 +432,7 @@ class V2AppBarActivity : V2DemoActivity() {
                     } else null,
                     appTitleDelta = appTitleDelta,
                     accessoryDelta = accessoryDelta,
+                    appBarTokens = appBarTokens,
                     rightAccessoryView = {
                         Icon(
                             Icons.Filled.Add,

FluentUI.Demo/src/main/res/values/strings.xml

@@ -54,6 +54,9 @@
     <!-- Text for app bar navigation icon -->
     <string name="navigation_icon">Navigation Icon</string>
 
+    <!-- Text for enabling tooltips -->
+    <string name="enable_tooltips">Enable Tooltips</string>
+
     <!-- Icon labels -->
     <string name="app_bar_layout_menu_flag">Flag</string>
     <string name="app_bar_layout_menu_settings">Settings</string>

fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AppBarTokens.kt

@@ -5,11 +5,13 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.microsoft.fluentui.theme.FluentTheme
@@ -28,6 +30,12 @@ enum class AppBarSize {
     Small
 }
 
+open class TooltipControls(
+    var enableTitleTooltip: Boolean = false,
+    var enableSubtitleTooltip: Boolean = false,
+    var enableNavigationIconTooltip: Boolean = false
+) {}
+
 open class AppBarInfo(
     val style: FluentStyle = FluentStyle.Neutral,
     val appBarSize: AppBarSize = AppBarSize.Medium
@@ -143,6 +151,55 @@ open class AppBarTokens : IControlToken, Parcelable {
         }
     }
 
+    @Composable
+    open fun tooltipVisibilityControls(info: AppBarInfo): TooltipControls {
+        return TooltipControls(
+            enableTitleTooltip = false,
+            enableSubtitleTooltip = false,
+            enableNavigationIconTooltip = false
+        )
+    }
+
+    @Composable
+    open fun tooltipTextStyle(info: AppBarInfo): TextStyle {
+        return FluentTheme.aliasTokens.typography[FluentAliasTokens.TypographyTokens.Body2].merge(
+            TextStyle(
+                color = FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.ForegroundLightStatic].value(
+                    themeMode = FluentTheme.themeMode
+                )
+            )
+        )
+    }
+
+    @Composable
+    open fun tooltipBackgroundBrush(info: AppBarInfo): Brush {
+        return SolidColor(
+            FluentTheme.aliasTokens.neutralBackgroundColor[FluentAliasTokens.NeutralBackgroundColorTokens.BackgroundDarkStatic].value(
+                themeMode = FluentTheme.themeMode
+            )
+        )
+    }
+
+    @Composable
+    open fun tooltipCornerRadius(info: AppBarInfo): Dp {
+        return FluentGlobalTokens.CornerRadiusTokens.CornerRadius80.value
+    }
+
+    @Composable
+    open fun tooltipRippleColor(info: AppBarInfo): Color {
+        return Color.Unspecified
+    }
+
+    @Composable
+    open fun tooltipOffset(info: AppBarInfo): DpOffset {
+        return DpOffset(x = 0.dp, y = 0.dp)
+    }
+
+    @Composable
+    open fun tooltipTimeout(info: AppBarInfo): Long {
+        return 2000L // Default timeout for tooltip in milliseconds
+    }
+
     @Composable
     open fun subtitleTextColor(info: AppBarInfo): Color {
         return when (info.style) {