Skip to content

Commit c8eaaf4

Browse files
ShreckYeShreckYe
committed
Fix the chip components (APIs and visual inconsistencies) and also move them to the ext package
Extract `slotModifier` and `contentWithSlot` functions to reduce code duplication. Some code generated by Copilot. Also reviewed locally with Copilot. The corresponding commits: huanshankeji/compose-html-material@e9f9e21, huanshankeji/compose-html-material@7199c93
1 parent 94af796 commit c8eaaf4

File tree

27 files changed

+533
-303
lines changed

27 files changed

+533
-303
lines changed

common/src/commonMain/kotlin/com/huanshankeji/compose/Content.kt renamed to common/src/commonMain/kotlin/com/huanshankeji/compose/ext/ContentWithModifier.kt

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
package com.huanshankeji.compose
1+
package com.huanshankeji.compose.ext
22

33
/*
44
// This API seems to reduce the readability of code
55
fun <Scope> (@Composable () -> Unit).toContentWithoutScope(): @Composable Scope.() -> Unit =
66
{ this@toContentWithoutScope() }
77
*/
8+
9+
//typealias ContentWithModifier = @Composable (Modifier) -> Unit
10+
//typealias NullableContentWithModifier = ContentWithModifier?

common/src/composeUiMain/kotlin/com/huanshankeji/compose/Content.composeUi.kt renamed to common/src/composeUiMain/kotlin/com/huanshankeji/compose/ext/ContentWithModifier.composeUi.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.huanshankeji.compose
1+
package com.huanshankeji.compose.ext
22

33
import androidx.compose.runtime.Composable
44
import com.huanshankeji.compose.ui.Modifier

‎common/src/jsMain/kotlin/com/huanshankeji/compose/ext/ContentWithModifier.js.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
package com.huanshankeji.compose.ext
2+
3+
// Some extensions for `slot` are in `Slot.js.kt` in `com.huanshankeji.compose.material3.ext`.

‎demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ import com.huanshankeji.compose.foundation.text.input.KeyboardCapitalization
1313
import com.huanshankeji.compose.foundation.text.input.KeyboardType
1414
import com.huanshankeji.compose.foundation.verticalScroll
1515
import com.huanshankeji.compose.material.icons.Icons
16-
import com.huanshankeji.compose.material.icons.filled.Add
17-
import com.huanshankeji.compose.material.icons.filled.ArrowDropDown
18-
import com.huanshankeji.compose.material.icons.filled.Menu
19-
import com.huanshankeji.compose.material.icons.filled.Remove
16+
import com.huanshankeji.compose.material.icons.filled.*
2017
import com.huanshankeji.compose.material3.*
2118
import com.huanshankeji.compose.material3.ext.*
2219
import com.huanshankeji.compose.material3.ext.Card
@@ -27,6 +24,8 @@ import com.huanshankeji.compose.material3.lazy.ext.ListItemComponents
2724
import com.huanshankeji.compose.ui.Modifier
2825
import com.huanshankeji.compose.material3.Button as RowScopeButton
2926

27+
// TODO replace `println`s with snackbars when available
28+
3029
@Composable
3130
fun Material3(/*modifier: Modifier = Modifier*/
3231
viewModel: Material3ViewModel = viewModel { Material3ViewModel() }
@@ -166,7 +165,7 @@ fun Material3(/*modifier: Modifier = Modifier*/
166165
}
167166
}
168167

