v2 Basic Card and Pill Button Token Changes (microsoft#684)

* removing disabled automatic component creation from gradle properties * added three margin tokens for v2 pill buttons * rmeoving this gradle.properties from the PR * basic card border color to brush type * pill token extention back * removing test tag to avoid conflict from pill in activity * fixed for file and announcement cards * nit spacing * semantic for icon only pillbar with no text * added pillMetaData description in code --------- Co-authored-by: Anubhav Agrawal <anubagrawal@microsoft.com>
anthonysidesap · Sep 13, 2024 · 22197f2 · 22197f2
1 parent 3776ab4
commit 22197f2
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 21 deletions.
diff --git a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2SegmentedControlActivity.kt b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2SegmentedControlActivity.kt
@@ -104,6 +104,15 @@ class V2SegmentedControlActivity : V2DemoActivity() {
                                     enabled = enabled,
                                 )
                             )
+                            PillButton(
+                                pillMetaData = PillMetaData(
+                                    onClick = { selectedIcon = !selectedIcon },
+                                    icon = AvatarIcons.Icon.Anonymous.Xxlarge,
+                                    selected = selectedIcon,
+                                    enabled = enabled,
+                                    semanticContentName = "anonymous"
+                                )
+                            )
                         },
                         brandContent = {
                             PillButton(
@@ -126,6 +135,17 @@ class V2SegmentedControlActivity : V2DemoActivity() {
                                 ),
                                 style = FluentStyle.Brand,
                             )
+                            PillButton(
+                                PillMetaData(
+                                    onClick = { selectedBrandIcon = !selectedBrandIcon },
+                                    icon = AvatarIcons.Icon.Anonymous.Xxlarge,
+                                    selected = selectedBrandIcon,
+                                    enabled = enabled,
+                                    notificationDot = true,
+                                    semanticContentName = "anonymous"
+                                ),
+                                style = FluentStyle.Brand,
+                            )
                         }
                     )
                 }

diff --git a/...ntui_controls/src/main/java/com/microsoft/fluentui/tokenized/controls/AnnouncementCard.kt b/...ntui_controls/src/main/java/com/microsoft/fluentui/tokenized/controls/AnnouncementCard.kt
@@ -83,7 +83,7 @@ fun AnnouncementCard(
         }
 
         @Composable
