Skip to content

Commit

Permalink
docs: add CheckboxField
Browse files Browse the repository at this point in the history
  • Loading branch information
hrach committed Jun 28, 2023
1 parent 6bce91e commit 138e718
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 0 deletions.
65 changes: 65 additions & 0 deletions docs/03-components/05-input/checkbox.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: Android
---

## Overview

`Checkbox` component is provided in two flavors, as a simple checkbox and as a row with an additional label and a description:

- [`Checkbox`](https://kiwicom.github.io/orbit-compose/ui/kiwi.orbit.compose.ui.controls/-checkbox.html) - a simple checkbox
- [`CheckboxField`](https://kiwicom.github.io/orbit-compose/ui/kiwi.orbit.compose.ui.controls/-checkbox-field.html) a checkbox with label and description

## Usage

`Checkbox` accepts a boolean state and a callback on its change.

```kotlin
@Composable
fun Example() {
Checkbox(
checked = false,
onCheckedChange = { /*...*/ },
)
}
```

`CheckboxField` has two additional slots - `description` and `label`.

```kotlin
@Composable
fun Example() {
CheckboxField(
checked = false,
onCheckedChange = {},
description = { Text("If selected, you will get the latest updates.") }
) {
Text("Autoupdate")
}
}
```

## UI testing

Slotting API allows you to add testTag to particular component parts. Utilize `assertIsOn` and `assertIsOff` to check the state.

```kotlin
composeTestRule.setContent {
var checked by remember { mutableStateOf(false) }
CheckboxField(
modifier = Modifier.testTag("checkbox"),
checked = checked,
onCheckedChange = { checked = !checked },
) {
Text("Label")
}
}

val checkbox = composeTestRule.onNodeWithTag("checkbox")
checkbox.assertIsOff()
checkbox.performClick()
checkbox.assertIsOn()
```

## Customization

`Checkbox` and `CheckboxField` appearance is not customizable.
1 change: 1 addition & 0 deletions docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
1. [ButtonPrimitive](03-components/15-primitives/buttonprimitive.mdx)
1. [Button](03-components/01-action/button.mdx)
1. [Card](03-components/02-structure/card.mdx)
1. [Checkbox](03-components/05-input/checkbox.mdx)
1. [ClickableField / InputFile](03-components/05-input/inputfile.mdx)
1. [Collapse](03-components/07-interaction/collapse.mdx)
1. [Loading / LinearProgressIndicator](03-components/10-progress-indicators/loading.mdx)
Expand Down
42 changes: 42 additions & 0 deletions ui/src/test/kotlin/kiwi/orbit/compose/ui/controls/CheckboxTest.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
package kiwi.orbit.compose.ui.controls

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.assertIsOff
import androidx.compose.ui.test.assertIsOn
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performClick
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
import org.robolectric.RobolectricTestRunner

@RunWith(RobolectricTestRunner::class)
internal class CheckboxTest {
@get:Rule
val composeTestRule = createComposeRule()

@Test
fun testBasics() {
composeTestRule.setContent {
var checked by remember { mutableStateOf(false) }
CheckboxField(
modifier = Modifier.testTag("checkbox"),
checked = checked,
onCheckedChange = { checked = !checked },
description = { Text("Description") },
) {
Text("Label")
}
}
val checkbox = composeTestRule.onNodeWithTag("checkbox")
checkbox.assertIsOff()
checkbox.performClick()
checkbox.assertIsOn()
}
}

0 comments on commit 138e718

Please sign in to comment.