Merge pull request #365 from Orange-OpenSource/339-update-the-button-…

…page-to-clarify-the-odsbuttonstyle-options

339 - Update buttons to display code implementation and remove styles from contained buttons customization

changelog.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- \[Demo\] Change buttons screens by removing style customization and adding a code implementation section ([#339](https://github.com/Orange-OpenSource/ods-android/issues/339))
 - \[Doc\] Use ODS Jekyll theme header to display favicons on documentation github pages ([#370](https://github.com/Orange-OpenSource/ods-android/issues/370))
 
 ### Fixed

demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsContained.kt

@@ -26,15 +26,19 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.button.OdsButton
 import com.orange.ods.compose.component.button.OdsButtonStyle
 import com.orange.ods.compose.component.chip.OdsChoiceChip
 import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
 import com.orange.ods.compose.theme.OdsDisplaySurface
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
+import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText
+import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn
 import com.orange.ods.demo.ui.utilities.composable.Subtitle
 import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
+import com.orange.ods.demo.ui.utilities.composable.Title
 import com.orange.ods.utilities.extension.fullName
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -46,16 +50,6 @@ fun ButtonsContained(style: OdsButtonStyle) {
         ComponentCustomizationBottomSheetScaffold(
             bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
             bottomSheetContent = {
-                Subtitle(textRes = R.string.component_style, horizontalPadding = true)
-                OdsChoiceChipsFlowRow(
-                    selectedChip = containedButtonStyle,
-                    modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)),
-                    outlinedChips = true
-                ) {
-                    OdsChoiceChip(textRes = R.string.component_button_style_primary, value = OdsButtonStyle.Primary)
-                    OdsChoiceChip(textRes = R.string.component_button_style_default, value = OdsButtonStyle.Default)
-                    OdsChoiceChip(textRes = R.string.component_button_style_functional, value = OdsButtonStyle.FunctionalPositive)
-                }
                 if (containedButtonStyle.value in listOf(OdsButtonStyle.FunctionalPositive, OdsButtonStyle.FunctionalNegative)) {
                     Subtitle(textRes = R.string.component_button_style_functional, horizontalPadding = true)
                     OdsChoiceChipsFlowRow(
@@ -77,7 +71,14 @@ fun ButtonsContained(style: OdsButtonStyle) {
                     .verticalScroll(rememberScrollState())
                     .padding(vertical = dimensionResource(id = R.dimen.screen_vertical_margin))
             ) {
-                ButtonStyleTitle(style = containedButtonStyle.value)
+                with(containedButtonStyle.value) {
+                    if (this in listOf(OdsButtonStyle.FunctionalNegative, OdsButtonStyle.FunctionalPositive)) {
+                        Title(
+                            textRes = if (this == OdsButtonStyle.FunctionalNegative) R.string.component_button_style_functional_negative else R.string.component_button_style_functional_positive,
+                            horizontalPadding = true
+                        )
+                    }
+                }
 
                 ContainedButton(style = containedButtonStyle.value, leadingIcon = hasLeadingIcon, enabled = isEnabled, variableWidth = hasVariableWidth)
 
@@ -104,35 +105,19 @@ fun ButtonsContained(style: OdsButtonStyle) {
                         )
                     }
                 }
-            }
-        }
-    }
-}
 
-@Composable
-private fun ButtonStyleTitle(style: OdsButtonStyle) {
-    val titleRes: Int
-    val technicalText: String
-    when (style) {
-        OdsButtonStyle.Default -> {
-            titleRes = R.string.component_button_style_default
-            technicalText = OdsButtonStyle.Default.fullName
-        }
-        OdsButtonStyle.Primary -> {
-            titleRes = R.string.component_button_style_primary
-            technicalText = OdsButtonStyle.Primary.fullName
-        }
-        OdsButtonStyle.FunctionalNegative -> {
-            titleRes = R.string.component_button_style_functional_negative
-            technicalText = OdsButtonStyle.FunctionalNegative.fullName
-        }
-        OdsButtonStyle.FunctionalPositive -> {
-            titleRes = R.string.component_button_style_functional_positive
-            technicalText = OdsButtonStyle.FunctionalPositive.fullName
+                CodeImplementationColumn {
+                    ButtonTechnicalText(
+                        componentName = OdsComponent.OdsButton.name,
+                        style = containedButtonStyle.value.fullName,
+                        enabled = isEnabled,
+                        variableWidth = hasVariableWidth,
+                        icon = hasLeadingIcon
+                    )
+                }
+            }
         }
     }
-
-    StyleTitle(titleRes = titleRes, technicalText = technicalText)
 }
 
 @Composable
@@ -143,9 +128,7 @@ private fun ContainedButton(
     variableWidth: Boolean,
     displaySurface: OdsDisplaySurface = OdsDisplaySurface.Default
 ) {
-    val modifier = Modifier
-        .padding(horizontal = dimensionResource(R.dimen.screen_horizontal_margin))
-        .padding(top = dimensionResource(R.dimen.spacing_m))
+    val modifier = Modifier.padding(horizontal = dimensionResource(R.dimen.screen_horizontal_margin), vertical = dimensionResource(R.dimen.spacing_m))
 
     OdsButton(
         modifier = if (variableWidth) modifier else modifier.fillMaxWidth(),

demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsOutlined.kt

@@ -24,10 +24,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.button.OdsOutlinedButton
 import com.orange.ods.compose.theme.OdsDisplaySurface
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
+import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText
+import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn
 import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -72,6 +75,15 @@ fun ButtonsOutlined() {
                         )
                     }
                 }
+
+                CodeImplementationColumn {
+                    ButtonTechnicalText(
+                        componentName = OdsComponent.OdsOutlinedButton.name,
+                        enabled = isEnabled,
+                        variableWidth = hasVariableWidth,
+                        icon = hasLeadingIcon
+                    )
+                }
             }
         }
     }

demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsText.kt

@@ -24,15 +24,19 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.button.OdsTextButton
 import com.orange.ods.compose.component.button.OdsTextButtonStyle
 import com.orange.ods.compose.component.chip.OdsChoiceChip
 import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
 import com.orange.ods.compose.theme.OdsDisplaySurface
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
+import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText
+import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn
 import com.orange.ods.demo.ui.utilities.composable.Subtitle
 import com.orange.ods.demo.ui.utilities.composable.SwitchListItem
+import com.orange.ods.demo.ui.utilities.composable.Title
 import com.orange.ods.utilities.extension.fullName
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -63,7 +67,10 @@ fun ButtonsText() {
                     .verticalScroll(rememberScrollState())
                     .padding(vertical = dimensionResource(id = R.dimen.screen_vertical_margin))
             ) {
-                ButtonStyleTitle(style = textButtonStyle.value)
+                Title(
+                    textRes = if (textButtonStyle.value == OdsTextButtonStyle.Default) R.string.component_button_style_default else R.string.component_button_style_primary,
+                    horizontalPadding = true
+                )
 
                 TextButton(style = textButtonStyle.value, leadingIcon = hasLeadingIcon, enabled = isEnabled, variableWidth = hasVariableWidth)
 
@@ -90,27 +97,19 @@ fun ButtonsText() {
                         )
                     }
                 }
-            }
-        }
-    }
-}
 
-@Composable
-private fun ButtonStyleTitle(style: OdsTextButtonStyle) {
-    val titleRes: Int
-    val technicalText: String
-    when (style) {
-        OdsTextButtonStyle.Default -> {
-            titleRes = R.string.component_button_style_default
-            technicalText = OdsTextButtonStyle.Default.fullName
-        }
-        OdsTextButtonStyle.Primary -> {
-            titleRes = R.string.component_button_style_primary
-            technicalText = OdsTextButtonStyle.Primary.fullName
+                CodeImplementationColumn {
+                    ButtonTechnicalText(
+                        componentName = OdsComponent.OdsTextButton.name,
+                        style = textButtonStyle.value.fullName,
+                        enabled = isEnabled,
+                        variableWidth = hasVariableWidth,
+                        icon = hasLeadingIcon
+                    )
+                }
+            }
         }
     }
-
-    StyleTitle(titleRes = titleRes, technicalText = technicalText)
 }
 
 @Composable

demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsToggle.kt

@@ -29,11 +29,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.button.OdsIconToggleButton
 import com.orange.ods.compose.theme.OdsDisplaySurface
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.utilities.ComponentCountRow
 import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
