[ui][iOS] - Section docs and improvements#41722
[ui][iOS] - Section docs and improvements#41722intergalacticspacehighway merged 10 commits intomainfrom
Conversation
|
Subscribed to pull request
Generated by CodeMention |
|
The Pull Request introduced fingerprint changes against the base commit: d9bc5c5 Fingerprint diff[
{
"op": "changed",
"beforeSource": {
"type": "dir",
"filePath": "../../packages/expo-ui/ios",
"reasons": [
"expoAutolinkingIos"
],
"hash": "db024236203c8e6177ee6ef1f4582a1c344259db"
},
"afterSource": {
"type": "dir",
"filePath": "../../packages/expo-ui/ios",
"reasons": [
"expoAutolinkingIos"
],
"hash": "1df337bca8cac4e5694ffc733fc1bcbdef6f0bee"
}
}
]Generated by PR labeler 🤖 |
| header={ | ||
| <HStack> | ||
| <Image systemName="location.fill" color="blue" size={16} /> | ||
| <Text>Location Services</Text> | ||
| </HStack> | ||
| } | ||
| footer={ | ||
| <Text> | ||
| Enabling location services allows the app to provide personalized recommendations. | ||
| </Text> | ||
| }> | ||
| <Toggle |
There was a problem hiding this comment.
i am personally in favor of compound components (or composite components) style than render props. i'll try it first on jetpack compose. we can figure out different style. that said, it's like
<Section>
<Section.Header>
<HStack />
</Section.Header>
<Section.Footer>
<HStack />
</Section.Footer>
...
</Section>
There was a problem hiding this comment.
yeah, i thought about this. One nice thing i noticed with prop approach is supporting below pattern i.e. passing content as children.
<Section header={<Text>Title</Text>}>
<Text>Hello world 1</Text>
<Text>Hello world 2</Text>
</Section>Alternative with composite pattern would be this:
<Section>
<Section.Header><Text>Title</Text></Section.Header>
<Section.Content>
<Text>Hello world 1</Text>
<Text>Hello world 2</Text>
</Section.Content>
</Section>I felt former to be more close to SwiftUI than latter (SwiftUI supports trailing closure for content) and requires less typing 🤔. But we can re-consider it. I also like the explicit nature of composite pattern.
There was a problem hiding this comment.
let's taste the difference upon our swift-ui and jetpack-compose code. we can decide later.
on jetpack-compose, it's heavily uses the render props style, e.g. the placeholder, leadingIcon, trailingIcon, ...etc in TextField. sometimes i feel passing multiple render props in jsx is not quite beautiful, so i would try composite components first.
@Composable
fun TextField(
state: TextFieldState,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = LocalTextStyle.current,
labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(),
label: @Composable (TextFieldLabelScope.() -> Unit)? = null,
placeholder: @Composable (() -> Unit)? = null,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
prefix: @Composable (() -> Unit)? = null,
suffix: @Composable (() -> Unit)? = null,
supportingText: @Composable (() -> Unit)? = null,
isError: Boolean = false,
inputTransformation: InputTransformation? = null,
outputTransformation: OutputTransformation? = null,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
onKeyboardAction: KeyboardActionHandler? = null,
lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default,
onTextLayout: (Density.(getResult: () -> TextLayoutResult?) -> Unit)? = null,
scrollState: ScrollState = rememberScrollState(),
shape: Shape = TextFieldDefaults.shape,
colors: TextFieldColors = TextFieldDefaults.colors(),
contentPadding: PaddingValues =
if (label == null || labelPosition is TextFieldLabelPosition.Above) {
TextFieldDefaults.contentPaddingWithoutLabel()
} else {
TextFieldDefaults.contentPaddingWithLabel()
},
interactionSource: MutableInteractionSource? = null,
)
Why
Sectiondocs need examples.Sectionis currently usingText(title).textCase(nil)for rendering title prop. We can use the constructor provided by Section instead, bringing it closer to SwiftUI's API.How
Sectiondocs and make it consistent with other component docs.Sectioncomponent instead of using customTextin header.collapsibleprop withisExpandedprop to match with SwiftUI's API.Test Plan
Checklist
changelog.mdentry and rebuilt the package sources according to this short guidenpx expo prebuild& EAS Build (eg: updated a module plugin).