169-
Row {
168+
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
170169
Card { Text("card", contentPaddingModifier) }
171170
ElevatedCard { Text("elevated card", contentPaddingModifier) }
172171
OutlinedCard { Text("outlined card", contentPaddingModifier) }
@@ -343,30 +342,53 @@ fun Material3(/*modifier: Modifier = Modifier*/
343342
Badge(content = "New")
344343
}
345344

346-
// Chips - showing all 4 types as per M3 design
345+
// Chips - showing all types as per M3 design
347346
var filterChipSelected by remember { mutableStateOf(false) }
348347
var inputChipSelected by remember { mutableStateOf(false) }
349-
Row {
348+
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
350349
AssistChip(
351350
onClick = { println("Assist chip clicked") },
352-
label = { Text("Assist") },
353-
leadingIcon = { Icon(Icons.Default.Add, null) }
351+
label = "Assist",
352+
leadingIcon = { modifier -> Icon(Icons.Default.Add, null, modifier) }
354353
)
355354
FilterChip(
356355
selected = filterChipSelected,
357356
onClick = { filterChipSelected = !filterChipSelected },
358-
label = { Text("Filter") },
359-
leadingIcon = { Icon(Icons.Default.Add, null) }
360-
)
361-
InputChip(
362-
selected = inputChipSelected,
363-
onClick = { inputChipSelected = !inputChipSelected },
364-
label = { Text("Input") },
365-
leadingIcon = { Icon(Icons.Default.Add, null) }
357+
label = "Filter",
358+
leadingIcon = if (filterChipSelected) { modifier -> Icon(Icons.Filled.Done, null, modifier) } else null
366359
)
360+
var showInputChip by remember { mutableStateOf(true) }
361+
if (showInputChip)
362+
InputChip(
363+
selected = inputChipSelected,
364+
onClick = { inputChipSelected = !inputChipSelected },
365+
label = "Input",
366+
avatar = { modifier -> Icon(Icons.Default.Person, null, modifier) },
367+
onRemove = {
368+
showInputChip = false
369+
println("Input chip removed")
370+
}
371+
)
367372
SuggestionChip(
368373
onClick = { println("Suggestion chip clicked") },
369-
label = { Text("Suggestion") }
374+
label = "Suggestion"
375+
)
376+
}
377+
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
378+
ElevatedAssistChip(
379+
onClick = { println("Elevated assist chip clicked") },
380+
label = "Elevated Assist",
381+
leadingIcon = { modifier -> Icon(Icons.Default.Add, null, modifier) }
382+
)
383+
ElevatedFilterChip(
384+
selected = filterChipSelected,
385+
onClick = { filterChipSelected = !filterChipSelected },
386+
label = "Elevated Filter",
387+
leadingIcon = if (filterChipSelected) { modifier -> Icon(Icons.Filled.Done, null, modifier) } else null
388+
)
389+
ElevatedSuggestionChip(
390+
onClick = { println("Elevated suggestion chip clicked") },
391+
label = "Elevated Suggestion"
370392
)
371393
}
372394

‎material-icons-core/src/commonMain/kotlin/com/huanshankeji/compose/material/icons/filled/Icons.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ expect val Icons.Filled.Remove: Icon
1010
expect val Icons.Filled.ArrowDropDown: Icon
1111
expect val Icons.Filled.Done: Icon
1212
expect val Icons.Filled.Refresh: Icon
13+
expect val Icons.Filled.Person: Icon

‎material-icons-core/src/composeUiMain/kotlin/com/huanshankeji/compose/material/icons/filled/Icons.composeUi.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ actual val Icons.Filled.Remove: Icon get() = PlatformIcons.Filled.Remove
1212
actual val Icons.Filled.ArrowDropDown: Icon get() = PlatformIcons.Filled.ArrowDropDown
1313
actual val Icons.Filled.Done: Icon get() = PlatformIcons.Filled.Done
1414
actual val Icons.Filled.Refresh: Icon get() = PlatformIcons.Filled.Refresh
15+
actual val Icons.Filled.Person: Icon get() = PlatformIcons.Filled.Person

‎material-icons-core/src/jsMain/kotlin/com/huanshankeji/compose/material/icons/filled/Icons.js.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ actual val Icons.Filled.Remove: Icon get() = Icon("remove")
1010
actual val Icons.Filled.ArrowDropDown: Icon get() = Icon("arrow_drop_down")
1111
actual val Icons.Filled.Done: Icon get() = Icon("done")
1212
actual val Icons.Filled.Refresh: Icon get() = Icon("refresh")
13+
actual val Icons.Filled.Person: Icon get() = Icon("person")

‎material3/build.gradle.kts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ kotlin {
4242
}
4343
}
4444
}
45+
46+
compilerOptions {
47+
optIn.add("com.huanshankeji.compose.html.material3.ExperimentalComposeHtmlMaterialApi")
48+
}
4549
}
4650

