Skip to content

Commit a59ec77

Browse files
hopeman15Kyle Roe
hopeman15
and
Kyle Roe
authored
[Enhancement] Clean up InputTextField Component (#78)
* input text field defualts and test * update color strategy for input text field * update sample app * prepare readme for release Co-authored-by: Kyle Roe <[hopeman15@users.noreply.github.com]>
1 parent 6b1a58a commit a59ec77

11 files changed

Lines changed: 256 additions & 120 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ Add dependency:
5353

5454
```kotlin
5555
dependencies {
56-
implementation("com.hello.curiosity.compose:curiosity:0.10.0") // component library
57-
implementation("com.hello.curiosity.compose:navigation:0.10.0") // navigation library
58-
implementation("com.hello.curiosity.compose:settings:0.10.0") // settings library
59-
testImplementation("com.hello.curiosity.compose:test-utils:0.10.0") // testing library
56+
implementation("com.hello.curiosity.compose:curiosity:0.10.1") // component library
57+
implementation("com.hello.curiosity.compose:navigation:0.10.1") // navigation library
58+
implementation("com.hello.curiosity.compose:settings:0.10.1") // settings library
59+
testImplementation("com.hello.curiosity.compose:test-utils:0.10.1") // testing library
6060
}
6161
```

‎app/src/main/java/com/hello/curiosity/ui/scenes/components/InputScene.kt‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ import androidx.compose.foundation.lazy.LazyColumn
77
import androidx.compose.runtime.Composable
88
import androidx.compose.ui.Alignment
99
import androidx.compose.ui.Modifier
10-
import androidx.compose.ui.graphics.Color
1110
import androidx.compose.ui.platform.testTag
1211
import androidx.compose.ui.tooling.preview.Preview
1312
import androidx.compose.ui.unit.dp
13+
import com.hello.curiosity.R
1414
import com.hello.curiosity.compose.ui.Exclude
1515
import com.hello.curiosity.compose.ui.components.input.InputTextField
16-
import com.hello.curiosity.ui.theme.inputColors
16+
import com.hello.curiosity.ui.theme.inputTextFieldColors
1717

1818
@Composable
1919
fun InputScene() {
2020
LazyColumn(
2121
modifier = Modifier
2222
.fillMaxWidth()
23-
.testTag("input-scene-test-tag"),
23+
.testTag(INPUT_SCENE_VIEW_TEST_TAG),
2424
horizontalAlignment = Alignment.CenterHorizontally,
2525
verticalArrangement = Arrangement.spacedBy(8.dp)
2626
) {
@@ -32,9 +32,7 @@ fun InputScene() {
3232
end = 16.dp,
3333
top = 16.dp,
3434
),
35-
placeholder = "",
36-
backgroundColor = Color.White,
37-
colors = inputColors(),
35+
colors = inputTextFieldColors(),
3836
value = { }
3937
)
4038
}
@@ -46,9 +44,8 @@ fun InputScene() {
4644
end = 16.dp,
4745
top = 16.dp,
4846
),
49-
placeholder = "With Placeholder",
50-
backgroundColor = Color.White,
51-
colors = inputColors(),
47+
placeholder = R.string.input_text_field_placeholder,
48+
colors = inputTextFieldColors(),
5249
value = { }
5350
)
5451
}
@@ -60,17 +57,18 @@ fun InputScene() {
6057
end = 16.dp,
6158
top = 16.dp,
6259
),
63-
placeholder = "With Counter",
60+
placeholder = R.string.input_text_field_placeholder,
6461
maxLength = 30,
6562
hasCounter = true,
66-
backgroundColor = Color.White,
67-
colors = inputColors(),
63+
colors = inputTextFieldColors(),
6864
value = { }
6965
)
7066
}
7167
}
7268
}
7369

70+
const val INPUT_SCENE_VIEW_TEST_TAG = "INPUT_SCENE_VIEW_TEST_TAG"
71+
7472
@Exclude
7573
@Preview
7674
@Composable

‎app/src/main/java/com/hello/curiosity/ui/theme/AppTheme.kt‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import androidx.compose.ui.text.font.Font
77
import androidx.compose.ui.text.font.FontFamily
88
import androidx.compose.ui.text.font.FontWeight
99
import com.hello.curiosity.R
10-
import com.hello.curiosity.compose.ui.components.input.inputTextFieldColors
10+
import com.hello.curiosity.compose.ui.components.input.InputTextFieldDefaults
1111
import com.hello.curiosity.compose.ui.components.selector.DropDownMenuDefaults
1212
import com.hello.curiosity.compose.ui.components.toggle.CheckBoxDefaults
1313
import com.hello.curiosity.compose.ui.components.toggle.ToggleDefaults
@@ -16,7 +16,6 @@ import com.hello.curiosity.compose.ui.theme.Theme
1616
import com.hello.curiosity.compose.ui.theme.Type
1717
import com.hello.curiosity.ui.theme.AppTheme.lightCyan
1818
import com.hello.curiosity.ui.theme.AppTheme.metallicSeaweed
19-
import com.hello.curiosity.ui.theme.AppTheme.redCrayola
2019

