Skip to content

Commit

Permalink
Fix default button focus outline & chip colors
Browse files Browse the repository at this point in the history 
* The default button was missing spacing between its bg and the focus
  outline. Outlined buttons are unaffected.
* The chips were drawing a double-outline when focused and selected. Now
  they only draw the selected outline if they are both focused and
  selected.
* The chips didn't clearly signal the pressed and selected states. The
  background now reflects these states better (standalone only).
  There are no specs so we're going with a bit more freedom in the
  standalone version, as the Swing impl is quite lacking in polish still
  • Loading branch information
@rock3r
rock3r committed Jul 1, 2024
1 parent 0ac4e02 commit 588827d
Show file tree
Hide file tree
Showing 9 changed files with 39 additions and 30 deletions.
2 changes: 2 additions & 0 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 @@ -283,6 +283,7 @@ private fun readDefaultButtonStyle(): ButtonStyle {
padding = PaddingValues(horizontal = 14.dp), // see DarculaButtonUI.HORIZONTAL_PADDING
minSize = DpSize(minimumSize.width, minimumSize.height),
borderWidth = DarculaUIUtil.LW.dp,
focusOutlineExpand = 2.dp,
),
)
}
Expand Down Expand Up @@ -330,6 +331,7 @@ private fun readOutlinedButtonStyle(): ButtonStyle {
padding = PaddingValues(horizontal = 14.dp), // see DarculaButtonUI.HORIZONTAL_PADDING
minSize = DpSize(minimumSize.width, minimumSize.height),
borderWidth = DarculaUIUtil.LW.dp,
focusOutlineExpand = Dp.Unspecified,
),
)
}
Expand Down
8 changes: 4 additions & 4 deletions int-ui/int-ui-standalone/api/int-ui-standalone.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@ public final class org/jetbrains/jewel/intui/standalone/StandalonePainterHintsPr
}

