From 9adbcf2511e970c1091064baaa7ccddd8fb3149b Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Fri, 17 Jul 2026 14:43:58 +0100 Subject: [PATCH 01/10] =?UTF-8?q?HMA-11966=20new=20text=20field=20componen?= =?UTF-8?q?t=20with=20=C2=A3=20sign=20begun=20work?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecule/input/CurrencyInputView.kt | 34 ++++++-- .../compose/molecule/input/TextInputView.kt | 83 ++++++++++++------- 2 files changed, 83 insertions(+), 34 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 08ab81df..06b662bc 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -15,14 +15,28 @@ */ package uk.gov.hmrc.components.compose.molecule.input +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import uk.gov.hmrc.components.compose.atom.text.BodyText +import uk.gov.hmrc.components.compose.atom.text.Text +import uk.gov.hmrc.components.compose.ui.theme.HmrcBlack +import uk.gov.hmrc.components.compose.ui.theme.HmrcGrey3 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @Composable @@ -62,11 +76,21 @@ fun CurrencyInputView( labelContentDescription = labelContentDescription, hintText = hintText, hintContentDescription = hintContentDescription, - prefix = { - BodyText( - text = "£", - modifier = Modifier.padding(end = HmrcTheme.dimensions.hmrcSpacing8) - ) +// prefix = { +//// BodyText( +//// text = "£", +//// modifier = Modifier.padding(end = HmrcTheme.dimensions.hmrcSpacing8) +//// ) +//// }, + leadingContent = { + Box( + modifier = Modifier.fillMaxHeight() + .width(52.dp) + .padding(bottom = 24.dp) + .background(HmrcGrey3) + .border(1.dp, HmrcBlack), + contentAlignment = Alignment.Center) + { Text(text = "£", style = MaterialTheme.typography.titleLarge) } }, placeholderText = placeholderText, errorText = errorText, diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index 54e0b7e1..dd1c9484 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -16,7 +16,11 @@ package uk.gov.hmrc.components.compose.molecule.input import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.Close @@ -48,6 +52,7 @@ object TextInputView { hintText: String? = null, hintContentDescription: String? = null, prefix: @Composable() (() -> Unit)? = null, + leadingContent: (@Composable () -> Unit)? = null, placeholderText: String? = null, errorText: String? = null, errorContentDescription: String? = null, @@ -84,35 +89,55 @@ object TextInputView { Column(modifier = modifier) { Label(labelText = labelText, labelContentDescription = labelContentDescription) Hint(hintText = hintText, hintContentDescription = hintContentDescription) - TextField( - modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), - isError = !localError.isNullOrEmpty() || (localValue.length > (characterCount ?: Int.MAX_VALUE)), - value = localValue, - onInputValueChange = { newValue -> - if (maxChars?.let { newValue.length <= it } != false) { - localValue = if (inputFilter != null && newValue.isNotEmpty()) { - inputFilter(newValue, localValue) - } else newValue - if (onInputValueChange != null) { onInputValueChange(localValue) } - } - }, - prefix = prefix, - placeholderText = { placeholderText?.let { Text(text = it) } }, - supportingText = if (counterEnabled) - errorTextCounterCombo(errorText, errorContentDescription, characterCount, localValue) - else error( - errorText, - errorContentDescription - ), - singleLine = singleLine, - keyboardOptions = keyboardOptions, - visualTransformation = VisualTransformation.None, - trailingIcon = clearTrailingIcon, - colors = HmrcTheme.textFieldColors, - textStyle = - if (requiredSequencesSpacing) { HmrcTheme.typography.sequencesBody } else { HmrcTheme.typography.body }, - isCustomErrorInputHandle = isCustomErrorInputHandle - ) + + Box(modifier = modifier) { + Row(modifier = modifier.height(IntrinsicSize.Min)) { + + leadingContent?.invoke() + + TextField( + modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), + isError = !localError.isNullOrEmpty() || (localValue.length > (characterCount + ?: Int.MAX_VALUE)), + value = localValue, + onInputValueChange = { newValue -> + if (maxChars?.let { newValue.length <= it } != false) { + localValue = if (inputFilter != null && newValue.isNotEmpty()) { + inputFilter(newValue, localValue) + } else newValue + if (onInputValueChange != null) { + onInputValueChange(localValue) + } + } + }, + prefix = prefix, + placeholderText = { placeholderText?.let { Text(text = it) } }, + supportingText = if (counterEnabled) + errorTextCounterCombo( + errorText, + errorContentDescription, + characterCount, + localValue + ) + else error( + errorText, + errorContentDescription + ), + singleLine = singleLine, + keyboardOptions = keyboardOptions, + visualTransformation = VisualTransformation.None, + trailingIcon = clearTrailingIcon, + colors = HmrcTheme.textFieldColors, + textStyle = + if (requiredSequencesSpacing) { + HmrcTheme.typography.sequencesBody + } else { + HmrcTheme.typography.body + }, + isCustomErrorInputHandle = isCustomErrorInputHandle + ) + } + } } } } From 1ba7227df7773c4a29a1eaf4502cb8c3e324da6c Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Mon, 20 Jul 2026 10:41:52 +0100 Subject: [PATCH 02/10] =?UTF-8?q?HMA-11966=20new=20text=20field=20componen?= =?UTF-8?q?t=20with=20=C2=A3=20sign=20begun=20work,=20in=20progress?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compose/molecule/input/CurrencyInputView.kt | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 06b662bc..88761ddf 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -19,21 +19,17 @@ import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import uk.gov.hmrc.components.compose.atom.text.BodyText import uk.gov.hmrc.components.compose.atom.text.Text import uk.gov.hmrc.components.compose.ui.theme.HmrcBlack import uk.gov.hmrc.components.compose.ui.theme.HmrcGrey3 @@ -76,12 +72,6 @@ fun CurrencyInputView( labelContentDescription = labelContentDescription, hintText = hintText, hintContentDescription = hintContentDescription, -// prefix = { -//// BodyText( -//// text = "£", -//// modifier = Modifier.padding(end = HmrcTheme.dimensions.hmrcSpacing8) -//// ) -//// }, leadingContent = { Box( modifier = Modifier.fillMaxHeight() From ddc6f406ce24e18ba4d36d68d428688f0b65f1a0 Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Mon, 20 Jul 2026 11:39:47 +0100 Subject: [PATCH 03/10] HMA-11966 spotless and detekt checks --- .../molecule/input/CurrencyInputView.kt | 12 ++++++------ .../compose/molecule/input/TextInputView.kt | 18 +++++++++++------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 88761ddf..149075f4 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -75,12 +75,12 @@ fun CurrencyInputView( leadingContent = { Box( modifier = Modifier.fillMaxHeight() - .width(52.dp) - .padding(bottom = 24.dp) - .background(HmrcGrey3) - .border(1.dp, HmrcBlack), - contentAlignment = Alignment.Center) - { Text(text = "£", style = MaterialTheme.typography.titleLarge) } + .width(52.dp) + .padding(bottom = 24.dp) + .background(HmrcGrey3) + .border(1.dp, HmrcBlack), + contentAlignment = Alignment.Center + ) { Text(text = "£", style = MaterialTheme.typography.titleLarge) } }, placeholderText = placeholderText, errorText = errorText, diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index dd1c9484..78eb82d4 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -97,8 +97,12 @@ object TextInputView { TextField( modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), - isError = !localError.isNullOrEmpty() || (localValue.length > (characterCount - ?: Int.MAX_VALUE)), + isError = !localError.isNullOrEmpty() || ( + localValue.length > ( + characterCount + ?: Int.MAX_VALUE + ) + ), value = localValue, onInputValueChange = { newValue -> if (maxChars?.let { newValue.length <= it } != false) { @@ -129,11 +133,11 @@ object TextInputView { trailingIcon = clearTrailingIcon, colors = HmrcTheme.textFieldColors, textStyle = - if (requiredSequencesSpacing) { - HmrcTheme.typography.sequencesBody - } else { - HmrcTheme.typography.body - }, + if (requiredSequencesSpacing) { + HmrcTheme.typography.sequencesBody + } else { + HmrcTheme.typography.body + }, isCustomErrorInputHandle = isCustomErrorInputHandle ) } From ca3c52265372544e9084d31a2c19ac656ad8ab19 Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Mon, 20 Jul 2026 14:35:31 +0100 Subject: [PATCH 04/10] HMA-11966 modifiers change, checked view in main app --- .../hmrc/components/compose/molecule/input/TextInputView.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index 78eb82d4..fc8b6368 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -90,8 +90,8 @@ object TextInputView { Label(labelText = labelText, labelContentDescription = labelContentDescription) Hint(hintText = hintText, hintContentDescription = hintContentDescription) - Box(modifier = modifier) { - Row(modifier = modifier.height(IntrinsicSize.Min)) { + Box() { + Row(modifier = Modifier.height(IntrinsicSize.Min)) { leadingContent?.invoke() From 7faadba3379d12f5f1882deec6861291644c994b Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Mon, 20 Jul 2026 15:38:13 +0100 Subject: [PATCH 05/10] HMA-11966 dark mode working properly --- .../compose/molecule/input/CurrencyInputView.kt | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 149075f4..953228e6 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -32,7 +33,9 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import uk.gov.hmrc.components.compose.atom.text.Text import uk.gov.hmrc.components.compose.ui.theme.HmrcBlack +import uk.gov.hmrc.components.compose.ui.theme.HmrcBlackDark import uk.gov.hmrc.components.compose.ui.theme.HmrcGrey3 +import uk.gov.hmrc.components.compose.ui.theme.HmrcGrey3Dark import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @Composable @@ -77,10 +80,10 @@ fun CurrencyInputView( modifier = Modifier.fillMaxHeight() .width(52.dp) .padding(bottom = 24.dp) - .background(HmrcGrey3) - .border(1.dp, HmrcBlack), + .background(HmrcTheme.colors.hmrcGrey3) + .border(1.dp, HmrcTheme.colors.hmrcBlack), contentAlignment = Alignment.Center - ) { Text(text = "£", style = MaterialTheme.typography.titleLarge) } + ) { Text(text = "£", style = MaterialTheme.typography.titleLarge, color = HmrcTheme.colors.hmrcBlack) } }, placeholderText = placeholderText, errorText = errorText, From ec6e748837e5b39da65610172bb48624da4fb11f Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Mon, 20 Jul 2026 15:46:50 +0100 Subject: [PATCH 06/10] HMA-11966 dark mode working properly --- .../components/compose/molecule/input/CurrencyInputView.kt | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 953228e6..3864ca9e 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -31,11 +31,6 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import uk.gov.hmrc.components.compose.atom.text.Text -import uk.gov.hmrc.components.compose.ui.theme.HmrcBlack -import uk.gov.hmrc.components.compose.ui.theme.HmrcBlackDark -import uk.gov.hmrc.components.compose.ui.theme.HmrcGrey3 -import uk.gov.hmrc.components.compose.ui.theme.HmrcGrey3Dark import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @Composable From 2e04759923b97f7a64caef31761a25e3550c9119 Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Tue, 21 Jul 2026 13:39:23 +0100 Subject: [PATCH 07/10] HMA-11966 trying things, move to lower level --- .../molecule/input/CurrencyInputView.kt | 13 ++----- .../compose/molecule/input/TextInputView.kt | 36 ++++++++++++++++--- 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 3864ca9e..0619e1fa 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -18,12 +18,14 @@ package uk.gov.hmrc.components.compose.molecule.input import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text +import androidx.compose.material3.TextFieldDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment @@ -70,16 +72,7 @@ fun CurrencyInputView( labelContentDescription = labelContentDescription, hintText = hintText, hintContentDescription = hintContentDescription, - leadingContent = { - Box( - modifier = Modifier.fillMaxHeight() - .width(52.dp) - .padding(bottom = 24.dp) - .background(HmrcTheme.colors.hmrcGrey3) - .border(1.dp, HmrcTheme.colors.hmrcBlack), - contentAlignment = Alignment.Center - ) { Text(text = "£", style = MaterialTheme.typography.titleLarge, color = HmrcTheme.colors.hmrcBlack) } - }, + leadingContent = "£", placeholderText = placeholderText, errorText = errorText, errorContentDescription = errorContentDescription, diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index fc8b6368..b007a6a2 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -15,26 +15,38 @@ */ package uk.gov.hmrc.components.compose.molecule.input +import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.Close import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text +import androidx.compose.material3.TextFieldDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.onGloballyPositioned +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import uk.gov.hmrc.components.compose.R import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @@ -52,7 +64,7 @@ object TextInputView { hintText: String? = null, hintContentDescription: String? = null, prefix: @Composable() (() -> Unit)? = null, - leadingContent: (@Composable () -> Unit)? = null, + leadingContent: String? = null, placeholderText: String? = null, errorText: String? = null, errorContentDescription: String? = null, @@ -91,12 +103,28 @@ object TextInputView { Hint(hintText = hintText, hintContentDescription = hintContentDescription) Box() { - Row(modifier = Modifier.height(IntrinsicSize.Min)) { - leadingContent?.invoke() + Row(modifier = Modifier.height(IntrinsicSize.Min)) { + var textFieldHeight by remember { mutableStateOf(0.dp) } + val density = LocalDensity.current +// leadingContent?.invoke() + if (leadingContent != null) { + Box( + modifier = Modifier.defaultMinSize(minHeight = TextFieldDefaults.MinHeight) + .width(52.dp) + .height(textFieldHeight) + .background(HmrcTheme.colors.hmrcGrey3) + .border(1.dp, HmrcTheme.colors.hmrcBlack), + contentAlignment = Alignment.Center + ) { Text(text = leadingContent, style = MaterialTheme.typography.titleLarge, color = HmrcTheme.colors.hmrcBlack) } + } TextField( - modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), + modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError).onGloballyPositioned { + textFieldHeight = with(density) { + it.size.height.toDp() + } + }, isError = !localError.isNullOrEmpty() || ( localValue.length > ( characterCount From 4f86b2703ed369c098c69dd1ee991107ff20b7c4 Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Wed, 22 Jul 2026 11:22:52 +0100 Subject: [PATCH 08/10] HMA-11966 got to point with android current stylings --- .../compose/molecule/input/CommonInputView.kt | 76 ++++++++--- .../molecule/input/CurrencyInputView.kt | 9 +- .../compose/molecule/input/TextInputView.kt | 120 +++++------------- .../res/drawable/components_ic_pound_sign.xml | 29 +++++ 4 files changed, 128 insertions(+), 106 deletions(-) create mode 100644 components-compose/src/main/res/drawable/components_ic_pound_sign.xml diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt index 3faf9a35..c9f9342e 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt @@ -15,13 +15,21 @@ */ package uk.gov.hmrc.components.compose.molecule.input +import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextFieldDefaults import androidx.compose.material3.Text @@ -62,7 +70,10 @@ internal fun TextField( trailingIcon: @Composable() (() -> Unit)? = null, textStyle: TextStyle = typography.body, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - isCustomErrorInputHandle: Boolean + isCustomErrorInputHandle: Boolean, + leadingContent: String? = null, + leadingIcon: @Composable (() -> Unit)? = null, + ) { var customIsError = isError val customColors = if (isCustomErrorInputHandle && isError) { @@ -71,23 +82,52 @@ internal fun TextField( } else { colors } - OutlinedTextField( - modifier = modifier.fillMaxWidth(), - isError = customIsError, - value = value, - onValueChange = onInputValueChange, - prefix = prefix, - placeholder = placeholderText, - supportingText = supportingText, - trailingIcon = trailingIcon, - singleLine = singleLine, - keyboardOptions = keyboardOptions, - textStyle = textStyle, - colors = customColors, - shape = RoundedCornerShape(0), - visualTransformation = visualTransformation, - interactionSource = interactionSource, - ) + + + + + Row(modifier = Modifier.fillMaxWidth()) { + + Column { + if (leadingContent != null) { + Box( + modifier = Modifier.fillMaxHeight() + .width(52.dp) + .background(HmrcTheme.colors.hmrcGrey3) + .border(1.dp, HmrcTheme.colors.hmrcBlack), + contentAlignment = Alignment.Center + ) { + Text( + text = leadingContent, + style = MaterialTheme.typography.titleLarge, + color = HmrcTheme.colors.hmrcBlack + ) + } + } + } + + Column(modifier = Modifier.weight(1f)) { + OutlinedTextField( + modifier = modifier.fillMaxWidth(), + isError = customIsError, + value = value, + onValueChange = onInputValueChange, + prefix = prefix, + placeholder = placeholderText, + supportingText = supportingText, + trailingIcon = trailingIcon, + singleLine = singleLine, + keyboardOptions = keyboardOptions, + textStyle = textStyle, + colors = customColors, + shape = RoundedCornerShape(0), + visualTransformation = visualTransformation, + interactionSource = interactionSource, + leadingIcon = leadingIcon + ) + } + + } } @Composable diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 0619e1fa..91045670 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -15,6 +15,7 @@ */ package uk.gov.hmrc.components.compose.molecule.input +import androidx.appcompat.R import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box @@ -23,6 +24,7 @@ import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.material3.TextFieldDefaults @@ -30,6 +32,7 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -50,7 +53,8 @@ fun CurrencyInputView( singleLine: Boolean = true, enableDecimal: Boolean = true, maxChars: Int? = null, - isCustomErrorInputHandle: Boolean = false + isCustomErrorInputHandle: Boolean = false, + leadingIcon: @Composable (() -> Unit)? = null, ) { // pattern matches a decimal number val decimalPattern = remember { Regex("^([0-9]*)(\\.?)([0-9]*)$") } @@ -72,7 +76,8 @@ fun CurrencyInputView( labelContentDescription = labelContentDescription, hintText = hintText, hintContentDescription = hintContentDescription, - leadingContent = "£", + leadingIcon = { Icon(painter = painterResource(uk.gov.hmrc.components.compose.R.drawable.components_ic_pound_sign), + contentDescription = null) }, placeholderText = placeholderText, errorText = errorText, errorContentDescription = errorContentDescription, diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index b007a6a2..f1e2fae3 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -15,38 +15,22 @@ */ package uk.gov.hmrc.components.compose.molecule.input -import androidx.compose.foundation.background -import androidx.compose.foundation.border import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.IntrinsicSize -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.defaultMinSize -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.icons.Icons import androidx.compose.material.icons.rounded.Close import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text -import androidx.compose.material3.TextFieldDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.layout.onGloballyPositioned -import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import uk.gov.hmrc.components.compose.R import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @@ -64,16 +48,18 @@ object TextInputView { hintText: String? = null, hintContentDescription: String? = null, prefix: @Composable() (() -> Unit)? = null, - leadingContent: String? = null, placeholderText: String? = null, errorText: String? = null, + leadingContent: String? = null, errorContentDescription: String? = null, characterCount: Int? = null, maxChars: Int? = null, singleLine: Boolean = false, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, requiredSequencesSpacing: Boolean = false, - isCustomErrorInputHandle: Boolean = false + isCustomErrorInputHandle: Boolean = false, + leadingIcon: @Composable (() -> Unit)? = null, + ) { var localValue: String by rememberSaveable { mutableStateOf(value.orEmpty()) } localValue = value.orEmpty() @@ -101,75 +87,37 @@ object TextInputView { Column(modifier = modifier) { Label(labelText = labelText, labelContentDescription = labelContentDescription) Hint(hintText = hintText, hintContentDescription = hintContentDescription) - - Box() { - - Row(modifier = Modifier.height(IntrinsicSize.Min)) { - var textFieldHeight by remember { mutableStateOf(0.dp) } - val density = LocalDensity.current -// leadingContent?.invoke() - if (leadingContent != null) { - Box( - modifier = Modifier.defaultMinSize(minHeight = TextFieldDefaults.MinHeight) - .width(52.dp) - .height(textFieldHeight) - .background(HmrcTheme.colors.hmrcGrey3) - .border(1.dp, HmrcTheme.colors.hmrcBlack), - contentAlignment = Alignment.Center - ) { Text(text = leadingContent, style = MaterialTheme.typography.titleLarge, color = HmrcTheme.colors.hmrcBlack) } + TextField( + leadingIcon = leadingIcon, + modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), + isError = !localError.isNullOrEmpty() || (localValue.length > (characterCount ?: Int.MAX_VALUE)), + value = localValue, + onInputValueChange = { newValue -> + if (maxChars?.let { newValue.length <= it } != false) { + localValue = if (inputFilter != null && newValue.isNotEmpty()) { + inputFilter(newValue, localValue) + } else newValue + if (onInputValueChange != null) { onInputValueChange(localValue) } } - - TextField( - modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError).onGloballyPositioned { - textFieldHeight = with(density) { - it.size.height.toDp() - } - }, - isError = !localError.isNullOrEmpty() || ( - localValue.length > ( - characterCount - ?: Int.MAX_VALUE - ) - ), - value = localValue, - onInputValueChange = { newValue -> - if (maxChars?.let { newValue.length <= it } != false) { - localValue = if (inputFilter != null && newValue.isNotEmpty()) { - inputFilter(newValue, localValue) - } else newValue - if (onInputValueChange != null) { - onInputValueChange(localValue) - } - } - }, - prefix = prefix, - placeholderText = { placeholderText?.let { Text(text = it) } }, - supportingText = if (counterEnabled) - errorTextCounterCombo( - errorText, - errorContentDescription, - characterCount, - localValue - ) - else error( - errorText, - errorContentDescription - ), - singleLine = singleLine, - keyboardOptions = keyboardOptions, - visualTransformation = VisualTransformation.None, - trailingIcon = clearTrailingIcon, - colors = HmrcTheme.textFieldColors, - textStyle = - if (requiredSequencesSpacing) { - HmrcTheme.typography.sequencesBody - } else { - HmrcTheme.typography.body - }, - isCustomErrorInputHandle = isCustomErrorInputHandle - ) - } - } + }, + prefix = prefix, + placeholderText = { placeholderText?.let { Text(text = it) } }, + supportingText = if (counterEnabled) + errorTextCounterCombo(errorText, errorContentDescription, characterCount, localValue) + else error( + errorText, + errorContentDescription + ), + singleLine = singleLine, + keyboardOptions = keyboardOptions, + visualTransformation = VisualTransformation.None, + trailingIcon = clearTrailingIcon, + colors = HmrcTheme.textFieldColors, + textStyle = + if (requiredSequencesSpacing) { HmrcTheme.typography.sequencesBody } else { HmrcTheme.typography.body }, + isCustomErrorInputHandle = isCustomErrorInputHandle, + leadingContent = leadingContent + ) } } } diff --git a/components-compose/src/main/res/drawable/components_ic_pound_sign.xml b/components-compose/src/main/res/drawable/components_ic_pound_sign.xml new file mode 100644 index 00000000..3f73c38a --- /dev/null +++ b/components-compose/src/main/res/drawable/components_ic_pound_sign.xml @@ -0,0 +1,29 @@ + + + + + + \ No newline at end of file From 061de1831065f91f49e8ec9c3766842581fb82cf Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Wed, 22 Jul 2026 15:33:39 +0100 Subject: [PATCH 09/10] HMA-11966 pound box doesn't change size now when error, but error and general formatting need work --- .../compose/molecule/input/CommonInputView.kt | 33 ++++++++++++++----- .../molecule/input/CurrencyInputView.kt | 23 +++---------- .../compose/molecule/input/TextInputView.kt | 9 +++-- 3 files changed, 36 insertions(+), 29 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt index c9f9342e..7399e51a 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt @@ -73,6 +73,11 @@ internal fun TextField( isCustomErrorInputHandle: Boolean, leadingContent: String? = null, leadingIcon: @Composable (() -> Unit)? = null, + errorText: String? = null, + errorContentDescription: String? = null, + currencyErrorText: String? = null, + localError: String? = null, + counterEnabled: Boolean = false ) { var customIsError = isError @@ -82,17 +87,23 @@ internal fun TextField( } else { colors } - - - - +// still need to work on how to make this display well + if (leadingContent != null) { Row(modifier = Modifier.fillMaxWidth()) { +// error(errorText, errorContentDescription) + Text(currencyErrorText ?: "") + } + } + + Row(modifier = Modifier.height(IntrinsicSize.Min).adjustPaddingForCounter(!counterEnabled, localError)) { - Column { + Column { if (leadingContent != null) { Box( - modifier = Modifier.fillMaxHeight() + modifier = Modifier + .fillMaxHeight() .width(52.dp) + .adjustPaddingForCounter(counterEnabled, localError) .background(HmrcTheme.colors.hmrcGrey3) .border(1.dp, HmrcTheme.colors.hmrcBlack), contentAlignment = Alignment.Center @@ -104,7 +115,7 @@ internal fun TextField( ) } } - } + } Column(modifier = Modifier.weight(1f)) { OutlinedTextField( @@ -114,7 +125,12 @@ internal fun TextField( onValueChange = onInputValueChange, prefix = prefix, placeholder = placeholderText, - supportingText = supportingText, + supportingText = + if (leadingContent != null) { + null + } else { + supportingText + }, trailingIcon = trailingIcon, singleLine = singleLine, keyboardOptions = keyboardOptions, @@ -126,7 +142,6 @@ internal fun TextField( leadingIcon = leadingIcon ) } - } } diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt index 91045670..5c8406a9 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CurrencyInputView.kt @@ -15,27 +15,12 @@ */ package uk.gov.hmrc.components.compose.molecule.input -import androidx.appcompat.R -import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.defaultMinSize -import androidx.compose.foundation.layout.fillMaxHeight -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text -import androidx.compose.material3.TextFieldDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.remember -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme @Composable @@ -76,8 +61,9 @@ fun CurrencyInputView( labelContentDescription = labelContentDescription, hintText = hintText, hintContentDescription = hintContentDescription, - leadingIcon = { Icon(painter = painterResource(uk.gov.hmrc.components.compose.R.drawable.components_ic_pound_sign), - contentDescription = null) }, +// leadingIcon = { Icon(painter = painterResource(uk.gov.hmrc.components.compose.R.drawable.components_ic_pound_sign), +// contentDescription = null) }, + leadingContent = "£", placeholderText = placeholderText, errorText = errorText, errorContentDescription = errorContentDescription, @@ -86,7 +72,8 @@ fun CurrencyInputView( keyboardOptions = KeyboardOptions( keyboardType = if (enableDecimal) KeyboardType.Decimal else KeyboardType.Number ), - isCustomErrorInputHandle = isCustomErrorInputHandle + isCustomErrorInputHandle = isCustomErrorInputHandle, + ) } diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt index f1e2fae3..1777840e 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/TextInputView.kt @@ -90,6 +90,8 @@ object TextInputView { TextField( leadingIcon = leadingIcon, modifier = Modifier.adjustPaddingForCounter(counterEnabled, localError), + counterEnabled = counterEnabled, + localError = localError, isError = !localError.isNullOrEmpty() || (localValue.length > (characterCount ?: Int.MAX_VALUE)), value = localValue, onInputValueChange = { newValue -> @@ -114,9 +116,12 @@ object TextInputView { trailingIcon = clearTrailingIcon, colors = HmrcTheme.textFieldColors, textStyle = - if (requiredSequencesSpacing) { HmrcTheme.typography.sequencesBody } else { HmrcTheme.typography.body }, + if (requiredSequencesSpacing) { HmrcTheme.typography.sequencesBody } else { HmrcTheme.typography.body }, isCustomErrorInputHandle = isCustomErrorInputHandle, - leadingContent = leadingContent + leadingContent = leadingContent, + errorText = if (leadingContent != null) null else errorText, + currencyErrorText = errorText, + errorContentDescription = errorContentDescription ) } } From cc858796b2531a07668fa7902000fc11bdd660be Mon Sep 17 00:00:00 2001 From: Harry-Accent <271540689+Harry-Accent@users.noreply.github.com> Date: Thu, 23 Jul 2026 11:26:24 +0100 Subject: [PATCH 10/10] HMA-11966 pound box and errors looking ok, still to need to tidy up and add percentages --- .../compose/molecule/input/CommonInputView.kt | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt index 7399e51a..a9de24e0 100644 --- a/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt +++ b/components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/input/CommonInputView.kt @@ -25,10 +25,13 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextFieldDefaults @@ -51,8 +54,10 @@ import uk.gov.hmrc.components.compose.molecule.input.CommonInputView.CHAR_COUNT_ import uk.gov.hmrc.components.compose.molecule.input.CommonInputView.ERROR_TEXT_WITH_CHAR_COUNT_WIDTH import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors +import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.dimensions import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.typography +@OptIn(ExperimentalMaterial3Api::class) @Suppress("LongParameterList") @Composable internal fun TextField( @@ -87,13 +92,6 @@ internal fun TextField( } else { colors } -// still need to work on how to make this display well - if (leadingContent != null) { - Row(modifier = Modifier.fillMaxWidth()) { -// error(errorText, errorContentDescription) - Text(currencyErrorText ?: "") - } - } Row(modifier = Modifier.height(IntrinsicSize.Min).adjustPaddingForCounter(!counterEnabled, localError)) { @@ -143,6 +141,15 @@ internal fun TextField( ) } } + + // still need to work on how to make this display well + if (leadingContent != null) { + Row(modifier = Modifier.fillMaxWidth().heightIn(min = dimensions.hmrcSpacing16).wrapContentHeight().padding(top = dimensions.hmrcSpacing4)) { +// error(errorText, errorContentDescription) + ErrorText(currencyErrorText ?: "") +// Text(currencyErrorText ?: "") + } + } } @Composable