Fix TextArea placeholder layout (#616)

Fix TextArea placeholder layout When we added scrollbars and tweaked the TextArea paddings, we did not do the same for the placeholder. As a result, the placeholders were laid out incorrectly, up against the component's border. This fixes that issue by passing down the modifier to the TextArea decoration box.
JetBrains · Sep 30, 2024 · f1a6a71 · f1a6a71
1 parent 6c1317e
commit f1a6a71
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextArea.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/TextArea.kt
@@ -153,10 +153,11 @@ private fun TextAreaDecorator(
                 Box(Modifier.padding(contentPadding)) { innerTextField() }
             }
         },
-        placeholderTextColor = style.colors.placeholder,
-        placeholder = if (state.text.isEmpty()) placeholder else null,
         textStyle = textStyle,
         modifier = decorationBoxModifier.defaultMinSize(minWidth = minSize.width, minHeight = minSize.height),
+        placeholder = if (state.text.isEmpty()) placeholder else null,
+        placeholderTextColor = style.colors.placeholder,
+        placeholderModifier = Modifier.padding(contentPadding).padding(style.metrics.borderWidth),
     )
 }
 
@@ -268,6 +269,8 @@ public fun TextArea(
     decorationBoxModifier: Modifier = Modifier,
 ) {
     val minSize = style.metrics.minSize
+    val contentPadding = style.metrics.contentPadding
+
     @Suppress("DEPRECATION")
     InputField(
         value = value,
@@ -289,10 +292,11 @@ public fun TextArea(
     ) { innerTextField, _ ->
         TextAreaDecorationBox(
             innerTextField = innerTextField,
-            placeholderTextColor = style.colors.placeholder,
-            placeholder = if (value.text.isEmpty()) placeholder else null,
             textStyle = textStyle,
             modifier = decorationBoxModifier,
+            placeholder = if (value.text.isEmpty()) placeholder else null,
+            placeholderTextColor = style.colors.placeholder,
+            placeholderModifier = Modifier.padding(contentPadding).padding(style.metrics.borderWidth),
         )
     }
 }
@@ -302,13 +306,14 @@ private fun TextAreaDecorationBox(
     innerTextField: @Composable () -> Unit,
     textStyle: TextStyle,
     modifier: Modifier,
-    placeholderTextColor: Color,
     placeholder: @Composable (() -> Unit)?,
+    placeholderTextColor: Color,
+    placeholderModifier: Modifier,
 ) {
     Layout(
         content = {
             if (placeholder != null) {
-                Box(modifier = Modifier.layoutId(PLACEHOLDER_ID), contentAlignment = Alignment.TopStart) {
+                Box(modifier = placeholderModifier.layoutId(PLACEHOLDER_ID), contentAlignment = Alignment.TopStart) {
                     CompositionLocalProvider(
                         LocalTextStyle provides textStyle.copy(color = placeholderTextColor),
                         LocalContentColor provides placeholderTextColor,