Allow vertically aligning checkbox and radio button rows

Fixes #321 (cherry picked from commit 0748b4e)
JetBrains · Mar 28, 2024 · 1bfb00a · 1bfb00a
1 parent 7ff31f2
commit 1bfb00a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Checkbox.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Checkbox.kt
@@ -67,6 +67,7 @@ public fun Checkbox(
     metrics: CheckboxMetrics = JewelTheme.checkboxStyle.metrics,
     icons: CheckboxIcons = JewelTheme.checkboxStyle.icons,
     textStyle: TextStyle = LocalTextStyle.current,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 ) {
     val state by remember(checked) { mutableStateOf(ToggleableState(checked)) }
     CheckboxImpl(
@@ -80,6 +81,7 @@ public fun Checkbox(
         metrics = metrics,
         icons = icons,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
         content = null,
     )
 }
@@ -96,6 +98,7 @@ public fun TriStateCheckbox(
     metrics: CheckboxMetrics = LocalCheckboxStyle.current.metrics,
     icons: CheckboxIcons = LocalCheckboxStyle.current.icons,
     textStyle: TextStyle = LocalTextStyle.current,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 ) {
     CheckboxImpl(
         state = state,
@@ -108,6 +111,7 @@ public fun TriStateCheckbox(
         metrics = metrics,
         icons = icons,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
         content = null,
     )
 }
@@ -125,6 +129,7 @@ public fun TriStateCheckboxRow(
     metrics: CheckboxMetrics = LocalCheckboxStyle.current.metrics,
     icons: CheckboxIcons = LocalCheckboxStyle.current.icons,
     textStyle: TextStyle = LocalTextStyle.current,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 ) {
     CheckboxImpl(
         state = state,
@@ -137,6 +142,7 @@ public fun TriStateCheckboxRow(
         metrics = metrics,
         icons = icons,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
     ) {
         Text(text)
     }
@@ -155,6 +161,7 @@ public fun CheckboxRow(
     metrics: CheckboxMetrics = LocalCheckboxStyle.current.metrics,
     icons: CheckboxIcons = LocalCheckboxStyle.current.icons,
     textStyle: TextStyle = LocalTextStyle.current,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 ) {
     val state by remember(checked) { mutableStateOf(ToggleableState(checked)) }
 
@@ -169,6 +176,7 @@ public fun CheckboxRow(
         metrics = metrics,
         icons = icons,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
     ) {
         Text(text)
     }
@@ -186,6 +194,7 @@ public fun CheckboxRow(
     metrics: CheckboxMetrics = LocalCheckboxStyle.current.metrics,
     icons: CheckboxIcons = LocalCheckboxStyle.current.icons,
     textStyle: TextStyle = LocalTextStyle.current,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
     content: @Composable RowScope.() -> Unit,
 ) {
     CheckboxImpl(
@@ -199,6 +208,7 @@ public fun CheckboxRow(
         metrics = metrics,
         icons = icons,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
         content = content,
     )
 }
@@ -215,6 +225,7 @@ public fun TriStateCheckboxRow(
     metrics: CheckboxMetrics = LocalCheckboxStyle.current.metrics,
     icons: CheckboxIcons = LocalCheckboxStyle.current.icons,
     textStyle: TextStyle = LocalTextStyle.current,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
     content: @Composable RowScope.() -> Unit,
 ) {
     CheckboxImpl(
@@ -228,6 +239,7 @@ public fun TriStateCheckboxRow(
         metrics = metrics,
         icons = icons,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
         content = content,
     )
 }
@@ -244,6 +256,7 @@ private fun CheckboxImpl(
     outline: Outline,
     interactionSource: MutableInteractionSource,
     textStyle: TextStyle,
+    verticalAlignment: Alignment.Vertical,
     content: (@Composable RowScope.() -> Unit)?,
 ) {
     var checkboxState by remember(interactionSource) {
@@ -312,7 +325,7 @@ private fun CheckboxImpl(
         Row(
             wrapperModifier,
             horizontalArrangement = Arrangement.spacedBy(metrics.iconContentGap),
-            verticalAlignment = Alignment.CenterVertically,
+            verticalAlignment = verticalAlignment,
         ) {
             Box(contentAlignment = Alignment.TopStart) {
                 CheckBoxImage(Modifier, checkboxPainter, checkBoxImageModifier)

diff --git a/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/RadioButton.kt b/ui/src/main/kotlin/org/jetbrains/jewel/ui/component/RadioButton.kt
@@ -55,6 +55,7 @@ public fun RadioButton(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: RadioButtonStyle = JewelTheme.radioButtonStyle,
     textStyle: TextStyle = JewelTheme.defaultTextStyle,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 ) {
     RadioButtonImpl(
         selected = selected,
@@ -65,6 +66,7 @@ public fun RadioButton(
         interactionSource = interactionSource,
         style = style,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
         content = null,
     )
 }
@@ -80,6 +82,7 @@ public fun RadioButtonRow(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: RadioButtonStyle = JewelTheme.radioButtonStyle,
     textStyle: TextStyle = JewelTheme.defaultTextStyle,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 ) {
     RadioButtonImpl(
         selected = selected,
@@ -90,6 +93,7 @@ public fun RadioButtonRow(
         interactionSource = interactionSource,
         style = style,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
     ) {
         Text(text)
     }
@@ -105,6 +109,7 @@ public fun RadioButtonRow(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: RadioButtonStyle = JewelTheme.radioButtonStyle,
     textStyle: TextStyle = JewelTheme.defaultTextStyle,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
     content: @Composable RowScope.() -> Unit,
 ) {
     RadioButtonImpl(
@@ -116,6 +121,7 @@ public fun RadioButtonRow(
         interactionSource = interactionSource,
         style = style,
         textStyle = textStyle,
+        verticalAlignment = verticalAlignment,
         content = content,
     )
 }
@@ -130,6 +136,7 @@ private fun RadioButtonImpl(
     interactionSource: MutableInteractionSource,
     style: RadioButtonStyle,
     textStyle: TextStyle,
+    verticalAlignment: Alignment.Vertical,
     content: (@Composable RowScope.() -> Unit)?,
 ) {
     var radioButtonState by remember(interactionSource) {
@@ -190,7 +197,7 @@ private fun RadioButtonImpl(
         Row(
             wrapperModifier,
             horizontalArrangement = Arrangement.spacedBy(metrics.iconContentGap),
-            verticalAlignment = Alignment.CenterVertically,
+            verticalAlignment = verticalAlignment,
         ) {
             RadioButtonImage(Modifier, radioButtonPainter, radioButtonModifier)