-        override fun borderColor(basicCardInfo: BasicCardInfo): Color {
+        override fun borderColor(basicCardInfo: BasicCardInfo): Brush {
             return token.borderColor(announcementCardInfo = announcementCardInfo)
         }
 

diff --git a/fluentui_controls/src/main/java/com/microsoft/fluentui/tokenized/controls/FileCard.kt b/fluentui_controls/src/main/java/com/microsoft/fluentui/tokenized/controls/FileCard.kt
@@ -99,7 +99,7 @@ fun FileCard(
         }
 
         @Composable
-        override fun borderColor(basicCardInfo: BasicCardInfo): Color {
+        override fun borderColor(basicCardInfo: BasicCardInfo): Brush {
             return token.borderColor(fileCardInfo = fileCardInfo)
         }
 

diff --git a/.../src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AnnouncementCardTokens.kt b/.../src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AnnouncementCardTokens.kt
@@ -100,9 +100,11 @@ open class AnnouncementCardTokens : IControlToken, Parcelable {
     }
 
     @Composable
-    open fun borderColor(announcementCardInfo: AnnouncementCardInfo): Color {
-        return FluentTheme.aliasTokens.neutralStrokeColor[FluentAliasTokens.NeutralStrokeColorTokens.Stroke1].value(
-            themeMode = FluentTheme.themeMode
+    open fun borderColor(announcementCardInfo: AnnouncementCardInfo): Brush {
+        return SolidColor(
+            FluentTheme.aliasTokens.neutralStrokeColor[FluentAliasTokens.NeutralStrokeColorTokens.Stroke1].value(
+                themeMode = FluentTheme.themeMode
+            )
         )
     }
 

diff --git a/...ui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/BasicCardTokens.kt b/...ui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/BasicCardTokens.kt
@@ -48,9 +48,11 @@ open class BasicCardTokens : IControlToken, Parcelable {
     }
 
     @Composable
-    open fun borderColor(basicCardInfo: BasicCardInfo): Color {
-        return FluentTheme.aliasTokens.neutralStrokeColor[FluentAliasTokens.NeutralStrokeColorTokens.Stroke1].value(
-            themeMode = FluentTheme.themeMode
+    open fun borderColor(basicCardInfo: BasicCardInfo): Brush {
+        return SolidColor(
+            FluentTheme.aliasTokens.neutralStrokeColor[FluentAliasTokens.NeutralStrokeColorTokens.Stroke1].value(
+                themeMode = FluentTheme.themeMode
+            )
         )
     }
 

diff --git a/...tui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/FileCardTokens.kt b/...tui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/FileCardTokens.kt
@@ -46,9 +46,11 @@ open class FileCardTokens : IControlToken, Parcelable {
     }
 
     @Composable
-    open fun borderColor(fileCardInfo: FileCardInfo): Color {
-        return FluentTheme.aliasTokens.neutralStrokeColor[FluentAliasTokens.NeutralStrokeColorTokens.Stroke1].value(
-            themeMode = FluentTheme.themeMode
+    open fun borderColor(fileCardInfo: FileCardInfo): Brush {
+        return SolidColor(
+            FluentTheme.aliasTokens.neutralStrokeColor[FluentAliasTokens.NeutralStrokeColorTokens.Stroke1].value(
+                themeMode = FluentTheme.themeMode
+            )
         )
     }
 

diff --git a/...i_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/PillButtonTokens.kt b/...i_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/PillButtonTokens.kt
@@ -458,4 +458,15 @@ open class PillButtonTokens : IControlToken, Parcelable {
             )
         }
     }
+
+    @Composable
+    open fun iconSpace(pillButtonInfo: PillButtonInfo): Dp {
+        return FluentGlobalTokens.SizeTokens.Size20.value
+    }
+
+    @Composable
+    open fun horizontalMargin(pillButtonInfo: PillButtonInfo): Dp {
+        return FluentGlobalTokens.SizeTokens.Size160.value
+    }
+
 }
diff --git a/fluentui_tablayout/src/main/java/com/microsoft/fluentui/tokenized/segmentedcontrols/Pill.kt b/fluentui_tablayout/src/main/java/com/microsoft/fluentui/tokenized/segmentedcontrols/Pill.kt
@@ -50,14 +50,25 @@ import com.microsoft.fluentui.util.dpToPx
 import kotlinx.coroutines.launch
 import kotlin.math.max
 
+/**
+ * Pill Meta Data defines meta data for  a pill.
+ * @param text: the text that's displayed on the Pill
+ * @param onClick: onClick callback for defining the click action on the pill
+ * @param icon: icon that's displayed on the Pill.
+ * @param enabled: to make pill disabled or enabled for click interactions
+ * @param notificationDot: boolean which defines whether to show a notification dot or not on the pill.
+ * @param calloutSelectionState: boolean which let's the user define if "selected" or "not selected" state of pill must be announced for the accessibility purposes
+ * @param semanticContentName: Pill name that must be announced for accessibility purposes, if it's null then @param text is used for accessibility announcement
+ */
 data class PillMetaData(
-    var text: String,
+    var text: String? = null,
     var onClick: (() -> Unit),
     var icon: ImageVector? = null,
     var enabled: Boolean = true,
     var selected: Boolean = false,
     var notificationDot: Boolean = false,
     var calloutSelectionState: Boolean = true,
+    var semanticContentName: String? = null,
 )
 
 /**
@@ -168,15 +179,15 @@ fun PillButton(
             .padding(vertical = token.verticalPadding(pillButtonInfo))
             .semantics(true) {
                 contentDescription =
-                    if (pillMetaData.enabled) "${pillMetaData.text} $selectedString"
-                    else "${pillMetaData.text} $enabledString"
-
+                    if (pillMetaData.enabled) "${pillMetaData.semanticContentName ?: pillMetaData.text ?:  ""} $selectedString"
+                    else "${pillMetaData.semanticContentName ?: pillMetaData.text ?: ""} $enabledString"
             },
         contentAlignment = Alignment.Center
     ) {
         Row(Modifier.width(IntrinsicSize.Max)) {
+            Spacer(Modifier.requiredWidth(token.horizontalMargin(pillButtonInfo = pillButtonInfo)))
             if (pillMetaData.icon != null) {
-                Spacer(Modifier.requiredWidth(FluentGlobalTokens.SizeTokens.Size180.value))
+                Spacer(Modifier.requiredWidth(token.iconSpace(pillButtonInfo = pillButtonInfo)))
                 Icon(
                     pillMetaData.icon!!,
                     pillMetaData.text,
@@ -185,10 +196,14 @@ fun PillButton(
                         .clearAndSetSemantics { },
                     tint = iconColor
                 )
-            } else {
-                Spacer(Modifier.requiredWidth(FluentGlobalTokens.SizeTokens.Size160.value))
+                if(pillMetaData.text != null){
+                    Spacer(Modifier.requiredWidth(token.iconSpace(pillButtonInfo = pillButtonInfo)))
+                }
+            }
+            if(pillMetaData.text != null){
+
                 BasicText(
-                    pillMetaData.text,
+                    pillMetaData.text!!,
                     modifier = Modifier
                         .weight(1F)
                         .clearAndSetSemantics { },
@@ -199,7 +214,6 @@ fun PillButton(
                     overflow = TextOverflow.Ellipsis
                 )
             }
-
             if (pillMetaData.notificationDot) {
                 val notificationDotColor: Color =
                     token.notificationDotColor(pillButtonInfo)
@@ -223,7 +237,7 @@ fun PillButton(
                 else
                     Spacer(Modifier.requiredWidth(FluentGlobalTokens.SizeTokens.Size80.value))
             } else {
-                Spacer(Modifier.requiredWidth(FluentGlobalTokens.SizeTokens.Size160.value))
+                Spacer(Modifier.requiredWidth(token.horizontalMargin(pillButtonInfo = pillButtonInfo)))
             }
         }
     }