Skip to content

[WIP] Migrate Design System components in Jetsnack to use Styles #1669

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
riggaroo wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

[WIP] Migrate Design System components in Jetsnack to use Styles #1669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c720861
Migrate JetSnack to use Styles
riggaroo Mar 13, 2026
5a6bcb8
Migrate Text() to a new JetsnackText() composable instead, to be able…
riggaroo Mar 13, 2026
f89e380
Refactor Jetsnack theme to use a unified `JetsnackTheme` class and on…
riggaroo Mar 16, 2026
6a3885c
Run Spotless
riggaroo Mar 16, 2026
169312e
Rename and refactor UI components and theme accessors.
riggaroo Mar 16, 2026
2e57f91
Rename `AppStyles` to `Styles` and refactor styling in components
riggaroo Mar 16, 2026
b733ea8
Update snack components and detail view to use Compose Foundation sty…
riggaroo Mar 17, 2026
d116df3
Enable font family application in textStyleWithFontFamilyFix
riggaroo Mar 17, 2026
252b8f7
Simplify button definition.
riggaroo Mar 18, 2026
8ca8c34
Simplify button definition.
riggaroo Mar 18, 2026
bf00df6
Add minSize to the Button
riggaroo Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Jetsnack/app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ android {
kotlin {
compilerOptions {
jvmTarget = JvmTarget.fromTarget("17")
freeCompilerArgs.add("-opt-in=androidx.compose.foundation.style.ExperimentalFoundationStyleApi")
}
}
compileOptions {
Expand Down
90 changes: 30 additions & 60 deletions Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Button.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,102 +14,69 @@
* limitations under the License.
*/

@file:OptIn(ExperimentalFoundationStyleApi::class)

package com.example.jetsnack.ui.components

import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.indication
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.material3.Text
import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.material3.ripple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
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.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import com.example.jetsnack.ui.theme.JetsnackTheme

@Composable
fun JetsnackButton(
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
style: Style = Style,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = ButtonShape,
border: BorderStroke? = null,
backgroundGradient: List<Color> = JetsnackTheme.colors.interactivePrimary,
disabledBackgroundGradient: List<Color> = JetsnackTheme.colors.interactiveSecondary,
contentColor: Color = JetsnackTheme.colors.textInteractive,
disabledContentColor: Color = JetsnackTheme.colors.textHelp,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit,
) {
JetsnackSurface(
shape = shape,
color = Color.Transparent,
contentColor = if (enabled) contentColor else disabledContentColor,
border = border,
val styleState = rememberUpdatedStyleState(interactionSource) {
it.isEnabled = enabled
}
Row(
modifier = modifier
.clip(shape)
.background(
Brush.horizontalGradient(
colors = if (enabled) backgroundGradient else disabledBackgroundGradient,
),
.semantics(
properties = {
role = Role.Button
},
)
.clickable(
onClick = onClick,
enabled = enabled,
role = Role.Button,
onClick = onClick,
interactionSource = interactionSource,
indication = null,
),
) {
ProvideTextStyle(
value = MaterialTheme.typography.labelLarge,
) {
Row(
Modifier
.defaultMinSize(
minWidth = ButtonDefaults.MinWidth,
minHeight = ButtonDefaults.MinHeight,
)
.indication(interactionSource, ripple())
.padding(contentPadding),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
content = content,
indication = ripple(),
)
}
}
.styleable(styleState, JetsnackTheme.styles.buttonStyle, style),
content = content,
verticalAlignment = Alignment.CenterVertically,
)
}

private val ButtonShape = RoundedCornerShape(percent = 50)

@Preview("default", "round")
@Preview("dark theme", "round", uiMode = UI_MODE_NIGHT_YES)
@Preview("large font", "round", fontScale = 2f)
@Composable
private fun ButtonPreview() {
JetsnackTheme {
JetsnackButton(onClick = {}) {
Button(onClick = {}) {
Text(text = "Demo")
}
}
Expand All @@ -121,8 +88,11 @@ private fun ButtonPreview() {
@Composable
private fun RectangleButtonPreview() {
JetsnackTheme {
JetsnackButton(
onClick = {}, shape = RectangleShape,
Button(
onClick = {},
style = {
shape(RectangleShape)
},
) {
Text(text = "Demo")
}
Expand Down
29 changes: 8 additions & 21 deletions Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Card.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,39 +14,26 @@
* limitations under the License.
*/

@file:OptIn(ExperimentalFoundationStyleApi::class)

package com.example.jetsnack.ui.components

import android.content.res.Configuration
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.then
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.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.jetsnack.ui.theme.JetsnackTheme

@Composable
fun JetsnackCard(
modifier: Modifier = Modifier,
shape: Shape = MaterialTheme.shapes.medium,
color: Color = JetsnackTheme.colors.uiBackground,
contentColor: Color = JetsnackTheme.colors.textPrimary,
border: BorderStroke? = null,
elevation: Dp = 4.dp,
content: @Composable () -> Unit,
) {
JetsnackSurface(
fun JetsnackCard(modifier: Modifier = Modifier, style: Style = Style, content: @Composable () -> Unit) {
Surface(
modifier = modifier,
shape = shape,
color = color,
contentColor = contentColor,
elevation = elevation,
border = border,
style = JetsnackTheme.styles.cardStyle then style,
content = content,
)
}
Expand Down
23 changes: 8 additions & 15 deletions Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Divider.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,36 +14,29 @@
* limitations under the License.
*/

@file:OptIn(ExperimentalFoundationStyleApi::class)

package com.example.jetsnack.ui.components

import android.content.res.Configuration
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material3.HorizontalDivider
import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.jetsnack.ui.theme.JetsnackTheme
import com.example.jetsnack.ui.theme.JetsnackTheme.Companion.LocalJetsnackTheme

@Composable
fun JetsnackDivider(
modifier: Modifier = Modifier,
color: Color = JetsnackTheme.colors.uiBorder.copy(alpha = DividerAlpha),
thickness: Dp = 1.dp,
) {
HorizontalDivider(
modifier = modifier,
color = color,
thickness = thickness,
)
fun JetsnackDivider(modifier: Modifier = Modifier, style: Style = Style) {
Box(modifier = modifier.styleable(null, LocalJetsnackTheme.current.styles.dividerStyle, style))
}

private const val DividerAlpha = 0.12f

@Preview("default", showBackground = true)
@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
@Composable
Expand Down
Loading