From ddf9b39b6be7b0c074042f9849ef212ca5d39a43 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <js7389@princeton.edu>
Date: Wed, 8 Oct 2025 15:15:30 -0700
Subject: [PATCH] SOLR-17936: add focus indicator to navigation sidebar entries

Rather than using Tab, which does not have colors for our various states,
we use Button, which has all colors except for the Selected state.
Material 3's new "Expressive" version also provides an experiment ToggleButton
component, but our version of the Material 3 dependency is not new enough to
be able to use it (and if I understand correctly, we can't use the very newest
material 3 release, since Compose Multiplatform does not yet support it).

With thanks to @malliaridis for the guidance getting started, and for
suggesting that we try a component other than Tab.
---
 .../ui/views/navigation/NavigationSideBar.kt  | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/solr/ui/src/commonMain/kotlin/org/apache/solr/ui/views/navigation/NavigationSideBar.kt b/solr/ui/src/commonMain/kotlin/org/apache/solr/ui/views/navigation/NavigationSideBar.kt
index 201cf73b633..cfd1606506b 100644
--- a/solr/ui/src/commonMain/kotlin/org/apache/solr/ui/views/navigation/NavigationSideBar.kt
+++ b/solr/ui/src/commonMain/kotlin/org/apache/solr/ui/views/navigation/NavigationSideBar.kt
@@ -17,7 +17,6 @@
 
 package org.apache.solr.ui.views.navigation
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -38,15 +37,17 @@ import androidx.compose.material.icons.rounded.Folder
 import androidx.compose.material.icons.rounded.Hub
 import androidx.compose.material.icons.rounded.Memory
 import androidx.compose.material.icons.rounded.Security
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
 import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
 import org.apache.solr.ui.generated.resources.Res
@@ -124,18 +125,22 @@ private fun MenuElement(
     onClick: () -> Unit = {},
 ) {
     val alpha = if (enabled) 1f else 0.38f
-    Tab(
-        modifier = modifier.background(
-            if (selected) {
-                MaterialTheme.colorScheme.primaryContainer.copy(alpha = alpha)
-            } else {
-                Color.Unspecified
-            },
-        ),
-        selected = selected,
+    Button(
+        colors = if (selected) {
+            ButtonDefaults.buttonColors(
+                containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = alpha),
+                contentColor = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = alpha),
+                disabledContainerColor = Color.Transparent,
+            )
+        } else {
+            ButtonDefaults.buttonColors(
+                containerColor = Color.Transparent,
+                contentColor = MaterialTheme.colorScheme.onSurface.copy(alpha = alpha),
+                disabledContainerColor = Color.Transparent,
+            )
+        },
+        shape = RectangleShape,
         enabled = enabled,
-        selectedContentColor = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = alpha),
-        unselectedContentColor = MaterialTheme.colorScheme.onSurface.copy(alpha = alpha),
         onClick = onClick,
     ) {
         Row(