Skip to content

Commit 7283633

Browse files
kdroidFilterkdroidFilter
committed
fix(sample): replace fractional fillMaxWidth with responsive widthIn constraints
Replace fillMaxWidth(0.5f/0.6f/0.7f) with widthIn(max=Xdp).fillMaxWidth() to ensure components fill full width on mobile while respecting max width on desktop. Also add explicit fillMaxWidth() modifiers to TextArea components in disabled, custom colors, and custom font examples to ensure they expand within their containers. Files updated: - InputPage.kt, SliderPage.kt, SearchInputPage.kt - MultiSelectPage.kt, ControlSizePage.kt - TextAreaPage.kt, ComboBoxPage.kt
1 parent 78f3e57 commit 7283633

7 files changed

Lines changed: 40 additions & 32 deletions

File tree

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/ComboBoxPage.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ fun ComboBoxPlacementExample() {
132132
@GalleryExample("ComboBox", "Custom Colors")
133133
@Composable
134134
fun ComboBoxCustomColorsExample() {
135-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
135+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
136136
var s1 by remember { mutableStateOf<Int?>(null) }
137137
ComboBox(
138138
items = listOf("Apple", "Banana", "Cherry"),

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/ControlSizePage.kt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.Row
66
import androidx.compose.foundation.layout.fillMaxWidth
77
import androidx.compose.foundation.layout.width
8+
import androidx.compose.foundation.layout.widthIn
89
import androidx.compose.runtime.Composable
910
import androidx.compose.runtime.getValue
1011
import androidx.compose.runtime.mutableStateOf
@@ -77,12 +78,12 @@ fun ControlSizeCascadeExample() {
7778
value = sliderVal,
7879
onValueChange = { sliderVal = it },
7980
valueRange = 0f..100f,
80-
modifier = Modifier.fillMaxWidth(0.5f),
81+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
8182
)
8283
LinearProgress(
8384
value = 65f,
8485
max = 100f,
85-
modifier = Modifier.fillMaxWidth(0.5f),
86+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
8687
)
8788
var seg by remember { mutableStateOf(0) }
8889
SegmentedControl(

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/InputPage.kt‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import io.github.kdroidfilter.nucleus.ui.apple.macos.sample.gallery.generated.Ga
4141

4242
@Composable
4343
private fun InputPreview() {
44-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
44+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
4545
var text by remember { mutableStateOf("") }
4646
var errorText by remember { mutableStateOf("") }
4747
TextField(value = text, onValueChange = { text = it }, placeholder = { Text("Type something...") })
@@ -58,7 +58,7 @@ fun InputSizesExample() {
5858
Row(
5959
horizontalArrangement = Arrangement.spacedBy(8.dp),
6060
verticalAlignment = Alignment.CenterVertically,
61-
modifier = Modifier.fillMaxWidth(0.6f),
61+
modifier = Modifier.widthIn(max = 480.dp).fillMaxWidth(),
6262
) {
6363
Text(
6464
text = size.name,
@@ -88,7 +88,7 @@ fun InputDefaultExample() {
8888
onValueChange = { text = it },
8989
placeholder = { Text("Enter your name...") },
9090
label = { Text("Name") },
91-
modifier = Modifier.fillMaxWidth(0.5f),
91+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
9292
)
9393
}
9494

@@ -103,7 +103,7 @@ fun InputErrorExample() {
103103
label = { Text("Email") },
104104
isError = true,
105105
supportingText = { Text("This field is required") },
106-
modifier = Modifier.fillMaxWidth(0.5f),
106+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
107107
)
108108
}
109109

@@ -117,7 +117,7 @@ fun InputWithLabelExample() {
117117
placeholder = { Text("you@example.com") },
118118
label = { Text("Email address") },
119119
supportingText = { Text("We'll never share your email.") },
120-
modifier = Modifier.fillMaxWidth(0.5f),
120+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
121121
)
122122
}
123123

@@ -131,14 +131,14 @@ fun InputPasswordExample() {
131131
placeholder = { Text("Password") },
132132
label = { Text("Password") },
133133
visualTransformation = PasswordVisualTransformation(),
134-
modifier = Modifier.fillMaxWidth(0.5f),
134+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
135135
)
136136
}
137137

138138
@GalleryExample("Input", "With Icons")
139139
@Composable
140140
fun InputWithIconsExample() {
141-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
141+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
142142
var search by remember { mutableStateOf("") }
143143
TextField(
144144
value = search,
@@ -168,7 +168,7 @@ fun InputWithIconsExample() {
168168
@GalleryExample("Input", "Disabled")
169169
@Composable
170170
fun InputDisabledExample() {
171-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
171+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
172172
TextField(
173173
value = "",
174174
onValueChange = {},
@@ -246,7 +246,7 @@ fun InputSurfaceVariantsExample() {
246246
@Composable
247247
fun InputCustomColorsExample() {
248248
val accent = MacosTheme.colorScheme.accent
249-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
249+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
250250
var q1 by remember { mutableStateOf("") }
251251
TextField(
252252
value = q1,
@@ -280,7 +280,7 @@ fun InputCustomColorsExample() {
280280
@GalleryExample("Input", "Custom Font")
281281
@Composable
282282
fun InputCustomFontExample() {
283-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
283+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
284284
var bold by remember { mutableStateOf("Bold text") }
285285
TextField(
286286
value = bold,

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/MultiSelectPage.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ fun MultiSelectDefaultExample() {
6666
onSelectionChange = { selected = it },
6767
header = "Technologies",
6868
placeholder = "Pick frameworks",
69-
modifier = Modifier.fillMaxWidth(0.5f),
69+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
7070
)
7171
}
7272

@@ -80,7 +80,7 @@ fun MultiSelectPreselectedExample() {
8080
selectedIndices = selected,
8181
onSelectionChange = { selected = it },
8282
header = "Favorites",
83-
modifier = Modifier.fillMaxWidth(0.5f),
83+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
8484
)
8585
}
8686

@@ -127,7 +127,7 @@ fun MultiSelectPlacementExample() {
127127
@GalleryExample("MultiSelectComboBox", "Custom Colors")
128128
@Composable
129129
fun MultiSelectCustomColorsExample() {
130-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
130+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
131131
var sel1 by remember { mutableStateOf(listOf(0)) }
132132
MultiSelectComboBox(
133133
items = listOf("Red", "Green", "Blue"),

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/SearchInputPage.kt‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ fun SearchInputSizesExample() {
4343
Row(
4444
horizontalArrangement = Arrangement.spacedBy(8.dp),
4545
verticalAlignment = Alignment.CenterVertically,
46-
modifier = Modifier.fillMaxWidth(0.6f),
46+
modifier = Modifier.widthIn(max = 480.dp).fillMaxWidth(),
4747
) {
4848
Text(
4949
text = size.name,
@@ -68,7 +68,7 @@ fun SearchInputSizesExample() {
6868
@Composable
6969
fun SearchInputDefaultExample() {
7070
var query by remember { mutableStateOf("") }
71-
SearchField(value = query, onValueChange = { query = it }, placeholder = "Search...", modifier = Modifier.fillMaxWidth(0.5f))
71+
SearchField(value = query, onValueChange = { query = it }, placeholder = "Search...", modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth())
7272
}
7373

7474
@GalleryExample("SearchInput", "Address Bar")
@@ -79,7 +79,7 @@ fun SearchInputAddressBarExample() {
7979
value = url,
8080
onValueChange = { url = it },
8181
onGo = {},
82-
modifier = Modifier.fillMaxWidth(0.7f),
82+
modifier = Modifier.widthIn(max = 560.dp).fillMaxWidth(),
8383
)
8484
}
8585

@@ -93,7 +93,7 @@ fun SearchInputAddressBarWithIconExample() {
9393
placeholder = "Search or enter website name",
9494
onGo = {},
9595
leadingIcon = { Icon(LucideSearch, modifier = Modifier.size(13.dp)) },
96-
modifier = Modifier.fillMaxWidth(0.7f),
96+
modifier = Modifier.widthIn(max = 560.dp).fillMaxWidth(),
9797
)
9898
}
9999

@@ -195,7 +195,7 @@ fun SearchInputCustomColorsExample() {
195195
value = q1,
196196
onValueChange = { q1 = it },
197197
placeholder = "Accent-tinted search",
198-
modifier = Modifier.fillMaxWidth(0.5f),
198+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
199199
colors = SearchFieldDefaults.colors(
200200
backgroundColor = accent.copy(alpha = 0.10f),
201201
borderColor = accent.copy(alpha = 0.30f),
@@ -207,7 +207,7 @@ fun SearchInputCustomColorsExample() {
207207
value = q2,
208208
onValueChange = { q2 = it },
209209
placeholder = "Green search",
210-
modifier = Modifier.fillMaxWidth(0.5f),
210+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
211211
colors = SearchFieldDefaults.colors(
212212
backgroundColor = Color(0xFF34C759).copy(alpha = 0.10f),
213213
borderColor = Color(0xFF34C759).copy(alpha = 0.30f),

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/SliderPage.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ fun SliderSizesExample() {
3333
for (size in ControlSize.entries) {
3434
ControlSize(size) {
3535
Row(
36-
modifier = Modifier.fillMaxWidth(0.6f),
36+
modifier = Modifier.widthIn(max = 480.dp).fillMaxWidth(),
3737
horizontalArrangement = Arrangement.spacedBy(8.dp),
3838
verticalAlignment = Alignment.CenterVertically,
3939
) {
@@ -60,7 +60,7 @@ fun SliderSizesExample() {
6060
@Composable
6161
fun SliderVolumeExample() {
6262
var value by remember { mutableStateOf(50f) }
63-
Column(modifier = Modifier.fillMaxWidth(0.5f), verticalArrangement = Arrangement.spacedBy(8.dp)) {
63+
Column(modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
6464
Row(
6565
modifier = Modifier.fillMaxWidth(),
6666
horizontalArrangement = Arrangement.SpaceBetween,
@@ -85,7 +85,7 @@ fun SliderVolumeExample() {
8585
@Composable
8686
fun SliderWithValueExample() {
8787
var value by remember { mutableStateOf(50f) }
88-
Column(modifier = Modifier.fillMaxWidth(0.5f), verticalArrangement = Arrangement.spacedBy(8.dp)) {
88+
Column(modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
8989
Text(
9090
text = "With value display",
9191
style = MacosTheme.typography.caption1,
@@ -153,7 +153,7 @@ fun SliderSurfaceExample() {
153153
@GalleryExample("Slider", "Custom Colors")
154154
@Composable
155155
fun SliderCustomColorsExample() {
156-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
156+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
157157
var v1 by remember { mutableStateOf(50f) }
158158
Text("Green track", style = MacosTheme.typography.caption1, color = MacosTheme.colorScheme.textSecondary)
159159
Slider(

‎sample/src/commonMain/kotlin/io/github/kdroidfilter/nucleus/ui/apple/macos/sample/pages/TextAreaPage.kt‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column
55
import androidx.compose.foundation.layout.Row
66
import androidx.compose.foundation.layout.fillMaxWidth
77
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.widthIn
89
import androidx.compose.runtime.Composable
910
import androidx.compose.runtime.getValue
1011
import androidx.compose.runtime.mutableStateOf
@@ -34,7 +35,7 @@ import io.github.kdroidfilter.nucleus.ui.apple.macos.theme.MacosTheme
3435
fun TextAreaDefaultExample() {
3536
val maxChars = 200
3637
var text by remember { mutableStateOf("") }
37-
Column(modifier = Modifier.fillMaxWidth(0.5f)) {
38+
Column(modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
3839
TextArea(
3940
value = text,
4041
onValueChange = { if (it.length <= maxChars) text = it },
@@ -61,7 +62,7 @@ fun TextAreaWithLabelExample() {
6162
placeholder = { Text("Describe the issue...") },
6263
label = { Text("Description") },
6364
supportingText = { Text("Provide as much detail as possible.") },
64-
modifier = Modifier.fillMaxWidth(0.5f),
65+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
6566
)
6667
}
6768

@@ -78,28 +79,30 @@ fun TextAreaErrorExample() {
7879
supportingText = { Text("This field is required") },
7980
minLines = 2,
8081
maxLines = 4,
81-
modifier = Modifier.fillMaxWidth(0.5f),
82+
modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth(),
8283
)
8384
}
8485

8586
@GalleryExample("TextArea", "Disabled")
8687
@Composable
8788
fun TextAreaDisabledExample() {
88-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
89+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
8990
TextArea(
9091
value = "",
9192
onValueChange = {},
9293
placeholder = { Text("Empty disabled") },
9394
enabled = false,
9495
minLines = 2,
9596
maxLines = 2,
97+
modifier = Modifier.fillMaxWidth(),
9698
)
9799
TextArea(
98100
value = "This content cannot be edited.",
99101
onValueChange = {},
100102
enabled = false,
101103
minLines = 2,
102104
maxLines = 2,
105+
modifier = Modifier.fillMaxWidth(),
103106
)
104107
}
105108
}
@@ -181,7 +184,7 @@ fun TextAreaSurfaceVariantsExample() {
181184
@Composable
182185
fun TextAreaCustomColorsExample() {
183186
val accent = MacosTheme.colorScheme.accent
184-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
187+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
185188
var t1 by remember { mutableStateOf("") }
186189
TextArea(
187190
value = t1,
@@ -190,6 +193,7 @@ fun TextAreaCustomColorsExample() {
190193
label = { Text("Accent") },
191194
minLines = 2,
192195
maxLines = 4,
196+
modifier = Modifier.fillMaxWidth(),
193197
colors = TextFieldDefaults.colors(
194198
backgroundColor = accent.copy(alpha = 0.10f),
195199
borderColor = accent.copy(alpha = 0.30f),
@@ -205,6 +209,7 @@ fun TextAreaCustomColorsExample() {
205209
label = { Text("Green") },
206210
minLines = 2,
207211
maxLines = 4,
212+
modifier = Modifier.fillMaxWidth(),
208213
colors = TextFieldDefaults.colors(
209214
backgroundColor = Color(0xFF34C759).copy(alpha = 0.10f),
210215
borderColor = Color(0xFF34C759).copy(alpha = 0.30f),
@@ -219,7 +224,7 @@ fun TextAreaCustomColorsExample() {
219224
@GalleryExample("TextArea", "Custom Font")
220225
@Composable
221226
fun TextAreaCustomFontExample() {
222-
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.fillMaxWidth(0.5f)) {
227+
Column(verticalArrangement = Arrangement.spacedBy(12.dp), modifier = Modifier.widthIn(max = 400.dp).fillMaxWidth()) {
223228
var bold by remember { mutableStateOf("Bold text area") }
224229
TextArea(
225230
value = bold,
@@ -228,6 +233,7 @@ fun TextAreaCustomFontExample() {
228233
textStyle = TextStyle(fontWeight = FontWeight.Bold),
229234
minLines = 2,
230235
maxLines = 3,
236+
modifier = Modifier.fillMaxWidth(),
231237
)
232238
var large by remember { mutableStateOf("Larger font") }
233239
TextArea(
@@ -237,6 +243,7 @@ fun TextAreaCustomFontExample() {
237243
textStyle = TextStyle(fontSize = 18.sp),
238244
minLines = 2,
239245
maxLines = 3,
246+
modifier = Modifier.fillMaxWidth(),
240247
)
241248
}
242249
}

0 commit comments

Comments
 (0)