[#360] Update bottom sheet component

Orange-OpenSource · Feb 15, 2023 · 9510256 · 9510256
1 parent e9391d0
commit 9510256
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 60 deletions.
diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt
@@ -10,24 +10,33 @@
 
 package com.orange.ods.demo.ui.components.sheets
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.chip.OdsChoiceChip
 import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
 import com.orange.ods.compose.component.list.OdsListItem
-import com.orange.ods.compose.text.OdsTextCaption
-import com.orange.ods.compose.text.OdsTextH6
+import com.orange.ods.compose.component.list.OdsListItemIcon
+import com.orange.ods.compose.component.list.OdsListItemIconType
+import com.orange.ods.compose.component.list.iconType
+import com.orange.ods.compose.text.OdsTextBody1
+import com.orange.ods.compose.text.OdsTextSubtitle1
 import com.orange.ods.demo.R
 import com.orange.ods.demo.domain.recipes.LocalRecipes
 import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn
-import com.orange.ods.demo.ui.utilities.composable.FloatingActionButtonTechnicalTextColumn
+import com.orange.ods.demo.ui.utilities.composable.CommonTechnicalTextColumn
+import com.orange.ods.demo.ui.utilities.composable.TechnicalText
 
 
 @OptIn(ExperimentalMaterialApi::class)
@@ -40,59 +49,65 @@ fun ComponentSheetBottom() {
 
 
         ComponentCustomizationBottomSheetScaffold(
+            titleResId = R.string.component_sheet_recipes,
             bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
 
             bottomSheetContent = {
                 when (content.value) {
                     SheetsbottomCustomizationState.Content.Empty -> {
-                        OdsListItem(
-                            text = ""
-                        )
+                        Box(modifier = Modifier.height(200.dp))
                     }
 
                     SheetsbottomCustomizationState.Content.Example -> {
                         val recipes = LocalRecipes.current
-                        recipes.forEach { recipe ->
+                        recipes.take(3).forEach { recipe ->
                             OdsListItem(
-                                //icon = recipe.iconResId?.let { iconRes ->
-                                //   {
-                                //       OdsListItemIcon(
-                                //          painter = painterResource(id = iconRes),
-                                //          contentDescription = null
-                                //     )
-                                //}
-                                //},
+                                Modifier.iconType(OdsListItemIconType.Icon),
+                                icon = recipe.iconResId?.let { iconRes ->
+                                    {
+                                        OdsListItemIcon(
+                                            painterResource(id = iconRes)
+                                        )
+                                    }
+                                },
                                 text = recipe.title
                             )
                         }
-
                     }
-
                 }
             }
         ) {
-            Column() {
+            Column {
                 Column(
                     modifier = Modifier
                         .padding(top = dimensionResource(id = R.dimen.screen_vertical_margin))
                         .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin))
                 ) {
-                    OdsTextH6(text = stringResource(id = R.string.component_sheet_customize))
-                    OdsTextCaption(text = stringResource(id = R.string.component_content))
+                    OdsTextBody1(text = stringResource(id = R.string.component_sheet_customize))
+
+                    OdsTextSubtitle1(
+                        text = stringResource(id = R.string.component_content),
+                        modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_s))
+                    )
 
                     OdsChoiceChipsFlowRow(
                         selectedChip = content,
-                        outlinedChips = true
+                        outlinedChips = true,
+                        modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_xs))
                     ) {
                         OdsChoiceChip(textRes = R.string.component_sheet_empty, value = SheetsbottomCustomizationState.Content.Empty)
                         OdsChoiceChip(textRes = R.string.component_sheet_example, value = SheetsbottomCustomizationState.Content.Example)
                     }
                 }
 
                 CodeImplementationColumn {
-                    FloatingActionButtonTechnicalTextColumn(
-                        componentName = ""
-                    )
+                    CommonTechnicalTextColumn(
+                        componentName = OdsComponent.OdsBottomSheetScaffold.name
+                    ) {
+                        TechnicalText(text = "sheetContent = {")
+                        TechnicalText(text = "  // add your content here")
+                        TechnicalText(text = "}")
+                    }
                 }
             }
         }

diff --git a/...ain/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt b/...ain/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.BottomSheetScaffold
 import androidx.compose.material.BottomSheetScaffoldState
 import androidx.compose.material.BottomSheetValue
 import androidx.compose.material.ExperimentalMaterialApi
@@ -39,6 +38,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.unit.dp
+import com.orange.ods.compose.component.bottomsheet.OdsBottomSheetScaffold
 import com.orange.ods.compose.component.list.OdsListItem
 import com.orange.ods.compose.theme.OdsTheme
 import com.orange.ods.demo.R
@@ -50,6 +50,7 @@ import kotlinx.coroutines.launch
 fun ComponentCustomizationBottomSheetScaffold(
     bottomSheetScaffoldState: BottomSheetScaffoldState,
     snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(hostState = it) },
+    titleResId: Int = R.string.component_customize,
     floatingActionButton: (@Composable () -> Unit)? = null,
     floatingActionButtonPosition: FabPosition = FabPosition.End,
     bottomSheetContent: @Composable () -> Unit,
@@ -65,8 +66,7 @@ fun ComponentCustomizationBottomSheetScaffold(
             bottomSheetScaffoldState.bottomSheetState.collapse()
         }
     }
