Review: Factorize top padding and window insets of top bars

Author: florentmaitre

app/src/main/java/com/orange/ouds/app/ui/about/AboutFileScreen.kt

@@ -20,19 +20,18 @@ import android.webkit.WebViewClient
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.statusBars
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.viewinterop.AndroidView
 import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.app.ui.utilities.injectLightDarkModeCss
 import com.orange.ouds.app.ui.utilities.launchUrl
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import java.io.BufferedReader
 import java.nio.charset.StandardCharsets
@@ -44,7 +43,7 @@ private const val FilePath = "file:///android_res/$FileResourceDir/"
 internal fun AboutFileScreen(fileMenuItem: AboutFileMenuItem) {
     val context = LocalContext.current
     val horizontalPadding = OudsTheme.grids.margin.value
-    val topPadding = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight + OudsTheme.spaces.fixed.medium
+    val topPadding = topBarsTopPadding + OudsTheme.spaces.fixed.medium
     val bottomPadding = OudsTheme.spaces.fixed.medium.value
     val isSystemInDarkTheme = isSystemInDarkTheme()
     Screen {

app/src/main/java/com/orange/ouds/app/ui/about/AboutMaterialComponentsScreen.kt

@@ -146,8 +146,9 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
-import com.orange.ouds.app.ui.utilities.topBarsHeightPadding
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
@@ -168,8 +169,8 @@ fun AboutMaterialComponentsScreen() {
                     modifier = Modifier
                         .fillMaxSize()
                         .verticalScroll(rememberScrollState())
-                        .topBarsHeightPadding()
-                        .padding(bottom = OudsTheme.spaces.fixed.medium)
+                        .consumeTopBarsTopWindowInsets()
+                        .padding(top = topBarsTopPadding, bottom = OudsTheme.spaces.fixed.medium)
                 ) {
 
                     // APP BARS

app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt

@@ -49,7 +49,9 @@ import com.orange.ouds.app.BuildConfig
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 
@@ -88,9 +90,9 @@ fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
     val context = LocalContext.current
     Screen {
         LazyColumn(
-            modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
+            modifier = Modifier.consumeTopBarsTopWindowInsets(),
             contentPadding = PaddingValues(
-                top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
+                top = topBarsTopPadding,
                 bottom = OudsTheme.spaces.fixed.medium + OudsNavigationBarHeight
             )
         ) {

app/src/main/java/com/orange/ouds/app/ui/about/AboutVersionsScreen.kt

@@ -33,7 +33,9 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.theme.OudsVersion
 import kotlin.reflect.full.declaredMemberProperties
@@ -42,9 +44,9 @@ import kotlin.reflect.full.declaredMemberProperties
 fun AboutVersionsScreen() {
     Screen {
         LazyColumn(
-            modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
+            modifier = Modifier.consumeTopBarsTopWindowInsets(),
             contentPadding = PaddingValues(
-                top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
+                top = topBarsTopPadding,
                 bottom = OudsTheme.spaces.fixed.medium
             )
         ) {

app/src/main/java/com/orange/ouds/app/ui/components/ComponentVariantsScreen.kt

@@ -35,16 +35,18 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.DetailScreenHeader
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
 
 @Composable
 fun ComponentVariantsScreen(component: Component, onVariantClick: (id: Long) -> Unit) {
     Screen {
         LazyColumn(
-            modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
+            modifier = Modifier.consumeTopBarsTopWindowInsets(),
             contentPadding = PaddingValues(
-                top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
+                top = topBarsTopPadding,
                 bottom = OudsTheme.spaces.fixed.medium
             )
         ) {

app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt

@@ -25,7 +25,8 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.LargeCard
 import com.orange.ouds.app.ui.utilities.composable.Screen
-import com.orange.ouds.app.ui.utilities.topBarsHeightPadding
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 
@@ -44,7 +45,8 @@ private fun ComponentsScreen(components: List<Component>, onComponentClick: (Lon
             modifier = Modifier
                 .fillMaxSize()
                 .verticalScroll(rememberScrollState())
-                .topBarsHeightPadding()
+                .consumeTopBarsTopWindowInsets()
+                .padding(top = topBarsTopPadding)
                 .padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin)
                 .padding(bottom = OudsNavigationBarHeight),
             verticalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.medium)

app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt

@@ -27,23 +27,16 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalRippleConfiguration
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -73,6 +66,8 @@ import com.orange.ouds.app.ui.utilities.composable.CodeSnippet
 import com.orange.ouds.app.ui.utilities.composable.DetailScreenHeader
 import com.orange.ouds.app.ui.utilities.composable.ImageIllustration
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsBorderStyle
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.theme.OudsTypography
@@ -84,9 +79,9 @@ import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
 fun TokenCategoryDetailScreen(tokenCategory: TokenCategory<*>, onSubcategoryClick: (Long) -> Unit) {
     Screen {
         LazyColumn(
-            modifier = Modifier.consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top)),
+            modifier = Modifier.consumeTopBarsTopWindowInsets(),
             contentPadding = PaddingValues(
-                top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight,
+                top = topBarsTopPadding,
                 bottom = OudsTheme.spaces.fixed.medium
             )
         ) {

app/src/main/java/com/orange/ouds/app/ui/tokens/TokensScreen.kt

@@ -27,7 +27,8 @@ import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.app.ui.utilities.composable.ImageIllustration
 import com.orange.ouds.app.ui.utilities.composable.LargeCard
 import com.orange.ouds.app.ui.utilities.composable.Screen
-import com.orange.ouds.app.ui.utilities.topBarsHeightPadding
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 
@@ -46,7 +47,8 @@ private fun TokensScreen(tokenCategories: List<TokenCategory<*>>, onTokenCategor
             modifier = Modifier
                 .fillMaxSize()
                 .verticalScroll(rememberScrollState())
-                .topBarsHeightPadding()
+                .consumeTopBarsTopWindowInsets()
+                .padding(top = topBarsTopPadding)
                 .padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin)
                 .padding(bottom = OudsNavigationBarHeight),
             verticalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.medium)

app/src/main/java/com/orange/ouds/app/ui/utilities/ModifierExt.kt

@@ -20,9 +20,12 @@ import androidx.compose.foundation.indication
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBars
-import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -38,6 +41,7 @@ import androidx.compose.ui.semantics.disabled
 import androidx.compose.ui.semantics.onClick
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.max
 import com.orange.ouds.core.theme.OudsTheme
@@ -101,7 +105,8 @@ fun Modifier.priorityClickable(
 }
 
 @Composable
-fun Modifier.topBarsHeightPadding(): Modifier {
-    return windowInsetsPadding(WindowInsets.statusBars)
-        .padding(top = TopAppBarDefaults.TopAppBarExpandedHeight)
-}
+fun Modifier.consumeTopBarsTopWindowInsets() = consumeWindowInsets(WindowInsets.statusBars.only(WindowInsetsSides.Top))
+
+val topBarsTopPadding: Dp
+    @Composable
+    get() = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() + TopAppBarDefaults.TopAppBarExpandedHeight

app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt

@@ -60,7 +60,8 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.LifecycleResumeEffect
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
-import com.orange.ouds.app.ui.utilities.topBarsHeightPadding
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
 import com.orange.ouds.core.theme.OudsTheme
 import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.CoroutineScope
@@ -163,7 +164,8 @@ fun CustomizationBottomSheetScaffold(
                     .verticalScroll(rememberScrollState())
                     .consumeWindowInsets(innerPadding)
                     .padding(innerPadding)
-                    .topBarsHeightPadding(),
+                    .consumeTopBarsTopWindowInsets()
+                    .padding(top = topBarsTopPadding),
             ) {
                 content()
             }