library: Add a basic IconButton

miuix-kotlin-multiplatform · Oct 22, 2024 · b2d1e0d · b2d1e0d
1 parent 8ab80ea
commit b2d1e0d
Show file tree

Hide file tree

Showing 23 changed files with 107 additions and 39 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -5,5 +5,5 @@ plugins {
     alias(libs.plugins.compose.compiler) apply false
     alias(libs.plugins.jetbrains.compose) apply false
     alias(libs.plugins.kotlin.multiplatform) apply false
-    alias(libs.plugins.dokka) apply false
+    alias(libs.plugins.jetbrains.dokka) apply false
 }
diff --git a/composeApp/src/commonMain/kotlin/UITest.kt b/composeApp/src/commonMain/kotlin/UITest.kt
@@ -17,6 +17,7 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Favorite
 import androidx.compose.material.icons.rounded.Home
+import androidx.compose.material.icons.rounded.Menu
 import androidx.compose.material.icons.rounded.Settings
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -38,6 +39,7 @@ import kotlinx.coroutines.flow.debounce
 import kotlinx.coroutines.launch
 import top.yukonga.miuix.kmp.basic.FloatingActionButton
 import top.yukonga.miuix.kmp.basic.HorizontalPager
+import top.yukonga.miuix.kmp.basic.IconButton
 import top.yukonga.miuix.kmp.basic.MiuixScrollBehavior
 import top.yukonga.miuix.kmp.basic.NavigationBar
 import top.yukonga.miuix.kmp.basic.NavigationItem
@@ -47,6 +49,7 @@ import top.yukonga.miuix.kmp.basic.TopAppBar
 import top.yukonga.miuix.kmp.basic.rememberTopAppBarState
 import top.yukonga.miuix.kmp.icon.MiuixIcons
 import top.yukonga.miuix.kmp.icon.icons.GitHub
+import top.yukonga.miuix.kmp.theme.MiuixTheme
 import utils.FPSMonitor
 
 @OptIn(FlowPreview::class)
@@ -102,7 +105,19 @@ fun UITest(
             ) {
                 TopAppBar(
                     title = "Miuix",
-                    scrollBehavior = currentScrollBehavior
+                    scrollBehavior = currentScrollBehavior,
+                    actions = {
+                        IconButton(
+                            modifier = Modifier.padding(end = 12.dp),
+                            onClick = { }
+                        ) {
+                            Image(
+                                imageVector = Icons.Rounded.Menu,
+                                colorFilter = ColorFilter.tint(MiuixTheme.colorScheme.onBackground.copy(0.8f)),
+                                contentDescription = "Menu"
+                            )
+                        }
+                    },
                 )
             }
         },

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -19,6 +19,6 @@ jetbrains-compose-window-size = { module = "org.jetbrains.compose.material3:mate
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }
 android-library = { id = "com.android.library", version.ref = "androidGradlePlugin" }
 compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
-dokka = { id = "org.jetbrains.dokka", version.ref = "dokka" }
+jetbrains-dokka = { id = "org.jetbrains.dokka", version.ref = "dokka" }
 jetbrains-compose = { id = "org.jetbrains.compose", version.ref = "compose-plugin" }
 kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Box.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Box.kt
@@ -25,7 +25,7 @@ import androidx.compose.ui.util.fastForEachIndexed
 import kotlin.math.max
 
 /**
- * A box composable with Miuix style. A layout composable with [content].
+ * A [Box] composable with Miuix style. A layout composable with [content].
  *
  * The [Box] will size itself to fit the content, subject to the incoming constraints.
  * When children are smaller than the parent, by default they will be positioned inside

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt
@@ -22,14 +22,15 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
- * A button component with Miuix style.
+ * A [Button] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [Button].
  * @param text The text of the [Button].
  * @param onClick The callback when the [Button] is clicked.
  * @param enabled Whether the [Button] is enabled.
  * @param submit Whether the [Button] is a submit button.
  * @param cornerRadius The corner radius of the [Button].
+ * @param minWidth The minimum width of the [Button].
  * @param minHeight The minimum height of the [Button].
  */
 @Composable