+import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText
+import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn
+import com.orange.ods.demo.ui.utilities.composable.RowSurroundedTechnicalText
 import com.orange.ods.demo.ui.utilities.composable.Title
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -106,6 +110,25 @@ fun ButtonsToggle() {
                         )
                     }
                 }
+
+                CodeImplementationColumn {
+                    if (toggleCount.value > 1) {
+                        RowSurroundedTechnicalText {
+                            repeat(toggleCount.value) {
+                                ButtonTechnicalText(
+                                    modifier = Modifier.padding(start = dimensionResource(id = R.dimen.spacing_s)),
+                                    componentName = OdsComponent.OdsIconToggleButton.name,
+                                    enabled = true
+                                )
+                            }
+                        }
+                    } else {
+                        ButtonTechnicalText(
+                            componentName = OdsComponent.OdsIconToggleButton.name,
+                            enabled = true
+                        )
+                    }
+                }
             }
         }
 

demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ComponentButtons.kt

@@ -20,14 +20,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
 import com.orange.ods.compose.component.button.OdsButtonStyle
+import com.orange.ods.compose.text.OdsTextBody2
 import com.orange.ods.compose.theme.OdsDisplaySurface
 import com.orange.ods.compose.theme.OdsTheme
 import com.orange.ods.demo.R
 import com.orange.ods.demo.ui.components.Variant
-import com.orange.ods.demo.ui.utilities.composable.Subtitle
-import com.orange.ods.demo.ui.utilities.composable.TechnicalText
-import com.orange.ods.demo.ui.utilities.composable.Title
 
 @Composable
 fun ComponentButtons(variant: Variant) {
@@ -42,35 +41,44 @@ fun ComponentButtons(variant: Variant) {
     }
 }
 
-@Composable
-fun StyleTitle(@StringRes titleRes: Int, technicalText: String) {
-    Title(titleRes, horizontalPadding = true)
-    TechnicalText(text = technicalText, horizontalPadding = true)
-}
-
 @Composable
 fun DarkSurface(content: @Composable ColumnScope.() -> Unit) {
-    ForcedBackgroundColumn(color = OdsTheme.darkThemeColors.surface) {
-        Subtitle(textRes = R.string.component_force_on_dark, displaySurface = OdsDisplaySurface.Dark, horizontalPadding = true)
-        content()
-    }
+    ForcedBackgroundColumn(darkSurface = true, content = content)
 }
 
 @Composable
 fun LightSurface(content: @Composable ColumnScope.() -> Unit) {
-    ForcedBackgroundColumn(color = OdsTheme.lightThemeColors.surface) {
-        Subtitle(textRes = R.string.component_force_on_light, displaySurface = OdsDisplaySurface.Light, horizontalPadding = true)
-        content()
-    }
+    ForcedBackgroundColumn(darkSurface = false, content = content)
 }
 
 @Composable
-private fun ForcedBackgroundColumn(color: Color, content: @Composable ColumnScope.() -> Unit) {
+private fun ForcedBackgroundColumn(darkSurface: Boolean, content: @Composable ColumnScope.() -> Unit) {
+    val backgroundColor: Color
+    @StringRes val textRes: Int
+    val displaySurface: OdsDisplaySurface
+    if (darkSurface) {
+        backgroundColor = OdsTheme.darkThemeColors.surface
+        textRes = R.string.component_force_on_dark
+        displaySurface = OdsDisplaySurface.Dark
+    } else {
+        backgroundColor = OdsTheme.lightThemeColors.surface
+        textRes = R.string.component_force_on_light
+        displaySurface = OdsDisplaySurface.Light
+    }
+
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .background(color = color)
-            .padding(bottom = dimensionResource(R.dimen.spacing_m)),
-        content = content
-    )
+            .background(color = backgroundColor)
+            .padding(bottom = dimensionResource(R.dimen.spacing_m))
+    ) {
+        OdsTextBody2(
+            modifier = Modifier
+                .padding(horizontal = dimensionResource(id = R.dimen.spacing_m))
+                .padding(top = dimensionResource(id = R.dimen.spacing_s)),
+            text = stringResource(id = textRes),
+            displaySurface = displaySurface
+        )
+        content()
+    }
 }