Fixup after dividers (#700)

* Fix Dividers after #699 was merged * Fix thematic breaks rendering in Markdown * Fix dropdown in Markdown sample It was very™ broken * Cleanup
JetBrains · Nov 25, 2024 · 0b5c26d · 0b5c26d
1 parent 54397bd
commit 0b5c26d
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 47 deletions.
diff --git a/...re/src/main/kotlin/org/jetbrains/jewel/markdown/rendering/DefaultMarkdownBlockRenderer.kt b/...re/src/main/kotlin/org/jetbrains/jewel/markdown/rendering/DefaultMarkdownBlockRenderer.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -56,7 +55,7 @@ import org.jetbrains.jewel.markdown.MarkdownBlock.Paragraph
 import org.jetbrains.jewel.markdown.MarkdownBlock.ThematicBreak
 import org.jetbrains.jewel.markdown.WithInlineMarkdown
 import org.jetbrains.jewel.markdown.extensions.MarkdownRendererExtension
-import org.jetbrains.jewel.ui.Orientation.Horizontal
+import org.jetbrains.jewel.ui.Orientation
 import org.jetbrains.jewel.ui.component.Divider
 import org.jetbrains.jewel.ui.component.HorizontallyScrollableContainer
 import org.jetbrains.jewel.ui.component.Text
@@ -182,7 +181,12 @@ public open class DefaultMarkdownBlockRenderer(
 
             if (underlineWidth > 0.dp && underlineColor.isSpecified) {
                 Spacer(Modifier.height(underlineGap))
-                Divider(Horizontal, color = underlineColor, thickness = underlineWidth)
+                Divider(
+                    orientation = Orientation.Horizontal,
+                    modifier = Modifier.fillMaxWidth(),
+                    color = underlineColor,
+                    thickness = underlineWidth,
+                )
             }
         }
     }
