ANDROAPP-5858-mobile-ui-Create-Warning-Button-class-in-mobile-UI

common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt

@@ -92,7 +92,7 @@ fun App() {
 
 @Composable
 fun Main() {
-    val currentScreen = remember { mutableStateOf(Components.CHIPS) }
+    val currentScreen = remember { mutableStateOf(Components.BUTTON) }
     var expanded by remember { mutableStateOf(false) }
 
     Column(

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/ButtonScreen.kt

@@ -7,6 +7,7 @@ import androidx.compose.ui.Modifier
 import org.hisp.dhis.common.screens.previews.ButtonPreview
 import org.hisp.dhis.common.screens.previews.ButtonPreviewWithIcon
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
+import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
@@ -81,5 +82,38 @@ fun ButtonScreen() {
             ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY)
             ButtonPreviewWithIcon("Label", ButtonStyle.KEYBOARDKEY, false)
         }
+
+        Title("Error Buttons")
+        SubTitle("Filled")
+        RowComponentContainer() {
+            ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR)
+            ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR)
+        }
+        RowComponentContainer {
+            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.ERROR)
+            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.ERROR)
+        }
+
+        Spacer(Modifier.size(Spacing.Spacing18))
+        SubTitle("Outlined")
+        RowComponentContainer() {
+            ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR)
+            ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR)
+        }
+        RowComponentContainer() {
+            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.ERROR)
+            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.ERROR)
+        }
+        Spacer(Modifier.size(Spacing.Spacing18))
+
+        SubTitle("Text")
+        RowComponentContainer() {
+            ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
+            ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
+        }
+        RowComponentContainer() {
+            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
+            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
+        }
     }
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/ButtonPreview.kt

@@ -6,22 +6,35 @@ import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ButtonStyle
+import org.hisp.dhis.mobile.ui.designsystem.component.ColorStyle
 
 @Composable