public final class org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStylingKt {
public static final fun default-H1KY9o8 (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static synthetic fun default-H1KY9o8$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static final fun default-Kzyhx1A (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static synthetic fun default-Kzyhx1A$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static final fun getDefault (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButtonColorFactory;
public static final fun getDefault (Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiDefaultButtonStyleFactory;
public static final fun getOutlined (Lorg/jetbrains/jewel/ui/component/styling/ButtonColors$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonColorFactory;
public static final fun getOutlined (Lorg/jetbrains/jewel/ui/component/styling/ButtonStyle$Companion;)Lorg/jetbrains/jewel/intui/standalone/styling/IntUiOutlinedButtonStyleFactory;
public static final fun outlined-H1KY9o8 (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static synthetic fun outlined-H1KY9o8$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static final fun outlined-Kzyhx1A (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFF)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
public static synthetic fun outlined-Kzyhx1A$default (Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFFILjava/lang/Object;)Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics;
}

public final class org/jetbrains/jewel/intui/standalone/styling/IntUiCheckboxStylingKt {
Expand Down
6 changes: 4 additions & 2 deletions ...dalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiButtonStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,11 +208,13 @@ public fun ButtonMetrics.Companion.default(
padding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 6.dp),
minSize: DpSize = DpSize(72.dp, 28.dp),
borderWidth: Dp = 0.dp,
): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth)
focusOutlineExpand: Dp = 2.dp,
): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth, focusOutlineExpand)

public fun ButtonMetrics.Companion.outlined(
cornerSize: CornerSize = CornerSize(4.dp),
padding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 6.dp),
minSize: DpSize = DpSize(72.dp, 28.dp),
borderWidth: Dp = 1.dp,
): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth)
focusOutlineExpand: Dp = Dp.Unspecified,
): ButtonMetrics = ButtonMetrics(cornerSize, padding, minSize, borderWidth, focusOutlineExpand)
28 changes: 14 additions & 14 deletions ...andalone/src/main/kotlin/org/jetbrains/jewel/intui/standalone/styling/IntUiChipStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ public fun ChipColors.Companion.light(
background: Brush = SolidColor(IntUiLightTheme.colors.grey(14)),
backgroundDisabled: Brush = SolidColor(IntUiLightTheme.colors.grey(12)),
backgroundFocused: Brush = background,
backgroundPressed: Brush = SolidColor(IntUiLightTheme.colors.grey(13)),
backgroundPressed: Brush = SolidColor(IntUiLightTheme.colors.grey(11)),
backgroundHovered: Brush = background,
backgroundSelected: Brush = background,
backgroundSelected: Brush = SolidColor(IntUiLightTheme.colors.grey(13)),
backgroundSelectedDisabled: Brush = backgroundDisabled,
backgroundSelectedFocused: Brush = background,
backgroundSelectedPressed: Brush = background,
backgroundSelectedHovered: Brush = background,
backgroundSelectedFocused: Brush = backgroundSelected,
backgroundSelectedPressed: Brush = backgroundPressed,
backgroundSelectedHovered: Brush = backgroundSelected,
content: Color = IntUiLightTheme.colors.grey(1),
contentDisabled: Color = IntUiLightTheme.colors.grey(8),
contentFocused: Color = content,
Expand All @@ -49,12 +49,12 @@ public fun ChipColors.Companion.light(
contentSelectedPressed: Color = content,
contentSelectedHovered: Color = content,
border: Color = IntUiLightTheme.colors.grey(9),
borderDisabled: Color = IntUiLightTheme.colors.grey(6),
borderDisabled: Color = IntUiLightTheme.colors.grey(11),
borderFocused: Color = IntUiLightTheme.colors.blue(4),
borderPressed: Color = IntUiLightTheme.colors.grey(7),
borderHovered: Color = IntUiLightTheme.colors.grey(8),
borderSelected: Color = IntUiLightTheme.colors.blue(4),
borderSelectedDisabled: Color = borderSelected,
borderSelectedDisabled: Color = borderDisabled,
borderSelectedFocused: Color = borderSelected,
borderSelectedPressed: Color = borderSelected,
borderSelectedHovered: Color = borderSelected,
Expand Down Expand Up @@ -95,15 +95,15 @@ public fun ChipColors.Companion.light(
@Composable
public fun ChipColors.Companion.dark(
background: Brush = SolidColor(IntUiDarkTheme.colors.grey(2)),
backgroundDisabled: Brush = SolidColor(IntUiDarkTheme.colors.grey(5)),
backgroundDisabled: Brush = SolidColor(IntUiDarkTheme.colors.grey(4)),
backgroundFocused: Brush = background,
backgroundPressed: Brush = background,
backgroundPressed: Brush = SolidColor(IntUiDarkTheme.colors.grey(5)),
backgroundHovered: Brush = background,
backgroundSelected: Brush = background,
backgroundSelected: Brush = SolidColor(IntUiDarkTheme.colors.grey(3)),
backgroundSelectedDisabled: Brush = backgroundDisabled,
backgroundSelectedFocused: Brush = background,
backgroundSelectedPressed: Brush = background,
backgroundSelectedHovered: Brush = background,
backgroundSelectedFocused: Brush = backgroundSelected,
backgroundSelectedPressed: Brush = backgroundPressed,
backgroundSelectedHovered: Brush = backgroundSelected,
content: Color = IntUiDarkTheme.colors.grey(12),
contentDisabled: Color = IntUiDarkTheme.colors.grey(8),
contentFocused: Color = content,
Expand All @@ -120,7 +120,7 @@ public fun ChipColors.Companion.dark(
borderPressed: Color = IntUiDarkTheme.colors.grey(7),
borderHovered: Color = borderPressed,
borderSelected: Color = IntUiDarkTheme.colors.blue(6),
borderSelectedDisabled: Color = borderSelected,
borderSelectedDisabled: Color = borderDisabled,
borderSelectedFocused: Color = borderSelected,
borderSelectedPressed: Color = borderSelected,
borderSelectedHovered: Color = borderSelected,
Expand Down
7 changes: 4 additions & 3 deletions ui/api/ui.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@ public final class org/jetbrains/jewel/ui/Outline$Companion {
}

public final class org/jetbrains/jewel/ui/OutlineKt {
public static final fun focusOutline-FJfuzF0 (Landroidx/compose/ui/Modifier;Lorg/jetbrains/jewel/foundation/state/FocusableComponentState;Landroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier;
public static final fun focusOutline-FJfuzF0 (Landroidx/compose/ui/Modifier;ZLandroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier;
public static final fun focusOutline-AGcomas (Landroidx/compose/ui/Modifier;Lorg/jetbrains/jewel/foundation/state/FocusableComponentState;Landroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FFLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier;
public static final fun focusOutline-AGcomas (Landroidx/compose/ui/Modifier;ZLandroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FFLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier;
public static final fun outline-HYR8e34 (Landroidx/compose/ui/Modifier;Lorg/jetbrains/jewel/foundation/state/FocusableComponentState;Lorg/jetbrains/jewel/ui/Outline;Landroidx/compose/ui/graphics/Shape;Lorg/jetbrains/jewel/foundation/Stroke$Alignment;FLandroidx/compose/runtime/Composer;II)Landroidx/compose/ui/Modifier;
}

Expand Down Expand Up @@ -796,10 +796,11 @@ public final class org/jetbrains/jewel/ui/component/styling/ButtonColors$Compani
public final class org/jetbrains/jewel/ui/component/styling/ButtonMetrics {
public static final field $stable I
public static final field Companion Lorg/jetbrains/jewel/ui/component/styling/ButtonMetrics$Companion;
public synthetic fun <init> (Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (Landroidx/compose/foundation/shape/CornerSize;Landroidx/compose/foundation/layout/PaddingValues;JFFLkotlin/jvm/internal/DefaultConstructorMarker;)V
public fun equals (Ljava/lang/Object;)Z
public final fun getBorderWidth-D9Ej5fM ()F
public final fun getCornerSize ()Landroidx/compose/foundation/shape/CornerSize;
public final fun getFocusOutlineExpand-D9Ej5fM ()F
public final fun getMinSize-MYxV2XQ ()J
public final fun getPadding ()Landroidx/compose/foundation/layout/PaddingValues;
public fun hashCode ()I
Expand Down
6 changes: 4 additions & 2 deletions ui/src/main/kotlin/org/jetbrains/jewel/ui/Outline.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,22 @@ public fun Modifier.focusOutline(
outlineShape: Shape,
alignment: Stroke.Alignment = Stroke.Alignment.Outside,
outlineWidth: Dp = JewelTheme.globalMetrics.outlineWidth,
): Modifier = focusOutline(state.isFocused, outlineShape, alignment, outlineWidth)
expand: Dp = Dp.Unspecified,
): Modifier = focusOutline(state.isFocused, outlineShape, alignment, outlineWidth, expand)

@Composable
public fun Modifier.focusOutline(
showOutline: Boolean,
outlineShape: Shape,
alignment: Stroke.Alignment = Stroke.Alignment.Outside,
outlineWidth: Dp = JewelTheme.globalMetrics.outlineWidth,
expand: Dp = Dp.Unspecified,
): Modifier {
val outlineColors = JewelTheme.globalColors.outlines

return thenIf(showOutline) {
val outlineColor = outlineColors.focused
border(alignment, outlineWidth, outlineColor, outlineShape)
border(alignment, outlineWidth, outlineColor, outlineShape, expand)
}
}

Expand Down
8 changes: 4 additions & 4 deletions ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Button.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ public fun DefaultButton(
enabled = enabled,
interactionSource = interactionSource,
style = style,
content = content,
textStyle = textStyle,
content = content,
)
}

Expand All @@ -79,8 +79,8 @@ public fun OutlinedButton(
enabled = enabled,
interactionSource = interactionSource,
style = style,
content = content,
textStyle = textStyle,
content = content,
)
}

Expand All @@ -92,7 +92,7 @@ private fun ButtonImpl(
interactionSource: MutableInteractionSource,
style: ButtonStyle,
textStyle: TextStyle,
content: @Composable RowScope.() -> Unit,
content: @Composable (RowScope.() -> Unit),
) {
var buttonState by remember(interactionSource) {
mutableStateOf(ButtonState.of(enabled = enabled))
Expand Down Expand Up @@ -131,7 +131,7 @@ private fun ButtonImpl(
)
.background(colors.backgroundFor(buttonState).value, shape)
.border(Stroke.Alignment.Center, style.metrics.borderWidth, borderColor, shape)
.focusOutline(buttonState, shape),
.focusOutline(buttonState, shape, expand = style.metrics.focusOutlineExpand),
propagateMinConstraints = true,
) {
val contentColor by colors.contentFor(buttonState)
Expand Down
3 changes: 2 additions & 1 deletion ui/src/main/kotlin/org/jetbrains/jewel/ui/component/Chip.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import org.jetbrains.jewel.foundation.theme.LocalContentColor
import org.jetbrains.jewel.ui.component.styling.ChipStyle
import org.jetbrains.jewel.ui.focusOutline
import org.jetbrains.jewel.ui.theme.chipStyle
import org.jetbrains.jewel.ui.util.thenIf

@Composable
public fun Chip(
Expand Down Expand Up @@ -166,7 +167,7 @@ private fun ChipImpl(
modifier =
modifier
.background(colors.backgroundFor(chipState).value, shape)
.border(Stroke.Alignment.Center, borderWidth, borderColor, shape)
.thenIf(!chipState.isFocused) { border(Stroke.Alignment.Center, borderWidth, borderColor, shape) }
.focusOutline(chipState, shape)
.padding(style.metrics.padding),
verticalAlignment = Alignment.CenterVertically,
Expand Down
1 change: 1 addition & 0 deletions ui/src/main/kotlin/org/jetbrains/jewel/ui/component/styling/ButtonStyling.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ public class ButtonMetrics(
public val padding: PaddingValues,
public val minSize: DpSize,
public val borderWidth: Dp,
public val focusOutlineExpand: Dp,
) {
public companion object
}
Expand Down

0 comments on commit 588827d

Please sign in to comment.