Skip to content

Commit

Permalink
Fix UI component focus and indicator thickness (#230)
Browse files Browse the repository at this point in the history 
* fix dropdown indicator thickness

* add input dropdown snapshot

* fix component focus

* fix input dropdown snapshot test

* add snapshot test

* fix lint error

* fix input coordinate and polygon focus

* discard unwanted changes

* fix failing test

* remove unwanted snapshot image

---------

Co-authored-by: Siddharth Agarwal <[email protected]>
  • Loading branch information
@siddh1004
siddh1004 and Siddharth Agarwal authored Apr 12, 2024
1 parent f5d0316 commit 4cb971f
Show file tree
Hide file tree
Showing 21 changed files with 522 additions and 20 deletions.
124 changes: 124 additions & 0 deletions .../androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputCheckboxSnapshotTest.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
package org.hisp.dhis.mobile.ui.designsystem

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.InputCheckBox
import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
import org.junit.Rule
import org.junit.Test

class InputCheckboxSnapshotTest {
@get:Rule
val paparazzi = paparazzi()

@Test
fun launchInputCheckBox() {
paparazzi.snapshot {
val option1 = "Option 1"
val option2 = "Option 2"
val option3 = "Option 3"
val option4 = "Option 4"
val option5 = "Option 5"
val option6 = "Option 6"

val checkBoxDataItemsVertical = remember {
mutableStateListOf(
CheckBoxData("0", checked = true, enabled = true, textInput = option1),
CheckBoxData("1", checked = false, enabled = true, textInput = option2),
CheckBoxData("2", checked = false, enabled = true, textInput = option3),
)
}

val checkBoxDataItemsError = remember {
mutableStateListOf(
CheckBoxData("3", checked = true, enabled = true, textInput = option1),
CheckBoxData("4", checked = false, enabled = true, textInput = option2),
CheckBoxData("5", checked = false, enabled = true, textInput = option3),
)
}

val checkBoxDataItemsDisabled = remember {
mutableStateListOf(
CheckBoxData("6", checked = true, enabled = true, textInput = option1),
CheckBoxData("7", checked = false, enabled = true, textInput = option2),
CheckBoxData("8", checked = false, enabled = true, textInput = option3),
)
}

val checkBoxDataItemsHorizontal = remember {
mutableStateListOf(
CheckBoxData("9", checked = true, enabled = true, textInput = option1),
CheckBoxData("10", checked = false, enabled = true, textInput = option2),
CheckBoxData("11", checked = false, enabled = true, textInput = option3),
CheckBoxData("12", checked = false, enabled = true, textInput = option4),
CheckBoxData("13", checked = false, enabled = true, textInput = option5),
CheckBoxData("14", checked = false, enabled = true, textInput = option6),
)
}

val focusRequester = remember { FocusRequester() }

LaunchedEffect(Unit) {
focusRequester.requestFocus()
}

ColumnComponentContainer("Checkboxes") {
SubTitle("Vertical")
InputCheckBox(
modifier = Modifier.focusRequester(focusRequester),
title = "Label",
checkBoxData = checkBoxDataItemsVertical,
onItemChange = { checkBoxData ->
val index = checkBoxDataItemsVertical.withIndex().first { it.value.uid == checkBoxData.uid }.index
checkBoxDataItemsVertical[index] = checkBoxData.copy(checked = !checkBoxData.checked)
},
onClearSelection = { checkBoxDataItemsVertical.replaceAll { it.copy(checked = false) } },
state = InputShellState.UNFOCUSED,
)
Spacer(Modifier.size(Spacing.Spacing18))
InputCheckBox(
title = "Label",
checkBoxData = checkBoxDataItemsError,
state = InputShellState.ERROR,
onItemChange = { checkBoxData ->
val index = checkBoxDataItemsError.withIndex().first { it.value.uid == checkBoxData.uid }.index
checkBoxDataItemsError[index] = checkBoxData.copy(checked = !checkBoxData.checked)
},
onClearSelection = { checkBoxDataItemsError.replaceAll { it.copy(checked = false) } },
)
Spacer(Modifier.size(Spacing.Spacing18))
InputCheckBox(
title = "Label",
checkBoxData = checkBoxDataItemsDisabled,
state = InputShellState.DISABLED,
onItemChange = { },
onClearSelection = { },
)
Spacer(Modifier.size(Spacing.Spacing18))
SubTitle("Horizontal")
InputCheckBox(
title = "Label",
checkBoxData = checkBoxDataItemsHorizontal,
orientation = Orientation.HORIZONTAL,
onItemChange = { checkBoxData ->
val index = checkBoxDataItemsHorizontal.withIndex().first { it.value.uid == checkBoxData.uid }.index
checkBoxDataItemsHorizontal[index] = checkBoxData.copy(checked = !checkBoxData.checked)
},
onClearSelection = { checkBoxDataItemsHorizontal.replaceAll { it.copy(checked = false) } },
state = InputShellState.UNFOCUSED,
)
}
}
}
}
153 changes: 153 additions & 0 deletions .../androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/InputDropDownSnapshotTest.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
package org.hisp.dhis.mobile.ui.designsystem

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.LaunchedEffect
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.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.DropdownItem
import org.hisp.dhis.mobile.ui.designsystem.component.InputDropDown
import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
import org.hisp.dhis.mobile.ui.designsystem.component.InputStyle
import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
import org.hisp.dhis.mobile.ui.designsystem.component.Title
import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
import org.junit.Rule
import org.junit.Test

class InputDropDownSnapshotTest {

@get:Rule
val paparazzi = paparazzi()

@Test
fun launchInputDropDown() {
paparazzi.snapshot {
ColumnComponentContainer {
val options = listOf(
DropdownItem("Option 1"),
DropdownItem("Option 2"),
DropdownItem("Option 3"),
DropdownItem("Option 4"),
DropdownItem("Option 5"),
DropdownItem("Option 6"),
DropdownItem("Option 7"),
DropdownItem("Option 8"),
DropdownItem("Option 9"),
DropdownItem("Option 10"),
)
Title("Input Dropdown", textColor = TextColor.OnSurfaceVariant)

SubTitle("Basic Input Dropdown with < 7 inputs", textColor = TextColor.OnSurfaceVariant)
var selectedItem by remember { mutableStateOf<DropdownItem?>(null) }
val focusRequester = remember { FocusRequester() }

LaunchedEffect(Unit) {
focusRequester.requestFocus()
}

InputDropDown(
modifier = Modifier.focusRequester(focusRequester),
title = "Label",
state = InputShellState.FOCUSED,
dropdownItems = options.take(6),
onResetButtonClicked = {
selectedItem = null
},
onItemSelected = {
selectedItem = it
},
selectedItem = selectedItem,
)

InputDropDown(
title = "Label - Parameter Style",
inputStyle = InputStyle.ParameterInputStyle(),
state = InputShellState.UNFOCUSED,
dropdownItems = options.take(6),
onResetButtonClicked = {
selectedItem = null
},
onItemSelected = {
selectedItem = it
},
selectedItem = selectedItem,
)

Spacer(Modifier.size(Spacing.Spacing18))

SubTitle("Basic Input Dropdown with >= 7 inputs", textColor = TextColor.OnSurfaceVariant)
var selectedItem4 by remember { mutableStateOf<DropdownItem?>(null) }
InputDropDown(
title = "Label",
state = InputShellState.UNFOCUSED,
dropdownItems = options,
onResetButtonClicked = {
selectedItem4 = null
},
onItemSelected = {
selectedItem4 = it
},
selectedItem = selectedItem4,
)

Spacer(Modifier.size(Spacing.Spacing18))

SubTitle("Basic Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant)
var selectedItem1 by remember { mutableStateOf<DropdownItem?>(options[0]) }
InputDropDown(
title = "Label",
state = InputShellState.UNFOCUSED,
dropdownItems = options,
onResetButtonClicked = {
selectedItem1 = null
},
onItemSelected = {
selectedItem1 = it
},
selectedItem = selectedItem1,
)
Spacer(Modifier.size(Spacing.Spacing18))

SubTitle("Error Input Dropdown ", textColor = TextColor.OnSurfaceVariant)
var selectedItem2 by remember { mutableStateOf<DropdownItem?>(null) }
InputDropDown(
title = "Label",
state = InputShellState.ERROR,
dropdownItems = options,
onResetButtonClicked = {
selectedItem2 = null
},
onItemSelected = {
selectedItem2 = it
},
selectedItem = selectedItem2,
)
Spacer(Modifier.size(Spacing.Spacing18))

SubTitle("Disabled Input Dropdown with content ", textColor = TextColor.OnSurfaceVariant)
var selectedItem3 by remember { mutableStateOf<DropdownItem?>(options[1]) }
InputDropDown(
title = "Label",
state = InputShellState.DISABLED,
dropdownItems = options,
onResetButtonClicked = {
selectedItem3 = null
},
onItemSelected = {
selectedItem3 = it
},
selectedItem = selectedItem3,
)
Spacer(Modifier.size(Spacing.Spacing18))
}
}
}
}
Loading

0 comments on commit 4cb971f

Please sign in to comment.