diff --git a/docs/api-table.js b/docs/api-table.js index 84b35a5..5f13416 100644 --- a/docs/api-table.js +++ b/docs/api-table.js @@ -2230,6 +2230,66 @@ export const android = { ], ], }, + CheckboxGroup: { + required: [ + [ + 'options', + 'List', + '', + 'The list of texts to be displayed next to the checkboxes' + ], + [ + 'onOptionsSelected', + '(MutableList) -> 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
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', + '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: [ [ diff --git a/docs/components/checkbox/android.md b/docs/components/checkbox/android.md index f453710..6232e69 100644 --- a/docs/components/checkbox/android.md +++ b/docs/components/checkbox/android.md @@ -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, + selectedOptions: List? = null, + helpText: String? = null, + enabled: Boolean = true, + isError: Boolean = false, + onOptionsSelected: (MutableList) -> 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 @@ -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!", @@ -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)) ``` @@ -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 +### CheckboxGroup + + + +