Skip to content

Commit dd810c2

Browse files
florentmaitreflorentmaitre
committed
Add preview for rich text in input components
1 parent 224a303 commit dd810c2

5 files changed

Lines changed: 147 additions & 32 deletions

File tree

‎core/src/main/java/com/orange/ouds/core/component/OudsPasswordInput.kt‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import android.content.res.Configuration.UI_MODE_TYPE_NORMAL
1717
import androidx.compose.foundation.interaction.Interaction
1818
import androidx.compose.foundation.interaction.MutableInteractionSource
1919
import androidx.compose.foundation.isSystemInDarkTheme
20+
import androidx.compose.foundation.layout.padding
2021
import androidx.compose.foundation.text.BasicSecureTextField
2122
import androidx.compose.foundation.text.KeyboardOptions
2223
import androidx.compose.foundation.text.input.InputTransformation
@@ -31,20 +32,22 @@ import androidx.compose.ui.res.stringResource
3132
import androidx.compose.ui.text.TextLayoutResult
3233
import androidx.compose.ui.text.input.ImeAction
3334
import androidx.compose.ui.text.input.KeyboardType
34-
import androidx.compose.ui.text.input.PasswordVisualTransformation
35-
import androidx.compose.ui.text.input.VisualTransformation
3635
import androidx.compose.ui.tooling.preview.Preview
3736
import androidx.compose.ui.tooling.preview.PreviewParameter
3837
import androidx.compose.ui.unit.Density
38+
import androidx.compose.ui.unit.dp
3939
import com.orange.ouds.core.R
4040
import com.orange.ouds.core.component.common.OudsError
4141
import com.orange.ouds.core.component.common.text.OudsAnnotatedHelperText
4242
import com.orange.ouds.core.extensions.collectInteractionStateAsState
4343
import com.orange.ouds.core.theme.OudsTheme
4444
import com.orange.ouds.core.utilities.OudsPreview
4545
import com.orange.ouds.core.utilities.OudsPreviewDevice
46+
import com.orange.ouds.core.utilities.OudsPreviewLightDark
4647
import com.orange.ouds.core.utilities.OudsPreviewableComponent
4748
import com.orange.ouds.core.utilities.PreviewEnumEntries
49+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedErrorMessage
50+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedHelperText
4851
import com.orange.ouds.core.utilities.getPreviewTheme
4952
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
5053
import com.orange.ouds.theme.OudsThemeContract
@@ -362,9 +365,6 @@ private fun trailingIconButton(isPasswordHidden: Boolean, onClick: () -> Unit):
362365
)
363366
}
364367

365-
private fun visualTransformation(isPasswordHidden: Boolean) =
366-
if (isPasswordHidden) PasswordVisualTransformation(mask = '\u25cf') else VisualTransformation.None
367-
368368
@Preview(name = "Light", heightDp = OudsPreviewableComponent.PasswordInput.PreviewHeightDp, device = OudsPreviewDevice)
369369
@Preview(
370370
name = "Dark",
@@ -400,6 +400,27 @@ internal fun PreviewOudsPasswordInput(
400400
}
401401
}
402402

