[pull] master from microsoft:master

FluentUI.Demo/build.gradle

@@ -13,8 +13,8 @@ android {
         applicationId 'com.microsoft.fluentuidemo'
         minSdkVersion 23
         targetSdkVersion 34
-        versionCode 2009
-        versionName '0.3.9'
+        versionCode 2010
+        versionName '0.3.10'
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
     kotlinOptions {

FluentUI.Demo/src/main/AndroidManifest.xml

@@ -65,6 +65,7 @@
         <activity android:name="com.microsoft.fluentuidemo.demos.V2ShimmerActivity" />
         <activity android:name="com.microsoft.fluentuidemo.demos.V2SideRailActivity" />
         <activity android:name="com.microsoft.fluentuidemo.demos.V2SnackbarActivity" />
+        <activity android:name="com.microsoft.fluentuidemo.demos.V2StackableSnackbarActivity" />
         <activity android:name="com.microsoft.fluentuidemo.demos.V2TabBarActivity" />
         <activity
             android:name="com.microsoft.fluentuidemo.demos.V2TextFieldActivity"

FluentUI.Demo/src/main/assets/dogfood-release-notes.txt

@@ -1,14 +1,10 @@
-Release version 0.3.9
+Release version 0.3.10
 What's new
 Fluent v2:
 Fix/enhancement:
-    1. Added elevation tokens for V2 Snackbar
-    2. Fluent V2 Native Controls Accessibility Fixes
-    3. Added Tooltip support for V2 AppBar, along with a new modifier to add tooltips to any component
-    4. Added TextOverflow Tokens for V2 ListItem
-    5. Fixed V2 AppBar Layout Focus Navigation
-    6. V2 Acrylic Pane now supports blur behind effect
-    7. Added a new default SearchViewModel for V2 Searchbar
+    1. Added new Stackable Snackbar Component which allows showing multiple notifications at once.
+    2. Fixed V2 BottomDrawer not dismissing on back button press when in focus
+    3. Added Offset Tokens for V2 BottomSheet to Offset the Anchors
 
 Note:
 The Demo App for Fluent Controls will now also be published on Github starting from v0.3.8

FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/Demos.kt

@@ -63,6 +63,7 @@ import com.microsoft.fluentuidemo.demos.V2SegmentedControlActivity
 import com.microsoft.fluentuidemo.demos.V2ShimmerActivity
 import com.microsoft.fluentuidemo.demos.V2SideRailActivity
 import com.microsoft.fluentuidemo.demos.V2SnackbarActivity
+import com.microsoft.fluentuidemo.demos.V2StackableSnackbarActivity
 import com.microsoft.fluentuidemo.demos.V2TabBarActivity
 import com.microsoft.fluentuidemo.demos.V2TextFieldActivity
 import com.microsoft.fluentuidemo.demos.V2ToolTipActivity
@@ -107,6 +108,7 @@ const val V2SEGMENTED_CONTROL = "V2 SegmentedControl"
 const val V2SHIMMER = "V2 Shimmer"
 const val V2SIDE_RAIL = "V2 SideRail"
 const val V2SNACKBAR = "V2 Snackbar"
+const val V2STACKABLE_SNACKBAR = "V2 StackableSnackbar"
 const val V2TAB_BAR = "V2 TabBar"
 const val V2TEXT_FIELD = "V2 TextField"
 const val V2TOOL_TIP = "V2 ToolTip"
@@ -165,7 +167,7 @@ val V1DEMO = arrayListOf(
 )
 
 val V2DEMO = arrayListOf(
-    Demo(V2ACRYLICPANE, V2AcrylicPaneActivity::class, Badge.Modified),
+    Demo(V2ACRYLICPANE, V2AcrylicPaneActivity::class, Badge.New),
     Demo(V2ACTION_BAR, V2ActionBarActivity::class),
     Demo(V2APP_BAR_LAYOUT, V2AppBarActivity::class, Badge.Modified),
     Demo(V2AVATAR, V2AvatarActivity::class),
@@ -198,6 +200,7 @@ val V2DEMO = arrayListOf(
     Demo(V2SHIMMER, V2ShimmerActivity::class, Badge.Modified),
     Demo(V2SIDE_RAIL, V2SideRailActivity::class),
     Demo(V2SNACKBAR, V2SnackbarActivity::class, Badge.Modified),
+    Demo(V2STACKABLE_SNACKBAR, V2StackableSnackbarActivity::class, Badge.New),
     Demo(V2TAB_BAR, V2TabBarActivity::class),
     Demo(V2TEXT_FIELD, V2TextFieldActivity::class),
     Demo(V2TOOL_TIP, V2ToolTipActivity::class),

FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/V2StackableSnackbarActivity.kt

@@ -0,0 +1,185 @@
+package com.microsoft.fluentuidemo.demos
+
+import android.os.Build
+import android.os.Bundle
+import android.widget.Toast
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.microsoft.fluentui.theme.token.FluentIcon
+import com.microsoft.fluentui.tokenized.controls.Button
+import com.microsoft.fluentui.tokenized.notification.Scrim
+import com.microsoft.fluentui.tokenized.notification.SnackBarItemModel
+import com.microsoft.fluentui.tokenized.notification.SnackBarStack
+import com.microsoft.fluentui.tokenized.notification.SnackBarStackConfig
+import com.microsoft.fluentui.tokenized.notification.rememberSnackBarStackState
+import com.microsoft.fluentuidemo.V2DemoActivity
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+
+class V2StackableSnackbarActivity : V2DemoActivity() {
+    init {
+        setupActivity(this)
+    }
+
+    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-37"
+    override val controlTokensUrl =
+        "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-35"
+
+    @RequiresApi(Build.VERSION_CODES.N)
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        val context = this
+        setActivityContent {
+            SnackBarStackDemoLayout(context = context)
+        }
+    }
+}
+
+@Composable
+fun BackgroundContent(context: V2StackableSnackbarActivity) {
+    val scrollState = rememberScrollState()
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .verticalScroll(scrollState)
+            .padding(16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        repeat(5) { index ->
+            Button(
+                onClick = {
+                    Toast.makeText(context, "Button #$index pressed", Toast.LENGTH_SHORT).show()
+                },
+                text = "Button #$index",
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 4.dp)
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+        }
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        repeat(20) { index ->
+            BasicText(
+                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp)
+            )
+        }
+        Spacer(modifier = Modifier.height(50.dp))
+    }
+}
+
+@Composable
+fun SnackBarStackDemoLayout(context: V2StackableSnackbarActivity) {
+    Box() {
+        val stackState = rememberSnackBarStackState(
+            maxExpandedSize = 10,
+            maxCollapsedSize = 5
+        )
+        var counter by rememberSaveable { mutableIntStateOf(0) }
+        val scope = rememberCoroutineScope()
+        BackgroundContent(context)
+        Scrim(
+            isActivated = stackState.expanded && stackState.sizeVisible() > 0,
+            onDismiss = {}
+        )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Bottom
+        ) {
+
+            SnackBarStack(
+                state = stackState,
+                snackBarStackConfig = SnackBarStackConfig(
+                    snackbarGapWhenExpanded = 10.dp
+                )
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            Row() {
+                Button(onClick = {
+                    val id = counter++
+
+                    stackState.addSnackbar(
+                        SnackBarItemModel(
+                            id = id.toString(),
+                            message = "Snackbar #$id",
+                            actionText = "Expand",
+                            trailingIcon = FluentIcon(
+                                Icons.Default.Close,
+                                Icons.Default.Close,
+                                contentDescription = "Close",
+                                onClick = {
+                                    scope.launch {
+                                        stackState.removeSnackbarByIdWithAnimation(
+                                            id.toString(),
+                                            showLastHiddenSnackbarOnRemove = true
+                                        )
+                                    }
+                                }
+                            ),
+                            onActionTextClicked = {
+                                stackState.toggleExpandedState()
+                            })
+                    )
+                }, text = "Add Snackbar")
+
+                Spacer(modifier = Modifier.width(12.dp))
+
+                Button(onClick = {
+                    scope.launch {
+                        stackState.clearAllSnackBars(animateRemoval = true)
+                    }
+                }, text = "Clear All")
+
+                Spacer(modifier = Modifier.width(12.dp))
+                Button(onClick = {
+                    scope.launch {
+                        val id = counter++
+                        for (i in 0..15) {
+                            stackState.addSnackbar(
+                                SnackBarItemModel(
+                                    id = "$id-$i",
+                                    message = "Snackbar #$id-$i".repeat(i + 4),
+                                    actionText = "Expand",
+                                    trailingIcon = FluentIcon(
+                                        Icons.Default.Close,
+                                        Icons.Default.Close,
+                                        contentDescription = "Close",
+                                        onClick = {
+                                            scope.launch {
+                                                stackState.removeSnackbarByIdWithAnimation(
+                                                    "$id-$i",
+                                                    showLastHiddenSnackbarOnRemove = true
+                                                )
+                                            }
+                                        }
+                                    ),
+                                    onActionTextClicked = {
+                                        stackState.toggleExpandedState()
+                                    })
+                            )
+                            delay(2000)
+                        }
+                    }
+                }, text = "Keep Adding")
+            }
+            Spacer(modifier = Modifier.height(10.dp))
+        }
+    }
+}

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

@@ -58,6 +58,8 @@ import com.microsoft.fluentui.persona.PersonaListView
 import com.microsoft.fluentui.theme.FluentTheme
 import com.microsoft.fluentui.theme.ThemeMode
 import com.microsoft.fluentui.theme.token.FluentAliasTokens
+import com.microsoft.fluentui.theme.token.controlTokens.BottomSheetInfo
+import com.microsoft.fluentui.theme.token.controlTokens.BottomSheetTokens
 import com.microsoft.fluentui.theme.token.controlTokens.ButtonSize
 import com.microsoft.fluentui.theme.token.controlTokens.ButtonStyle
 import com.microsoft.fluentui.tokenized.bottomsheet.BottomSheet
@@ -150,6 +152,12 @@ private fun CreateActivityUI() {
     val content = listOf(0, 1, 2)
     val selectedOption = remember { mutableStateOf(content[0]) }
 
+    val customSheetTokens: BottomSheetTokens = object: BottomSheetTokens(){
+        override fun additionalOffset(bottomSheetInfo: BottomSheetInfo): Int {
+            return 0
+        }
+    }
+
     BottomSheet(
         sheetContent = sheetContentState,
         expandable = expandableState,
@@ -161,7 +169,8 @@ private fun CreateActivityUI() {
         enableSwipeDismiss = enableSwipeDismiss,
         preventDismissalOnScrimClick = preventDismissalOnScrimClick,
         stickyThresholdUpward = stickyThresholdUpwardDrag,
-        stickyThresholdDownward = stickyThresholdDownwardDrag
+        stickyThresholdDownward = stickyThresholdDownwardDrag,
+        bottomSheetTokens = customSheetTokens
     ) {
         Column(
             verticalArrangement = Arrangement.spacedBy(10.dp),

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

@@ -1,7 +1,9 @@
 package com.microsoft.fluentuidemo.demos
 
+import android.os.Build
 import android.os.Bundle
 import android.widget.Toast
+import androidx.annotation.RequiresApi
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.FastOutSlowInEasing
 import androidx.compose.animation.core.LinearOutSlowInEasing
@@ -59,6 +61,7 @@ class V2SnackbarActivity : V2DemoActivity() {
     override val controlTokensUrl =
         "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-34"
 
+    @RequiresApi(Build.VERSION_CODES.N)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         val context = this

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

@@ -48,9 +48,9 @@ class V2TabBarActivity : V2DemoActivity() {
         setupActivity(this)
     }
 
-    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-37"
+    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-38"
     override val controlTokensUrl =
-        "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-35"
+        "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-36"
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)

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

@@ -59,9 +59,9 @@ class V2TextFieldActivity : V2DemoActivity() {
         setupActivity(this)
     }
 
-    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-38"
+    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-39"
     override val controlTokensUrl =
-        "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-36"
+        "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-37"
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)

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

@@ -59,8 +59,8 @@ class V2ToolTipActivity : V2DemoActivity() {
         setupActivity(this)
     }
 
-    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-39"
-    override val controlTokensUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-37"
+    override val paramsUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#params-40"
+    override val controlTokensUrl = "https://github.com/microsoft/fluentui-android/wiki/Controls#control-tokens-38"
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)

build.gradle

@@ -47,6 +47,8 @@ allprojects {
         composeBomVersion         =    '2023.09.00'
         composeTestVersion        =    '1.4.3'
         composeCompilerVersion    =    '1.4.7'
+        composeAnimationVersion   =    '1.6.7'
+        composeRuntimeSaveableVersion = '1.6.7'
         constraintLayoutVersion   =    '2.1.4'
         constraintLayoutComposeVersion   =    '1.0.1'
         espressoVersion           =    '3.5.1'