@@ -40,6 +41,7 @@ fun Button(
     enabled: Boolean = true,
     submit: Boolean = false,
     cornerRadius: Dp = 16.dp,
+    minWidth: Dp = 58.dp,
     minHeight: Dp = 40.dp
 ) {
     val hapticFeedback = LocalHapticFeedback.current
@@ -58,7 +60,7 @@ fun Button(
     ) {
         Row(
             Modifier
-                .defaultMinSize(minWidth = 58.dp, minHeight = minHeight)
+                .defaultMinSize(minWidth = minWidth, minHeight = minHeight)
                 .padding(16.dp, 16.dp),
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
@@ -74,7 +76,7 @@ fun Button(
 }
 
 @Composable
-private fun getButtonColor(enabled: Boolean, submit: Boolean): Color {
+fun getButtonColor(enabled: Boolean, submit: Boolean): Color {
     return if (enabled) {
         if (submit) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.secondaryVariant
     } else {
@@ -83,7 +85,7 @@ private fun getButtonColor(enabled: Boolean, submit: Boolean): Color {
 }
 
 @Composable
-private fun getTextColor(enabled: Boolean, submit: Boolean): Color {
+fun getTextColor(enabled: Boolean, submit: Boolean): Color {
     return if (enabled) {
         if (submit) MiuixTheme.colorScheme.onPrimary else MiuixTheme.colorScheme.onSecondaryVariant
     } else {

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt
@@ -14,7 +14,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
- * A card component with Miuix style.
+ * A [Card] component with Miuix style.
  * Card contain contain content and actions that relate information about a subject.
  *
  * This [Card] does not handle input events

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt
@@ -35,7 +35,7 @@ import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 /**
- * A checkbox component with Miuix style.
+ * A [Checkbox] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [Checkbox].
  * @param checked The current state of the [Checkbox].

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/FloatingActionButton.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/FloatingActionButton.kt
@@ -17,7 +17,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
- * A floating action button component with Miuix style.
+ * A [FloatingActionButton] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [FloatingActionButton].
  * @param onClick The callback when the [FloatingActionButton] is clicked.

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/HorizontalPager.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/HorizontalPager.kt
@@ -15,7 +15,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 
 /**
- * A horizontal pager with Miuix style.
+ * A [HorizontalPager] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [HorizontalPager].
  * @param pagerState The state of the [HorizontalPager].

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/IconButton.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/IconButton.kt
@@ -0,0 +1,56 @@
+package top.yukonga.miuix.kmp.basic
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
+
+/**
+ * A [IconButton] component with Miuix style.
+ *
+ * Icon buttons help people take supplementary actions with a single tap. They’re used when a
+ * compact button is required, such as in a toolbar or image list.
+ *
+ * @param onClick The callback when the [IconButton] is clicked.
+ * @param modifier The modifier to be applied to the [IconButton]
+ * @param enabled Whether the [IconButton] is enabled.
+ * @param cornerRadius The corner radius of of the [IconButton].
+ * @param backgroundColor The background color of of the [IconButton].
+ * @param minHeight The minimum height of of the [IconButton].
+ * @param minWidth The minimum width of the [IconButton].
+ * @param content The content of this icon button, typically an [Image].
+ */
+@Composable
+fun IconButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    cornerRadius: Dp = 40.dp,
+    backgroundColor: Color = Color.Unspecified,
+    minHeight: Dp = 40.dp,
+    minWidth: Dp = 40.dp,
+    content: @Composable () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .defaultMinSize(minWidth = minWidth, minHeight = minHeight)
+            .clip(SmoothRoundedCornerShape(cornerRadius))
+            .background(color = backgroundColor)
+            .clickable(
+                onClick = onClick,
+                enabled = enabled,
+                role = Role.Button
+            ),
+        contentAlignment = Alignment.Center
+    ) {
+        content()
+    }
+}
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/NavigationBar.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/NavigationBar.kt
@@ -42,7 +42,7 @@ import top.yukonga.miuix.kmp.utils.Platform
 import top.yukonga.miuix.kmp.utils.platform
 
 /**
- * A navigation bar that with 2 to 5 items.
+ * A [NavigationBar] that with 2 to 5 items.
  *
  * @param modifier The modifier to be applied to the [NavigationBar].
  * @param items The items of the [NavigationBar].

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Scaffold.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Scaffold.kt
@@ -29,20 +29,14 @@ import androidx.compose.ui.util.fastMap
 import androidx.compose.ui.util.fastMapNotNull
 import androidx.compose.ui.util.fastMaxBy
 import top.yukonga.miuix.kmp.theme.MiuixTheme
-import top.yukonga.miuix.kmp.utils.MiuixPopupUtil
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.MiuixPopupHost
 
 /**
- * A scaffold component with Miuix style.
- * Scaffold implements the basic material design visual layout structure.
+ * A [Scaffold] component with Miuix style.
  *
- * This component provides API to put together several material components to construct your screen,
- * by ensuring proper layout strategy for them and collecting necessary data so these components
- * will work together correctly.
+ * This implements the basic miuix design visual layout structure.
  *
  * To show a [Snackbar], use [SnackbarHostState.showSnackbar].
- * To show a MiuixDialog, use [MiuixPopupUtil.showDialog].
- * To show a MiuixPopup, use [MiuixPopupUtil.showPopup].
  *
  * @param modifier the [Modifier] to be applied to this scaffold.
  * @param topBar top app bar of the screen.

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt
@@ -35,7 +35,7 @@ import top.yukonga.miuix.kmp.utils.BackHandler
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
- * A search bar with Miuix style.
+ * A [SearchBar] component with Miuix style.
  *
  * @param modifier the [Modifier] to be applied to the [SearchBar].
  * @param inputField the input field to input a query in the [SearchBar].

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Slider.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Slider.kt
@@ -29,7 +29,7 @@ import kotlin.math.pow
 import kotlin.math.round
 
 /**
- * A slider component with Miuix style.
+ * A [Slider] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [Slider].
  * @param progress The current progress of the [Slider].

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SmallTitle.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SmallTitle.kt
@@ -11,10 +11,10 @@ import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 /**
- * A title component with Miuix style.
+ * A [SmallTitle] with Miuix style.
  *
  * @param modifier The modifier to be applied to the [SmallTitle].
- * @param text The text to be displayed in the title.
+ * @param text The text to be displayed in the [SmallTitle].
  * @param textColor The color of the [SmallTitle].
  * @param insideMargin The margin inside the [SmallTitle].
  */

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Surface.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Surface.kt
@@ -16,7 +16,7 @@ import androidx.compose.ui.graphics.graphicsLayer
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 /**
- * A surface component with Miuix style.
+ * A [Surface] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [Surface].
  * @param shape The shape of the [Surface].
@@ -50,7 +50,7 @@ fun Surface(
 }
 
 /**
- * A surface component with Miuix style.
+ * A [Surface] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [Surface].
  * @param onClick The callback when the [Surface] is clicked.

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt
@@ -34,7 +34,7 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 import kotlin.math.absoluteValue
 
 /**
- * A switch with Miuix style.
+ * A [Switch] component with Miuix style.
  *
  * @param modifier The modifier to be applied to the [Switch].
  * @param checked The checked state of the [Switch].

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Text.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Text.kt
@@ -24,7 +24,8 @@ import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
 /**
- * A text component with Miuix style.
+ * A [Text] component with Miuix style.
+ *
  * High level element that displays text and provides semantics / accessibility information.
  *
  * @param text the text to be displayed

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TextField.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TextField.kt
@@ -34,7 +34,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 
 /**
- * A text field component with Miuix style.
+ * A [TextField] component with Miuix style.
  *
  * @param value The input [TextFieldValue] to be shown in the text field.
  * @param onValueChange The callback that is triggered when the input service updates values in

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TopAppBar.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/TopAppBar.kt
@@ -59,7 +59,7 @@ import kotlin.math.abs
 import kotlin.math.roundToInt
 
 /**
- * A top app bar that can collapse and expand based on the scroll position of the content below it.
+ * A [TopAppBar] that can collapse and expand based on the scroll position of the content below it.
  *
  * The [TopAppBar] can be configured with a title, a navigation icon, and action icons. The large
  * title will collapse when the content is scrolled up and expand when the content is scrolled down.

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperArrow.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperArrow.kt
@@ -7,9 +7,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.BlendMode
-import androidx.compose.ui.graphics.BlendModeColorFilter
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
@@ -47,6 +46,7 @@ fun SuperArrow(
     enabled: Boolean = true
 ) {
     val updatedOnClick by rememberUpdatedState(onClick)
+    val actionColor = if (enabled) MiuixTheme.colorScheme.onSurfaceVariantActions else MiuixTheme.colorScheme.disabledOnSecondaryVariant
     BasicComponent(
         modifier = modifier,
         insideMargin = insideMargin,
@@ -60,7 +60,7 @@ fun SuperArrow(
                 Text(
                     text = rightText,
                     fontSize = MiuixTheme.textStyles.body2.fontSize,
-                    color = MiuixTheme.colorScheme.onSurfaceVariantActions,
+                    color = actionColor,
                     textAlign = TextAlign.End,
                 )
             }
@@ -70,7 +70,7 @@ fun SuperArrow(
                     .size(10.dp, 16.dp),
                 imageVector = MiuixIcons.ArrowRight,
                 contentDescription = null,
-                colorFilter = BlendModeColorFilter(MiuixTheme.colorScheme.onSurfaceVariantActions, BlendMode.SrcIn),
+                colorFilter = ColorFilter.tint(actionColor),
             )
         },
         onClick = {

diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt
@@ -38,7 +38,7 @@ import top.yukonga.miuix.kmp.utils.getRoundedCorner
 import top.yukonga.miuix.kmp.utils.getWindowSize
 
 /**
- * A dialog with a title, a summary, and a content.
+ * A dialog with a title, a summary, and other contents.
  *
  * @param modifier The modifier to be applied to the [SuperDialog].
  * @param title The title of the [SuperDialog].