From 6f893483216250105d69d1319fd6a06afb9df32f Mon Sep 17 00:00:00 2001 From: Kaushik Meesala Date: Fri, 23 Feb 2024 18:22:03 -0800 Subject: [PATCH 1/4] add basic theming support --- toolkit/featureforms/README.md | 25 +++++++++++++++++++ .../components/base/BaseTextField.kt | 22 ++++++++++------ .../components/codedvalue/RadioButtonField.kt | 12 ++++----- .../codedvalue/RadioButtonFieldDefaults.kt | 16 +++++------- 4 files changed, 50 insertions(+), 25 deletions(-) diff --git a/toolkit/featureforms/README.md b/toolkit/featureforms/README.md index 15354ead8..648ad4e29 100644 --- a/toolkit/featureforms/README.md +++ b/toolkit/featureforms/README.md @@ -94,3 +94,28 @@ FeatureForm( ) ``` *Note* : Once the `validationErrorVisibility` is set to `Visible`, changing it back to `Automatic` will have no effect since all the fields have now gained focus to show any errors. + +#### Theming and Customization + +`FeatureForm` uses the material3 theming system. The following `colors` and `typography` are used by the respective fields. + +##### Text Fields +- Outline color - `MaterialTheme.colorScheme.outline` +- Label TextStyle - `MaterialTheme.typography.bodyMedium` +- Input TextStyle - `MaterialTheme.typography.bodyLarge` +- SupportingText TextStyle - `MaterialTheme.typography.bodySmall` +- Error color = `MaterialTheme.colorScheme.error` + +##### Radio Buttons +- Outline color = `MaterialTheme.colorScheme.outline` +- Label TextStyle - `MaterialTheme.typography.bodyMedium` +- Options TextStyle - `MaterialTheme.typography.bodyLarge` +- SupportingText TextStyle - `MaterialTheme.typography.bodySmall` +- Error color = `MaterialTheme.colorScheme.error` + +##### Group Elements +- Outline Color - `MaterialTheme.colorScheme.outline` +- Header Color - `MaterialTheme.colorScheme.SurfaceVariant` +- Content background Color - `MaterialTheme.colorScheme.background` +- Label TextStyle - `MaterialTheme.typography.bodyMedium` +- Description TextStyle - `MaterialTheme.typography.bodySmall` diff --git a/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/base/BaseTextField.kt b/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/base/BaseTextField.kt index 65a008d4b..2f060b045 100644 --- a/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/base/BaseTextField.kt +++ b/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/base/BaseTextField.kt @@ -31,10 +31,12 @@ import androidx.compose.material.icons.rounded.Clear import androidx.compose.material.icons.rounded.TextFields 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.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -190,12 +192,14 @@ internal fun BaseTextField( .semantics { contentDescription = "outlined text field" }, enabled = true, readOnly = readOnly, + textStyle = MaterialTheme.typography.bodyLarge, label = { Text( text = label, modifier = Modifier.semantics { contentDescription = "label" }, overflow = TextOverflow.Ellipsis, - maxLines = 1 + maxLines = 1, + style = MaterialTheme.typography.bodySmall ) }, trailingIcon = trailingContent @@ -209,13 +213,15 @@ internal fun BaseTextField( onDone = { focusManager.clearFocus() } ), supportingText = { - Column( - modifier = Modifier - .clickable { - focusManager.clearFocus() - } - ) { - supportingText?.invoke(this) + CompositionLocalProvider(LocalTextStyle provides MaterialTheme.typography.bodySmall) { + Column( + modifier = Modifier + .clickable { + focusManager.clearFocus() + } + ) { + supportingText?.invoke(this) + } } }, visualTransformation = visualTransformation, diff --git a/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonField.kt b/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonField.kt index a75ee9444..5ea3fc5a0 100644 --- a/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonField.kt +++ b/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonField.kt @@ -26,6 +26,7 @@ import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.selection.selectableGroup import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.LocalTextStyle import androidx.compose.material3.MaterialTheme import androidx.compose.material3.RadioButton import androidx.compose.material3.Text @@ -101,8 +102,7 @@ private fun RadioButtonField( } else { label }, - style = MaterialTheme.typography.bodyMedium, - color = colors.labelColor + style = RadioButtonFieldDefaults.labelTextStyle, ) Column( modifier = Modifier @@ -114,7 +114,7 @@ private fun RadioButtonField( ) ) { CompositionLocalProvider( - LocalContentColor provides colors.textColor + LocalTextStyle provides RadioButtonFieldDefaults.textStyle ) { options.forEach { (code, name) -> RadioButtonRow( @@ -129,8 +129,7 @@ private fun RadioButtonField( if (description.isNotEmpty()) { Text( text = description, - style = MaterialTheme.typography.bodySmall, - color = colors.supportingTextColor + style = RadioButtonFieldDefaults.supportingTextStyle ) } } @@ -164,8 +163,7 @@ private fun RadioButtonRow( enabled = enabled ) Text( - text = value, - style = MaterialTheme.typography.bodyMedium + text = value ) } } diff --git a/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonFieldDefaults.kt b/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonFieldDefaults.kt index 85f62940d..e7dc68519 100644 --- a/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonFieldDefaults.kt +++ b/toolkit/featureforms/src/main/java/com/arcgismaps/toolkit/featureforms/components/codedvalue/RadioButtonFieldDefaults.kt @@ -16,36 +16,32 @@ package com.arcgismaps.toolkit.featureforms.components.codedvalue -import androidx.compose.material3.LocalContentColor import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle internal object RadioButtonFieldDefaults { + + val textStyle : TextStyle @Composable get() = MaterialTheme.typography.bodyLarge + val labelTextStyle : TextStyle @Composable get() = MaterialTheme.typography.bodyMedium + val supportingTextStyle : TextStyle @Composable get() = MaterialTheme.typography.bodySmall + @Composable fun colors(): RadioButtonFieldColors = RadioButtonFieldColors( - labelColor = MaterialTheme.colorScheme.onSurfaceVariant, - supportingTextColor = MaterialTheme.colorScheme.onSurfaceVariant, errorColor = MaterialTheme.colorScheme.error, containerBorderColor = MaterialTheme.colorScheme.outline, - textColor = LocalContentColor.current ) } /** * Color properties of a radio button field. * - * @property labelColor The color used for the label of this radio button field. - * @property supportingTextColor The color used for the supporting text of this radio button field. * @property errorColor The color used for the supporting text of this radio button field when the value is considered * invalid. * @property containerBorderColor The color used for the container border of this radio button field. - * @property textColor The color used for the text of this radio button field options. */ internal data class RadioButtonFieldColors( - val labelColor: Color, - val supportingTextColor: Color, val errorColor: Color, val containerBorderColor: Color, - val textColor: Color ) From 3365a510a96bb1be22d8dedaf4f23b1aa44a1a06 Mon Sep 17 00:00:00 2001 From: Kaushik Meesala Date: Fri, 23 Feb 2024 18:24:03 -0800 Subject: [PATCH 2/4] Update README.md --- toolkit/featureforms/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/toolkit/featureforms/README.md b/toolkit/featureforms/README.md index 648ad4e29..fb30aeafb 100644 --- a/toolkit/featureforms/README.md +++ b/toolkit/featureforms/README.md @@ -95,25 +95,25 @@ FeatureForm( ``` *Note* : Once the `validationErrorVisibility` is set to `Visible`, changing it back to `Automatic` will have no effect since all the fields have now gained focus to show any errors. -#### Theming and Customization +## Theming and Customization `FeatureForm` uses the material3 theming system. The following `colors` and `typography` are used by the respective fields. -##### Text Fields +#### Text Fields - Outline color - `MaterialTheme.colorScheme.outline` - Label TextStyle - `MaterialTheme.typography.bodyMedium` - Input TextStyle - `MaterialTheme.typography.bodyLarge` - SupportingText TextStyle - `MaterialTheme.typography.bodySmall` - Error color = `MaterialTheme.colorScheme.error` -##### Radio Buttons +#### Radio Buttons - Outline color = `MaterialTheme.colorScheme.outline` - Label TextStyle - `MaterialTheme.typography.bodyMedium` - Options TextStyle - `MaterialTheme.typography.bodyLarge` - SupportingText TextStyle - `MaterialTheme.typography.bodySmall` - Error color = `MaterialTheme.colorScheme.error` -##### Group Elements +#### Group Elements - Outline Color - `MaterialTheme.colorScheme.outline` - Header Color - `MaterialTheme.colorScheme.SurfaceVariant` - Content background Color - `MaterialTheme.colorScheme.background` From 5996d24db66ad31ad26a85fefec597fc4b51c0ae Mon Sep 17 00:00:00 2001 From: Kaushik Meesala Date: Fri, 23 Feb 2024 18:24:45 -0800 Subject: [PATCH 3/4] Update README.md --- toolkit/featureforms/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/toolkit/featureforms/README.md b/toolkit/featureforms/README.md index fb30aeafb..5c777c5f9 100644 --- a/toolkit/featureforms/README.md +++ b/toolkit/featureforms/README.md @@ -104,14 +104,14 @@ FeatureForm( - Label TextStyle - `MaterialTheme.typography.bodyMedium` - Input TextStyle - `MaterialTheme.typography.bodyLarge` - SupportingText TextStyle - `MaterialTheme.typography.bodySmall` -- Error color = `MaterialTheme.colorScheme.error` +- Error color - `MaterialTheme.colorScheme.error` #### Radio Buttons -- Outline color = `MaterialTheme.colorScheme.outline` +- Outline color - `MaterialTheme.colorScheme.outline` - Label TextStyle - `MaterialTheme.typography.bodyMedium` - Options TextStyle - `MaterialTheme.typography.bodyLarge` - SupportingText TextStyle - `MaterialTheme.typography.bodySmall` -- Error color = `MaterialTheme.colorScheme.error` +- Error color - `MaterialTheme.colorScheme.error` #### Group Elements - Outline Color - `MaterialTheme.colorScheme.outline` From 808e6dc7e1918e8e67d8878d0c1af3fd7340bb39 Mon Sep 17 00:00:00 2001 From: Kaushik Meesala Date: Mon, 26 Feb 2024 10:31:20 -0800 Subject: [PATCH 4/4] Update README.md --- toolkit/featureforms/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/toolkit/featureforms/README.md b/toolkit/featureforms/README.md index 5c777c5f9..88956d0ed 100644 --- a/toolkit/featureforms/README.md +++ b/toolkit/featureforms/README.md @@ -119,3 +119,8 @@ FeatureForm( - Content background Color - `MaterialTheme.colorScheme.background` - Label TextStyle - `MaterialTheme.typography.bodyMedium` - Description TextStyle - `MaterialTheme.typography.bodySmall` + +#### Read-Only Fields +Alpha values for read only fields cannot be customized at this time. + +More information on the material 3 specs [here](https://m3.material.io/components/text-fields/specs#e4964192-72ad-414f-85b4-4b4357abb83c)