Improve UI control outlines management (#187)

Added boolean check 'hasNoOutline' to determine presence of an outline in Dropdown and InputField classes. This allows rendering elements especially those using TreeBuilder without an outline, facilitating better alignment with varying design requirements. This check is used in conjunction with existing 'undecorated' variable for better UX and flexibility.
JetBrains · Oct 17, 2023 · bfa6344 · bfa6344
1 parent 863f096
commit bfa6344
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Dropdown.kt b/core/src/main/kotlin/org/jetbrains/jewel/Dropdown.kt
@@ -94,6 +94,7 @@ fun Dropdown(
     val minSize = metrics.minSize
     val arrowMinSize = style.metrics.arrowMinSize
     val borderColor by colors.borderFor(dropdownState)
+    val hasNoOutline = outline == Outline.None
 
     Box(
         modifier.clickable(
@@ -110,7 +111,7 @@ fun Dropdown(
             indication = null,
         )
             .background(colors.backgroundFor(dropdownState).value, shape)
-            .border(Stroke.Alignment.Center, style.metrics.borderWidth, borderColor, shape)
+            .appendIf(hasNoOutline) { border(Stroke.Alignment.Center, style.metrics.borderWidth, borderColor, shape) }
             .appendIf(outline == Outline.None) { focusOutline(dropdownState, shape) }
             .outline(dropdownState, outline, shape)
             .width(IntrinsicSize.Max)

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/InputField.kt b/core/src/main/kotlin/org/jetbrains/jewel/InputField.kt
@@ -76,7 +76,8 @@ internal fun InputField(
     }
 
     val borderColor by style.colors.borderFor(inputState)
-    val borderModifier = Modifier.appendIf(!undecorated && borderColor.isSpecified) {
+    val hasNoOutline = outline == Outline.None
+    val borderModifier = Modifier.appendIf(!undecorated && borderColor.isSpecified && hasNoOutline) {
         Modifier.border(
             alignment = Stroke.Alignment.Center,
             width = style.metrics.borderWidth,
@@ -93,8 +94,8 @@ internal fun InputField(
         value = value,
         modifier = modifier.then(backgroundModifier)
             .then(borderModifier)
-            .appendIf(!undecorated) { focusOutline(inputState, shape) }
-            .outline(inputState, outline, shape),
+            .appendIf(!undecorated && hasNoOutline) { focusOutline(inputState, shape) }
+            .outline(inputState, outline, shape, Stroke.Alignment.Center),
         onValueChange = onValueChange,
         enabled = enabled,
         readOnly = readOnly,