-    BottomSheetScaffold(
-        sheetBackgroundColor = OdsTheme.colors.surface,
+    OdsBottomSheetScaffold(
         scaffoldState = bottomSheetScaffoldState,
         floatingActionButton = floatingActionButton,
         floatingActionButtonPosition = floatingActionButtonPosition,
@@ -87,17 +87,17 @@ fun ComponentCustomizationBottomSheetScaffold(
                     .semantics {
                         stateDescription = bottomSheetHeaderStateDescription
                     },
-                text = stringResource(id = R.string.component_customize)
-            ) {
-                val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f
-                val angle by animateFloatAsState(targetValue = degrees)
-                Icon(
-                    modifier = Modifier.rotate(angle),
-                    painter = painterResource(id = R.drawable.ic_chevron_down),
-                    contentDescription = null,
-                    tint = OdsTheme.colors.onSurface
-                )
-            }
+                text = stringResource(id = titleResId),
+                icon = {
+                    val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f
+                    val angle by animateFloatAsState(targetValue = degrees)
+                    Icon(
+                        modifier = Modifier.rotate(angle),
+                        painter = painterResource(id = R.drawable.ic_chevron_down),
+                        contentDescription = null,
+                        tint = OdsTheme.colors.onSurface
+                    )
+                })
 
             Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
                 bottomSheetContent()

diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt
@@ -90,21 +90,33 @@ fun RowSurroundedTechnicalText(content: @Composable () -> Unit) {
 }
 
 @Composable
-private fun CommonButtonTechnicalTextColumn(
+fun CommonTechnicalTextColumn(
     componentName: String,
-    fullScreenWidth: Boolean?,
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit = {}
 ) {
     Column(modifier = modifier) {
         TechnicalText(text = "$componentName(")
         Column(modifier = Modifier.padding(start = dimensionResource(id = R.dimen.spacing_s))) {
-            if (fullScreenWidth == true) {
-                TechnicalText(text = "modifier = Modifier.fillMaxWidth(),")
-            }
             content()
-            TechnicalText(text = "//...")
         }
         TechnicalText(text = ")")
     }
+}
+
+@Composable
+private fun CommonButtonTechnicalTextColumn(
+    componentName: String,
+    fullScreenWidth: Boolean?,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit = {}
+) {
+    CommonTechnicalTextColumn(componentName = componentName, modifier = modifier){
+        if (fullScreenWidth == true) {
+            TechnicalText(text = "modifier = Modifier.fillMaxWidth(),")
+        }
+        content()
+        TechnicalText(text = "//...")
+    }
+
 }
diff --git a/demo/src/main/res/values/strings.xml b/demo/src/main/res/values/strings.xml
@@ -251,6 +251,7 @@
     <string name="component_sheet_customize">Customize the bottom sheet</string>
     <string name="component_sheet_empty">Empty</string>
     <string name="component_sheet_example">Example</string>
+    <string name="component_sheet_recipes">Recipes</string>
 
     <!-- Component Snackbars -->
     <string name="component_snackbars">Snackbars</string>

diff --git a/...e/component/bottomsheet/OdsBottomSheet.kt → ...ent/bottomsheet/OdsBottomSheetScaffold.kt b/...e/component/bottomsheet/OdsBottomSheet.kt → ...ent/bottomsheet/OdsBottomSheetScaffold.kt
@@ -17,23 +17,19 @@ import androidx.compose.material.BottomSheetScaffoldDefaults
 import androidx.compose.material.BottomSheetScaffoldState
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.FabPosition
-import androidx.compose.material.MaterialTheme
 import androidx.compose.material.SnackbarHost
 import androidx.compose.material.SnackbarHostState
-import androidx.compose.material.contentColorFor
 import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import com.orange.ods.compose.component.OdsComponentApi
 import com.orange.ods.compose.theme.OdsTheme
 
 @Composable
 @ExperimentalMaterialApi
 @OdsComponentApi
-fun OdsBottomSheet(
+fun OdsBottomSheetScaffold(
     sheetContent: @Composable ColumnScope.() -> Unit,
     modifier: Modifier = Modifier,
     scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
@@ -42,13 +38,7 @@ fun OdsBottomSheet(
     floatingActionButton: (@Composable () -> Unit)? = null,
     floatingActionButtonPosition: FabPosition = FabPosition.End,
     sheetGesturesEnabled: Boolean = true,
-    sheetShape: Shape = MaterialTheme.shapes.large,
-    sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation,
-    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
-    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
     sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight,
-    backgroundColor: Color = OdsTheme.colors.surface,
-    contentColor: Color = contentColorFor(backgroundColor),
     content: @Composable (PaddingValues) -> Unit
 
 ) {
@@ -60,14 +50,13 @@ fun OdsBottomSheet(
         snackbarHost = snackbarHost,
         floatingActionButton = floatingActionButton,
         floatingActionButtonPosition = floatingActionButtonPosition,
-        sheetElevation = sheetElevation,
         sheetGesturesEnabled = sheetGesturesEnabled,
-        sheetShape = sheetShape,
-        sheetBackgroundColor = MaterialTheme.colors.surface,
-        sheetContentColor = sheetContentColor,
+        sheetShape = OdsTheme.shapes.large,
+        sheetBackgroundColor = OdsTheme.colors.surface,
+        sheetContentColor = OdsTheme.colors.onSurface,
         sheetPeekHeight = sheetPeekHeight,
         backgroundColor = OdsTheme.colors.surface,
-        contentColor = contentColor,
+        contentColor = OdsTheme.colors.onSurface,
         content = content
     )
 }