Merge pull request microsoft#717 from microsoft/joypal/avatarPie

V2 Avatar Pie component in Avatar Group
anthonysidesap · Oct 29, 2024 · 882a1ec · 882a1ec
2 parents 96f934c + 8e1ba74
commit 882a1ec
Show file tree

Hide file tree

Showing 7 changed files with 889 additions and 436 deletions.
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2AvatarGroupActivity.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2AvatarGroupActivity.kt
@@ -407,6 +407,143 @@ class V2AvatarGroupActivity : V2DemoActivity() {
                             }
                         }
                     }
+
+                    item {
+                        Row(horizontalArrangement = Arrangement.Center) {
+                            BasicText(
+                                "Pie Group Style",
+                                style = aliasTokens.typography[FluentAliasTokens.TypographyTokens.Title2]
+                            )
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item {
+                                BasicText("Size 16: ")
+                            }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size16,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar
+                                )
+                            }
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item {
+                                BasicText("Size 20: ")
+                            }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size20,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar,
+                                    avatarToken = AnonymousAvatarTokens()
+                                )
+                            }
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item {
+                                BasicText("Size 24: ")
+                            }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size24,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar,
+                                    avatarToken = AnonymousAvatarTokens()
+                                )
+                            }
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item {
+                                BasicText("Size 32: ")
+                            }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size32,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar,
+                                )
+                            }
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item {
+                                BasicText("Size 40: ")
+                            }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size40,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar,
+                                    avatarToken = AnonymousAccentAvatarTokens()
+                                )
+                            }
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item {
+                                BasicText("Size 56: ")
+                            }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size56,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar,
+                                )
+                            }
+                        }
+                    }
+                    item {
+                        LazyRow(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.fillMaxSize()
+                        ) {
+                            item { BasicText("Size 72: ") }
+                            item {
+                                AvatarGroup(
+                                    group,
+                                    size = AvatarSize.Size72,
+                                    style = AvatarGroupStyle.Pie,
+                                    maxVisibleAvatar = maxVisibleAvatar,
+                                    avatarToken = StandardInvertedAvatarTokens()
+                                )
+                            }
+                        }
+                    }
                 }
             }
         }

diff --git a/..._core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AvatarGroupTokens.kt b/..._core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AvatarGroupTokens.kt
@@ -13,7 +13,8 @@ import kotlinx.parcelize.Parcelize
 
 enum class AvatarGroupStyle {
     Stack,
-    Pile
+    Pile,
+    Pie
 }
 
 open class AvatarGroupInfo(
@@ -107,6 +108,8 @@ open class AvatarGroupTokens : IControlToken, Parcelable {
                 AvatarSize.Size72 -> FluentGlobalTokens.SizeTokens.Size80
                     .value
             }
+
+            AvatarGroupStyle.Pie -> 0.dp
         }
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,8 @@ import kotlinx.parcelize.Parcelize @@
     enum class AvatarGroupStyle {
         Stack,
-        Pile
+        Pile,
+        Pie
     }
     open class AvatarGroupInfo(
@@ Expand Down Expand Up / @@ -107,6 +108,8 @@ open class AvatarGroupTokens : IControlToken, Parcelable { @@
                     AvatarSize.Size72 -> FluentGlobalTokens.SizeTokens.Size80
                         .value
                 }
+                AvatarGroupStyle.Pie -> 0.dp
             }
         }
@@ Expand Down @@