feat: [ANDROAPP-6122] add warning style to Buttons

dhis2 · May 7, 2024 · 4d2fb9a · 4d2fb9a
1 parent 50ceab6
commit 4d2fb9a
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 15 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/buttons/ButtonScreen.kt
@@ -115,5 +115,39 @@ fun ButtonScreen() {
             ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.ERROR)
             ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.ERROR)
         }
+        Spacer(Modifier.size(Spacing.Spacing18))
+
+        Title("Warning Buttons")
+        SubTitle("Filled")
+        RowComponentContainer() {
+            ButtonPreview("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING)
+            ButtonPreview("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING)
+        }
+        RowComponentContainer {
+            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, true, ColorStyle.WARNING)
+            ButtonPreviewWithIcon("Label", ButtonStyle.FILLED, false, ColorStyle.WARNING)
+        }
+
+        Spacer(Modifier.size(Spacing.Spacing18))
+        SubTitle("Outlined")
+        RowComponentContainer() {
+            ButtonPreview("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING)
+            ButtonPreview("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING)
+        }
+        RowComponentContainer() {
+            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, true, ColorStyle.WARNING)
+            ButtonPreviewWithIcon("Label", ButtonStyle.OUTLINED, false, ColorStyle.WARNING)
+        }
+        Spacer(Modifier.size(Spacing.Spacing18))
+
+        SubTitle("Text")
+        RowComponentContainer() {
+            ButtonPreview("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING)
+            ButtonPreview("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING)
+        }
+        RowComponentContainer() {
+            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, true, ColorStyle.WARNING)
+            ButtonPreviewWithIcon("Label", ButtonStyle.TEXT, false, ColorStyle.WARNING)
+        }
     }
 }
diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Button.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Button.kt
@@ -75,6 +75,7 @@ fun Button(
             val buttonColors = when (colorStyle) {
                 ColorStyle.DEFAULT -> getFilledButtonColors(enabled)
                 ColorStyle.ERROR -> getErrorFilledButtonColors(enabled)
+                ColorStyle.WARNING -> getWarningFilledButtonColors(enabled)
             }
 
             SimpleButton(
@@ -98,10 +99,12 @@ fun Button(
             val buttonColors = when (colorStyle) {
                 ColorStyle.DEFAULT -> getTextButtonColors(style, enabled)
                 ColorStyle.ERROR -> getErrorTextButtonColors(style, enabled)
+                ColorStyle.WARNING -> getWarningTextButtonColors(style, enabled)
             }
             val theme = when (colorStyle) {
                 ColorStyle.DEFAULT -> Ripple.CustomDHISRippleTheme()
                 ColorStyle.ERROR -> Ripple.CustomDHISRippleTheme(SurfaceColor.Error)
+                ColorStyle.WARNING -> Ripple.CustomDHISRippleTheme(SurfaceColor.Warning)
             }
             CompositionLocalProvider(LocalRippleTheme provides theme) {
                 OutlinedButton(
@@ -189,6 +192,7 @@ fun Button(
                     shadowColor = when (colorStyle) {
                         ColorStyle.DEFAULT -> mutableStateOf(SurfaceColor.ContainerHighest)
                         ColorStyle.ERROR -> mutableStateOf(SurfaceColor.ErrorContainerHighest)
+                        ColorStyle.WARNING -> mutableStateOf(SurfaceColor.WarningContainer)
                     }
                     topPadding = mutableStateOf(0)
                 }
@@ -222,23 +226,34 @@ fun Button(
             val buttonColors = when (colorStyle) {
                 ColorStyle.DEFAULT -> getOutlinedButtonColors(enabled)
                 ColorStyle.ERROR -> getErrorOutlinedButtonColors(enabled)
+                ColorStyle.WARNING -> getWarningOutlinedButtonColors(enabled)
             }
 
-            OutlinedButton(
-                modifier = modifier.hoverPointerIcon(enabled).height(Spacing.Spacing40),
-                onClick = { onClick() },
-                enabled = enabled,
-                shape = ButtonDefaults.outlinedShape,
-                colors = ButtonDefaults.outlinedButtonColors(
-                    buttonColors.containerColor,
-                    buttonColors.contentColor,
-                    Color.Transparent,
-                    TextColor.OnDisabledSurface,
-                ),
-                border = BorderStroke(Border.Thin, if (enabled) Outline.Dark else SurfaceColor.DisabledSurface),
-                contentPadding = paddingValues,
-            ) {
-                ButtonText(text, buttonColors.textColor, icon, enabled)
+            val theme = when (colorStyle) {
+                ColorStyle.DEFAULT -> Ripple.CustomDHISRippleTheme()
+                ColorStyle.ERROR -> Ripple.CustomDHISRippleTheme(SurfaceColor.Error)
+                ColorStyle.WARNING -> Ripple.CustomDHISRippleTheme(SurfaceColor.Warning)
+            }
+            CompositionLocalProvider(LocalRippleTheme provides theme) {
+                OutlinedButton(
+                    modifier = modifier.hoverPointerIcon(enabled).height(Spacing.Spacing40),
+                    onClick = { onClick() },
+                    enabled = enabled,
+                    shape = ButtonDefaults.outlinedShape,
+                    colors = ButtonDefaults.outlinedButtonColors(
+                        buttonColors.containerColor,
+                        buttonColors.contentColor,
+                        Color.Transparent,
+                        TextColor.OnDisabledSurface,
+                    ),
+                    border = BorderStroke(
+                        Border.Thin,
+                        if (enabled) Outline.Dark else SurfaceColor.DisabledSurface,
+                    ),
+                    contentPadding = paddingValues,
+                ) {
+                    ButtonText(text, buttonColors.textColor, icon, enabled)
+                }
             }
         }
     }
@@ -385,6 +400,7 @@ enum class ButtonStyle {
 enum class ColorStyle {
     DEFAULT,
     ERROR,
+    WARNING,
 }
 
 /**
@@ -441,6 +457,14 @@ private fun getErrorFilledButtonColors(isEnabled: Boolean): CustomButtonColors {
     )
 }
 
+private fun getWarningFilledButtonColors(isEnabled: Boolean): CustomButtonColors {
+    return CustomButtonColors(
+        textColor = if (isEnabled) TextColor.OnWarning else TextColor.OnDisabledSurface,
+        containerColor = SurfaceColor.Warning,
+        contentColor = TextColor.OnWarning,
+    )
+}
+
 private fun getTextButtonColors(style: ButtonStyle, isEnabled: Boolean): CustomButtonColors {
     val textColor = when {
         !isEnabled -> TextColor.OnDisabledSurface
@@ -467,6 +491,19 @@ private fun getErrorTextButtonColors(style: ButtonStyle, isEnabled: Boolean): Cu
     )
 }
 
+private fun getWarningTextButtonColors(style: ButtonStyle, isEnabled: Boolean): CustomButtonColors {
+    val textColor = when {
+        !isEnabled -> TextColor.OnDisabledSurface
+        style == ButtonStyle.TEXT_LIGHT -> TextColor.OnError
+        else -> SurfaceColor.Warning
+    }
+    return CustomButtonColors(
+        textColor = textColor,
+        containerColor = Color.Transparent,
+        contentColor = SurfaceColor.Warning,
+    )
+}
+
 private fun getOutlinedButtonColors(isEnabled: Boolean): CustomButtonColors {
     return CustomButtonColors(
         textColor = if (isEnabled) SurfaceColor.Primary else TextColor.OnDisabledSurface,
@@ -482,3 +519,11 @@ private fun getErrorOutlinedButtonColors(isEnabled: Boolean): CustomButtonColors
         contentColor = SurfaceColor.Error,
     )
 }
+
+private fun getWarningOutlinedButtonColors(isEnabled: Boolean): CustomButtonColors {
+    return CustomButtonColors(
+        textColor = if (isEnabled) SurfaceColor.Warning else TextColor.OnDisabledSurface,
+        containerColor = Color.Transparent,
+        contentColor = SurfaceColor.Warning,
+    )
+}