Skip to content

Commit

Permalink
Polish TextField, TextArea, and RadioButton (#662)
Browse files Browse the repository at this point in the history 
* Prefer Unspecified over Transparent for colours in bridge

* Align standalone text field/area styling to bridge

* Align standalone radio button icon gap to bridge

* Improve text area/field standalone samples to include readOnly
  • Loading branch information
@rock3r
rock3r authored Oct 25, 2024
1 parent 8881269 commit bc358d4
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 95 deletions.
24 changes: 12 additions & 12 deletions ide-laf-bridge/src/main/kotlin/org/jetbrains/jewel/bridge/theme/IntUiBridge.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,11 +552,11 @@ private fun readUndecoratedDropdownStyle(menuStyle: MenuStyle): DropdownStyle {
contentFocused = normalContent,
contentPressed = normalContent,
contentHovered = normalContent,
border = Color.Transparent,
borderDisabled = Color.Transparent,
borderFocused = Color.Transparent,
borderPressed = Color.Transparent,
borderHovered = Color.Transparent,
border = Color.Unspecified,
borderDisabled = Color.Unspecified,
borderFocused = Color.Unspecified,
borderPressed = Color.Unspecified,
borderHovered = Color.Unspecified,
iconTint = Color.Unspecified,
iconTintDisabled = Color.Unspecified,
iconTintFocused = Color.Unspecified,
Expand Down Expand Up @@ -903,7 +903,7 @@ private fun readTextAreaStyle(metrics: TextFieldMetrics): TextAreaStyle {
val colors =
TextAreaColors(
background = normalBackground,
backgroundDisabled = Color.Transparent,
backgroundDisabled = Color.Unspecified,
backgroundFocused = normalBackground,
backgroundPressed = normalBackground,
backgroundHovered = normalBackground,
Expand Down Expand Up @@ -947,7 +947,7 @@ private fun readTextFieldStyle(): TextFieldStyle {
val colors =
TextFieldColors(
background = normalBackground,
backgroundDisabled = Color.Transparent,
backgroundDisabled = Color.Unspecified,
backgroundFocused = normalBackground,
backgroundPressed = normalBackground,
backgroundHovered = normalBackground,
Expand Down Expand Up @@ -994,7 +994,7 @@ private fun readLazyTreeStyle(): LazyTreeStyle {
contentFocused = normalContent,
contentSelected = selectedContent,
contentSelectedFocused = selectedContent,
elementBackgroundFocused = Color.Transparent,
elementBackgroundFocused = Color.Unspecified,
elementBackgroundSelected = inactiveSelectedElementBackground,
elementBackgroundSelectedFocused = selectedElementBackground,
)
Expand Down Expand Up @@ -1042,10 +1042,10 @@ private fun readDefaultTabStyle(): TabStyle {
contentPressed = normalContent,
contentHovered = normalContent,
contentSelected = normalContent,
underline = Color.Transparent,
underline = Color.Unspecified,
underlineDisabled = retrieveColorOrUnspecified("TabbedPane.disabledUnderlineColor"),
underlinePressed = selectedUnderline,
underlineHovered = Color.Transparent,
underlineHovered = Color.Unspecified,
underlineSelected = selectedUnderline,
)

Expand Down Expand Up @@ -1095,10 +1095,10 @@ private fun readEditorTabStyle(): TabStyle {
contentPressed = normalContent,
contentHovered = normalContent,
contentSelected = normalContent,
underline = Color.Transparent,
underline = Color.Unspecified,
underlineDisabled = retrieveColorOrUnspecified("TabbedPane.disabledUnderlineColor"),
underlinePressed = selectedUnderline,
underlineHovered = Color.Transparent,
underlineHovered = Color.Unspecified,
underlineSelected = selectedUnderline,
)

Expand Down
2 changes: 1 addition & 1 deletion ...e/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiRadioButtonStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ public fun RadioButtonMetrics.Companion.defaults(
outlineFocusedSize: DpSize = outlineSize,
outlineSelectedSize: DpSize = DpSize(22.dp, 22.dp),
outlineSelectedFocusedSize: DpSize = outlineSelectedSize,
iconContentGap: Dp = 8.dp,
iconContentGap: Dp = 4.dp,
): RadioButtonMetrics =
RadioButtonMetrics(
radioButtonSize = radioButtonSize,
Expand Down
4 changes: 2 additions & 2 deletions ...lone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiTextAreaStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ public fun TextAreaStyle.Companion.dark(
@Composable
public fun TextAreaColors.Companion.light(
background: Color = IntUiLightTheme.colors.gray(14),
backgroundDisabled: Color = IntUiLightTheme.colors.gray(13),
backgroundDisabled: Color = Color.Unspecified,
backgroundFocused: Color = background,
backgroundPressed: Color = background,
backgroundHovered: Color = background,
Expand Down Expand Up @@ -76,7 +76,7 @@ public fun TextAreaColors.Companion.light(
@Composable
public fun TextAreaColors.Companion.dark(
background: Color = IntUiDarkTheme.colors.gray(2),
backgroundDisabled: Color = background,
backgroundDisabled: Color = Color.Unspecified,
backgroundFocused: Color = background,
backgroundPressed: Color = background,
backgroundHovered: Color = background,
Expand Down
4 changes: 2 additions & 2 deletions ...one/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiTextFieldStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ public fun TextFieldStyle.Companion.dark(
@Composable
public fun TextFieldColors.Companion.light(
background: Color = IntUiLightTheme.colors.gray(14),
backgroundDisabled: Color = IntUiLightTheme.colors.gray(13),
backgroundDisabled: Color = Color.Unspecified,
backgroundFocused: Color = background,
backgroundPressed: Color = background,
backgroundHovered: Color = background,
Expand Down Expand Up @@ -76,7 +76,7 @@ public fun TextFieldColors.Companion.light(
@Composable
public fun TextFieldColors.Companion.dark(
background: Color = IntUiDarkTheme.colors.gray(2),
backgroundDisabled: Color = background,
backgroundDisabled: Color = Color.Unspecified,
backgroundFocused: Color = background,
backgroundPressed: Color = background,
backgroundHovered: Color = background,
Expand Down
102 changes: 76 additions & 26 deletions ...dalone/src/main/kotlin/org/jetbrains/jewel/samples/standalone/view/component/TextAreas.kt
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
package org.jetbrains.jewel.samples.standalone.view.component

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.input.rememberTextFieldState
Expand All @@ -11,8 +14,10 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import org.jetbrains.jewel.ui.Outline
import org.jetbrains.jewel.ui.component.GroupHeader
import org.jetbrains.jewel.ui.component.Text
import org.jetbrains.jewel.ui.component.TextArea
import org.jetbrains.jewel.ui.component.VerticallyScrollableContainer

@Suppress("SpellCheckingInspection")
private const val LOREM_IPSUM =
Expand All @@ -30,31 +35,76 @@ private const val LOREM_IPSUM =

@Composable
fun TextAreas() {
Row(
Modifier.padding(horizontal = 16.dp).height(200.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.Top,
) {
TextArea(state = rememberTextFieldState(LOREM_IPSUM), modifier = Modifier.weight(1f).fillMaxHeight())

TextArea(
state = rememberTextFieldState(LOREM_IPSUM),
modifier = Modifier.weight(1f).fillMaxHeight(),
enabled = false,
)

TextArea(
state = rememberTextFieldState(""),
modifier = Modifier.weight(1f).fillMaxHeight(),
outline = Outline.Error,
placeholder = { Text("Text area with error") },
)

TextArea(
state = rememberTextFieldState(""),
modifier = Modifier.weight(1f).fillMaxHeight(),
outline = Outline.Warning,
placeholder = { Text("Text area with warning") },
)
VerticallyScrollableContainer(Modifier.fillMaxSize()) {
Column(Modifier.padding(vertical = 4.dp)) {
Row(
Modifier.padding(horizontal = 16.dp).height(200.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.Top,
) {
TextArea(state = rememberTextFieldState(LOREM_IPSUM), modifier = Modifier.weight(1f).fillMaxHeight())

TextArea(
state = rememberTextFieldState(LOREM_IPSUM),
modifier = Modifier.weight(1f).fillMaxHeight(),
enabled = false,
)

TextArea(
state = rememberTextFieldState(""),
modifier = Modifier.weight(1f).fillMaxHeight(),
outline = Outline.Error,
placeholder = { Text("Text area with error") },
)

TextArea(
state = rememberTextFieldState(""),
modifier = Modifier.weight(1f).fillMaxHeight(),
outline = Outline.Warning,
placeholder = { Text("Text area with warning") },
)
}

Spacer(Modifier.height(16.dp))

GroupHeader("Read-only")

Spacer(Modifier.height(16.dp))

Row(
Modifier.padding(horizontal = 16.dp).height(200.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.Top,
) {
TextArea(
state = rememberTextFieldState(LOREM_IPSUM),
modifier = Modifier.weight(1f).fillMaxHeight(),
readOnly = true,
)

TextArea(
state = rememberTextFieldState(LOREM_IPSUM),
modifier = Modifier.weight(1f).fillMaxHeight(),
enabled = false,
readOnly = true,
)

TextArea(
state = rememberTextFieldState("Error state"),
modifier = Modifier.weight(1f).fillMaxHeight(),
outline = Outline.Error,
placeholder = { Text("Text area with error") },
readOnly = true,
)

TextArea(
state = rememberTextFieldState("Warning state"),
modifier = Modifier.weight(1f).fillMaxHeight(),
outline = Outline.Warning,
placeholder = { Text("Text area with warning") },
readOnly = true,
)
}
}
}
}
Loading

0 comments on commit bc358d4

Please sign in to comment.