@@ -415,7 +419,12 @@ public open class DefaultMarkdownBlockRenderer(
 
     @Composable
     override fun renderThematicBreak(styling: MarkdownStyling.ThematicBreak) {
-        Box(Modifier.padding(styling.padding).height(styling.lineWidth).background(styling.lineColor))
+        Divider(
+            orientation = Orientation.Horizontal,
+            modifier = Modifier.padding(styling.padding).fillMaxWidth(),
+            color = styling.lineColor,
+            thickness = styling.lineWidth,
+        )
     }
 
     @Composable

diff --git a/.../ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt b/.../ide-plugin/src/main/kotlin/org/jetbrains/jewel/samples/ideplugin/ComponentShowcaseTab.kt
@@ -294,7 +294,7 @@ private fun RowScope.ColumnTwo(project: Project) {
     Column(Modifier.trackActivation().weight(1f), verticalArrangement = Arrangement.spacedBy(16.dp)) {
         MarkdownExample(project)
 
-        Divider(Orientation.Horizontal)
+        Divider(Orientation.Horizontal, Modifier.fillMaxWidth())
 
         var activated by remember { mutableStateOf(false) }
         Text("activated: $activated", Modifier.onActivated { activated = it })

diff --git a/.../standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt b/.../standalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/ComponentsView.kt
@@ -35,7 +35,7 @@ import org.jetbrains.jewel.ui.theme.tooltipStyle
 fun ComponentsView() {
     Row(Modifier.trackActivation().fillMaxSize().background(JewelTheme.globalColors.panelBackground)) {
         ComponentsToolBar()
-        Divider(Orientation.Vertical)
+        Divider(Orientation.Vertical, Modifier.fillMaxHeight())
         ComponentView(ComponentsViewModel.currentView)
     }
 }

diff --git a/...alone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt b/...alone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/Scrollbars.kt
@@ -158,6 +158,7 @@ private fun LazyColumnWithScrollbar(style: ScrollbarStyle, modifier: Modifier) {
                         if (index != LIST_ITEMS.lastIndex) {
                             Divider(
                                 orientation = Orientation.Horizontal,
+                                modifier = Modifier.fillMaxWidth(),
                                 color = JewelTheme.globalColors.borders.normal,
                             )
                         }

diff --git a/...ne/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/markdown/MarkdownEditor.kt b/...ne/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/markdown/MarkdownEditor.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -23,12 +24,14 @@ import com.darkrockstudios.libraries.mpfilepicker.FilePicker
 import com.darkrockstudios.libraries.mpfilepicker.JvmFile
 import org.jetbrains.jewel.foundation.theme.JewelTheme
 import org.jetbrains.jewel.ui.Orientation
-import org.jetbrains.jewel.ui.component.ComboBox
 import org.jetbrains.jewel.ui.component.Divider
+import org.jetbrains.jewel.ui.component.ListComboBox
+import org.jetbrains.jewel.ui.component.ListItemState
 import org.jetbrains.jewel.ui.component.OutlinedButton
-import org.jetbrains.jewel.ui.component.PopupMenu
+import org.jetbrains.jewel.ui.component.SimpleListItem
 import org.jetbrains.jewel.ui.component.Text
 import org.jetbrains.jewel.ui.component.TextArea
+import org.jetbrains.jewel.ui.theme.simpleListItemStyle
 
 @Composable
 internal fun MarkdownEditor(state: TextFieldState, modifier: Modifier = Modifier) {
@@ -37,14 +40,18 @@ internal fun MarkdownEditor(state: TextFieldState, modifier: Modifier = Modifier
             modifier = Modifier.fillMaxWidth().background(JewelTheme.globalColors.panelBackground).padding(8.dp),
             onLoadMarkdown = { state.edit { replace(0, length, it) } },
         )
-        Divider(orientation = Orientation.Horizontal)
+        Divider(orientation = Orientation.Horizontal, Modifier.fillMaxWidth())
         Editor(state = state, modifier = Modifier.fillMaxWidth().weight(1f))
     }
 }
 
 @Composable
 private fun ControlsRow(modifier: Modifier = Modifier, onLoadMarkdown: (String) -> Unit) {
-    Row(modifier.horizontalScroll(rememberScrollState()), horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+    Row(
+        modifier.horizontalScroll(rememberScrollState()),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
         var showFilePicker by remember { mutableStateOf(false) }
         OutlinedButton(onClick = { showFilePicker = true }, modifier = Modifier.padding(start = 2.dp)) {
             Text("Load file...")
@@ -63,36 +70,29 @@ private fun ControlsRow(modifier: Modifier = Modifier, onLoadMarkdown: (String)
 
         OutlinedButton(onClick = { onLoadMarkdown("") }) { Text("Clear") }
 
-        Box {
-            var selected by remember { mutableStateOf("Jewel readme") }
-            ComboBox(
-                modifier = Modifier.width(140.dp),
-                labelText = selected,
-                popupContent = {
-                    PopupMenu(horizontalAlignment = Alignment.Start, onDismissRequest = { true }) {
-                        selectableItem(
-                            selected = selected == "Jewel readme",
-                            onClick = {
-                                selected = "Jewel readme"
-                                onLoadMarkdown(JewelReadme)
-                            },
-                        ) {
-                            Text("Jewel readme")
-                        }
+        Spacer(Modifier.weight(1f))
 
-                        selectableItem(
-                            selected = selected == "Markdown catalog",
-                            onClick = {
-                                selected = "Markdown catalog"
-                                onLoadMarkdown(MarkdownCatalog)
-                            },
-                        ) {
-                            Text("Markdown catalog")
-                        }
-                    }
-                },
-            )
-        }
+        val comboBoxItems = remember { listOf("Jewel readme", "Markdown catalog") }
+        var selected by remember { mutableStateOf("Jewel readme") }
+        ListComboBox(
+            items = comboBoxItems,
+            modifier = Modifier.width(170.dp).padding(end = 2.dp),
+            isEditable = false,
+            maxPopupHeight = 150.dp,
+            onSelectedItemChange = {
+                selected = it
+                onLoadMarkdown(if (selected == "Jewel readme") JewelReadme else MarkdownCatalog)
+            },
+            listItemContent = { item, isSelected, _, isItemHovered, isPreviewSelection ->
+                SimpleListItem(
+                    text = item,
+                    state = ListItemState(isSelected, isItemHovered, isPreviewSelection),
+                    modifier = Modifier,
+                    style = JewelTheme.simpleListItemStyle,
+                    contentDescription = item,
+                )
+            },
+        )
     }
 }
 

diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Divider.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Divider.kt
@@ -15,6 +15,7 @@ import org.jetbrains.jewel.foundation.theme.JewelTheme
 import org.jetbrains.jewel.ui.Orientation
 import org.jetbrains.jewel.ui.component.styling.DividerStyle
 import org.jetbrains.jewel.ui.theme.dividerStyle
+import org.jetbrains.jewel.ui.util.thenIf
 
 @Composable
 public fun Divider(
@@ -25,13 +26,6 @@ public fun Divider(
     startIndent: Dp = Dp.Unspecified,
     style: DividerStyle = JewelTheme.dividerStyle,
 ) {
-    val indentModifier =
-        if (startIndent.value != 0f) {
-            Modifier.padding(start = startIndent.takeOrElse { style.metrics.startIndent })
-        } else {
-            Modifier
-        }
-
     val actualThickness = thickness.takeOrElse { style.metrics.thickness }
     val orientationModifier =
         when (orientation) {
@@ -40,5 +34,10 @@ public fun Divider(
         }
 
     val lineColor = color.takeOrElse { style.color }
-    Box(modifier.then(indentModifier).then(orientationModifier).background(color = lineColor))
+    Box(
+        modifier
+            .thenIf(startIndent.value != 0f) { padding(start = startIndent.takeOrElse { style.metrics.startIndent }) }
+            .then(orientationModifier)
+            .background(color = lineColor)
+    )
 }
diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/GroupHeader.kt
@@ -1,6 +1,7 @@
 package org.jetbrains.jewel.ui.component
 
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -21,6 +22,7 @@ public fun GroupHeader(
 
         Divider(
             orientation = Orientation.Horizontal,
+            modifier = Modifier.fillMaxWidth(),
             color = style.colors.divider,
             thickness = style.metrics.dividerThickness,
             startIndent = style.metrics.indent,