Fix TextField layout: ignore placeholders

Also use IconButton in TextField sample
JetBrains · Jan 14, 2024 · e7064a7 · e7064a7
1 parent 26fa404
commit e7064a7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 38 deletions.
diff --git a/...alone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt b/...alone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextFields.kt
@@ -16,16 +16,25 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.PointerIcon
 import androidx.compose.ui.input.pointer.pointerHoverIcon
-import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.dp
+import org.jetbrains.jewel.foundation.theme.JewelTheme
+import org.jetbrains.jewel.intui.standalone.styling.dark
+import org.jetbrains.jewel.intui.standalone.styling.defaults
+import org.jetbrains.jewel.intui.standalone.styling.light
 import org.jetbrains.jewel.samples.standalone.StandaloneSampleIcons
 import org.jetbrains.jewel.samples.standalone.viewmodel.View
 import org.jetbrains.jewel.ui.Outline
 import org.jetbrains.jewel.ui.component.Icon
+import org.jetbrains.jewel.ui.component.IconButton
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.TextField
+import org.jetbrains.jewel.ui.component.styling.IconButtonColors
+import org.jetbrains.jewel.ui.component.styling.IconButtonMetrics
+import org.jetbrains.jewel.ui.component.styling.IconButtonStyle
+import org.jetbrains.jewel.ui.painter.hints.Stateful
 import org.jetbrains.jewel.ui.painter.rememberResourcePainterProvider
 
 @Composable
@@ -80,48 +89,65 @@ fun TextFields() {
                 Text("With trailing button")
             },
             trailingIcon = {
-                AnimatedVisibility(
-                    visible = text2.isNotEmpty(),
-                    enter = fadeIn() + slideInHorizontally { it / 2 },
-                    exit = fadeOut() + slideOutHorizontally { it / 2 },
-                ) {
-                    CloseIconButton { text2 = "" }
-                }
+                CloseIconButton(text2.isNotEmpty()) { text2 = "" }
             },
         )
     }
 }
 
 @Composable
-private fun CloseIconButton(onClick: () -> Unit) {
-    val interactionSource = remember { MutableInteractionSource() }
-    var hovered by remember { mutableStateOf(false) }
+private fun CloseIconButton(
+    isVisible: Boolean,
+    onClick: () -> Unit,
+) {
+    Box(Modifier.size(16.dp)) {
+        AnimatedVisibility(
+            visible = isVisible,
+            enter = fadeIn() + slideInHorizontally { it / 2 },
+            exit = fadeOut() + slideOutHorizontally { it / 2 },
+        ) {
+            // TODO replace when IconButton supports no-background style
+            val isDark = JewelTheme.isDark
 
-    LaunchedEffect(interactionSource) {
-        interactionSource.interactions.collect {
-            when (it) {
-                is HoverInteraction.Enter -> hovered = true
-                is HoverInteraction.Exit -> hovered = false
+            val colors = noBackgroundIconButtonColors(isDark)
+            val style = remember(isDark, colors) {
+                IconButtonStyle(colors, IconButtonMetrics.defaults())
             }
-        }
-    }
 
-    val closeIconProvider = rememberResourcePainterProvider("icons/close.svg", StandaloneSampleIcons::class.java)
-    val closeIcon by closeIconProvider.getPainter()
+            IconButton(
+                onClick,
+                style = style,
+                modifier = Modifier.pointerHoverIcon(PointerIcon.Default),
+            ) { state ->
+                val painterProvider =
+                    rememberResourcePainterProvider("icons/close.svg", StandaloneSampleIcons::class.java)
+                val painter by painterProvider.getPainter(Stateful(state))
 
-    val hoveredCloseIconProvider =
-        rememberResourcePainterProvider("icons/closeHovered.svg", StandaloneSampleIcons::class.java)
-    val hoveredCloseIcon by hoveredCloseIconProvider.getPainter()
+                Icon(painter, contentDescription = "Clear")
+            }
+        }
+    }
+}
 
-    Icon(
-        painter = if (hovered) hoveredCloseIcon else closeIcon,
-        contentDescription = "Clear",
-        modifier = Modifier
-            .pointerHoverIcon(PointerIcon.Default)
-            .clickable(
-                interactionSource = interactionSource,
-                indication = null,
-                role = Role.Button,
-            ) { onClick() },
+@Composable
+private fun noBackgroundIconButtonColors(isDark: Boolean) = if (isDark) {
+    IconButtonColors.dark(
+        background = Color.Unspecified,
+        backgroundDisabled = Color.Unspecified,
+        backgroundSelected = Color.Unspecified,
+        backgroundSelectedActivated = Color.Unspecified,
+        backgroundFocused = Color.Unspecified,
+        backgroundPressed = Color.Unspecified,
+        backgroundHovered = Color.Unspecified,
+    )
+} else {
+    IconButtonColors.light(
+        background = Color.Unspecified,
+        backgroundDisabled = Color.Unspecified,
+        backgroundSelected = Color.Unspecified,
+        backgroundSelectedActivated = Color.Unspecified,
+        backgroundFocused = Color.Unspecified,
+        backgroundPressed = Color.Unspecified,
+        backgroundHovered = Color.Unspecified,
     )
 }
diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextField.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextField.kt
@@ -209,14 +209,12 @@ private fun TextFieldDecorationBox(
             leadingPlaceable,
             trailingPlaceable,
             textFieldPlaceable,
-            placeholderPlaceable,
             incomingConstraints,
         )
         val height = calculateHeight(
             leadingPlaceable,
             trailingPlaceable,
             textFieldPlaceable,
-            placeholderPlaceable,
             incomingConstraints,
         )
 
@@ -249,14 +247,12 @@ private fun calculateHeight(
     leadingPlaceable: Placeable?,
     trailingPlaceable: Placeable?,
     textFieldPlaceable: Placeable,
-    placeholderPlaceable: Placeable?,
     constraints: Constraints,
 ): Int =
     maxOf(
         textFieldPlaceable.height,
-        placeholderPlaceable?.height ?: 0,
-        trailingPlaceable?.height ?: 0,
         leadingPlaceable?.height ?: 0,
+        trailingPlaceable?.height ?: 0,
         constraints.minHeight,
     )