4751
publishing.publications.withType<MavenPublication> {

‎material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/Chips.kt‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Chips.kt‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
package com.huanshankeji.compose.material3.ext
2+
3+
import androidx.compose.runtime.Composable
4+
import com.huanshankeji.compose.ui.Modifier
5+
6+
/**
7+
* Material Design assist chip.
8+
*
9+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
10+
* @see androidx.compose.material3.AssistChip
11+
*/
12+
@Composable
13+
expect fun AssistChip(
14+
onClick: () -> Unit,
15+
label: String,
16+
modifier: Modifier = Modifier,
17+
enabled: Boolean = true,
18+
leadingIcon: @Composable ((Modifier) -> Unit)? = null
19+
)
20+
21+
/**
22+
* Material Design elevated assist chip.
23+
*
24+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
25+
* @see androidx.compose.material3.ElevatedAssistChip
26+
*/
27+
@Composable
28+
expect fun ElevatedAssistChip(
29+
onClick: () -> Unit,
30+
label: String,
31+
modifier: Modifier = Modifier,
32+
enabled: Boolean = true,
33+
leadingIcon: @Composable ((Modifier) -> Unit)? = null
34+
)
35+
36+
/**
37+
* Material Design filter chip.
38+
*
39+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
40+
* @see androidx.compose.material3.FilterChip
41+
*/
42+
@Composable
43+
expect fun FilterChip(
44+
selected: Boolean,
45+
onClick: () -> Unit,
46+
label: String,
47+
modifier: Modifier = Modifier,
48+
enabled: Boolean = true,
49+
leadingIcon: @Composable ((Modifier) -> Unit)? = null
50+
)
51+
52+
/**
53+
* Material Design elevated filter chip.
54+
*
55+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
56+
* @see androidx.compose.material3.ElevatedFilterChip
57+
*/
58+
@Composable
59+
expect fun ElevatedFilterChip(
60+
selected: Boolean,
61+
onClick: () -> Unit,
62+
label: String,
63+
modifier: Modifier = Modifier,
64+
enabled: Boolean = true,
65+
leadingIcon: @Composable ((Modifier) -> Unit)? = null
66+
)
67+
68+
/**
69+
* Material Design input chip.
70+
*
71+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
72+
* @see androidx.compose.material3.InputChip
73+
* @param avatar In Compose UI, `avatar` shadows `leadingIcon` when specified.
74+
*
75+
* Note that the trailing close icon is always shown in JS DOM and always removes the chip when clicked,
76+
* so you are recommended to wrap this component in an if block and always pass [onRemove] to remove the chip for consistency.
77+
*/
78+
@Composable
79+
expect fun InputChip(
80+
selected: Boolean,
81+
onClick: () -> Unit,
82+
label: String,
83+
modifier: Modifier = Modifier,
84+
enabled: Boolean = true,
85+
leadingIcon: @Composable ((Modifier) -> Unit)? = null,
86+
avatar: @Composable ((Modifier) -> Unit)? = null,
87+
showTrailingCloseIconComposeUi: Boolean = true,
88+
onRemove: (() -> Unit)? = null,
89+
)
90+
91+
/**
92+
* Material Design suggestion chip.
93+
*
94+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
95+
* @see androidx.compose.material3.SuggestionChip
96+
*/
97+
@Composable
98+
expect fun SuggestionChip(
99+
onClick: () -> Unit,
100+
label: String,
101+
modifier: Modifier = Modifier,
102+
enabled: Boolean = true,
103+
icon: @Composable ((Modifier) -> Unit)? = null
104+
)
105+
106+
/**
107+
* Material Design elevated suggestion chip.
108+
*
109+
* @see <a href="https://m3.material.io/components/chips/overview">Material Design chips</a>
110+
* @see androidx.compose.material3.ElevatedSuggestionChip
111+
*/
112+
@Composable
113+
expect fun ElevatedSuggestionChip(
114+
onClick: () -> Unit,
115+
label: String,
116+
modifier: Modifier = Modifier,
117+
enabled: Boolean = true,
118+
icon: @Composable ((Modifier) -> Unit)? = null
119+
)

0 commit comments

Comments
 (0)