Skip to content

Commit 169312e

Browse files
riggarooriggaroo
committed
Rename and refactor UI components and theme accessors.
- Rename `JetsnackButton`, `JetsnackSurface`, and `JetsnackText` to `Button`, `Surface`, and `Text`. - Rename `jetsnackTextStyle` to `textStyleWithFontFamilyFix`. - Replace `currentJetsnackTheme` with direct `colors`, `typography`, and `shapes` accessors within `StyleScope`. - Update `AppStyles` to use the new theme accessors and refined padding properties. - Add a ripple indication to the base `Button` component.
1 parent 6a3885c commit 169312e

21 files changed

Lines changed: 271 additions & 263 deletions

File tree

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

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ package com.example.jetsnack.ui.components
2020

2121
import android.content.res.Configuration.UI_MODE_NIGHT_YES
2222
import androidx.compose.foundation.clickable
23-
import androidx.compose.foundation.indication
2423
import androidx.compose.foundation.interaction.MutableInteractionSource
2524
import androidx.compose.foundation.layout.Arrangement
2625
import androidx.compose.foundation.layout.Row
@@ -31,8 +30,6 @@ import androidx.compose.foundation.style.Style
3130
import androidx.compose.foundation.style.rememberUpdatedStyleState
3231
import androidx.compose.foundation.style.then
3332
import androidx.compose.material3.ButtonDefaults
34-
import androidx.compose.material3.MaterialTheme
35-
import androidx.compose.material3.ProvideTextStyle
3633
import androidx.compose.material3.ripple
3734
import androidx.compose.runtime.Composable
3835
import androidx.compose.runtime.remember
@@ -43,9 +40,8 @@ import androidx.compose.ui.semantics.Role
4340
import androidx.compose.ui.tooling.preview.Preview
4441
import com.example.jetsnack.ui.theme.JetsnackTheme
4542

