Add iconOnly property to buttons. Change default Icon size to 16dp.

Author: Konyaco

example/src/jvmMain/kotlin/com/konyaco/fluent/example/Main.kt

@@ -206,17 +206,26 @@ private fun Buttons() {
         Button(onClick) { Text(text) }
 
         AccentButton(onClick) {
-            Icon(
-                modifier = Modifier.size(16.dp),
-                imageVector = Icons.Default.Checkmark,
-                contentDescription = null
-            )
+            Icon(Icons.Default.Checkmark, contentDescription = null)
             Text(text)
         }
 
         SubtleButton(onClick) {
             Text("Text Button")
         }
+
+
+    }
+    Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+        AccentButton({}, iconOnly = true) {
+            Icon(Icons.Default.Navigation, contentDescription = null)
+        }
+        Button({}, iconOnly = true) {
+            Icon(Icons.Default.Navigation, contentDescription = null)
+        }
+        SubtleButton({}, iconOnly = true) {
+            Icon(Icons.Default.Navigation, contentDescription = null)
+        }
     }
 }
 

fluent-icons-core/src/jvmMain/kotlin/com/konyaco/fluent/icons/Icons.kt

@@ -59,4 +59,4 @@ inline fun ImageVector.Builder.fluentPath(
 
 // All Fluent icons (currently) are 12dp by 12dp, with a viewport size of 12 by 12.
 @PublishedApi
-internal const val FluentIconDimension = 12f
+internal const val FluentIconDimension = 16f

fluent/src/jvmMain/kotlin/com/konyaco/fluent/component/Button.kt

@@ -12,6 +12,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
@@ -44,9 +45,10 @@ fun Button(
     disabled: Boolean = false,
     buttonColors: ButtonColors = buttonColors(),
     interaction: MutableInteractionSource = remember { MutableInteractionSource() },
+    iconOnly: Boolean = false,
     content: @Composable RowScope.() -> Unit
 ) {
-    Button(modifier, interaction, disabled, buttonColors, false, onClick, content)
+    Button(modifier, interaction, disabled, buttonColors, false, onClick, iconOnly, content)
 }
 
 @Composable
@@ -56,9 +58,10 @@ fun AccentButton(
     disabled: Boolean = false,
     buttonColors: ButtonColors = accentButtonColors(),
     interaction: MutableInteractionSource = remember { MutableInteractionSource() },
+    iconOnly: Boolean = false,
     content: @Composable RowScope.() -> Unit
 ) {
-    Button(modifier, interaction, disabled, buttonColors, true, onClick, content)
+    Button(modifier, interaction, disabled, buttonColors, true, onClick, iconOnly, content)
 }
 
 @Composable
@@ -68,9 +71,10 @@ fun SubtleButton(
     disabled: Boolean = false,
     buttonColors: ButtonColors = subtleButtonColors(),
     interaction: MutableInteractionSource = remember { MutableInteractionSource() },
+    iconOnly: Boolean = false,
     content: @Composable RowScope.() -> Unit
 ) {
-    Button(modifier, interaction, disabled, buttonColors, true, onClick, content)
+    Button(modifier, interaction, disabled, buttonColors, true, onClick, iconOnly, content)
 }
 
 @Composable
@@ -81,6 +85,7 @@ private fun Button(
     buttonColors: ButtonColors,
     accentButton: Boolean,
     onClick: () -> Unit,
+    iconOnly: Boolean,
     content: @Composable RowScope.() -> Unit
 ) {
     val hovered by interaction.collectIsHoveredAsState()
@@ -104,10 +109,16 @@ private fun Button(
     )
 
     Layer(
-        modifier = modifier.defaultMinSize(
-            minWidth = 120.dp,
-            minHeight = 32.dp
-        ),
+        modifier = modifier.let {
+            if (iconOnly) {
+                it.defaultMinSize(32.dp, 32.dp)
+            } else {
+                it.defaultMinSize(
+                    minWidth = 120.dp,
+                    minHeight = 32.dp
+                )
+            }
+        },
         shape = RoundedCornerShape(4.dp),
         border = BorderStroke(1.dp, buttonColor.borderBrush),
         color = fillColor,
@@ -122,7 +133,10 @@ private fun Button(
                     interactionSource = interaction,
                     indication = null
                 )
-                .padding(horizontal = 12.dp),
+                .composed {
+                    if (!iconOnly) this
+                    else padding(horizontal = 12.dp)
+                },
             horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
             verticalAlignment = Alignment.CenterVertically,
             content = content

fluent/src/jvmMain/kotlin/com/konyaco/fluent/component/Icon.kt

@@ -89,4 +89,4 @@ private fun Modifier.defaultSizeFor(painter: Painter) =
 private fun Size.isInfinite() = width.isInfinite() && height.isInfinite()
 
 // Default icon size, for icons with no intrinsic size information
-private val DefaultIconSizeModifier = Modifier.size(12.dp)
+private val DefaultIconSizeModifier = Modifier.size(16.dp)