Merge pull request #14768 from woocommerce/issue/WCOutlinedButton_enhancment

[Compose component] - Add loading param to WCOutlinedButton

Author: AdamGrzybkowski

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingAppointmentDetails.kt

@@ -8,11 +8,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -93,16 +90,9 @@ fun BookingAppointmentDetails(
                 ),
                 onClick = onCancelBooking,
                 enabled = model.cancelButtonEnabled,
-            ) {
-                if (model.cancelInProgressShown) {
-                    CircularProgressIndicator(
-                        color = LocalContentColor.current,
-                        modifier = Modifier.size(24.dp)
-                    )
-                } else {
-                    Text(text = stringResource(R.string.booking_details_cancel_booking_button))
-                }
-            }
+                text = stringResource(R.string.booking_details_cancel_booking_button),
+                loading = model.cancelInProgressShown,
+            )
             HorizontalDivider(thickness = 0.5.dp)
         }
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt

@@ -123,10 +123,8 @@ fun WCColoredButton(
     ) {
         Box {
             if (loading) {
-                CircularProgressIndicator(
-                    color = LocalContentColor.current,
+                ButtonCircularProgressIndicator(
                     modifier = Modifier
-                        .size(24.dp)
                         .align(Alignment.Center)
                 )
             }
@@ -185,14 +183,15 @@ fun WCOutlinedButton(
     leadingIcon: @Composable (() -> Unit)? = null,
     trailingIcon: @Composable (() -> Unit)? = null,
     enabled: Boolean = true,
+    loading: Boolean = false,
     shape: Shape = MaterialTheme.shapes.small,
     colors: ButtonColors = ButtonDefaults.wcOutlinedButtonColors(),
     border: BorderStroke? = ButtonDefaults.wcOutlinedButtonBorder(enabled),
     contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
     interactionSource: MutableInteractionSource? = null,
 ) {
     WCOutlinedButton(
-        onClick = onClick,
+        onClick = { if (!loading) onClick() },
         modifier = modifier,
         enabled = enabled,
         shape = shape,
@@ -201,14 +200,21 @@ fun WCOutlinedButton(
         contentPadding = contentPadding,
         interactionSource = interactionSource
     ) {
-        if (leadingIcon != null) {
-            leadingIcon()
-            Spacer(modifier = Modifier.width(dimensionResource(id = R.dimen.minor_100)))
-        }
-        Text(text = text)
-        if (trailingIcon != null) {
-            Spacer(modifier = Modifier.width(dimensionResource(id = R.dimen.minor_100)))
-            trailingIcon()
+        if (loading) {
+            ButtonCircularProgressIndicator(
+                modifier = Modifier
+                    .align(Alignment.CenterVertically)
+            )
+        } else {
+            if (leadingIcon != null) {
+                leadingIcon()
+                Spacer(modifier = Modifier.width(dimensionResource(id = R.dimen.minor_100)))
+            }
+            Text(text = text)
+            if (trailingIcon != null) {
+                Spacer(modifier = Modifier.width(dimensionResource(id = R.dimen.minor_100)))
+                trailingIcon()
+            }
         }
     }
 }
@@ -415,6 +421,15 @@ private fun ProvideMaterial3CompositionForMaterial2(
     }
 }
 
+@Composable
+private fun ButtonCircularProgressIndicator(modifier: Modifier = Modifier) {
+    CircularProgressIndicator(
+        color = LocalContentColor.current,
+        modifier = modifier
+            .size(24.dp)
+    )
+}
+
 @LightDarkThemePreviews
 @Composable
 private fun ButtonsPreview() {
@@ -459,6 +474,11 @@ private fun ButtonsPreview() {
                     )
                 }
             )
+            WCColoredButton(
+                text = "Button Loading",
+                loading = true,
+                onClick = {},
+            )
 
             WCOutlinedButton(onClick = {}) {
                 Text(text = "Outlined Button")
@@ -475,6 +495,11 @@ private fun ButtonsPreview() {
                     Icon(imageVector = Icons.Default.Check, contentDescription = null, modifier = Modifier.size(16.dp))
                 }
             )
+            WCOutlinedButton(
+                text = "Outlined Button Loading",
+                loading = true,
+                onClick = {},
+            )
 
             WCTextButton(onClick = {}) {
                 Text(text = "Text button")