From 9851623eec6477679b074149bc53813d3ca59ed4 Mon Sep 17 00:00:00 2001 From: Takuma Homma Date: Mon, 4 Aug 2025 13:48:03 +0900 Subject: [PATCH 1/3] Specify targetSdkVersion to 35 in sample project --- sample/build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sample/build.gradle b/sample/build.gradle index ea93ff97..823d6174 100644 --- a/sample/build.gradle +++ b/sample/build.gradle @@ -26,7 +26,7 @@ android { applicationId "com.airbnb.android.showkasesample" minSdkVersion 21 compileSdk 36 - targetSdkVersion 33 + targetSdkVersion 35 versionCode 1 versionName "1.0" testInstrumentationRunner "com.karumi.shot.ShotTestRunner" From 9f8c5479617b4e94b14c699e84678c52c0ebabf0 Mon Sep 17 00:00:00 2001 From: Takuma Homma Date: Mon, 4 Aug 2025 13:48:31 +0900 Subject: [PATCH 2/3] Support edgeToEdge material2 TopAppBar's height is 56dp, so we couldn't set maxLines to 2 or over --- .../showkase/ui/ShowkaseBrowserActivity.kt | 2 + .../android/showkase/ui/ShowkaseBrowserApp.kt | 210 ++++++++++-------- 2 files changed, 120 insertions(+), 92 deletions(-) diff --git a/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserActivity.kt b/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserActivity.kt index beb3cda7..b96ecda4 100644 --- a/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserActivity.kt +++ b/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserActivity.kt @@ -4,6 +4,7 @@ import android.content.Context import android.content.Intent import android.os.Bundle import androidx.activity.compose.setContent +import androidx.activity.enableEdgeToEdge import androidx.appcompat.app.AppCompatActivity import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -20,6 +21,7 @@ import com.airbnb.android.showkase.models.ShowkaseElementsMetadata */ class ShowkaseBrowserActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { + enableEdgeToEdge() super.onCreate(savedInstanceState) val classKey = intent.extras?.getString(SHOWKASE_ROOT_MODULE_KEY) ?: throw ShowkaseException( diff --git a/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt b/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt index 651d2988..9d05c8d4 100644 --- a/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt +++ b/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt @@ -14,12 +14,15 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeDrawingPadding import androidx.compose.material.Icon import androidx.compose.material.IconButton import androidx.compose.material.Scaffold +import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.material.TextFieldDefaults +import androidx.compose.material.TopAppBar import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Search @@ -60,7 +63,6 @@ import com.airbnb.android.showkase.models.insideGroup import com.airbnb.android.showkase.ui.SemanticsUtils.lineCountVal @Suppress("LongMethod") -@SuppressLint("UnusedMaterialScaffoldPaddingParameter") @Composable internal fun ShowkaseBrowserApp( groupedComponentMap: Map>, @@ -79,56 +81,63 @@ internal fun ShowkaseBrowserApp( val navController = rememberNavController() val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route + Surface( + color = Color.White + ) { + Scaffold( + drawerContent = null, + topBar = { + ShowkaseAppBar( + currentRoute = currentRoute, + showkaseBrowserScreenMetadata = showkaseBrowserScreenMetadata, + onSearchQueryChanged = { + onUpdateShowkaseBrowserScreenMetadata( + showkaseBrowserScreenMetadata.copy(searchQuery = it) + ) + }, + onClearSearch = { + onUpdateShowkaseBrowserScreenMetadata( + showkaseBrowserScreenMetadata.copy(searchQuery = "") + ) + }, + onActivateSearch = { + onUpdateShowkaseBrowserScreenMetadata( + showkaseBrowserScreenMetadata.copy(isSearchActive = true) + ) + }, + onCloseSearch = { + onUpdateShowkaseBrowserScreenMetadata( + showkaseBrowserScreenMetadata.copy(isSearchActive = false) + ) + }, - Scaffold( - drawerContent = null, - topBar = { - ShowkaseAppBar( - currentRoute = currentRoute, - showkaseBrowserScreenMetadata = showkaseBrowserScreenMetadata, - onSearchQueryChanged = { - onUpdateShowkaseBrowserScreenMetadata( - showkaseBrowserScreenMetadata.copy(searchQuery = it) ) - }, - onClearSearch = { - onUpdateShowkaseBrowserScreenMetadata( - showkaseBrowserScreenMetadata.copy(searchQuery = "") + }, + content = { contentPadding -> + Column( + modifier = Modifier + .fillMaxSize() + .background(color = SHOWKASE_COLOR_BACKGROUND) + .padding(contentPadding), + ) { + ShowkaseBodyContent( + navController, + groupedComponentMap, + groupedColorsMap, + groupedTypographyMap, + showkaseBrowserScreenMetadata, + onUpdateShowkaseBrowserScreenMetadata, + navigateTo = { + navController.navigate(it.name) + } ) - }, - onActivateSearch = { - onUpdateShowkaseBrowserScreenMetadata( - showkaseBrowserScreenMetadata.copy(isSearchActive = true) - ) - }, - onCloseSearch = { - onUpdateShowkaseBrowserScreenMetadata( - showkaseBrowserScreenMetadata.copy(isSearchActive = false) - ) - }, - - ) - }, - content = { - Column( - modifier = Modifier - .fillMaxSize() - .background(color = SHOWKASE_COLOR_BACKGROUND), - ) { - ShowkaseBodyContent( - navController, - groupedComponentMap, - groupedColorsMap, - groupedTypographyMap, - showkaseBrowserScreenMetadata, - onUpdateShowkaseBrowserScreenMetadata, - navigateTo = { - navController.navigate(it.name) - } - ) - } - } - ) + } + }, + modifier = Modifier + .fillMaxSize() + .safeDrawingPadding() + ) + } } } @@ -141,41 +150,43 @@ internal fun ShowkaseAppBar( onActivateSearch: () -> Unit, onClearSearch: () -> Unit, ) { - - Row( - Modifier - .fillMaxWidth() - .graphicsLayer(shadowElevation = 4f) - .padding(padding2x), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically + Surface( + elevation = 4.dp ) { - ShowkaseAppBarTitle( - showkaseBrowserScreenMetadata.isSearchActive, - showkaseBrowserScreenMetadata.currentGroup, - showkaseBrowserScreenMetadata.currentComponentName, - showkaseBrowserScreenMetadata.currentComponentStyleName, - currentRoute, - showkaseBrowserScreenMetadata.searchQuery, - { - onSearchQueryChanged(it) - }, - Modifier.fillMaxWidth(0.75f), - onCloseSearchFieldClick = { - onCloseSearch() - }, - onClearSearchField = { - onClearSearch() - } - ) - ShowkaseAppBarActions( - isActive = showkaseBrowserScreenMetadata.isSearchActive, - onActionClicked = { - onActivateSearch() - }, - currentRoute = currentRoute, - modifier = Modifier.fillMaxWidth(0.25f) - ) + Row( + Modifier + .fillMaxWidth() + .padding(padding2x), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + ShowkaseAppBarTitle( + isSearchActive = showkaseBrowserScreenMetadata.isSearchActive, + currentGroup = showkaseBrowserScreenMetadata.currentGroup, + currentComponentName = showkaseBrowserScreenMetadata.currentComponentName, + currentComponentStyleName = showkaseBrowserScreenMetadata.currentComponentStyleName, + currentRoute = currentRoute, + searchQuery = showkaseBrowserScreenMetadata.searchQuery, + searchQueryValueChange = { + onSearchQueryChanged(it) + }, + modifier = Modifier.fillMaxWidth(0.75f), + onCloseSearchFieldClick = { + onCloseSearch() + }, + onClearSearchField = { + onClearSearch() + } + ) + ShowkaseAppBarActions( + isActive = showkaseBrowserScreenMetadata.isSearchActive, + onActionClicked = { + onActivateSearch() + }, + currentRoute = currentRoute, + modifier = Modifier.fillMaxWidth(0.25f) + ) + } } /** @@ -186,18 +197,33 @@ internal fun ShowkaseAppBar( // TopAppBar( // title = { // ShowkaseAppBarTitle( -// showkaseBrowserScreenMetadata.value.isSearchActive, -// showkaseBrowserScreenMetadata.value.currentGroup, -// showkaseBrowserScreenMetadata.value.currentComponentName, -// currentRoute, -// showkaseBrowserScreenMetadata.value.searchQuery -// ) { -// showkaseBrowserScreenMetadata.value = -// showkaseBrowserScreenMetadata.value.copy(searchQuery = it) -// } +// isSearchActive = showkaseBrowserScreenMetadata.isSearchActive, +// currentGroup = showkaseBrowserScreenMetadata.currentGroup, +// currentComponentName = showkaseBrowserScreenMetadata.currentComponentName, +// currentComponentStyleName = showkaseBrowserScreenMetadata.currentComponentStyleName, +// currentRoute = currentRoute, +// searchQuery = showkaseBrowserScreenMetadata.searchQuery, +// searchQueryValueChange = { +// onSearchQueryChanged(it) +// }, +// modifier = Modifier, +// onCloseSearchFieldClick = { +// onCloseSearch() +// }, +// onClearSearchField = { +// onClearSearch() +// } +// ) // }, // actions = { -// ShowkaseAppBarActions(showkaseBrowserScreenMetadata, currentRoute) +// ShowkaseAppBarActions( +// isActive = showkaseBrowserScreenMetadata.isSearchActive, +// onActionClicked = { +// onActivateSearch() +// }, +// currentRoute = currentRoute, +// modifier = Modifier +// ) // }, // backgroundColor = Color.White // ) From e79d08ce0c44675e35644aba44be77b60836a3cc Mon Sep 17 00:00:00 2001 From: Takuma Homma Date: Mon, 4 Aug 2025 14:03:14 +0900 Subject: [PATCH 3/3] Fix import --- .../java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt | 3 --- 1 file changed, 3 deletions(-) diff --git a/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt b/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt index 9d05c8d4..ae251881 100644 --- a/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt +++ b/showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt @@ -1,6 +1,5 @@ package com.airbnb.android.showkase.ui -import android.annotation.SuppressLint import android.content.res.Configuration import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.expandHorizontally @@ -22,7 +21,6 @@ import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.material.TextField import androidx.compose.material.TextFieldDefaults -import androidx.compose.material.TopAppBar import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Search @@ -34,7 +32,6 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalInspectionMode