Add support for buttons displayed on colored backgrounds (CMP-BTN 006)

Orange-OpenSource · Dec 31, 2024 · 9dad235 · 9dad235
1 parent 3173ddb
commit 9dad235
Show file tree

Hide file tree

Showing 46 changed files with 202 additions and 72 deletions.
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoScreen.kt
@@ -9,11 +9,12 @@
  *
  * Software description: Android library of reusable graphical components
  */
- 
+
 package com.orange.ouds.app.ui.components.button
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -33,11 +34,13 @@ import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchListItem
 import com.orange.ouds.app.ui.utilities.composable.DemoScreen
 import com.orange.ouds.app.ui.utilities.composable.DetailScreenDescription
 import com.orange.ouds.core.component.button.OudsButton
+import com.orange.ouds.core.component.coloredbox.OudsColoredBox
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.theme.OudsThemeTweak
 import com.orange.ouds.core.theme.value
 import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.utilities.UiModePreviews
+import com.orange.ouds.theme.tokens.OudsColorKeyToken
 import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
 
 
@@ -53,6 +56,11 @@ fun ButtonDemoScreen() = DemoScreen(rememberButtonDemoState()) {
                 onCheckedChange = { enabled = it },
                 enabled = style == OudsButton.Style.Default
             )
+            CustomizationSwitchListItem(
+                label = stringResource(R.string.app_common_onColoredBackground_label),
+                checked = onColoredBox,
+                onCheckedChange = { onColoredBox = it }
+            )
             CustomizationChoiceChipsColumn(
                 modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
                 label = stringResource(R.string.app_components_button_hierarchy_label),
@@ -89,21 +97,23 @@ fun ButtonDemoScreen() = DemoScreen(rememberButtonDemoState()) {
                 descriptionRes = Component.Button.descriptionRes
             )
             ButtonDemo(state = this@DemoScreen)
-            OudsThemeTweak(OudsTheme.Tweak.Invert) {
-                ButtonDemo(state = this@DemoScreen)
+            if (!onColoredBox) {
+                OudsThemeTweak(OudsTheme.Tweak.Invert) {
+                    ButtonDemo(state = this@DemoScreen)
+                }
             }
         }
     }
 }
 
 @Composable
 private fun ButtonDemo(state: ButtonDemoState) {
-    Box(
+    ButtonDemoBox(
+        colored = state.onColoredBox,
         modifier = Modifier
             .background(OudsTheme.colorScheme.backgroundColors.primary)
             .padding(all = OudsSpaceKeyToken.Fixed.Medium.value)
-            .fillMaxWidth(),
-        contentAlignment = Alignment.Center
+            .fillMaxWidth()
     ) {
         val text = stringResource(id = R.string.app_components_button_label)
         val icon = OudsButton.Icon(painterResource(id = R.drawable.ic_heart), stringResource(id = R.string.app_components_button_icon_a11y))
@@ -142,6 +152,27 @@ private fun ButtonDemo(state: ButtonDemoState) {
     }
 }
 
+@Composable
+private fun ButtonDemoBox(colored: Boolean, modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit) {
+    val contentAlignment = Alignment.Center
+    if (colored) {
+        OudsColoredBox(
+            modifier = modifier,
+            color = OudsColorKeyToken.Surface.Brand.Primary,
+            contentAlignment = contentAlignment,
+            content = content
+        )
+    } else {
+        Box(
+            modifier = Modifier
+                .background(OudsTheme.colorScheme.backgroundColors.primary)
+                .then(modifier),
+            contentAlignment = contentAlignment,
+            content = content
+        )
+    }
+}
+
 @UiModePreviews.Default
 @Composable
 private fun PreviewButtonDemoScreen() = OudsPreview {

diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoState.kt b/app/src/main/java/com/orange/ouds/app/ui/components/button/ButtonDemoState.kt
@@ -26,15 +26,17 @@ import com.orange.ouds.core.component.button.OudsButtonDefaults
 @Composable
 fun rememberButtonDemoState(
     enabled: Boolean = true,
+    onColoredBox: Boolean = false,
     style: OudsButton.Style = OudsButtonDefaults.Style,
     hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy,
     layout: ButtonDemoState.Layout = ButtonDemoState.Layout.TextOnly
 ) = rememberSaveable(enabled, style, hierarchy, layout, saver = ButtonDemoState.Saver) {
-    ButtonDemoState(enabled, style, hierarchy, layout)
+    ButtonDemoState(enabled, onColoredBox, style, hierarchy, layout)
 }
 
 class ButtonDemoState(
     enabled: Boolean,
+    onColoredBox: Boolean,
     style: OudsButton.Style,
     hierarchy: OudsButton.Hierarchy,
     layout: Layout
@@ -44,13 +46,15 @@ class ButtonDemoState(
 
         val Saver = run {
             val enabledKey = "enabled"
+            val onColoredBoxKey = "onColoredBox"
             val styleKey = "style"
             val hierarchyKey = "hierarchy"
             val layoutKey = "layout"
             mapSaver(
                 save = { state ->
                     mapOf(
                         enabledKey to state.enabled,
+                        onColoredBoxKey to state.onColoredBox,
                         styleKey to state.style,
                         hierarchyKey to state.hierarchy,
                         layoutKey to state.layout
@@ -59,6 +63,7 @@ class ButtonDemoState(
                 restore = { map ->
                     ButtonDemoState(
                         map[enabledKey] as Boolean,
+                        map[onColoredBoxKey] as Boolean,
                         map[styleKey] as OudsButton.Style,
                         map[hierarchyKey] as OudsButton.Hierarchy,
                         map[layoutKey] as Layout
@@ -70,6 +75,8 @@ class ButtonDemoState(
 
     var enabled: Boolean by mutableStateOf(enabled)
 
+    var onColoredBox: Boolean by mutableStateOf(onColoredBox)
+
     var style: OudsButton.Style by mutableStateOf(style)
 
     var hierarchy: OudsButton.Hierarchy by mutableStateOf(hierarchy)

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -23,6 +23,7 @@
     <string name="app_common_bottomSheetCollapsed_a11y">Bottom sheet collapsed</string>
     <string name="app_common_customize_label">Customize</string>
     <string name="app_common_enabled_label">Enabled</string>
+    <string name="app_common_onColoredBackground_label">On colored background</string>
 
     <!-- Top bar -->
     <string name="app_topBar_theme_button_a11y">ChangeTheme</string>