Skip to content

Forms : Update disabled fields style #308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 31, 2024
Merged

Forms : Update disabled fields style #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92e8439
init new textfield design
kaushikrw Jan 24, 2024
421a7cf
fixed colors for basictextfield
kaushikrw Jan 30, 2024
b6f7c99
Update BaseTextFieldDefaults.kt
kaushikrw Jan 30, 2024
fd4e0ba
remove supporting text semantics
kaushikrw Jan 31, 2024
8b01a49
fixed all tests
kaushikrw Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 4 additions & 56 deletions ...rms/src/androidTest/java/com/arcgismaps/toolkit/featureforms/FormTextFieldNumericTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,10 @@ import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.featureforms.FeatureForm
import com.arcgismaps.mapping.featureforms.FeatureFormDefinition
import com.arcgismaps.mapping.featureforms.FieldFormElement
import com.arcgismaps.mapping.featureforms.TextBoxFormInput
import com.arcgismaps.mapping.layers.FeatureLayer
import com.arcgismaps.toolkit.featureforms.components.text.FormTextField
import com.arcgismaps.toolkit.featureforms.components.text.FormTextFieldState
import com.arcgismaps.toolkit.featureforms.components.text.TextFieldProperties
import com.arcgismaps.toolkit.featureforms.utils.editValue
import com.arcgismaps.toolkit.featureforms.utils.fieldType
import com.arcgismaps.toolkit.featureforms.utils.valueFlow
import junit.framework.TestCase
import kotlinx.coroutines.launch
import kotlinx.coroutines.test.runTest
import org.junit.BeforeClass
import org.junit.Rule
Expand Down Expand Up @@ -84,31 +78,8 @@ class FormTextFieldNumericTests {
fun testEnterNonNumericValueIntegerField() = runTest {
composeTestRule.setContent {
val scope = rememberCoroutineScope()
val textFieldProperties = TextFieldProperties(
label = integerField.label,
placeholder = integerField.hint,
description = integerField.description,
value = integerField.valueFlow(scope),
editable = integerField.isEditable,
required = integerField.isRequired,
singleLine = integerField.input is TextBoxFormInput,
domain = integerField.domain,
fieldType = featureForm.fieldType(integerField),
minLength = (integerField.input as TextBoxFormInput).minLength.toInt(),
maxLength = (integerField.input as TextBoxFormInput).maxLength.toInt(),
visible = integerField.isVisible
)
FormTextField(
state = FormTextFieldState(
textFieldProperties,
scope = scope,
onEditValue = {
featureForm.editValue(integerField, it)
scope.launch { featureForm.evaluateExpressions() }
},
defaultValidator = {integerField.getValidationErrors()}
)
)
val state = rememberFieldState(element = integerField, form = featureForm, scope = scope) as FormTextFieldState
FormTextField(state = state)
}
val outlinedTextField = composeTestRule.onNodeWithContentDescription(outlinedTextFieldSemanticLabel)
val text = "lorem ipsum"
Expand All @@ -128,31 +99,8 @@ class FormTextFieldNumericTests {
fun testEnterNonNumericValueFloatingPointField() = runTest {
composeTestRule.setContent {
val scope = rememberCoroutineScope()
val textFieldProperties = TextFieldProperties(
label = floatingPointField.label,
placeholder = floatingPointField.hint,
description = floatingPointField.description,
value = floatingPointField.valueFlow(scope),
editable = floatingPointField.isEditable,
required = floatingPointField.isRequired,
singleLine = floatingPointField.input is TextBoxFormInput,
domain = floatingPointField.domain,
fieldType = featureForm.fieldType(floatingPointField),
minLength = (floatingPointField.input as TextBoxFormInput).minLength.toInt(),
maxLength = (floatingPointField.input as TextBoxFormInput).maxLength.toInt(),
visible = floatingPointField.isVisible
)
FormTextField(
state = FormTextFieldState(
textFieldProperties,
scope = scope,
onEditValue = {
featureForm.editValue(floatingPointField, it)
scope.launch { featureForm.evaluateExpressions() }
},
defaultValidator = {floatingPointField.getValidationErrors()}
)
)
val state = rememberFieldState(element = floatingPointField, form = featureForm, scope = scope) as FormTextFieldState
FormTextField(state = state)
}
val outlinedTextField = composeTestRule.onNodeWithContentDescription(outlinedTextFieldSemanticLabel)
val text = "lorem ipsum"
Expand Down
33 changes: 2 additions & 31 deletions ...rc/androidTest/java/com/arcgismaps/toolkit/featureforms/FormTextFieldRangeNumericTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,10 @@ import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.featureforms.FeatureForm
import com.arcgismaps.mapping.featureforms.FeatureFormDefinition
import com.arcgismaps.mapping.featureforms.FieldFormElement
import com.arcgismaps.mapping.featureforms.TextBoxFormInput
import com.arcgismaps.mapping.layers.FeatureLayer
import com.arcgismaps.toolkit.featureforms.components.text.FormTextField
import com.arcgismaps.toolkit.featureforms.components.text.FormTextFieldState
import com.arcgismaps.toolkit.featureforms.components.text.TextFieldProperties
import com.arcgismaps.toolkit.featureforms.utils.editValue
import com.arcgismaps.toolkit.featureforms.utils.fieldType
import com.arcgismaps.toolkit.featureforms.utils.valueFlow
import junit.framework.TestCase
import kotlinx.coroutines.launch
import kotlinx.coroutines.test.runTest
import org.junit.BeforeClass
import org.junit.Rule
Expand Down Expand Up @@ -77,31 +71,8 @@ class FormTextFieldRangeNumericTests {
fun testEnterNumericValueOutOfRange() = runTest {
composeTestRule.setContent {
val scope = rememberCoroutineScope()
val textFieldProperties = TextFieldProperties(
label = integerField.label,
placeholder = integerField.hint,
description = integerField.description,
value = integerField.valueFlow(scope),
editable = integerField.isEditable,
required = integerField.isRequired,
singleLine = integerField.input is TextBoxFormInput,
domain = integerField.domain,
fieldType = featureForm.fieldType(integerField),
minLength = (integerField.input as TextBoxFormInput).minLength.toInt(),
maxLength = (integerField.input as TextBoxFormInput).maxLength.toInt(),
visible = integerField.isVisible
)
FormTextField(
state = FormTextFieldState(
textFieldProperties,
scope = scope,
onEditValue = {
featureForm.editValue(integerField, it)
scope.launch { featureForm.evaluateExpressions() }
},
defaultValidator = {integerField.getValidationErrors()}
)
)
val state = rememberFieldState(element = integerField, form = featureForm, scope = scope) as FormTextFieldState
FormTextField(state = state)
}
val outlinedTextField = composeTestRule.onNodeWithContentDescription(outlinedTextFieldSemanticLabel)
val text = "9"
Expand Down
2 changes: 0 additions & 2 deletions ...atureforms/src/androidTest/java/com/arcgismaps/toolkit/featureforms/FormTextFieldTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.performImeAction
import androidx.compose.ui.test.performTextClearance
import androidx.compose.ui.test.performTextInput
import androidx.compose.ui.test.printToLog
import com.arcgismaps.ArcGISEnvironment
import com.arcgismaps.data.ArcGISFeature
import com.arcgismaps.data.QueryParameters
Expand Down Expand Up @@ -180,7 +179,6 @@ class FormTextFieldTests {
@Test
fun testEnteredValueUnfocusedState() {
val outlinedTextField = composeTestRule.onNodeWithContentDescription(outlinedTextFieldSemanticLabel, useUnmergedTree = true)
outlinedTextField.printToLog("TAG")
val text = "lorem ipsum"
outlinedTextField.performTextInput(text)
outlinedTextField.assertIsFocused()
Expand Down
139 changes: 91 additions & 48 deletions ...eforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/base/BaseTextField.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,22 @@ import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.CheckCircle
import androidx.compose.material.icons.rounded.Clear
import androidx.compose.material.icons.rounded.TextFields
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
Expand All @@ -41,10 +45,12 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.VisualTransformation
Expand Down Expand Up @@ -91,15 +97,15 @@ private fun trailingIcon(
// multiline editable field
{
// show a done button only when focused
IconButton(onClick = { onDone() }, modifier = Modifier.semantics {
IconButton(onClick = { onDone() }, modifier = Modifier.semantics {
contentDescription = "Save local edit button"
}) {
Icon(
imageVector = Icons.Rounded.CheckCircle, contentDescription = "Done"
)
}
}

} else if (!singleLine && isEditable && text.isNotEmpty()) {
{
// show a clear icon instead if the multiline field is not empty
Expand All @@ -117,8 +123,8 @@ private fun trailingIcon(
}

/**
* A base text field component built on top of an [OutlinedTextField] that provides a standard for
* visual and behavioral properties. This can be used to build more customized composite components.
* A base text field component built on top of a [BasicTextField] with an [OutlinedTextFieldDefaults.DecorationBox].
* This provides a standard for visual and behavioral properties and can be used to build more customized composite components.
*
* The BaseTextField also takes care of clearing focus when the keyboard is dismissed or tapped
* outside the input area.
Expand All @@ -144,6 +150,7 @@ private fun trailingIcon(
* for this text field.
* @param trailingContent a widget to be displayed at the end of the text field container.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun BaseTextField(
text: String,
Expand All @@ -155,17 +162,26 @@ internal fun BaseTextField(
modifier: Modifier = Modifier,
readOnly: Boolean = !isEditable,
keyboardType: KeyboardType = KeyboardType.Ascii,
textStyle: TextStyle = LocalTextStyle.current,
trailingIcon: ImageVector? = null,
supportingText: @Composable (ColumnScope.() -> Unit)? = null,
onFocusChange: ((Boolean) -> Unit)? = null,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
trailingContent: (@Composable () -> Unit)? = null
) {
) {
var clearFocus by remember { mutableStateOf(false) }
var isFocused by remember { mutableStateOf(false) }

// if the keyboard is gone clear focus from the field as a side-effect
ClearFocus(clearFocus) { clearFocus = false }
val visualTransformation = if (text.isEmpty())
PlaceholderTransformation(placeholder.ifEmpty { " " })
else VisualTransformation.None
val colors = baseTextFieldColors(
isEditable = isEditable
)
// If color is not provided via the text style, use content color as a default
val textColor = textStyle.color.takeOrElse {
defaultTextColor(isEditable, text.isEmpty(), placeholder.isEmpty())
}
val mergedTextStyle = textStyle.merge(TextStyle(color = textColor))

Column(modifier = modifier
.onFocusChanged {
Expand All @@ -178,65 +194,92 @@ internal fun BaseTextField(
}
.padding(start = 15.dp, end = 15.dp, top = 10.dp, bottom = 10.dp)
) {
OutlinedTextField(
BasicTextField(
value = text,
onValueChange = onValueChange,
modifier = Modifier
// Merge semantics at the beginning of the modifier chain to ensure padding is
// considered part of the text field.
.semantics(mergeDescendants = true) {}
.padding(top = 8.dp)
.defaultMinSize(
minWidth = OutlinedTextFieldDefaults.MinWidth,
minHeight = OutlinedTextFieldDefaults.MinHeight
)
.fillMaxWidth()
.semantics { contentDescription = "outlined text field" },
enabled = true,
readOnly = readOnly,
label = {
Text(
text = label,
modifier = Modifier.semantics { contentDescription = "label" },
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
},
trailingIcon = trailingContent
?: trailingIcon(
text,
isEditable,
singleLine,
isFocused,
trailingIcon,
onValueChange = onValueChange,
onDone = { clearFocus = true }
),
supportingText = {
Column(
modifier = Modifier.clickable {
clearFocus = true
}.semantics { contentDescription = "supporting text" }
) {
supportingText?.invoke(this)
}
},
visualTransformation = if (text.isEmpty())
PlaceholderTransformation(placeholder.ifEmpty { " " })
else VisualTransformation.None,
textStyle = mergedTextStyle,
visualTransformation = visualTransformation,
keyboardActions = KeyboardActions(
onDone = { clearFocus = true }
),
keyboardOptions = KeyboardOptions.Default.copy(
imeAction = if (singleLine) ImeAction.Done else ImeAction.None,
keyboardType = keyboardType
),
singleLine = singleLine,
interactionSource = interactionSource,
colors = baseTextFieldColors(
isEditable = isEditable,
isEmpty = text.isEmpty(),
isPlaceholderEmpty = placeholder.isEmpty()
)
singleLine = singleLine,
decorationBox = @Composable { innerTextField ->
OutlinedTextFieldDefaults.DecorationBox(
value = text,
visualTransformation = visualTransformation,
innerTextField = innerTextField,
label = {
Text(
text = label,
modifier = Modifier.semantics { contentDescription = "label" },
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
},
trailingIcon = trailingContent
?: trailingIcon(
text,
isEditable,
singleLine,
isFocused,
trailingIcon,
onValueChange = onValueChange,
onDone = { clearFocus = true }
),
supportingText = {
Column(
modifier = Modifier
.clickable {
clearFocus = true
}
) {
supportingText?.invoke(this)
}
},
singleLine = singleLine,
enabled = true,
isError = false,
interactionSource = interactionSource,
colors = colors,
container = {
OutlinedTextFieldDefaults.ContainerBox(
enabled = true,
isError = false,
interactionSource,
colors,
OutlinedTextFieldDefaults.shape,
focusedBorderThickness = if (isEditable) 2.dp else 1.dp
)
}
)
}
)
}
// if the keyboard is gone clear focus from the field as a side-effect
ClearFocus(clearFocus) { clearFocus = false }
}


@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF)
@Composable
private fun BaseTextFieldPreview() {
private fun BaseTextFieldV2Preview() {
MaterialTheme {
BaseTextField(
text = "",
Expand Down
Loading