@momo-kits/native-kits 0.162.2-beta.22-debug → 0.162.2-beta.23-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.162.2-beta.22-debug"
+        version = "0.162.2-beta.23-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Button.kt

@@ -20,8 +20,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -145,10 +143,9 @@ fun RenderIcon(
     icon: String = "",
     forceLoading: Boolean = false,
     textColor: Color? = null,
-    iconOnly: Boolean = false,
 ) {
     val iconSize = remember(size) { getIconSize(size) }
-    val margin = remember(size, iconOnly) { if (iconOnly) 0.dp else getIconSpace(size) }
+    val margin = remember(size) { getIconSpace(size) }
     val color = if (useTintColor) textColor else Color.Unspecified
 
     val modifier = Modifier.padding(
@@ -249,12 +246,6 @@ fun getButtonBackgroundColor(
 private fun Color.withLoading(loading: Boolean): Color =
     this.copy(alpha = if (loading) 0.75f else 1f)
 
-/**
- * When [iconOnly] is true the label is hidden and the button collapses to a compact,
- * icon-sized box (it ignores [isFull] and always wraps its content). [title] stays
- * required and is exposed as the button's accessibility label. Supply the glyph via
- * [iconLeft] (preferred) or [iconRight]; while [loading] the spinner replaces the icon.
- */
 @Composable
 fun Button(
     onClick: () -> Unit,
@@ -266,7 +257,6 @@ fun Button(
     loading: Boolean = false,
     useTintColor: Boolean = true,
     isFull: Boolean = true,
-    iconOnly: Boolean = false,
     modifier: Modifier = Modifier,
 ) {
     val radius = remember(size) { size.value.radius }
@@ -274,7 +264,6 @@ fun Button(
     val loadingOnLeft = remember(iconLeft, iconRight) {
         shouldLoadingOnLeft(iconLeft, iconRight)
     }
-    val iconOnlyIcon = remember(iconLeft, iconRight) { iconLeft.ifEmpty { iconRight } }
 
     val sizeSpecs = remember(size) { size.value }
 
@@ -313,7 +302,7 @@ fun Button(
     val bgColor = getButtonBackgroundColor(loading, type)
     val textColor = getTextColor(loading, type)
 
-    val rootModifier = if (isFull && !iconOnly) {
+    val rootModifier = if (isFull) {
         Modifier
             .fillMaxWidth()
             .wrapContentHeight()
@@ -322,11 +311,7 @@ fun Button(
     }
 
     Box(
-        modifier = rootModifier
-            .then(clickableModifier)
-            .conditional(iconOnly) {
-                semantics(mergeDescendants = true) { contentDescription = title }
-            },
+        modifier = rootModifier.then(clickableModifier),
         contentAlignment = Alignment.Center
     ) {
         // Visual background (shrinks on press)
@@ -349,35 +334,23 @@ fun Button(
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
         ) {
-            if (iconOnly) {
-                RenderIcon(
-                    size = size,
-                    isIconLeft = true,
-                    useTintColor = useTintColor,
-                    icon = iconOnlyIcon,
-                    forceLoading = loading,
-                    textColor = textColor,
-                    iconOnly = true
-                )
-            } else {
-                RenderIcon(
-                    size = size,
-                    isIconLeft = true,
-                    useTintColor = useTintColor,
-                    icon = iconLeft,
-                    forceLoading = loading && loadingOnLeft,
-                    textColor = textColor
-                )
-                RenderTitle(size, title, textColor = textColor)
-                RenderIcon(
-                    size = size,
-                    isIconLeft = false,
-                    useTintColor = useTintColor,
-                    icon = iconRight,
-                    forceLoading = loading && !loadingOnLeft,
-                    textColor = textColor
-                )
-            }
+            RenderIcon(
+                size = size,
+                isIconLeft = true,
+                useTintColor = useTintColor,
+                icon = iconLeft,
+                forceLoading = loading && loadingOnLeft,
+                textColor = textColor
+            )
+            RenderTitle(size, title, textColor = textColor)
+            RenderIcon(
+                size = size,
+                isIconLeft = false,
+                useTintColor = useTintColor,
+                icon = iconRight,
+                forceLoading = loading && !loadingOnLeft,
+                textColor = textColor
+            )
         }
     }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/IconButton.kt

@@ -12,12 +12,14 @@ 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.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 
 data class IconSpecs(
@@ -46,8 +48,29 @@ enum class IconSize(val value: IconSpecs) {
     )
 }
 
-// Pre-computed shape to avoid repeated creation
-private val iconButtonShape = RoundedCornerShape(Radius.XL)
+enum class IconButtonShape {
+    CIRCLE,
+    SQUARE,
+    RECTANGLE
+}
+
+// Resolved footprint + corner radius for a (size, shape) pair.
+data class IconButtonGeometry(
+    val width: Dp,
+    val height: Dp,
+    val radius: Dp
+)
+
+// CIRCLE keeps the square footprint fully rounded (legacy default); SQUARE/RECTANGLE use the
+// standard button corner (Radius.S) and RECTANGLE widens the footprint so it reads horizontal.
+internal fun resolveIconButtonGeometry(size: IconSize, shape: IconButtonShape): IconButtonGeometry {
+    val base = size.value.height
+    return when (shape) {
+        IconButtonShape.CIRCLE -> IconButtonGeometry(base, base, size.value.radius)
+        IconButtonShape.SQUARE -> IconButtonGeometry(base, base, Radius.S)
+        IconButtonShape.RECTANGLE -> IconButtonGeometry(base + Spacing.S, base, Radius.S)
+    }
+}
 
 // Cache for icon sizes to avoid repeated calculations
 private val iconSizeMap = mapOf(
@@ -56,34 +79,34 @@ private val iconSizeMap = mapOf(
 )
 
 @Composable
-internal fun getIconStyle(type: ButtonType, color: Color? = null): Modifier {
+internal fun getIconStyle(type: ButtonType, shape: Shape, color: Color? = null): Modifier {
     val theme = AppTheme.current
 
-    return remember(type, color, theme) {
+    return remember(type, shape, color, theme) {
         when (type) {
             ButtonType.DISABLED -> Modifier
-                .background(theme.colors.background.disable, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.background.disable, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.PRIMARY -> Modifier
-                .background(theme.colors.primary, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.primary, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.SECONDARY -> Modifier
-                .background(theme.colors.background.surface, iconButtonShape)
-                .border(1.dp, theme.colors.border.default, iconButtonShape)
+                .background(theme.colors.background.surface, shape)
+                .border(1.dp, theme.colors.border.default, shape)
 
             ButtonType.OUTLINE -> Modifier
-                .background(theme.colors.background.surface, iconButtonShape)
-                .border(1.dp, color ?: theme.colors.primary, iconButtonShape)
+                .background(theme.colors.background.surface, shape)
+                .border(1.dp, color ?: theme.colors.primary, shape)
 
             ButtonType.TONAL -> Modifier
-                .background(theme.colors.background.tonal, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.background.tonal, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.DANGER -> Modifier
-                .background(theme.colors.error.primary, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.error.primary, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.TEXT -> Modifier
         }
@@ -103,6 +126,7 @@ fun IconButton(
     onClick: () -> Unit,
     type: ButtonType = ButtonType.PRIMARY,
     size: IconSize = IconSize.SMALL,
+    shape: IconButtonShape = IconButtonShape.CIRCLE,
     icon: String = "",
 ) {
     // Memoize icon size calculation
@@ -115,19 +139,22 @@ fun IconButton(
         type != ButtonType.DISABLED
     }
 
-    // Memoize radius for clipping
-    val radius = remember(size) {
-        size.value.radius
+    // Memoize footprint + corner shape for the requested shape
+    val geometry = remember(size, shape) {
+        resolveIconButtonGeometry(size, shape)
+    }
+    val cornerShape = remember(geometry.radius) {
+        RoundedCornerShape(geometry.radius)
     }
 
     Box(
         modifier = Modifier
-            .size(size.value.size)
-            .then(getIconStyle(type))
+            .size(width = geometry.width, height = geometry.height)
+            .then(getIconStyle(type, cornerShape))
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
-            .clip(RoundedCornerShape(radius))
+            .clip(cornerShape)
             .clickable(enabled = isEnabled, onClick = onClick),
         contentAlignment = Alignment.Center
     ) {

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.2-beta.22
+version=0.162.2-beta.23
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Button/Button.swift

@@ -125,12 +125,7 @@ public struct Button: View {
     var iconRight: AnyView?
     var isFull: Bool
     var loading: Bool
-    var iconOnly: Bool
 
-    /// When `iconOnly` is true the label is hidden and the button collapses to a compact,
-    /// icon-sized box (it ignores `isFull`). `title` stays required and is exposed as the
-    /// accessibility label. Supply the glyph via `iconLeft` (preferred) or `iconRight`;
-    /// while `loading` the spinner replaces the icon.
     public init(
         title: String = "",
         action: @escaping () -> Void,
@@ -139,8 +134,7 @@ public struct Button: View {
         iconLeft: AnyView? = nil,
         iconRight: AnyView? = nil,
         isFull: Bool = true,
-        loading: Bool = false,
-        iconOnly: Bool = false
+        loading: Bool = false
     ) {
         self.title = title
         self.action = action
@@ -150,7 +144,6 @@ public struct Button: View {
         self.iconRight = iconRight
         self.isFull = isFull
         self.loading = loading
-        self.iconOnly = iconOnly
     }
 
     private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
@@ -173,46 +166,35 @@ public struct Button: View {
         let border = type.borderColor
         let borderWidth = type.borderWidth
 
-        let button = SwiftUI.Button(action: {
+        SwiftUI.Button(action: {
             if !loading, type != .disabled {
                 action()
             }
         }) {
             HStack(spacing: size.iconSpacing) {
-                if iconOnly {
-                    if loading {
-                        LottieView(name: "lottie_circle_loader", loopMode: .loop)
-                            .frame(width: size.iconSize, height: size.iconSize)
-                            .colorMultiply(fg)
-
-                    } else if let icon = iconLeft ?? iconRight {
-                        icon.frame(width: size.iconSize, height: size.iconSize)
-                    }
-                } else {
-                    if loading && loadingOnLeft {
-                        LottieView(name: "lottie_circle_loader", loopMode: .loop)
-                            .frame(width: size.iconSize, height: size.iconSize)
-                            .colorMultiply(fg)
-
-                    } else if let iconLeft = iconLeft {
-                        iconLeft.frame(width: size.iconSize, height: size.iconSize)
-                    }
-
-                    MomoText(title, typography: size.typographyStyle, color: fg)
-                        .lineLimit(1)
-                        .truncationMode(.tail)
-
-                    if loading && !loadingOnLeft {
-                        LottieView(name: "lottie_circle_loader", loopMode: .loop)
-                            .frame(width: size.iconSize, height: size.iconSize)
-                            .colorMultiply(fg)
-
-                    } else if let iconRight = iconRight {
-                        iconRight.frame(width: size.iconSize, height: size.iconSize)
-                    }
+                if loading && loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
+
+                } else if let iconLeft = iconLeft {
+                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
+                }
+
+                MomoText(title, typography: size.typographyStyle, color: fg)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+
+                if loading && !loadingOnLeft {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: size.iconSize, height: size.iconSize)
+                        .colorMultiply(fg)
+
+                } else if let iconRight = iconRight {
+                    iconRight.frame(width: size.iconSize, height: size.iconSize)
                 }
             }
-            .frame(maxWidth: isFull && !iconOnly ? .infinity : nil)
+            .frame(maxWidth: isFull ? .infinity : nil)
             .padding(.horizontal, size.padding)
             .frame(height: size.height)
             .background(bg)
@@ -224,11 +206,5 @@ public struct Button: View {
             .opacity(loading ? 0.75 : 1)
         }
         .disabled(type == .disabled || loading)
-
-        if iconOnly {
-            button.accessibilityLabel(Text(title))
-        } else {
-            button
-        }
     }
 }

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.2-beta.22-debug",
+  "version": "0.162.2-beta.23-debug",
   "private": false,
+  "dependencies": {},
+  "devDependencies": {},
   "license": "MoMo"
 }