Skip to content
This repository has been archived by the owner on Jan 21, 2025. It is now read-only.

Commit

Permalink
Merge pull request #222 from warp-ds/android-checkbox-group
Browse files Browse the repository at this point in the history 
Add docs for checkbox group
  • Loading branch information
@julbar
julbar authored Sep 16, 2024
2 parents 3538ebd + 7d9aacb commit b23dc51
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 7 deletions.
60 changes: 60 additions & 0 deletions docs/api-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2230,6 +2230,66 @@ export const android = {
],
],
},
CheckboxGroup: {
required: [
[
'options',
'List<String>',
'',
'The list of texts to be displayed next to the checkboxes'
],
[
'onOptionsSelected',
'(MutableList<String>) -> Unit',
'',
'The lambda to be invoked when clicked on a checkbox.'
],
],
props: [
[
'modifier',
'Modifier',
'Modifier',
'Sets the modifier for the checkbox group',
],
[
'orientation',
'Orientation.Vertical <br /> Orientation.Horizontal',
'Orientation.Vertical',
'Sets the orientation for the checkbox group. Class is found in the androidx.compose.foundation.gestures package',
],
[
'title',
'String',
'null',
'The title to be displayed on top of the checkbox group'
],
[
'selectedOptions',
'List<String>',
'null',
'The selected options in the checkbox group'
],
[
'helpText',
'String',
'null',
'The text displayed below the checkbox group'
],
[
'enabled',
'boolean',
'true',
'Whether the checkbox group is enabled or not'
],
[
'isError',
'boolean',
'false',
'Shows the checkbox group in error state if true'
],
],
},
Switch: {
props: [
[
Expand Down
89 changes: 82 additions & 7 deletions docs/components/checkbox/android.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,53 @@
```kotlin example
fun WarpCheckbox(
modifier: Modifier = Modifier,
text: String,
label: String,
extraText: String? = null,
slot: @Composable (() -> Unit)? = null,
onCheckedChange: ((Boolean) -> Unit) = {},
style: WarpCheckboxStyle = WarpCheckboxStyle.Neutral,
style: WarpCheckboxStyle = WarpCheckboxStyle.Default,
enabled: Boolean = true,
checked: Boolean = false,
isError: Boolean = false
)

fun WarpCheckboxGroup(
modifier: Modifier = Modifier,
orientation: Orientation = Orientation.Vertical,
title: String? = null,
options: List<String>,
selectedOptions: List<String>? = null,
helpText: String? = null,
enabled: Boolean = true,
isError: Boolean = false,
onOptionsSelected: (MutableList<String>) -> Unit
)
```

The default style for the checkbox is WarpCheckboxStyle.Neutral and will be used if nothing is passed in the style param.
Currently we support a standalone checkbox and a group. There is support for optional title and help text when using the checkbox group. Supported orientations are Orientation.Vertical and Orientation.Horizontal. Vertical is the default.

```kotlin example
WarpCheckbox(
text = "Check this!",
onCheckedChange = { }
)

val checkboxOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
val preSelectedOptions = listOf("Option 1", "Option 3")
val onOptionsSelected = remember { mutableListOf(checkboxOptions) }

WarpCheckboxGroup(
title = "Vertical",
helpText = "Help text",
orientation = Orientation.Vertical,
options = checkboxOptions,
selectedOptions = preSelectedOptions,
onOptionsSelected = { onOptionsSelected },
isError = false
)
```

The default style for the checkbox is WarpCheckboxStyle.Neutral and will be used if nothing is passed in the style param.
There are three types of checkbox styles:

```kotlin example
Expand All @@ -31,7 +61,18 @@ WarpCheckboxStyle {
}
```

To display a disabled checkbox - either set the style to WarpCheckboxStyle.Disabled or set enabled to false
Label is mandatory, but an extraText can be displayed as well if provided. The text style will be body and the color will be text.subtle by default.

```kotlin example
WarpCheckbox(
text = "Check this!",
extraText = "(Optional)",
onCheckedChange = { }
)
```

To display a disabled checkbox - either set the style to WarpCheckboxStyle.Disabled or set enabled to false. Same approach for error state.

```kotlin example
WarpCheckbox(
text = "Check this!",
Expand All @@ -42,14 +83,39 @@ WarpCheckbox(
WarpCheckbox(
text = "Check this!",
onCheckedChange = { },
enabled = false
enabled = false,
)

WarpCheckbox(
text = "Error",
onCheckedChange = { },
isError = true,
)
```

It is possible to pass a custom Composable using the slot param. An icon next to the label can simply be displayed as follows:

```kotlin example
WarpCheckbox(
text = "Check this!",
extraText = "(Optional)",
onCheckedChange = { },
slot = {
Icon(
imageVector = Icons.Filled.AccountCircle,
contentDescription = "Content description for the leading icon",
tint = colors.icon.default
)
}
)
```

### Legacy support
To support layouts still written in xml the WarpCheckbox can be used as a custom view. To add functionality, set onCheckChanged listener.
To support layouts still written in xml the WarpCheckbox can be used as a custom view. To add functionality, set onCheckChanged listener. Slot composable can be added only programmatically. Horizontal or vertical group is not supported.

```kotlin example
var slot: @Composable (() -> Unit)? = null

fun setOnCheckedChangeListener(onCheckedChangeListener: ((Boolean) -> Unit))
```

Expand All @@ -60,12 +126,21 @@ fun setOnCheckedChangeListener(onCheckedChangeListener: ((Boolean) -> Unit))
android:layout_height="wrap_content"
android:layout_margin="@dimen/space2"
app:checkboxEnabled="true"
app:checkboxText="Selected checkbox"
app:checkboxLabel="Selected checkbox"
app:checkboxExtraText="Extra text"
app:checked="true"
app:checkboxIsError="false"
app:checkboxEnabled="true"
app:warpCheckboxStyle="neutral" />
```

### Parameters
### Checkbox

<api-table type=android component="Checkbox" />

### CheckboxGroup

<api-table type=android component="CheckboxGroup" />


0 comments on commit b23dc51

Please sign in to comment.