Tooltips (#154)

* Added tooltips wip * fixes * fixes * fixes * happy lint * fixed border clip * fixed pr comments --------- Co-authored-by: davide magli <[email protected]>
JetBrains · Oct 4, 2023 · c0a69b5 · c0a69b5
1 parent b71e94f
commit c0a69b5
Show file tree

Hide file tree

Showing 34 changed files with 334 additions and 109 deletions.
diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Button.kt b/core/src/main/kotlin/org/jetbrains/jewel/Button.kt
@@ -43,7 +43,7 @@ fun DefaultButton(
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: ButtonStyle = IntelliJTheme.defaultButtonStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     content: @Composable RowScope.() -> Unit,
 ) {
     ButtonImpl(
@@ -64,7 +64,7 @@ fun OutlinedButton(
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: ButtonStyle = IntelliJTheme.outlinedButtonStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     content: @Composable RowScope.() -> Unit,
 ) {
     ButtonImpl(

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Checkbox.kt b/core/src/main/kotlin/org/jetbrains/jewel/Checkbox.kt
@@ -315,7 +315,7 @@ private fun CheckboxImpl(
             val contentColor by colors.contentFor(checkboxState)
             CompositionLocalProvider(
                 LocalTextStyle provides textStyle.copy(color = contentColor.takeOrElse { textStyle.color }),
-                LocalContentColor provides contentColor.takeOrElse { textStyle.color },
+                LocalContentColor provides contentColor.takeOrElse { LocalContentColor.current },
             ) {
                 content()
             }

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/CircularProgressIndicator.kt b/core/src/main/kotlin/org/jetbrains/jewel/CircularProgressIndicator.kt
@@ -75,7 +75,7 @@ private fun CircularProgressIndicatorImpl(
     LaunchedEffect(style.color) {
         val frames = frameRetriever(style.color.takeOrElse { defaultColor })
         while (true) {
-            for (i in 0 until frames.size) {
+            for (i in frames.indices) {
                 currentFrame = frames[i] to i
                 isFrameReady = true
                 delay(style.frameTime.inWholeMilliseconds)

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/GroupHeader.kt b/core/src/main/kotlin/org/jetbrains/jewel/GroupHeader.kt
@@ -2,29 +2,26 @@ package org.jetbrains.jewel
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import org.jetbrains.jewel.styling.GroupHeaderStyle
 import org.jetbrains.jewel.styling.LocalGroupHeaderStyle
 
 @Composable
 fun GroupHeader(
     text: String,
     modifier: Modifier = Modifier,
+    textColor: Color = Color.Unspecified,
     style: GroupHeaderStyle = LocalGroupHeaderStyle.current,
 ) {
-    CompositionLocalProvider(
-        LocalContentColor provides style.colors.content,
-    ) {
-        Row(modifier, verticalAlignment = Alignment.CenterVertically) {
-            Text(text)
-            Divider(
-                color = style.colors.divider,
-                orientation = Orientation.Horizontal,
-                startIndent = style.metrics.indent,
-                thickness = style.metrics.dividerThickness,
-            )
-        }
+    Row(modifier, verticalAlignment = Alignment.CenterVertically) {
+        Text(text, color = textColor)
+        Divider(
+            color = style.colors.divider,
+            orientation = Orientation.Horizontal,
+            startIndent = style.metrics.indent,
+            thickness = style.metrics.dividerThickness,
+        )
     }
 }
diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJComponentStyling.kt
@@ -17,6 +17,7 @@ import org.jetbrains.jewel.styling.ScrollbarStyle
 import org.jetbrains.jewel.styling.TabStyle
 import org.jetbrains.jewel.styling.TextAreaStyle
 import org.jetbrains.jewel.styling.TextFieldStyle
+import org.jetbrains.jewel.styling.TooltipStyle
 
 @Stable
 class IntelliJComponentStyling(
@@ -38,6 +39,7 @@ class IntelliJComponentStyling(
     val textAreaStyle: TextAreaStyle,
     val textFieldStyle: TextFieldStyle,
     val circularProgressStyle: CircularProgressStyle,
+    val tooltipStyle: TooltipStyle,
 ) {
 
     override fun equals(other: Any?): Boolean {
@@ -64,6 +66,7 @@ class IntelliJComponentStyling(
         if (defaultTabStyle != other.defaultTabStyle) return false
         if (editorTabStyle != other.editorTabStyle) return false
         if (circularProgressStyle != other.circularProgressStyle) return false
+        if (tooltipStyle != other.tooltipStyle) return false
 
         return true
     }
@@ -87,6 +90,7 @@ class IntelliJComponentStyling(
         result = 31 * result + defaultTabStyle.hashCode()
         result = 31 * result + editorTabStyle.hashCode()
         result = 31 * result + circularProgressStyle.hashCode()
+        result = 31 * result + tooltipStyle.hashCode()
         return result
     }
 

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJTheme.kt
@@ -34,12 +34,14 @@ import org.jetbrains.jewel.styling.LocalRadioButtonStyle
 import org.jetbrains.jewel.styling.LocalScrollbarStyle
 import org.jetbrains.jewel.styling.LocalTextAreaStyle
 import org.jetbrains.jewel.styling.LocalTextFieldStyle
+import org.jetbrains.jewel.styling.LocalTooltipStyle
 import org.jetbrains.jewel.styling.MenuStyle
 import org.jetbrains.jewel.styling.RadioButtonStyle
 import org.jetbrains.jewel.styling.ScrollbarStyle
 import org.jetbrains.jewel.styling.TabStyle
 import org.jetbrains.jewel.styling.TextAreaStyle
 import org.jetbrains.jewel.styling.TextFieldStyle
+import org.jetbrains.jewel.styling.TooltipStyle
 
 interface IntelliJTheme {
 
@@ -59,7 +61,7 @@ interface IntelliJTheme {
             @ReadOnlyComposable
             get() = LocalGlobalMetrics.current
 
-        val defaultTextStyle: TextStyle
+        val textStyle: TextStyle
             @Composable
             @ReadOnlyComposable
             get() = LocalTextStyle.current
@@ -182,6 +184,11 @@ interface IntelliJTheme {
             @Composable
             @ReadOnlyComposable
             get() = LocalCircularProgressStyle.current
+
+        val tooltipStyle: TooltipStyle
+            @Composable
+            @ReadOnlyComposable
+            get() = LocalTooltipStyle.current
     }
 }
 
@@ -198,12 +205,10 @@ fun IntelliJTheme(
 
 @Composable
 fun IntelliJTheme(theme: IntelliJThemeDefinition, content: @Composable () -> Unit) {
-    val defaultTextStyle = theme.defaultTextStyle
-
     CompositionLocalProvider(
         LocalIsDarkTheme provides theme.isDark,
-        LocalContentColor provides defaultTextStyle.color,
-        LocalTextStyle provides defaultTextStyle,
+        LocalContentColor provides theme.contentColor,
+        LocalTextStyle provides theme.defaultTextStyle,
         LocalGlobalColors provides theme.globalColors,
         LocalGlobalMetrics provides theme.globalMetrics,
         content = content,

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/IntelliJThemeDefinition.kt b/core/src/main/kotlin/org/jetbrains/jewel/IntelliJThemeDefinition.kt
@@ -1,6 +1,7 @@
 package org.jetbrains.jewel
 
 import androidx.compose.runtime.Immutable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 
 @Immutable
@@ -10,6 +11,7 @@ interface IntelliJThemeDefinition {
     val globalColors: GlobalColors
     val globalMetrics: GlobalMetrics
     val defaultTextStyle: TextStyle
+    val contentColor: Color
 
     val colorPalette: IntelliJThemeColorPalette
     val iconData: IntelliJThemeIconData

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/LabelledTextField.kt b/core/src/main/kotlin/org/jetbrains/jewel/LabelledTextField.kt
@@ -22,11 +22,11 @@ import androidx.compose.ui.unit.offset
 import org.jetbrains.jewel.styling.LabelledTextFieldStyle
 
 /**
- * @param placeholder the optional placeholder to be displayed over the component when
- * the [value] is empty.
- * @param hint the optional hint to be displayed underneath the component. By default it
- * will have a greyed out appearance and smaller text.
  * @param label the label to display above the component.
+ * @param hint the optional hint to be displayed underneath the component.
+ *     By default it will have a greyed out appearance and smaller text.
+ * @param placeholder the optional placeholder to be displayed over the
+ *     component when the [value] is empty.
  */
 @Composable
 fun LabelledTextField(
@@ -48,7 +48,7 @@ fun LabelledTextField(
     keyboardActions: KeyboardActions = KeyboardActions(),
     onTextLayout: (TextLayoutResult) -> Unit = {},
     style: LabelledTextFieldStyle = IntelliJTheme.labelledTextFieldStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value)) }
@@ -86,11 +86,11 @@ fun LabelledTextField(
 }
 
 /**
- * @param placeholder the optional placeholder to be displayed over the component when
- * the [value] is empty.
- * @param hint the optional hint to be displayed underneath the component. By default it
- * will have a greyed out appearance and smaller text.
  * @param label the label to display above the component.
+ * @param hint the optional hint to be displayed underneath the component.
+ *     By default it will have a greyed out appearance and smaller text.
+ * @param placeholder the optional placeholder to be displayed over the
+ *     component when the [value] is empty.
  */
 @Composable
 fun LabelledTextField(
@@ -112,18 +112,12 @@ fun LabelledTextField(
     keyboardActions: KeyboardActions = KeyboardActions(),
     onTextLayout: (TextLayoutResult) -> Unit = {},
     style: LabelledTextFieldStyle = IntelliJTheme.labelledTextFieldStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     LabelledTextFieldLayout(
         modifier = modifier,
-        label = {
-            CompositionLocalProvider(
-                LocalTextStyle provides style.textStyles.label,
-                LocalContentColor provides style.colors.label,
-                content = label,
-            )
-        },
+        label = label,
         textField = {
             TextField(
                 value = value,

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/RadioButton.kt b/core/src/main/kotlin/org/jetbrains/jewel/RadioButton.kt
@@ -47,7 +47,7 @@ fun RadioButton(
     outline: Outline = Outline.None,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: RadioButtonStyle = IntelliJTheme.radioButtonStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
 ) {
     RadioButtonImpl(
         selected = selected,
@@ -74,7 +74,7 @@ fun RadioButtonRow(
     outline: Outline = Outline.None,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: RadioButtonStyle = IntelliJTheme.radioButtonStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
 ) {
     RadioButtonImpl(
         selected = selected,
@@ -101,7 +101,7 @@ fun RadioButtonRow(
     outline: Outline = Outline.None,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     style: RadioButtonStyle = IntelliJTheme.radioButtonStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     content: @Composable RowScope.() -> Unit,
 ) {
     RadioButtonImpl(
@@ -183,7 +183,7 @@ private fun RadioButtonImpl(
             val contentColor by colors.contentFor(radioButtonState)
             CompositionLocalProvider(
                 LocalTextStyle provides textStyle.copy(color = contentColor.takeOrElse { textStyle.color }),
-                LocalContentColor provides contentColor.takeOrElse { textStyle.color },
+                LocalContentColor provides contentColor.takeOrElse { textStyle.color.takeOrElse { LocalContentColor.current } },
             ) {
                 content()
             }

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Tabs.kt b/core/src/main/kotlin/org/jetbrains/jewel/Tabs.kt
@@ -30,6 +30,7 @@ import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.takeOrElse
 import androidx.compose.ui.input.pointer.PointerEventType
 import androidx.compose.ui.input.pointer.isTertiary
 import androidx.compose.ui.input.pointer.onPointerEvent
@@ -77,7 +78,7 @@ internal fun TabImpl(
 
     CompositionLocalProvider(
         LocalIndication provides NoIndication,
-        LocalContentColor provides tabStyle.colors.contentFor(tabState).value,
+        LocalContentColor provides tabStyle.colors.contentFor(tabState).value.takeOrElse { LocalContentColor.current },
     ) {
         val labelAlpha by tabStyle.contentAlpha.labelFor(tabState)
         val iconAlpha by tabStyle.contentAlpha.iconFor(tabState)

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Text.kt b/core/src/main/kotlin/org/jetbrains/jewel/Text.kt
@@ -35,7 +35,7 @@ fun Text(
     softWrap: Boolean = true,
     maxLines: Int = Int.MAX_VALUE,
     onTextLayout: (TextLayoutResult) -> Unit = {},
-    style: TextStyle = IntelliJTheme.defaultTextStyle,
+    style: TextStyle = IntelliJTheme.textStyle,
 ) {
     Text(
         AnnotatedString(text),
@@ -76,13 +76,11 @@ fun Text(
     maxLines: Int = Int.MAX_VALUE,
     inlineContent: Map<String, InlineTextContent> = emptyMap(),
     onTextLayout: (TextLayoutResult) -> Unit = {},
-    style: TextStyle = IntelliJTheme.defaultTextStyle,
+    style: TextStyle = IntelliJTheme.textStyle,
 ) {
     val textColor = color.takeOrElse {
         style.color.takeOrElse {
-            LocalContentColor.current.takeOrElse {
-                LocalTextStyle.current.color
-            }
+            LocalContentColor.current
         }
     }
 

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/TextArea.kt b/core/src/main/kotlin/org/jetbrains/jewel/TextArea.kt
@@ -46,7 +46,7 @@ fun TextArea(
     maxLines: Int = Int.MAX_VALUE,
     onTextLayout: (TextLayoutResult) -> Unit = {},
     style: TextAreaStyle = IntelliJTheme.textAreaStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = value)) }
@@ -102,7 +102,7 @@ fun TextArea(
     maxLines: Int = Int.MAX_VALUE,
     onTextLayout: (TextLayoutResult) -> Unit = {},
     style: TextAreaStyle = IntelliJTheme.textAreaStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     val minSize = style.metrics.minSize

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/TextField.kt b/core/src/main/kotlin/org/jetbrains/jewel/TextField.kt
@@ -104,7 +104,7 @@ fun TextField(
     keyboardActions: KeyboardActions = KeyboardActions(),
     onTextLayout: (TextLayoutResult) -> Unit = {},
     style: TextFieldStyle = IntelliJTheme.textFieldStyle,
-    textStyle: TextStyle = IntelliJTheme.defaultTextStyle,
+    textStyle: TextStyle = IntelliJTheme.textStyle,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     InputField(

diff --git a/core/src/main/kotlin/org/jetbrains/jewel/Tooltip.kt b/core/src/main/kotlin/org/jetbrains/jewel/Tooltip.kt
@@ -0,0 +1,53 @@
+package org.jetbrains.jewel
+
+import androidx.compose.foundation.TooltipArea
+import androidx.compose.foundation.TooltipPlacement
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import org.jetbrains.jewel.styling.TooltipStyle
+
+@Composable fun Tooltip(
+    tooltip: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    tooltipPlacement: TooltipPlacement = TooltipPlacement.ComponentRect(
+        alignment = Alignment.CenterEnd,
+        anchor = Alignment.BottomEnd,
+        offset = DpOffset(4.dp, 4.dp),
+    ),
+    style: TooltipStyle = IntelliJTheme.tooltipStyle,
+    content: @Composable () -> Unit,
+) {
+    TooltipArea(
+        tooltip = {
+            CompositionLocalProvider(
+                LocalContentColor provides style.colors.content,
+            ) {
+                Box(
+                    modifier = Modifier.background(
+                        color = style.colors.background,
+                        shape = RoundedCornerShape(style.metrics.cornerSize),
+                    ).border(
+                        width = style.metrics.borderWidth,
+                        color = style.colors.border,
+                        shape = RoundedCornerShape(style.metrics.cornerSize),
+                    ).padding(style.metrics.contentPadding),
+                ) {
+                    tooltip()
+                }
+            }
+        },
+        modifier = modifier,
+        delayMillis = style.metrics.showDelay.inWholeMilliseconds.toInt(),
+        tooltipPlacement = tooltipPlacement,
+        content = content,
+    )
+}