-internal fun ButtonPreview(text: String, style: ButtonStyle = ButtonStyle.OUTLINED, enabled: Boolean = true) {
+internal fun ButtonPreview(
+    text: String,
+    style: ButtonStyle = ButtonStyle.OUTLINED,
+    enabled: Boolean = true,
+    colorStyle: ColorStyle = ColorStyle.DEFAULT,
+) {
     Button(
         enabled = enabled,
-        style,
-        text,
+        style = style,
+        colorStyle = colorStyle,
+        text = text,
     ) { }
 }
 
 @Composable
-internal fun ButtonPreviewWithIcon(text: String, style: ButtonStyle = ButtonStyle.OUTLINED, enabled: Boolean = true) {
+internal fun ButtonPreviewWithIcon(
+    text: String,
+    style: ButtonStyle = ButtonStyle.OUTLINED,
+    enabled: Boolean = true,
+    colorStyle: ColorStyle = ColorStyle.DEFAULT,
+) {
     Button(
         enabled = enabled,
-        style,
-        text,
+        style = style,
+        colorStyle = colorStyle,
+        text = text,
         icon = {
             Icon(
                 imageVector = Icons.Filled.Add,

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Button.kt

@@ -57,6 +57,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.hoverPointerIcon
 fun Button(
     enabled: Boolean = true,
     style: ButtonStyle = ButtonStyle.OUTLINED,
+    colorStyle: ColorStyle = ColorStyle.DEFAULT,
     text: String,
     icon: @Composable
     (() -> Unit)? = null,
@@ -66,50 +67,61 @@ fun Button(
 ) {
     when (style) {
         ButtonStyle.FILLED -> {
-            val textColor = if (enabled) TextColor.OnPrimary else TextColor.OnDisabledSurface
+            val buttonColors = when (colorStyle) {
+                ColorStyle.DEFAULT -> getFilledButtonColors(enabled)
+                ColorStyle.ERROR -> getErrorFilledButtonColors(enabled)
+            }
 
             SimpleButton(
                 modifier = modifier,
                 onClick = { onClick() },
                 enabled = enabled,
                 buttonColors = ButtonDefaults.filledTonalButtonColors(
-                    SurfaceColor.Primary,
-                    TextColor.OnPrimary,
+                    buttonColors.containerColor,
+                    buttonColors.contentColor,
                     SurfaceColor.DisabledSurface,
                     TextColor.OnDisabledSurface,
                 ),
                 text = text,
-                textColor = textColor,
+                textColor = buttonColors.textColor,
                 icon = icon,
                 paddingValues = paddingValues,
             )
         }
+
         ButtonStyle.TEXT, ButtonStyle.TEXT_LIGHT -> {
-            val textColor = when {
-                !enabled -> TextColor.OnDisabledSurface
-                style == ButtonStyle.TEXT_LIGHT -> TextColor.OnPrimary
-                else -> SurfaceColor.Primary
+            val buttonColors = when (colorStyle) {
+                ColorStyle.DEFAULT -> getTextButtonColors(style, enabled)
+                ColorStyle.ERROR -> getErrorTextButtonColors(style, enabled)
             }
-            CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+            val theme = when (colorStyle) {
+                ColorStyle.DEFAULT -> Ripple.CustomDHISRippleTheme()
+                ColorStyle.ERROR -> Ripple.CustomDHISRippleTheme(SurfaceColor.Error)
+            }
+            CompositionLocalProvider(LocalRippleTheme provides theme) {
                 OutlinedButton(
                     modifier = modifier,
                     onClick = { onClick() },
                     enabled = enabled,
                     colors = ButtonDefaults.filledTonalButtonColors(
-                        Color.Transparent,
-                        SurfaceColor.Primary,
+                        buttonColors.containerColor,
+                        buttonColors.contentColor,
                         SurfaceColor.DisabledSurface,
                         TextColor.OnDisabledSurface,
                     ),
                     border = BorderStroke(Border.Thin, Color.Transparent),
                 ) {
-                    ButtonText(text, textColor, icon, enabled)
+                    ButtonText(text, buttonColors.textColor, icon, enabled)
                 }
             }
         }
-        ButtonStyle.ELEVATED -> {
-            val textColor = if (enabled) SurfaceColor.Primary else TextColor.OnDisabledSurface
 
+        ButtonStyle.ELEVATED -> {
+            val textColor = if (enabled) {
+                SurfaceColor.Primary
+            } else {
+                TextColor.OnDisabledSurface
+            }
             ElevatedButton(
                 modifier = modifier
                     .hoverPointerIcon(enabled),
@@ -128,9 +140,14 @@ fun Button(
                 ButtonText(text, textColor, icon, enabled)
             }
         }
+
         ButtonStyle.TONAL -> {
-            val textColor = if (enabled) TextColor.OnPrimaryContainer else TextColor.OnDisabledSurface
-            CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+            val textColor = if (enabled) {
+                TextColor.OnPrimaryContainer
+            } else {
+                TextColor.OnDisabledSurface
+            }
+            CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
                 SimpleButton(
                     modifier = modifier,
                     onClick = { onClick() },
@@ -148,9 +165,13 @@ fun Button(
                 )
             }
         }
-        ButtonStyle.KEYBOARDKEY -> {
-            val textColor = if (enabled) SurfaceColor.Primary else TextColor.OnDisabledSurface
 
+        ButtonStyle.KEYBOARDKEY -> {
+            val textColor = if (enabled) {
+                SurfaceColor.Primary
+            } else {
+                TextColor.OnDisabledSurface
+            }
             val interactionSource = remember { MutableInteractionSource() }
             val isPressed by interactionSource.collectIsPressedAsState()
             var topPadding = mutableStateOf(0)
@@ -160,7 +181,10 @@ fun Button(
                     shadowColor = mutableStateOf(Color.Transparent)
                     topPadding = mutableStateOf(2)
                 } else {
-                    shadowColor = mutableStateOf(SurfaceColor.ContainerHighest)
+                    shadowColor = when (colorStyle) {
+                        ColorStyle.DEFAULT -> mutableStateOf(SurfaceColor.ContainerHighest)
+                        ColorStyle.ERROR -> mutableStateOf(SurfaceColor.ErrorContainerHighest)
+                    }
                     topPadding = mutableStateOf(0)
                 }
             } else {
@@ -184,28 +208,32 @@ fun Button(
                     contentColor = SurfaceColor.Primary,
                     disabledContentColor = TextColor.OnDisabledSurface,
                 ),
-
             ) {
                 ButtonText(text, textColor, icon, enabled)
             }
         }
+
         ButtonStyle.OUTLINED -> {
-            val textColor = if (enabled) SurfaceColor.Primary else TextColor.OnDisabledSurface
+            val buttonColors = when (colorStyle) {
+                ColorStyle.DEFAULT -> getOutlinedButtonColors(enabled)
+                ColorStyle.ERROR -> getErrorOutlinedButtonColors(enabled)
+            }
+
             OutlinedButton(
                 modifier = modifier.hoverPointerIcon(enabled).height(Spacing.Spacing40),
                 onClick = { onClick() },
                 enabled = enabled,
                 shape = ButtonDefaults.outlinedShape,
                 colors = ButtonDefaults.outlinedButtonColors(
-                    Color.Transparent,
-                    SurfaceColor.Primary,
+                    buttonColors.containerColor,
+                    buttonColors.contentColor,
                     Color.Transparent,
                     TextColor.OnDisabledSurface,
                 ),
                 border = BorderStroke(Border.Thin, if (enabled) Outline.Dark else SurfaceColor.DisabledSurface),
                 contentPadding = paddingValues,
             ) {
-                ButtonText(text, textColor, icon, enabled)
+                ButtonText(text, buttonColors.textColor, icon, enabled)
             }
         }
     }
@@ -325,6 +353,11 @@ enum class ButtonStyle {
     KEYBOARDKEY,
 }
 
+enum class ColorStyle {
+    DEFAULT,
+    ERROR,
+}
+
 /**
  * DHIS2 ButtonBlock with generic buttons slot.
  * @param primaryButton Controls first or primary button, if there is
@@ -356,3 +389,67 @@ fun ButtonBlock(
         }
     }
 }
+
+data class CustomButtonColors(
+    val textColor: Color,
+    val containerColor: Color,
+    val contentColor: Color,
+)
+
+private fun getFilledButtonColors(isEnabled: Boolean): CustomButtonColors {
+    return CustomButtonColors(
+        textColor = if (isEnabled) TextColor.OnPrimary else TextColor.OnDisabledSurface,
+        containerColor = SurfaceColor.Primary,
+        contentColor = TextColor.OnPrimary,
+    )
+}
+
+private fun getErrorFilledButtonColors(isEnabled: Boolean): CustomButtonColors {
+    return CustomButtonColors(
+        textColor = if (isEnabled) TextColor.OnError else TextColor.OnDisabledSurface,
+        containerColor = SurfaceColor.Error,
+        contentColor = TextColor.OnError,
+    )
+}
+
+private fun getTextButtonColors(style: ButtonStyle, isEnabled: Boolean): CustomButtonColors {
+    val textColor = when {
+        !isEnabled -> TextColor.OnDisabledSurface
+        style == ButtonStyle.TEXT_LIGHT -> TextColor.OnPrimary
+        else -> SurfaceColor.Primary
+    }
+    return CustomButtonColors(
+        textColor = textColor,
+        containerColor = Color.Transparent,
+        contentColor = SurfaceColor.Primary,
+    )
+}
+
+private fun getErrorTextButtonColors(style: ButtonStyle, isEnabled: Boolean): CustomButtonColors {
+    val textColor = when {
+        !isEnabled -> TextColor.OnDisabledSurface
+        style == ButtonStyle.TEXT_LIGHT -> TextColor.OnError
+        else -> SurfaceColor.Error
+    }
+    return CustomButtonColors(
+        textColor = textColor,
+        containerColor = Color.Transparent,
+        contentColor = SurfaceColor.Error,
+    )
+}
+
+private fun getOutlinedButtonColors(isEnabled: Boolean): CustomButtonColors {
+    return CustomButtonColors(
+        textColor = if (isEnabled) SurfaceColor.Primary else TextColor.OnDisabledSurface,
+        containerColor = Color.Transparent,
+        contentColor = SurfaceColor.Primary,
+    )
+}
+
+private fun getErrorOutlinedButtonColors(isEnabled: Boolean): CustomButtonColors {
+    return CustomButtonColors(
+        textColor = if (isEnabled) SurfaceColor.Error else TextColor.OnDisabledSurface,
+        containerColor = Color.Transparent,
+        contentColor = SurfaceColor.Error,
+    )
+}

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ButtonCarousel.kt

@@ -36,7 +36,7 @@ fun CarouselButton(
     buttonData: CarouselButtonData,
     modifier: Modifier = Modifier,
 ) {
-    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
         Box(
             modifier = modifier
                 .size(Spacing.Spacing80)

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/CheckBox.kt

@@ -64,7 +64,7 @@ fun CheckBox(
             )
             .hoverPointerIcon(checkBoxData.enabled),
     ) {
-        CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+        CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
             Checkbox(
                 checked = checkBoxData.checked,
                 onCheckedChange = {

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/FilterChip.kt

@@ -36,7 +36,7 @@ fun FilterChip(
     badge: String? = null,
 ) {
     Box(modifier = modifier) {
-        CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+        CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
             FilterChip(
                 onClick = { onSelected?.invoke(!selected) },
                 label = { Text(label, color = TextColor.OnSurfaceVariant) },

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/IconButton.kt

@@ -164,7 +164,7 @@ private fun StandardIconButton(
     scope: CoroutineScope = rememberCoroutineScope(),
     onClick: () -> Unit,
 ) {
-    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
         Box(
             Modifier.size(InternalSizeValues.Size48).clickable(
                 enabled = enabled,
@@ -239,7 +239,7 @@ private fun FilledTonalIconButton(
     scope: CoroutineScope = rememberCoroutineScope(),
     onClick: () -> Unit,
 ) {
-    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
         Box(
             Modifier.size(InternalSizeValues.Size48).clickable(
                 enabled = enabled,
@@ -281,7 +281,7 @@ private fun OutlinedIconButton(
     scope: CoroutineScope = rememberCoroutineScope(),
     onClick: () -> Unit,
 ) {
-    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme) {
+    CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
         Box(
             Modifier.size(InternalSizeValues.Size48).clickable(
                 enabled = enabled,