chore(app): improve customization bottom sheets content display (#967)

paulinea · web-flow · commit 42cd84005127 · 2025-12-04T17:01:46.000+01:00
diff --git a/app/src/main/java/com/orange/ouds/app/ui/ChangeThemeSettingsDialog.kt b/app/src/main/java/com/orange/ouds/app/ui/ChangeThemeSettingsDialog.kt
@@ -74,7 +74,7 @@ private fun ChangeThemeSettingsDialogContent(themeState: ThemeState, onThemeSett
 
         Row(
             modifier = Modifier
-                .padding(all = OudsTheme.spaces.fixed.large)
+                .padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.large)
                 .align(Alignment.End),
             horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.extraSmall)
         ) {
diff --git a/app/src/main/java/com/orange/ouds/app/ui/DialogContent.kt b/app/src/main/java/com/orange/ouds/app/ui/DialogContent.kt
@@ -42,7 +42,7 @@ fun DialogContent(
         Text(
             text = title,
             color = OudsTheme.colorScheme.content.default,
-            modifier = Modifier.padding(all = OudsTheme.spaces.fixed.large),
+            modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.large),
             style = OudsTheme.typography.heading.medium
         )
         Column(modifier = Modifier.padding(contentPadding)) {
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/badge/BadgeDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/badge/BadgeDemoScreen.kt
@@ -108,6 +108,7 @@ private fun BadgeDemoBottomSheetContent(state: BadgeDemoState) {
             onSelectionChange = { status = statuses[it] }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_badge_count_label),
             value = TextFieldValue(count.toString(), TextRange(count.toString().length)),
             onValueChange = { value ->
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
@@ -88,6 +88,7 @@ private fun ButtonDemoBottomSheetContent(state: ButtonDemoState) {
             onSelectionChange = { id -> layout = ButtonDemoState.Layout.entries[id] }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value },
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/chip/ChipDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/chip/ChipDemoScreen.kt
@@ -48,6 +48,7 @@ fun ChipDemoBottomSheetContent(state: ChipDemoState) {
             onSelectionChange = { id -> layout = ChipDemoState.Layout.entries[id] }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value },
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/controlitem/ControlItemDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/controlitem/ControlItemDemoScreen.kt
@@ -135,6 +135,7 @@ private fun ControlItemErrorCustomization(state: ControlItemDemoState) {
 private fun ControlItemErrorMessageCustomization(state: ControlItemDemoState) {
     with(state) {
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_errorMessage_label),
             value = errorMessage,
             onValueChange = { value -> errorMessage = value },
@@ -147,6 +148,7 @@ private fun ControlItemErrorMessageCustomization(state: ControlItemDemoState) {
 private fun ControlItemLabelCustomization(state: ControlItemDemoState) {
     with(state) {
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value }
@@ -158,6 +160,7 @@ private fun ControlItemLabelCustomization(state: ControlItemDemoState) {
 private fun ControlItemDescriptionCustomization(state: ControlItemDemoState) {
     with(state) {
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_controlItem_description_label),
             value = description.orEmpty(),
             onValueChange = { value -> description = value }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt
@@ -80,6 +80,7 @@ private fun LinkDemoBottomSheetContent(state: LinkDemoState) {
             onSelectionChange = { id -> layout = LinkDemoState.Layout.entries[id] }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/radiobutton/RadioButtonItemDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/radiobutton/RadioButtonItemDemoScreen.kt
@@ -65,6 +65,7 @@ private fun RadioButtonItemDemoBottomSheetContent(state: RadioButtonItemDemoStat
             },
             controlItemCustomization(9) {
                 CustomizationTextField(
+                    applyTopPadding = true,
                     label = stringResource(R.string.app_components_radioButton_radioButtonItem_extraLabel_label),
                     value = extraLabel.orEmpty(),
                     onValueChange = { value -> extraLabel = value }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/tag/InputTagDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/tag/InputTagDemoScreen.kt
@@ -46,6 +46,7 @@ private fun InputTagDemoBottomSheetContent(state: InputTagDemoState) {
             onCheckedChange = { enabled = it },
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/tag/TagDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/tag/TagDemoScreen.kt
@@ -143,6 +143,7 @@ private fun TagDemoBottomSheetContent(state: TagDemoState) {
             onSelectionChange = { id -> size = OudsTagSize.entries[id] }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/textinput/TextInputDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/textinput/TextInputDemoScreen.kt
@@ -94,37 +94,44 @@ private fun TextInputDemoBottomSheetContent(state: TextInputDemoState) {
             enabled = errorSwitchEnabled
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_errorMessage_label),
             value = errorMessage,
             onValueChange = { value -> errorMessage = value },
             enabled = errorMessageTextInputEnabled
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_label_label),
             value = label,
             onValueChange = { value -> label = value }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_textInput_placeholder_label),
             value = placeholder,
             onValueChange = { value -> placeholder = value }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_textInput_prefix_label),
             value = prefix,
             onValueChange = { value -> prefix = value }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_textInput_suffix_label),
             value = suffix,
             onValueChange = { value -> suffix = value }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_common_helperText_label),
             value = helperText,
             onValueChange = { value -> helperText = value }
         )
         CustomizationTextField(
+            applyTopPadding = true,
             label = stringResource(R.string.app_components_textInput_helperLink_label),
             value = helperLink,
             onValueChange = { value -> helperLink = value }
diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt
@@ -127,7 +127,8 @@ fun CustomizationBottomSheetScaffold(
                 Text(
                     modifier = Modifier.padding(start = OudsTheme.spaces.fixed.medium),
                     text = stringResource(id = titleResId),
-                    style = OudsTheme.typography.body.strong.large
+                    style = OudsTheme.typography.body.strong.large,
+                    color = OudsTheme.colorScheme.content.default
                 )
             }
 
@@ -138,6 +139,7 @@ fun CustomizationBottomSheetScaffold(
                     .heightIn(max = customizationContentMaxHeight)
                     .verticalScrollbar(scrollState)
                     .verticalScroll(scrollState)
+                    .padding(bottom = OudsTheme.spaces.fixed.small)
                     // We should write this line to disable the focus on children when the bottom sheet is not expanded:
                     // focusProperties { canFocus = bottomSheetScaffoldState.bottomSheetState.currentValue == SheetValue.Expanded }
                     // But for some reason setting canFocus to true breaks the focus in CustomizationFilterChips,
diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt
@@ -106,13 +106,15 @@ fun CustomizationFilterChips(
     applyTopPadding: Boolean,
     modifier: Modifier = Modifier
 ) {
+    @Suppress("NAME_SHADOWING")
     val modifier = if (applyTopPadding) modifier.padding(top = elementTopPadding) else modifier
     Column(
         modifier = modifier
             .fillMaxWidth()
             .semantics(mergeDescendants = true) {}
     ) {
-        Text(modifier = Modifier.padding(horizontal = OudsTheme.grids.margin), text = label, style = labelTextStyle)
+        CustomizationText(label = label)
+
         // Setting an horizontalScroll in the Row breaks the canFocus parameter of the focusProperties Modifier
         // in the parent Column of CustomizationBottomSheetScaffold
         // That is why we set canFocus here again
@@ -143,6 +145,7 @@ fun CustomizationTextField(
     label: String,
     value: String,
     onValueChange: (String) -> Unit,
+    applyTopPadding: Boolean,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default
@@ -156,6 +159,7 @@ fun CustomizationTextField(
             textFieldValue = newTextFieldValue
             onValueChange(newTextFieldValue.text)
         },
+        applyTopPadding = applyTopPadding,
         modifier = modifier,
         enabled = enabled,
         keyboardOptions = keyboardOptions,
@@ -167,10 +171,14 @@ fun CustomizationTextField(
     label: String,
     value: TextFieldValue,
     onValueChange: (TextFieldValue) -> Unit,
+    applyTopPadding: Boolean,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     keyboardOptions: KeyboardOptions = KeyboardOptions.Default
 ) {
+    @Suppress("NAME_SHADOWING")
+    val modifier = if (applyTopPadding) modifier.padding(top = elementTopPadding) else modifier
+
     OudsTextInput(
         modifier = modifier
             .fillMaxWidth()
@@ -203,14 +211,16 @@ fun CustomizationDropdownMenu(
     applyTopPadding: Boolean,
     modifier: Modifier = Modifier,
 ) {
+    @Suppress("NAME_SHADOWING")
     val modifier = if (applyTopPadding) modifier.padding(top = elementTopPadding) else modifier
 
     Column(
         modifier = modifier
             .fillMaxWidth()
             .semantics(mergeDescendants = true) {}
     ) {
-        Text(modifier = Modifier.padding(horizontal = OudsTheme.grids.margin), text = label, style = labelTextStyle)
+        CustomizationText(label = label)
+
         var expanded by remember { mutableStateOf(false) }
         ExposedDropdownMenuBox(
             modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.extraSmall),
@@ -254,3 +264,13 @@ fun CustomizationDropdownMenu(
 data class CustomizationDropdownMenuItem(val label: String, val leadingIcon: (@Composable () -> Unit)? = null, val enabled: Boolean = true)
 
 data class CustomizationFilterChip(val label: String, val enabled: Boolean = true)
+
+@Composable
+private fun CustomizationText(label: String) {
+    Text(
+        modifier = Modifier.padding(horizontal = OudsTheme.grids.margin),
+        text = label,
+        style = labelTextStyle,
+        color = OudsTheme.colorScheme.content.default
+    )
+}

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ fun DialogContent(`
`42`	`42`	`Text(`
`43`	`43`	`text = title,`
`44`	`44`	`color = OudsTheme.colorScheme.content.default,`
`45`		`- modifier = Modifier.padding(all = OudsTheme.spaces.fixed.large),`
	`45`	`+ modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.large),`
`46`	`46`	`style = OudsTheme.typography.heading.medium`
`47`	`47`	`)`
`48`	`48`	`Column(modifier = Modifier.padding(contentPadding)) {`
Original file line number	Diff line number	Diff line change
`@@ -108,6 +108,7 @@ private fun BadgeDemoBottomSheetContent(state: BadgeDemoState) {`
`108`	`108`	`onSelectionChange = { status = statuses[it] }`
`109`	`109`	`)`
`110`	`110`	`CustomizationTextField(`
	`111`	`+ applyTopPadding = true,`
`111`	`112`	`label = stringResource(R.string.app_components_badge_count_label),`
`112`	`113`	`value = TextFieldValue(count.toString(), TextRange(count.toString().length)),`
`113`	`114`	`onValueChange = { value ->`
Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,7 @@ private fun ButtonDemoBottomSheetContent(state: ButtonDemoState) {`
`88`	`88`	`onSelectionChange = { id -> layout = ButtonDemoState.Layout.entries[id] }`
`89`	`89`	`)`
`90`	`90`	`CustomizationTextField(`
	`91`	`+ applyTopPadding = true,`
`91`	`92`	`label = stringResource(R.string.app_components_common_label_label),`
`92`	`93`	`value = label,`
`93`	`94`	`onValueChange = { value -> label = value },`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ fun ChipDemoBottomSheetContent(state: ChipDemoState) {`
`48`	`48`	`onSelectionChange = { id -> layout = ChipDemoState.Layout.entries[id] }`
`49`	`49`	`)`
`50`	`50`	`CustomizationTextField(`
	`51`	`+ applyTopPadding = true,`
`51`	`52`	`label = stringResource(R.string.app_components_common_label_label),`
`52`	`53`	`value = label,`
`53`	`54`	`onValueChange = { value -> label = value },`
Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,7 @@ private fun LinkDemoBottomSheetContent(state: LinkDemoState) {`
`80`	`80`	`onSelectionChange = { id -> layout = LinkDemoState.Layout.entries[id] }`
`81`	`81`	`)`
`82`	`82`	`CustomizationTextField(`
	`83`	`+ applyTopPadding = true,`
`83`	`84`	`label = stringResource(R.string.app_components_common_label_label),`
`84`	`85`	`value = label,`
`85`	`86`	`onValueChange = { value -> label = value }`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ private fun InputTagDemoBottomSheetContent(state: InputTagDemoState) {`
`46`	`46`	`onCheckedChange = { enabled = it },`
`47`	`47`	`)`
`48`	`48`	`CustomizationTextField(`
	`49`	`+ applyTopPadding = true,`
`49`	`50`	`label = stringResource(R.string.app_components_common_label_label),`
`50`	`51`	`value = label,`
`51`	`52`	`onValueChange = { value -> label = value }`
Original file line number	Diff line number	Diff line change
`@@ -143,6 +143,7 @@ private fun TagDemoBottomSheetContent(state: TagDemoState) {`
`143`	`143`	`onSelectionChange = { id -> size = OudsTagSize.entries[id] }`
`144`	`144`	`)`
`145`	`145`	`CustomizationTextField(`
	`146`	`+ applyTopPadding = true,`
`146`	`147`	`label = stringResource(R.string.app_components_common_label_label),`
`147`	`148`	`value = label,`
`148`	`149`	`onValueChange = { value -> label = value }`