2120
object AppTheme : Theme {
2221
override val typography: Type = Type(
@@ -50,9 +49,11 @@ object AppTheme : Theme {
5049
}
5150

5251
@Composable
53-
fun inputColors() = inputTextFieldColors(
54-
textColor = Color.Black,
55-
cursorColor = Color.Black,
52+
fun checkColors(isDarkMode: Boolean = isSystemInDarkTheme()) = CheckBoxDefaults.colors(
53+
checkedColor = if (isDarkMode) lightCyan else metallicSeaweed,
54+
uncheckedColor = if (isDarkMode) metallicSeaweed else lightCyan,
55+
checkmarkColor = if (isDarkMode) metallicSeaweed else lightCyan,
56+
boarderColor = if (isDarkMode) lightCyan else metallicSeaweed,
5657
)
5758

5859
@Composable
@@ -62,11 +63,10 @@ fun dropDownMenuColors(isDarkMode: Boolean = isSystemInDarkTheme()) = DropDownMe
6263
)
6364

6465
@Composable
65-
fun checkColors(isDarkMode: Boolean = isSystemInDarkTheme()) = CheckBoxDefaults.colors(
66-
checkedColor = if (isDarkMode) lightCyan else metallicSeaweed,
67-
uncheckedColor = if (isDarkMode) metallicSeaweed else lightCyan,
68-
checkmarkColor = if (isDarkMode) metallicSeaweed else lightCyan,
69-
boarderColor = if (isDarkMode) lightCyan else metallicSeaweed,
66+
fun inputTextFieldColors() = InputTextFieldDefaults.colors(
67+
textColor = Color.Black,
68+
cursorColor = Color.Black,
69+
backgroundColor = Color.White
7070
)
7171

7272
@Composable

‎app/src/main/res/values/strings.xml‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
<resources>
22
<string name="app_name">Curiosity</string>
33

4+
<!-- Buttons -->
5+
<string name="btn_enabled">Enabled Button</string>
6+
<string name="btn_disabled">Disabled Button</string>
7+
48
<!-- Content Description -->
59
<string name="content_description_back">Back icon</string>
610
<string name="content_description_arrow_forward">Arrow forward</string>
711
<string name="content_description_drop_down">Drop down menu</string>
812

13+
<!-- Drop Down Items -->
14+
<string name="drop_down_item_one">Selection One</string>
15+
<string name="drop_down_item_two">Selection Two</string>
16+
17+
<!-- Input -->
18+
<string name="input_text_field_placeholder">With Placeholder</string>
19+
920
<!-- Scenes -->
1021
<string name="button_scene_title">Button</string>
1122
<string name="color_scene_title">Color</string>
@@ -16,14 +27,6 @@
1627
<string name="toggle_scene_title">Toggle</string>
1728
<string name="typography_scene_title">Typography</string>
1829

19-
<!-- Buttons -->
20-
<string name="btn_enabled">Enabled Button</string>
21-
<string name="btn_disabled">Disabled Button</string>
22-
23-
<!-- Drop Down Items -->
24-
<string name="drop_down_item_one">Selection One</string>
25-
<string name="drop_down_item_two">Selection Two</string>
26-
2730
<!-- Settings -->
2831
<string name="settings_about">About</string>
2932
<string name="settings_info_title">Curiosity Design System</string>

‎app/src/test/java/com/hello/curiosity/navigation/CuriosityNavHostTest.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import androidx.compose.ui.test.assertIsDisplayed
55
import androidx.compose.ui.test.onNodeWithTag
66
import com.hello.curiosity.test.compose.NavigationTest
77
import com.hello.curiosity.ui.scenes.Scenes
8+
import com.hello.curiosity.ui.scenes.components.INPUT_SCENE_VIEW_TEST_TAG
89
import org.junit.Assert.assertEquals
910
import org.junit.Test
1011

@@ -44,7 +45,7 @@ class CuriosityNavHostTest : NavigationTest() {
4445
fun `verify route to InputScene works`() {
4546
assertNavigateToDestination(Scenes.Input.route)
4647
composeTestRule
47-
.onNodeWithTag("input-scene-test-tag")
48+
.onNodeWithTag(testTag = INPUT_SCENE_VIEW_TEST_TAG)
4849
.assertIsDisplayed()
4950
}
5051

‎app/src/test/java/com/hello/curiosity/ui/scenes/components/InputSceneTest.kt‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package com.hello.curiosity.ui.scenes.components
22

33
import androidx.compose.ui.test.assertIsDisplayed
4+
import androidx.compose.ui.test.onChildAt
45
import androidx.compose.ui.test.onNodeWithTag
56
import com.hello.curiosity.test.compose.ComposeTest
67
import org.junit.Test
@@ -15,7 +16,28 @@ class InputSceneTest : ComposeTest() {
1516

1617
// validate list exists
1718
composeTestRule
18-
.onNodeWithTag(testTag = "input-scene-test-tag")
19+
.onNodeWithTag(testTag = INPUT_SCENE_VIEW_TEST_TAG)
20+
.assertExists()
21+
.assertIsDisplayed()
22+
23+
// validate basic input text exists
24+
composeTestRule
25+
.onNodeWithTag(testTag = INPUT_SCENE_VIEW_TEST_TAG)
26+
.onChildAt(0)
27+
.assertExists()
28+
.assertIsDisplayed()
29+
30+
// validate input text with placeholder exists
31+
composeTestRule
32+
.onNodeWithTag(testTag = INPUT_SCENE_VIEW_TEST_TAG)
33+
.onChildAt(1)
34+
.assertExists()
35+
.assertIsDisplayed()
36+
37+
// validate input text with placeholder and counter exists
38+
composeTestRule
39+
.onNodeWithTag(testTag = INPUT_SCENE_VIEW_TEST_TAG)
40+
.onChildAt(2)
1941
.assertExists()
2042
.assertIsDisplayed()
2143
}

‎app/src/test/java/com/hello/curiosity/ui/theme/AppThemeTest.kt‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.hello.curiosity.ui.theme
22

3+
import androidx.compose.ui.graphics.Color
34
import com.hello.curiosity.test.compose.ComposeTest
45
import com.hello.curiosity.ui.theme.AppTheme.lightCyan
56
import com.hello.curiosity.ui.theme.AppTheme.metallicSeaweed
@@ -9,45 +10,55 @@ import org.junit.Test
910
class AppThemeTest : ComposeTest() {
1011

1112
@Test
12-
fun `validate drop down menu colors in light mode`() {
13+
fun `validate check box colors in light mode`() {
1314
composeTestRule.setContent {
14-
val colors = dropDownMenuColors(isDarkMode = false)
15-
assertEquals(lightCyan, colors.backgroundColor)
15+
val colors = checkColors(isDarkMode = false)
16+
assertEquals(metallicSeaweed, colors.checkedColor)
17+
assertEquals(lightCyan, colors.uncheckedColor)
18+
assertEquals(lightCyan, colors.checkmarkColor)
1619
assertEquals(metallicSeaweed, colors.boarderColor)
1720
}
1821
}
1922

2023
@Test
21-
fun `validate drop down menu colors in dark mode`() {
24+
fun `validate check box colors in dark mode`() {
2225
composeTestRule.setContent {
23-
val colors = dropDownMenuColors(isDarkMode = true)
24-
assertEquals(metallicSeaweed, colors.backgroundColor)
26+
val colors = checkColors(isDarkMode = true)
27+
assertEquals(lightCyan, colors.checkedColor)
28+
assertEquals(metallicSeaweed, colors.uncheckedColor)
29+
assertEquals(metallicSeaweed, colors.checkmarkColor)
2530
assertEquals(lightCyan, colors.boarderColor)
2631
}
2732
}
2833

2934
@Test
30-
fun `validate check box colors in light mode`() {
35+
fun `validate drop down menu colors in light mode`() {
3136
composeTestRule.setContent {
32-
val colors = checkColors(isDarkMode = false)
33-
assertEquals(metallicSeaweed, colors.checkedColor)
34-
assertEquals(lightCyan, colors.uncheckedColor)
35-
assertEquals(lightCyan, colors.checkmarkColor)
37+
val colors = dropDownMenuColors(isDarkMode = false)
38+
assertEquals(lightCyan, colors.backgroundColor)
3639
assertEquals(metallicSeaweed, colors.boarderColor)
3740
}
3841
}
3942

4043
@Test
41-
fun `validate check box colors in dark mode`() {
44+
fun `validate drop down menu colors in dark mode`() {
4245
composeTestRule.setContent {
43-
val colors = checkColors(isDarkMode = true)
44-
assertEquals(lightCyan, colors.checkedColor)
45-
assertEquals(metallicSeaweed, colors.uncheckedColor)
46-
assertEquals(metallicSeaweed, colors.checkmarkColor)
46+
val colors = dropDownMenuColors(isDarkMode = true)
47+
assertEquals(metallicSeaweed, colors.backgroundColor)
4748
assertEquals(lightCyan, colors.boarderColor)
4849
}
4950
}
5051

52+
@Test
53+
fun `validate input text field colors`() {
54+
composeTestRule.setContent {
55+
val colors = inputTextFieldColors()
56+
assertEquals(Color.Black, colors.textColor)
57+
assertEquals(Color.Black, colors.cursorColor)
58+
assertEquals(Color.White, colors.backgroundColor)
59+
}
60+
}
61+
5162
@Test
5263
fun `validate toggle colors in light mode`() {
5364
composeTestRule.setContent {

0 commit comments

Comments
 (0)