Update for Jetpack Compose 1.0.0-alpha09

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Button.kt

@@ -17,6 +17,7 @@
 package com.example.jetsnack.ui.components
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
@@ -26,13 +27,14 @@ import androidx.compose.foundation.layout.defaultMinSizeConstraints
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ButtonConstants
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ProvideTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import com.example.jetsnack.ui.theme.JetsnackTheme
@@ -48,7 +50,7 @@ fun JetsnackButton(
     disabledBackgroundGradient: List<Color> = JetsnackTheme.colors.interactiveSecondary,
     contentColor: Color = JetsnackTheme.colors.textInteractive,
     disabledContentColor: Color = JetsnackTheme.colors.textHelp,
-    contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
     content: @Composable RowScope.() -> Unit
 ) {
     JetsnackSurface(
@@ -58,8 +60,10 @@ fun JetsnackButton(
         border = border,
         modifier = modifier
             .clip(shape)
-            .horizontalGradientBackground(
-                colors = if (enabled) backgroundGradient else disabledBackgroundGradient
+            .background(
+                Brush.horizontalGradient(
+                    colors = if (enabled) backgroundGradient else disabledBackgroundGradient
+                )
             )
             .clickable(
                 onClick = onClick,
@@ -72,8 +76,8 @@ fun JetsnackButton(
             Row(
                 Modifier
                     .defaultMinSizeConstraints(
-                        minWidth = ButtonConstants.DefaultMinWidth,
-                        minHeight = ButtonConstants.DefaultMinHeight
+                        minWidth = ButtonDefaults.MinWidth,
+                        minHeight = ButtonDefaults.MinHeight
                     )
                     .fillMaxWidth()
                     .padding(contentPadding),

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Gradient.kt

@@ -19,76 +19,34 @@ package com.example.jetsnack.ui.components
 import androidx.compose.animation.animate
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
-import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.HorizontalGradient
-import androidx.compose.ui.graphics.LinearGradient
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.TileMode
-import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 
-fun Modifier.horizontalGradientBackground(
-    colors: List<Color>
-) = drawWithCache {
-    // Use drawWithCache modifier to create and cache the gradient once size is known or changes.
-    val gradient = HorizontalGradient(
-        startX = 0.0f,
-        endX = size.width,
-        colors = colors
-    )
-    onDrawBehind {
-        drawRect(brush = gradient)
-    }
-}
-
 fun Modifier.diagonalGradientTint(
     colors: List<Color>,
     blendMode: BlendMode
-) = gradientTint(colors, blendMode) { gradientColors, size ->
-    LinearGradient(
-        colors = gradientColors,
-        startX = 0f,
-        startY = 0f,
-        endX = size.width,
-        endY = size.height
+) = drawWithContent {
+    drawContent()
+    drawRect(
+        brush = Brush.linearGradient(colors),
+        blendMode = blendMode
     )
 }
 
-fun Modifier.gradientTint(
-    colors: List<Color>,
-    blendMode: BlendMode,
-    brushProvider: (List<Color>, Size) -> LinearGradient
-) = composed {
-    var size by remember { mutableStateOf(Size.Zero) }
-    val gradient = remember(colors, size) { brushProvider(colors, size) }
-    drawWithContent {
-        drawContent()
-        size = this.size
-        drawRect(
-            brush = gradient,
-            blendMode = blendMode
-        )
-    }
-}
-
 fun Modifier.offsetGradientBackground(
     colors: List<Color>,
     width: Float,
     offset: Float = 0f
 ) = background(
-    HorizontalGradient(
+    Brush.horizontalGradient(
         colors,
         startX = -offset,
         endX = width - offset,
@@ -100,19 +58,11 @@ fun Modifier.diagonalGradientBorder(
     colors: List<Color>,
     borderSize: Dp = 2.dp,
     shape: Shape
-) = gradientBorder(
-    colors = colors,
-    borderSize = borderSize,
+) = border(
+    width = borderSize,
+    brush = Brush.linearGradient(colors),
     shape = shape
-) { gradientColors, size ->
-    LinearGradient(
-        colors = gradientColors,
-        startX = 0f,
-        startY = 0f,
-        endX = size.width.toFloat(),
-        endY = size.height.toFloat()
-    )
-}
+)
 
 fun Modifier.fadeInDiagonalGradientBorder(
     showBorder: Boolean,
@@ -129,19 +79,3 @@ fun Modifier.fadeInDiagonalGradientBorder(
         shape = shape
     )
 }
-
-fun Modifier.gradientBorder(
-    colors: List<Color>,
-    borderSize: Dp = 2.dp,
-    shape: Shape,
-    brushProvider: (List<Color>, IntSize) -> LinearGradient
-) = composed {
-    var size by remember { mutableStateOf(IntSize.Zero) }
-    val gradient = remember(colors, size) { brushProvider(colors, size) }
-    val sizeProvider = onSizeChanged { size = it }
-    sizeProvider then border(
-        width = borderSize,
-        brush = gradient,
-        shape = shape
-    )
-}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Scaffold.kt

@@ -18,7 +18,7 @@ package com.example.jetsnack.ui.components
 
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.material.DrawerConstants
+import androidx.compose.material.DrawerDefaults
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.FabPosition
 import androidx.compose.material.MaterialTheme
@@ -51,7 +51,7 @@ fun JetsnackScaffold(
     isFloatingActionButtonDocked: Boolean = false,
     drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
     drawerShape: Shape = MaterialTheme.shapes.large,
-    drawerElevation: Dp = DrawerConstants.DefaultElevation,
+    drawerElevation: Dp = DrawerDefaults.Elevation,
     drawerBackgroundColor: Color = JetsnackTheme.colors.uiBackground,
     drawerContentColor: Color = JetsnackTheme.colors.textSecondary,
     drawerScrimColor: Color = JetsnackTheme.colors.uiBorder,

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Snacks.kt

@@ -31,7 +31,7 @@ import androidx.compose.foundation.layout.preferredHeightIn
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.preferredWidth
 import androidx.compose.foundation.layout.wrapContentWidth
-import androidx.compose.foundation.lazy.LazyRowFor
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
@@ -61,8 +61,8 @@ private val HighlightCardWidth = 170.dp
 private val HighlightCardPadding = 16.dp
 
 // The Cards show a gradient which spans 3 cards and scrolls with parallax.
-@Composable
 private val gradientWidth
+    @Composable
     get() = with(AmbientDensity.current) {
         (3 * (HighlightCardWidth + HighlightCardPadding).toPx())
     }
@@ -144,12 +144,13 @@ private fun Snacks(
     onSnackClick: (Long) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    LazyRowFor(
-        items = snacks,
+    LazyRow(
         modifier = modifier,
         contentPadding = PaddingValues(start = 12.dp, end = 12.dp)
-    ) { snack ->
-        SnackItem(snack, onSnackClick)
+    ) {
+        items(snacks) { snack ->
+            SnackItem(snack, onSnackClick)
+        }
     }
 }
 

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/search/Categories.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.home.search
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -25,14 +26,15 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.layout.preferredHeightIn
 import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.lazy.LazyColumnForIndexed
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.tooling.preview.Preview
@@ -42,16 +44,17 @@ import com.example.jetsnack.model.SearchCategory
 import com.example.jetsnack.model.SearchCategoryCollection
 import com.example.jetsnack.ui.components.SnackImage
 import com.example.jetsnack.ui.components.VerticalGrid
-import com.example.jetsnack.ui.components.horizontalGradientBackground
 import com.example.jetsnack.ui.theme.JetsnackTheme
 import kotlin.math.max
 
 @Composable
 fun SearchCategories(
     categories: List<SearchCategoryCollection>
 ) {
-    LazyColumnForIndexed(categories) { index, collection ->
-        SearchCategoryCollection(collection, index)
+    LazyColumn {
+        itemsIndexed(categories) { index, collection ->
+            SearchCategoryCollection(collection, index)
+        }
     }
     Spacer(Modifier.preferredHeight(8.dp))
 }
@@ -104,7 +107,7 @@ private fun SearchCategory(
             .aspectRatio(1.45f)
             .shadow(elevation = 3.dp, shape = CategoryShape)
             .clip(CategoryShape)
-            .horizontalGradientBackground(gradient)
+            .background(Brush.horizontalGradient(gradient))
             .clickable { /* todo */ },
         content = {
             Text(

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/search/Results.kt

@@ -29,7 +29,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.preferredHeight
 import androidx.compose.foundation.layout.preferredSize
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.foundation.lazy.LazyColumnForIndexed
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
@@ -70,8 +70,10 @@ fun SearchResults(
             color = JetsnackTheme.colors.textPrimary,
             modifier = Modifier.padding(horizontal = 24.dp, vertical = 4.dp)
         )
-        LazyColumnForIndexed(searchResults) { index, snack ->
-            SearchResult(snack, onSnackClick, index != 0)
+        LazyColumn {
+            itemsIndexed(searchResults) { index, snack ->
+                SearchResult(snack, onSnackClick, index != 0)
+            }
         }
     }
 }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/search/Search.kt

@@ -16,7 +16,6 @@
 
 package com.example.jetsnack.ui.home.search
 
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -47,9 +46,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.ExperimentalFocus
 import androidx.compose.ui.focus.isFocused
-import androidx.compose.ui.focusObserver
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
@@ -160,7 +158,6 @@ class SearchState(
         }
 }
 
-@OptIn(ExperimentalFoundationApi::class, ExperimentalFocus::class)
 @Composable
 private fun SearchBar(
     query: TextFieldValue,
@@ -203,7 +200,7 @@ private fun SearchBar(
                     onValueChange = onQueryChange,
                     modifier = Modifier
                         .weight(1f)
-                        .focusObserver {
+                        .onFocusChanged {
                             onSearchFocusChange(it.isFocused)
                         }
                 )

Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt

@@ -45,6 +45,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.AmbientDensity
@@ -65,7 +66,6 @@ import com.example.jetsnack.ui.components.JetsnackSurface
 import com.example.jetsnack.ui.components.QuantitySelector
 import com.example.jetsnack.ui.components.SnackCollection
 import com.example.jetsnack.ui.components.SnackImage
-import com.example.jetsnack.ui.components.horizontalGradientBackground
 import com.example.jetsnack.ui.theme.JetsnackTheme
 import com.example.jetsnack.ui.theme.Neutral8
 import com.example.jetsnack.ui.utils.formatPrice
@@ -110,7 +110,7 @@ private fun Header() {
         modifier = Modifier
             .preferredHeight(280.dp)
             .fillMaxWidth()
-            .horizontalGradientBackground(JetsnackTheme.colors.interactivePrimary)
+            .background(Brush.horizontalGradient(JetsnackTheme.colors.interactivePrimary))
     )
 }
 

Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Theme.kt

@@ -102,8 +102,8 @@ fun JetsnackTheme(
 }
 
 object JetsnackTheme {
-    @Composable
     val colors: JetsnackColors
+        @Composable
         get() = AmbientJetsnackColors.current
 }
 

Jetsnack/build.gradle

@@ -29,7 +29,7 @@ buildscript {
 }
 
 plugins {
-    id 'com.diffplug.spotless' version '5.7.0'
+    id 'com.diffplug.spotless' version '5.8.2'
 }
 
 subprojects {