Merge pull request microsoft#710 from microsoft/dhruvMishra/iconColor…

…GradientImplementation Added ability to use gradients in Tab Bar Icons
anthonysidesap · Oct 14, 2024 · c055e5d · c055e5d
2 parents aa25e14 + b967c8b
commit c055e5d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 23 deletions.
diff --git a/...ntui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/TabItemTokens.kt b/...ntui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/TabItemTokens.kt
@@ -66,49 +66,53 @@ open class TabItemTokens : IControlToken, Parcelable {
     }
 
     @Composable
-    open fun iconColor(tabItemInfo: TabItemInfo): StateColor {
+    open fun iconColor(tabItemInfo: TabItemInfo): StateBrush {
         return when (tabItemInfo.fluentStyle) {
-            FluentStyle.Neutral -> StateColor(
-                rest = FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.Foreground3].value(
+            FluentStyle.Neutral -> StateBrush(
+                rest = SolidColor( FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.Foreground3].value(
                     themeMode = FluentTheme.themeMode
+                )
                 ),
-                pressed = FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForeground1].value(
+                pressed = SolidColor( FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForeground1].value(
                     themeMode = FluentTheme.themeMode
+                )
                 ),
-                focused= FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.Foreground1].value(
+                focused= SolidColor( FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.Foreground1].value(
                     themeMode = FluentTheme.themeMode
+                )
                 ),
-                disabled = FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.ForegroundDisable1].value(
+                disabled = SolidColor( FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.ForegroundDisable1].value(
                     themeMode = FluentTheme.themeMode
                 )
+                )
             )
 
-            FluentStyle.Brand -> StateColor(
-                rest = FluentColor(
+            FluentStyle.Brand -> StateBrush(
+                rest = SolidColor( FluentColor(
                     light = FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForeground1].value(
                         ThemeMode.Light
                     ),
                     dark = FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.Foreground1].value(
                         ThemeMode.Dark
                     )
-                ).value(FluentTheme.themeMode),
-                pressed = FluentColor(
+                ).value(FluentTheme.themeMode)),
+                pressed = SolidColor( FluentColor(
                     light = FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForeground1Pressed].value(
                         ThemeMode.Light
                     ),
                     dark = FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.Foreground1].value(
                         ThemeMode.Dark
                     )
-                ).value(FluentTheme.themeMode),
-                selected = FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForeground1].value(),
-                disabled = FluentColor(
+                ).value(FluentTheme.themeMode)),
+                selected = SolidColor( FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForeground1].value()),
+                disabled = SolidColor( FluentColor(
                     light = FluentTheme.aliasTokens.brandForegroundColor[FluentAliasTokens.BrandForegroundColorTokens.BrandForegroundDisabled2].value(
                         ThemeMode.Light
                     ),
                     dark = FluentTheme.aliasTokens.neutralForegroundColor[FluentAliasTokens.NeutralForegroundColorTokens.ForegroundDisable1].value(
                         ThemeMode.Dark
                     )
-                ).value(FluentTheme.themeMode)
+                ).value(FluentTheme.themeMode))
             )
         }
     }

diff --git a/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/tabItem/TabItem.kt b/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/tabItem/TabItem.kt
@@ -29,7 +29,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.layout.layoutId
@@ -82,13 +86,10 @@ fun TabItem(
         ),
         animationSpec = tween(durationMillis = 300)
     )
-    val iconColor by animateColorAsState (
-        targetValue = token.iconColor(tabItemInfo = tabItemInfo).getColorByState(
-            enabled = enabled,
-            selected = selected,
-            interactionSource = interactionSource
-        ),
-        animationSpec = tween(durationMillis = 300)
+    val iconColorBrush: Brush = token.iconColor(tabItemInfo = tabItemInfo).getBrushByState(
+        enabled = enabled,
+        selected = selected,
+        interactionSource = interactionSource
     )
 
     val indicatorColor: Brush = token.indicatorColor(tabItemInfo = tabItemInfo).getBrushByState(
@@ -118,9 +119,15 @@ fun TabItem(
     val iconContent: @Composable () -> Unit = {
         Icon(
             imageVector = icon,
-            modifier = Modifier.size(if (textAlignment == TabTextAlignment.NO_TEXT) 28.dp else 24.dp),
+            modifier = Modifier.size(if (textAlignment == TabTextAlignment.NO_TEXT) 28.dp else 24.dp)
+                        .graphicsLayer(alpha = 0.99f)
+                        .drawWithCache {
+                            onDrawWithContent {
+                                drawContent()
+                                drawRect(brush = iconColorBrush, blendMode = BlendMode.SrcAtop)
+                            }
+                        },
             contentDescription = if (textAlignment == TabTextAlignment.NO_TEXT) title else null,
-            tint = iconColor
         )
     }