46-
// todo think about the text style here
4743
@Composable
48-
fun JetsnackButton(
44+
fun Button(
4945
onClick: () -> Unit,
5046
modifier: Modifier = Modifier,
5147
style: Style = Style,
@@ -56,7 +52,7 @@ fun JetsnackButton(
5652
val styleState = rememberUpdatedStyleState(interactionSource, {
5753
it.isEnabled = enabled
5854
})
59-
JetsnackSurface(
55+
Surface(
6056
style = JetsnackTheme.appStyles.buttonStyle then style,
6157
styleState = styleState,
6258
modifier = modifier
@@ -65,24 +61,19 @@ fun JetsnackButton(
6561
enabled = enabled,
6662
role = Role.Button,
6763
interactionSource = interactionSource,
68-
indication = null,
64+
indication = ripple() //TODO This ripple doesn't know the shape of the button.
6965
),
7066
) {
71-
ProvideTextStyle(
72-
value = MaterialTheme.typography.labelLarge,
73-
) {
74-
Row(
75-
Modifier
76-
.defaultMinSize(
77-
minWidth = ButtonDefaults.MinWidth,
78-
minHeight = ButtonDefaults.MinHeight,
79-
)
80-
.indication(interactionSource, ripple()),
81-
horizontalArrangement = Arrangement.Center,
82-
verticalAlignment = Alignment.CenterVertically,
83-
content = content,
84-
)
85-
}
67+
Row(
68+
Modifier
69+
.defaultMinSize(
70+
minWidth = ButtonDefaults.MinWidth,
71+
minHeight = ButtonDefaults.MinHeight,
72+
),
73+
horizontalArrangement = Arrangement.Center,
74+
verticalAlignment = Alignment.CenterVertically,
75+
content = content,
76+
)
8677
}
8778
}
8879

@@ -92,8 +83,8 @@ fun JetsnackButton(
9283
@Composable
9384
private fun ButtonPreview() {
9485
JetsnackTheme {
95-
JetsnackButton(onClick = {}) {
96-
JetsnackText(text = "Demo")
86+
Button(onClick = {}) {
87+
Text(text = "Demo")
9788
}
9889
}
9990
}
@@ -104,12 +95,12 @@ private fun ButtonPreview() {
10495
@Composable
10596
private fun RectangleButtonPreview() {
10697
JetsnackTheme {
107-
JetsnackButton(
98+
Button(
10899
onClick = {}, style = {
109100
shape(RectangleShape)
110101
},
111102
) {
112-
JetsnackText(text = "Demo")
103+
Text(text = "Demo")
113104
}
114105
}
115106
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import com.example.jetsnack.ui.theme.JetsnackTheme
3131

3232
@Composable
3333
fun JetsnackCard(modifier: Modifier = Modifier, style: Style = Style, content: @Composable () -> Unit) {
34-
JetsnackSurface(
34+
Surface(
3535
modifier = modifier,
3636
style = JetsnackTheme.appStyles.cardStyle then style,
3737
content = content,
@@ -45,7 +45,7 @@ fun JetsnackCard(modifier: Modifier = Modifier, style: Style = Style, content: @
4545
private fun CardPreview() {
4646
JetsnackTheme {
4747
JetsnackCard {
48-
JetsnackText(text = "Demo", modifier = Modifier.padding(16.dp))
48+
Text(text = "Demo", modifier = Modifier.padding(16.dp))
4949
}
5050
}
5151
}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ import com.example.jetsnack.R
5555
import com.example.jetsnack.model.Filter
5656
import com.example.jetsnack.ui.FilterSharedElementKey
5757
import com.example.jetsnack.ui.theme.JetsnackTheme
58-
import com.example.jetsnack.ui.theme.currentJetsnackTheme
58+
import com.example.jetsnack.ui.theme.colors
59+
import com.example.jetsnack.ui.theme.shapes
60+
import com.example.jetsnack.ui.theme.typography
5961

6062
@Composable
6163
fun FilterBar(
@@ -98,7 +100,7 @@ fun FilterBar(
98100
FilterChip(
99101
filter = filter,
100102
style = Style {
101-
shape(currentJetsnackTheme.shapes.small)
103+
shape(shapes.small)
102104
},
103105
)
104106
}
@@ -118,7 +120,7 @@ fun FilterChip(filter: Filter, modifier: Modifier = Modifier, style: Style = Sty
118120
},
119121
)
120122

121-
JetsnackSurface(
123+
Surface(
122124
modifier = modifier
123125
.toggleable(
124126
value = selected,
@@ -135,7 +137,7 @@ fun FilterChip(filter: Filter, modifier: Modifier = Modifier, style: Style = Sty
135137
animate {
136138
background(
137139
Brush.horizontalGradient(
138-
colors = currentJetsnackTheme.colors.interactiveSecondary,
140+
colors = colors.interactiveSecondary,
139141
startX = 0f,
140142
endX = 200f,
141143
tileMode = TileMode.Mirror,
@@ -148,10 +150,10 @@ fun FilterChip(filter: Filter, modifier: Modifier = Modifier, style: Style = Sty
148150
modifier = Modifier
149151
.styleable(styleState, innerBackgroundStyle),
150152
) {
151-
JetsnackText(
153+
Text(
152154
text = filter.name,
153155
style = {
154-
jetsnackTextStyle(currentJetsnackTheme.typography.bodySmall)
156+
textStyleWithFontFamilyFix(typography.bodySmall)
155157
},
156158
maxLines = 1,
157159
modifier = Modifier.padding(

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,19 @@ import androidx.annotation.DrawableRes
2323
import androidx.compose.foundation.clickable
2424
import androidx.compose.foundation.interaction.MutableInteractionSource
2525
import androidx.compose.foundation.interaction.collectIsPressedAsState
26+
import androidx.compose.foundation.layout.Box
2627
import androidx.compose.foundation.layout.padding
2728
import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
2829
import androidx.compose.foundation.style.Style
30+
import androidx.compose.foundation.style.pressed
2931
import androidx.compose.foundation.style.rememberUpdatedStyleState
3032
import androidx.compose.foundation.style.styleable
3133
import androidx.compose.material3.Icon
3234
import androidx.compose.material3.Surface
35+
import androidx.compose.material3.Text
3336
import androidx.compose.runtime.Composable
3437
import androidx.compose.runtime.remember
38+
import androidx.compose.ui.Alignment
3539
import androidx.compose.ui.Modifier
3640
import androidx.compose.ui.graphics.BlendMode
3741
import androidx.compose.ui.graphics.Color
@@ -72,8 +76,8 @@ fun JetsnackGradientTintedIconButton(
7276
val modifierColor = if (pressed) {
7377
Modifier.contentTintDiagonalGradient(
7478
colors = listOf(
75-
JetsnackTheme.colors.textSecondary,
76-
JetsnackTheme.colors.textSecondary,
79+
JetsnackTheme.colors.textPrimary,
80+
JetsnackTheme.colors.textPrimary,
7781
),
7882
blendMode = blendMode,
7983
)
@@ -103,4 +107,4 @@ private fun GradientTintedIconButtonPreview() {
103107
modifier = Modifier.padding(4.dp),
104108
)
105109
}
106-
}
110+
}

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,17 @@ import androidx.compose.ui.unit.dp
3838
import androidx.compose.ui.unit.sp
3939
import com.example.jetsnack.R
4040
import com.example.jetsnack.ui.theme.JetsnackTheme
41-
import com.example.jetsnack.ui.theme.currentJetsnackTheme
41+
import com.example.jetsnack.ui.theme.colors
42+
import com.example.jetsnack.ui.theme.typography
4243

4344
@Composable
4445
fun QuantitySelector(count: Int, decreaseItemCount: () -> Unit, increaseItemCount: () -> Unit, modifier: Modifier = Modifier) {
4546
Row(modifier = modifier) {
46-
JetsnackText(
47+
Text(
4748
text = stringResource(R.string.quantity),
4849
style = {
49-
jetsnackTextStyle(currentJetsnackTheme.typography.titleMedium)
50-
contentColor(currentJetsnackTheme.colors.textSecondary)
50+
textStyleWithFontFamilyFix(typography.titleMedium)
51+
contentColor(colors.textSecondary)
5152
fontWeight(FontWeight.Normal)
5253
},
5354
modifier = Modifier
@@ -65,12 +66,12 @@ fun QuantitySelector(count: Int, decreaseItemCount: () -> Unit, increaseItemCoun
6566
modifier = Modifier
6667
.align(Alignment.CenterVertically),
6768
) {
68-
JetsnackText(
69+
Text(
6970
text = "$it",
7071
style = {
71-
jetsnackTextStyle(currentJetsnackTheme.typography.titleSmall)
72+
textStyleWithFontFamilyFix(typography.titleSmall)
7273
fontSize(18.sp)
73-
contentColor(currentJetsnackTheme.colors.textPrimary)
74+
contentColor(colors.textPrimary)
7475
textAlign(TextAlign.Center)
7576
},
7677
modifier = Modifier.widthIn(min = 24.dp),
@@ -91,7 +92,7 @@ fun QuantitySelector(count: Int, decreaseItemCount: () -> Unit, increaseItemCoun
9192
@Composable
9293
fun QuantitySelectorPreview() {
9394
JetsnackTheme {
94-
JetsnackSurface {
95+
Surface {
9596
QuantitySelector(1, {}, {})
9697
}
9798
}
@@ -101,7 +102,7 @@ fun QuantitySelectorPreview() {
101102
@Composable
102103
fun QuantitySelectorPreviewRtl() {
103104
JetsnackTheme {
104-
JetsnackSurface {
105+
Surface {
105106
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
106107
QuantitySelector(1, {}, {})
107108
}

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,9 @@ import com.example.jetsnack.ui.SnackSharedElementType
8383
import com.example.jetsnack.ui.snackdetail.nonSpatialExpressiveSpring
8484
import com.example.jetsnack.ui.snackdetail.snackDetailBoundsTransform
8585
import com.example.jetsnack.ui.theme.JetsnackTheme
86-
import com.example.jetsnack.ui.theme.currentJetsnackTheme
86+
import com.example.jetsnack.ui.theme.colors
87+
import com.example.jetsnack.ui.theme.shapes
88+
import com.example.jetsnack.ui.theme.typography
8789

8890
private val HighlightCardWidth = 170.dp
8991
private val HighlightCardPadding = 16.dp
@@ -105,11 +107,11 @@ fun SnackCollection(
105107
.heightIn(min = 56.dp)
106108
.padding(start = 24.dp),
107109
) {
108-
JetsnackText(
110+
Text(
109111
text = snackCollection.name,
110112
style = {
111-
jetsnackTextStyle(currentJetsnackTheme.typography.titleLarge)
112-
contentColor(currentJetsnackTheme.colors.brand)
113+
textStyleWithFontFamilyFix(typography.titleLarge)
114+
contentColor(colors.brand)
113115
},
114116
maxLines = 1,
115117
overflow = TextOverflow.Ellipsis,
@@ -191,9 +193,9 @@ private fun Snacks(snackCollectionId: Long, snacks: List<Snack>, onSnackClick: (
191193

192194
@Composable
193195
fun SnackItem(snack: Snack, snackCollectionId: Long, onSnackClick: (Long, String) -> Unit, modifier: Modifier = Modifier) {
194-
JetsnackSurface(
196+
Surface(
195197
style = {
196-
shape(currentJetsnackTheme.shapes.medium)
198+
shape(shapes.medium)
197199
},
198200
modifier = modifier.padding(
199201
start = 4.dp,
@@ -234,11 +236,11 @@ fun SnackItem(snack: Snack, snackCollectionId: Long, onSnackClick: (Long, String
234236
boundsTransform = snackDetailBoundsTransform,
235237
),
236238
)
237-
JetsnackText(
239+
Text(
238240
text = snack.name,
239241
style = {
240-
jetsnackTextStyle(currentJetsnackTheme.typography.titleMedium)
241-
contentColor(currentJetsnackTheme.colors.textSecondary)
242+
textStyleWithFontFamilyFix(typography.titleMedium)
243+
contentColor(colors.textSecondary)
242244
},
243245
modifier = Modifier
244246
.padding(top = 8.dp)
@@ -393,13 +395,13 @@ private fun HighlightSnackItem(
393395
}
394396

395397
Spacer(modifier = Modifier.height(8.dp))
396-
JetsnackText(
398+
Text(
397399
text = snack.name,
398400
maxLines = 1,
399401
overflow = TextOverflow.Ellipsis,
400402
style = {
401-
jetsnackTextStyle(currentJetsnackTheme.typography.titleLarge)
402-
contentColor(currentJetsnackTheme.colors.textSecondary)
403+
textStyleWithFontFamilyFix(typography.titleLarge)
404+
contentColor(colors.textSecondary)
403405
},
404406
modifier = Modifier
405407
.padding(horizontal = 16.dp)
@@ -421,11 +423,11 @@ private fun HighlightSnackItem(
421423
)
422424
Spacer(modifier = Modifier.height(4.dp))
423425

424-
JetsnackText(
426+
Text(
425427
text = snack.tagline,
426428
style = {
427-
jetsnackTextStyle(currentJetsnackTheme.typography.bodyLarge)
428-
contentColor(currentJetsnackTheme.colors.textHelp)
429+
textStyleWithFontFamilyFix(typography.bodyLarge)
430+
contentColor(colors.textHelp)
429431
},
430432
modifier = Modifier
431433
.padding(horizontal = 16.dp)
@@ -465,7 +467,7 @@ fun SnackImage(
465467
modifier: Modifier = Modifier,
466468
elevation: Dp = 0.dp,
467469
) {
468-
JetsnackSurface(
470+
Surface(
469471
style = {
470472
shape(CircleShape)
471473
// todo elevation

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import com.example.jetsnack.ui.theme.JetsnackTheme
3333
* [com.example.jetsnack.ui.theme.JetsnackColors]
3434
*/
3535
@Composable
36-
fun JetsnackSurface(
36+
fun Surface(
3737
modifier: Modifier = Modifier,
3838
style: Style = Style,
3939
// todo confirm patten is acceptable

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ import com.example.jetsnack.ui.theme.JetsnackTheme
3131

3232
// Workaround for b/492528450 - setting textStyle currently doesn't set fontFamily.
3333
@ExperimentalFoundationStyleApi
34-
fun StyleScope.jetsnackTextStyle(value: TextStyle) {
34+
fun StyleScope.textStyleWithFontFamilyFix(value: TextStyle) {
3535
textStyle(value)
3636
value.fontFamily?.let { fontFamily(it) }
3737
}
3838

3939
@ExperimentalFoundationStyleApi
4040
@Composable
41-
fun JetsnackText(
41+
fun Text(
4242
text: String,
4343
modifier: Modifier = Modifier,
4444
style: Style = Style,

0 commit comments

Comments
 (0)