403+
@OudsPreviewLightDark
404+
@Composable
405+
@Suppress("PreviewShouldNotBeCalledRecursively")
406+
private fun PreviewOudsPasswordInputWithRichText(@PreviewParameter(OudsPasswordInputWithRichTextPreviewParameterProvider::class) error: Boolean) {
407+
PreviewOudsPasswordInputWithRichText(theme = getPreviewTheme(), darkThemeEnabled = isSystemInDarkTheme(), error = error)
408+
}
409+
410+
@Composable
411+
internal fun PreviewOudsPasswordInputWithRichText(
412+
theme: OudsThemeContract,
413+
darkThemeEnabled: Boolean,
414+
error: Boolean
415+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme, darkThemeEnabled = darkThemeEnabled) {
416+
OudsPasswordInput(
417+
state = rememberOudsPasswordInputState(""),
418+
label = "Password",
419+
error = if (error) OudsError(buildPreviewAnnotatedErrorMessage()) else null,
420+
helperText = buildPreviewAnnotatedHelperText(),
421+
)
422+
}
423+
403424
internal data class OudsPasswordInputPreviewParameter(
404425
val initialText: String,
405426
val label: String? = null,
@@ -415,6 +436,8 @@ internal data class OudsPasswordInputPreviewParameter(
415436
internal class OudsPasswordInputPreviewParameterProvider :
416437
BasicPreviewParameterProvider<OudsPasswordInputPreviewParameter>(*previewParameterValues.toTypedArray())
417438

439+
internal class OudsPasswordInputWithRichTextPreviewParameterProvider : BasicPreviewParameterProvider<Boolean>(false, true)
440+
418441
private val previewParameterValues: List<OudsPasswordInputPreviewParameter>
419442
get() {
420443
val label = "Password"

‎core/src/main/java/com/orange/ouds/core/component/OudsPinCodeInput.kt‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ import com.orange.ouds.core.theme.currentWindowWidth
7474
import com.orange.ouds.core.theme.value
7575
import com.orange.ouds.core.utilities.OudsPreview
7676
import com.orange.ouds.core.utilities.OudsPreviewLightDark
77+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedErrorMessage
78+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedHelperText
7779
import com.orange.ouds.core.utilities.getPreviewTheme
7880
import com.orange.ouds.core.utilities.mapSettings
7981
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
@@ -474,7 +476,7 @@ internal fun PreviewOudsPinCodeInput(
474476
theme: OudsThemeContract,
475477
darkThemeEnabled: Boolean,
476478
parameter: OudsPinCodeInputPreviewParameter
477-
) = OudsPreview(modifier = Modifier.padding(16.dp), theme = theme, darkThemeEnabled = darkThemeEnabled) {
479+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme, darkThemeEnabled = darkThemeEnabled) {
478480
with(parameter) {
479481
OudsPinCodeInput(
480482
value = value,
@@ -487,24 +489,6 @@ internal fun PreviewOudsPinCodeInput(
487489
}
488490
}
489491

490-
internal data class OudsPinCodeInputPreviewParameter(
491-
val value: String,
492-
val outlined: Boolean = false,
493-
val error: OudsError? = null,
494-
val helperText: String? = null
495-
)
496-
497-
internal class OudsPinCodeInputPreviewParameterProvider :
498-
BasicPreviewParameterProvider<OudsPinCodeInputPreviewParameter>(*previewParameterValues.toTypedArray())
499-
500-
private val previewParameterValues: List<OudsPinCodeInputPreviewParameter>
501-
get() {
502-
return listOf(
503-
OudsPinCodeInputPreviewParameter(value = "12", helperText = "Enter the 4-digit code sent to your phone."),
504-
OudsPinCodeInputPreviewParameter(value = "12", error = OudsError("Verification failed. Check and enter the correct code."))
505-
).flatMap { listOf(it, it.copy(outlined = true)) }
506-
}
507-
508492
@OudsPreview
509493
@Composable
510494
@Suppress("PreviewShouldNotBeCalledRecursively")
@@ -516,7 +500,7 @@ private fun PreviewOudsPinCodeInputWithRoundedCorners(@PreviewParameter(OudsPinC
516500
internal fun PreviewOudsPinCodeInputWithRoundedCorners(
517501
theme: OudsThemeContract,
518502
outlined: Boolean
519-
) = OudsPreview(modifier = Modifier.padding(16.dp), theme = theme.mapSettings { it.copy(roundedCornerTextInputs = true) }) {
503+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme.mapSettings { it.copy(roundedCornerTextInputs = true) }) {
520504
OudsPinCodeInput(
521505
value = "12",
522506
onValueChange = {},
@@ -525,4 +509,46 @@ internal fun PreviewOudsPinCodeInputWithRoundedCorners(
525509
)
526510
}
527511

512+
@OudsPreviewLightDark
513+
@Composable
514+
@Suppress("PreviewShouldNotBeCalledRecursively")
515+
private fun PreviewOudsPinCodeInputWithRichText(@PreviewParameter(OudsPinCodeInputWithRichTextPreviewParameterProvider::class) error: Boolean) {
516+
PreviewOudsPinCodeInputWithRichText(theme = getPreviewTheme(), darkThemeEnabled = isSystemInDarkTheme(), error = error)
517+
}
518+
519+
@Composable
520+
internal fun PreviewOudsPinCodeInputWithRichText(
521+
theme: OudsThemeContract,
522+
darkThemeEnabled: Boolean,
523+
error: Boolean
524+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme, darkThemeEnabled = darkThemeEnabled) {
525+
OudsPinCodeInput(
526+
value = "12",
527+
onValueChange = {},
528+
length = OudsPinCodeInputLength.Four,
529+
error = if (error) OudsError(buildPreviewAnnotatedErrorMessage()) else null,
530+
helperText = buildPreviewAnnotatedHelperText(),
531+
)
532+
}
533+
534+
internal data class OudsPinCodeInputPreviewParameter(
535+
val value: String,
536+
val outlined: Boolean = false,
537+
val error: OudsError? = null,
538+
val helperText: String? = null
539+
)
540+
541+
internal class OudsPinCodeInputPreviewParameterProvider :
542+
BasicPreviewParameterProvider<OudsPinCodeInputPreviewParameter>(*previewParameterValues.toTypedArray())
543+
528544
internal class OudsPinCodeInputWithRoundedCornersPreviewParameterProvider : BasicPreviewParameterProvider<Boolean>(false, true)
545+
546+
internal class OudsPinCodeInputWithRichTextPreviewParameterProvider : BasicPreviewParameterProvider<Boolean>(false, true)
547+
548+
private val previewParameterValues: List<OudsPinCodeInputPreviewParameter>
549+
get() {
550+
return listOf(
551+
OudsPinCodeInputPreviewParameter(value = "12", helperText = "Enter the 4-digit code sent to your phone."),
552+
OudsPinCodeInputPreviewParameter(value = "12", error = OudsError("Verification failed. Check and enter the correct code."))
553+
).flatMap { listOf(it, it.copy(outlined = true)) }
554+
}

‎core/src/main/java/com/orange/ouds/core/component/OudsTextArea.kt‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,11 @@ import com.orange.ouds.core.theme.OudsTheme
7575
import com.orange.ouds.core.theme.value
7676
import com.orange.ouds.core.utilities.OudsPreview
7777
import com.orange.ouds.core.utilities.OudsPreviewDevice
78+
import com.orange.ouds.core.utilities.OudsPreviewLightDark
7879
import com.orange.ouds.core.utilities.OudsPreviewableComponent
7980
import com.orange.ouds.core.utilities.PreviewEnumEntries
81+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedErrorMessage
82+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedHelperText
8083
import com.orange.ouds.core.utilities.getPreviewTheme
8184
import com.orange.ouds.core.utilities.mapSettings
8285
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
@@ -1103,9 +1106,11 @@ internal fun PreviewOudsTextAreaConstrainedMaxWidth(@PreviewParameter(OudsTextAr
11031106
}
11041107

11051108
@Composable
1106-
internal fun PreviewOudsTextAreaConstrainedMaxWidth(theme: OudsThemeContract, constrainedMaxWidth: Boolean) = OudsPreview(theme = theme) {
1109+
internal fun PreviewOudsTextAreaConstrainedMaxWidth(
1110+
theme: OudsThemeContract,
1111+
constrainedMaxWidth: Boolean
1112+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme) {
11071113
OudsTextArea(
1108-
modifier = Modifier.padding(all = 10.dp),
11091114
textFieldState = rememberTextFieldState(),
11101115
label = "Label",
11111116
placeholder = "Placeholder",
@@ -1120,15 +1125,38 @@ private fun PreviewOudsTextAreaMultiLineValue(@PreviewParameter(OudsTextAreaMult
11201125
PreviewOudsTextAreaMultiLineValue(theme = getPreviewTheme(), lineCount = lineCount)
11211126

11221127
@Composable
1123-
internal fun PreviewOudsTextAreaMultiLineValue(theme: OudsThemeContract, lineCount: Int) = OudsPreview(theme = theme) {
1128+
internal fun PreviewOudsTextAreaMultiLineValue(
1129+
theme: OudsThemeContract,
1130+
lineCount: Int
1131+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme) {
11241132
OudsTextArea(
1125-
modifier = Modifier.padding(all = 10.dp),
11261133
textFieldState = rememberTextFieldState(List(lineCount) { "Line ${it + 1}" }.joinToString("\n")),
11271134
label = "$lineCount lines",
11281135
loader = OudsTextInputLoader(progress = 0.75f)
11291136
)
11301137
}
11311138

1139+
@OudsPreviewLightDark
1140+
@Composable
1141+
@Suppress("PreviewShouldNotBeCalledRecursively")
1142+
private fun PreviewOudsTextAreaWithRichText(@PreviewParameter(OudsTextAreaWithRichTextPreviewParameterProvider::class) error: Boolean) {
1143+
PreviewOudsTextAreaWithRichText(theme = getPreviewTheme(), darkThemeEnabled = isSystemInDarkTheme(), error = error)
1144+
}
1145+
1146+
@Composable
1147+
internal fun PreviewOudsTextAreaWithRichText(
1148+
theme: OudsThemeContract,
1149+
darkThemeEnabled: Boolean,
1150+
error: Boolean
1151+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme, darkThemeEnabled = darkThemeEnabled) {
1152+
OudsTextArea(
1153+
textFieldState = rememberTextFieldState(),
1154+
label = "Label",
1155+
error = if (error) OudsError(buildPreviewAnnotatedErrorMessage()) else null,
1156+
helperText = buildPreviewAnnotatedHelperText(),
1157+
)
1158+
}
1159+
11321160
internal data class OudsTextAreaPreviewParameter(
11331161
val value: String,
11341162
val label: String? = null,
@@ -1145,6 +1173,8 @@ internal class OudsTextAreaConstrainedMaxWidthPreviewParameterProvider : BasicPr
11451173

11461174
internal class OudsTextAreaMultilineValuePreviewParameterProvider : BasicPreviewParameterProvider<Int>(3, 5, 15)
11471175

1176+
internal class OudsTextAreaWithRichTextPreviewParameterProvider : BasicPreviewParameterProvider<Boolean>(false, true)
1177+
11481178
private val previewParameterValues: List<OudsTextAreaPreviewParameter>
11491179
get() {
11501180
val label = "Label"

‎core/src/main/java/com/orange/ouds/core/component/OudsTextInput.kt‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,11 @@ import com.orange.ouds.core.theme.value
8888
import com.orange.ouds.core.utilities.CheckedContent
8989
import com.orange.ouds.core.utilities.OudsPreview
9090
import com.orange.ouds.core.utilities.OudsPreviewDevice
91+
import com.orange.ouds.core.utilities.OudsPreviewLightDark
9192
import com.orange.ouds.core.utilities.OudsPreviewableComponent
9293
import com.orange.ouds.core.utilities.PreviewEnumEntries
94+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedErrorMessage
95+
import com.orange.ouds.core.utilities.buildPreviewAnnotatedHelperText
9396
import com.orange.ouds.core.utilities.getPreviewEnumEntry
9497
import com.orange.ouds.core.utilities.getPreviewTheme
9598
import com.orange.ouds.core.utilities.mapSettings
@@ -1205,7 +1208,8 @@ internal fun OudsTextInputHelperTextErrorMessage(
12051208
) {
12061209
with(OudsTheme.componentsTokens.textInput) {
12071210
val hasError = error != null
1208-
if ((!hasError && !helperText.isNullOrBlank()) || (hasError && error.message.isNotBlank())) {
1211+
val isHelperTextNullOrBlank = annotatedHelperText?.text.orElse { helperText }.isNullOrBlank()
1212+
if ((!hasError && !isHelperTextNullOrBlank) || (hasError && error.message.isNotBlank())) {
12091213
val textModifier = modifier
12101214
.fillMaxWidth()
12111215
.padding(top = spacePaddingBlockTopHelperText.value)
@@ -1611,16 +1615,39 @@ internal fun PreviewOudsTextInputConstrainedMaxWidth(@PreviewParameter(OudsTextI
16111615
}
16121616

16131617
@Composable
1614-
internal fun PreviewOudsTextInputConstrainedMaxWidth(theme: OudsThemeContract, constrainedMaxWidth: Boolean) = OudsPreview(theme = theme) {
1618+
internal fun PreviewOudsTextInputConstrainedMaxWidth(
1619+
theme: OudsThemeContract,
1620+
constrainedMaxWidth: Boolean
1621+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme) {
16151622
OudsTextInput(
1616-
modifier = Modifier.padding(all = 10.dp),
16171623
textFieldState = rememberTextFieldState(),
16181624
label = "Label",
16191625
placeholder = "Placeholder",
16201626
constrainedMaxWidth = constrainedMaxWidth
16211627
)
16221628
}
16231629

1630+
@OudsPreviewLightDark
1631+
@Composable
1632+
@Suppress("PreviewShouldNotBeCalledRecursively")
1633+
private fun PreviewOudsTextInputWithRichText(@PreviewParameter(OudsTextInputWithRichTextPreviewParameterProvider::class) error: Boolean) {
1634+
PreviewOudsTextInputWithRichText(theme = getPreviewTheme(), darkThemeEnabled = isSystemInDarkTheme(), error = error)
1635+
}
1636+
1637+
@Composable
1638+
internal fun PreviewOudsTextInputWithRichText(
1639+
theme: OudsThemeContract,
1640+
darkThemeEnabled: Boolean,
1641+
error: Boolean
1642+
) = OudsPreview(modifier = Modifier.padding(all = 10.dp), theme = theme, darkThemeEnabled = darkThemeEnabled) {
1643+
OudsTextInput(
1644+
textFieldState = rememberTextFieldState(),
1645+
label = "Label",
1646+
error = if (error) OudsError(buildPreviewAnnotatedErrorMessage()) else null,
1647+
helperText = buildPreviewAnnotatedHelperText(),
1648+
)
1649+
}
1650+
16241651
internal data class OudsTextInputPreviewParameter(
16251652
val value: String,
16261653
val label: String? = null,
@@ -1641,6 +1668,8 @@ internal class OudsTextInputPreviewParameterProvider : BasicPreviewParameterProv
16411668

16421669
internal class OudsTextInputConstrainedMaxWidthPreviewParameterProvider : BasicPreviewParameterProvider<Boolean>(false, true)
16431670

1671+
internal class OudsTextInputWithRichTextPreviewParameterProvider : BasicPreviewParameterProvider<Boolean>(false, true)
1672+
16441673
private val previewParameterValues: List<OudsTextInputPreviewParameter>
16451674
get() {
16461675
val label = "Label"

‎core/src/main/java/com/orange/ouds/core/utilities/OudsPreview.kt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import androidx.compose.ui.unit.Dp
4242
import androidx.compose.ui.unit.dp
4343
import androidx.compose.ui.unit.sp
4444
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedErrorMessage
45+
import com.orange.ouds.core.component.common.text.buildOudsAnnotatedHelperText
4546
import com.orange.ouds.core.component.common.text.withStrong
4647
import com.orange.ouds.core.extensions.isNightModeEnabled
4748
import com.orange.ouds.core.theme.LocalHighContrastModeEnabled
@@ -122,6 +123,12 @@ internal fun buildPreviewAnnotatedErrorMessage() = buildOudsAnnotatedErrorMessag
122123
append(" text")
123124
}
124125

126+
internal fun buildPreviewAnnotatedHelperText() = buildOudsAnnotatedHelperText {
127+
append("Helper text with ")
128+
withStrong { append("strong") }
129+
append(" text")
130+
}
131+
125132
@Composable
126133
internal inline fun <reified T> getPreviewEnumEntry(): T? = LocalPreviewEnumEntry.current as? T
127134

0 commit comments

Comments
 (0)