diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png new file mode 100644 index 0000000000..ee4b730f8e Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabled.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabled.png new file mode 100644 index 0000000000..55a3d0e1c4 Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabled.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabledPlaceholder.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabledPlaceholder.png new file mode 100644 index 0000000000..bfe382a3b4 Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabledPlaceholder.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png new file mode 100644 index 0000000000..c5ae07b7e3 Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multiline.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multiline.png new file mode 100644 index 0000000000..610e16898f Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multiline.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multilinePlaceholder.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multilinePlaceholder.png new file mode 100644 index 0000000000..6d0a9b6d88 Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multilinePlaceholder.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_placeholder.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_placeholder.png new file mode 100644 index 0000000000..bfe382a3b4 Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_placeholder.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_readOnly.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_readOnly.png new file mode 100644 index 0000000000..ee4b730f8e Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_readOnly.png differ diff --git a/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png new file mode 100644 index 0000000000..2028184633 Binary files /dev/null and b/app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png differ diff --git a/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png new file mode 100644 index 0000000000..e503502e0b Binary files /dev/null and b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png differ diff --git a/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabled.png b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabled.png new file mode 100644 index 0000000000..d17cd4cd18 Binary files /dev/null and b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabled.png differ diff --git a/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabledPlaceholder.png b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabledPlaceholder.png new file mode 100644 index 0000000000..003a83e62a Binary files /dev/null and b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_disabledPlaceholder.png differ diff --git a/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png new file mode 100644 index 0000000000..e4185381fb Binary files /dev/null and b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png differ diff --git a/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_placeholder.png b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_placeholder.png new file mode 100644 index 0000000000..003a83e62a Binary files /dev/null and b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_placeholder.png differ diff --git a/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png new file mode 100644 index 0000000000..0e11ca7485 Binary files /dev/null and b/app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png differ diff --git a/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png new file mode 100644 index 0000000000..154b159efe Binary files /dev/null and b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_default.png differ diff --git a/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png new file mode 100644 index 0000000000..63e2889490 Binary files /dev/null and b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_error.png differ diff --git a/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multilinePlaceholder.png b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multilinePlaceholder.png new file mode 100644 index 0000000000..cae1dc3a45 Binary files /dev/null and b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_multilinePlaceholder.png differ diff --git a/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png new file mode 100644 index 0000000000..cf499e5f77 Binary files /dev/null and b/app/screenshots/oss/debug/rtl/net.skyscanner.backpack.compose.textarea.BpkTextAreaTest_validated.png differ diff --git a/app/src/androidTest/java/net/skyscanner/backpack/compose/textarea/BpkTextAreaTest.kt b/app/src/androidTest/java/net/skyscanner/backpack/compose/textarea/BpkTextAreaTest.kt new file mode 100644 index 0000000000..cb6f06453b --- /dev/null +++ b/app/src/androidTest/java/net/skyscanner/backpack/compose/textarea/BpkTextAreaTest.kt @@ -0,0 +1,144 @@ +/** + * Backpack for Android - Skyscanner's Design System + * + * Copyright 2018 Skyscanner Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package net.skyscanner.backpack.compose.textarea + +import androidx.compose.ui.unit.dp +import androidx.test.ext.junit.runners.AndroidJUnit4 +import net.skyscanner.backpack.BpkTestVariant +import net.skyscanner.backpack.Variants +import net.skyscanner.backpack.compose.BpkSnapshotTest +import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus +import org.junit.Test +import org.junit.runner.RunWith + +@RunWith(AndroidJUnit4::class) +class BpkTextAreaTest : BpkSnapshotTest() { + + @Test + fun default() = snap { + BpkTextArea( + value = "Value", + onValueChange = {}, + placeholder = "Placeholder", + status = BpkFieldStatus.Default, + ) + } + + @Test + @Variants(BpkTestVariant.Default) + fun readOnly() { + snap { + BpkTextArea( + value = "Value", + onValueChange = {}, + placeholder = "Placeholder", + readOnly = true, + status = BpkFieldStatus.Default, + ) + } + } + + @Test + @Variants(BpkTestVariant.Default, BpkTestVariant.DarkMode) + fun placeholder() { + snap { + BpkTextArea( + value = "", + onValueChange = {}, + placeholder = "Placeholder", + status = BpkFieldStatus.Default, + ) + } + } + + @Test + @Variants(BpkTestVariant.Default) + fun multiline() { + snap(width = 200.dp) { + BpkTextArea( + value = "Value ".repeat(20), + onValueChange = {}, + placeholder = "Placeholder ".repeat(20), + status = BpkFieldStatus.Default, + ) + } + } + + @Test + @Variants(BpkTestVariant.Default, BpkTestVariant.Rtl) + fun multilinePlaceholder() { + snap(width = 200.dp) { + BpkTextArea( + value = "", + onValueChange = {}, + placeholder = "Placeholder ".repeat(20), + status = BpkFieldStatus.Default, + ) + } + } + + @Test + @Variants(BpkTestVariant.Default, BpkTestVariant.DarkMode) + fun disabled() { + snap { + BpkTextArea( + value = "Value", + onValueChange = {}, + placeholder = "Placeholder", + status = BpkFieldStatus.Disabled, + ) + } + } + + @Test + @Variants(BpkTestVariant.Default, BpkTestVariant.DarkMode) + fun disabledPlaceholder() { + snap { + BpkTextArea( + value = "", + onValueChange = {}, + placeholder = "Placeholder", + ) + } + } + + @Test + fun validated() { + snap { + BpkTextArea( + value = "Value", + onValueChange = {}, + placeholder = "Placeholder", + status = BpkFieldStatus.Validated, + ) + } + } + + @Test + fun error() { + snap { + BpkTextArea( + value = "Value", + onValueChange = {}, + placeholder = "Placeholder", + status = BpkFieldStatus.Error("Error text"), + ) + } + } +} diff --git a/app/src/main/java/net/skyscanner/backpack/demo/compose/TextFieldStory.kt b/app/src/main/java/net/skyscanner/backpack/demo/compose/TextFieldStory.kt index 758e445298..8db39aefc5 100644 --- a/app/src/main/java/net/skyscanner/backpack/demo/compose/TextFieldStory.kt +++ b/app/src/main/java/net/skyscanner/backpack/demo/compose/TextFieldStory.kt @@ -34,6 +34,7 @@ import net.skyscanner.backpack.compose.LocalTextStyle import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus import net.skyscanner.backpack.compose.icon.BpkIcon import net.skyscanner.backpack.compose.text.BpkText +import net.skyscanner.backpack.compose.textarea.BpkTextArea import net.skyscanner.backpack.compose.textfield.BpkTextField import net.skyscanner.backpack.compose.theme.BpkTheme import net.skyscanner.backpack.compose.tokens.Accessibility @@ -174,3 +175,93 @@ private fun TextFieldMultilineExample( maxLines = Int.MAX_VALUE, ) } + +@Composable +@TextFieldComponent +@ComposeStory(name = "Text Area") +fun TextAreaStory( + modifier: Modifier = Modifier, + initialStatus: BpkFieldStatus = BpkFieldStatus.Default, +) = + FieldStatusSwitcher( + initialStatus = initialStatus, + verticalArrangement = Arrangement.spacedBy(BpkSpacing.Base), + modifier = modifier + .verticalScroll(rememberScrollState()) + .padding(BpkSpacing.Base), + ) { status -> + CompositionLocalProvider(LocalTextStyle provides BpkTheme.typography.label2) { + BpkText(text = stringResource(R.string.generic_default)) + TextAreaDefaultExample(status = status) + + BpkText(stringResource(R.string.generic_read_only)) + TextAreaReadOnlyExample(status = status) + + BpkText(stringResource(R.string.generic_multiline)) + TextAreaMultilineExample(status = status) + } + } + +@Composable +@TextFieldComponent +@ComposeStory("Text Area Disabled", StoryKind.ScreenshotOnly) +internal fun TextAreaScreenshotDisabled(modifier: Modifier = Modifier) = + TextAreaStory(modifier, BpkFieldStatus.Disabled) + +@Composable +@TextFieldComponent +@ComposeStory("Text Area Validated", StoryKind.ScreenshotOnly) +internal fun TextAreaScreenshotValidated(modifier: Modifier = Modifier) = + TextAreaStory(modifier, BpkFieldStatus.Validated) + +@Composable +@TextFieldComponent +@ComposeStory("Text Area Error", StoryKind.ScreenshotOnly) +internal fun TextAreaScreenshotError(modifier: Modifier = Modifier) = + TextAreaStory(modifier, BpkFieldStatus.Error(stringResource(R.string.generic_error_text))) + +@Composable +fun TextAreaDefaultExample( + modifier: Modifier = Modifier, + status: BpkFieldStatus = BpkFieldStatus.Default, +) { + var value by remember { mutableStateOf("") } + BpkTextArea( + modifier = modifier, + value = value, + onValueChange = { value = it }, + placeholder = stringResource(R.string.generic_placeholder), + status = status, + ) +} + +@Composable +private fun TextAreaReadOnlyExample( + modifier: Modifier = Modifier, + status: BpkFieldStatus = BpkFieldStatus.Default, +) { + BpkTextArea( + modifier = modifier, + readOnly = true, + value = stringResource(R.string.generic_read_only_value), + onValueChange = { }, + placeholder = stringResource(R.string.generic_placeholder), + status = status, + ) +} + +@Composable +private fun TextAreaMultilineExample( + modifier: Modifier = Modifier, + status: BpkFieldStatus = BpkFieldStatus.Default, +) { + val loremIpsum = stringResource(R.string.stub) + var value by remember { mutableStateOf(loremIpsum) } + BpkTextArea( + modifier = modifier, + value = value, + onValueChange = { value = it }, + placeholder = stringResource(R.string.generic_placeholder), + status = status, + ) +} diff --git a/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textarea/BpkTextArea.kt b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textarea/BpkTextArea.kt new file mode 100644 index 0000000000..4eb7a2940a --- /dev/null +++ b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textarea/BpkTextArea.kt @@ -0,0 +1,91 @@ +/** + * Backpack for Android - Skyscanner's Design System + * + * Copyright 2018 Skyscanner Ltd + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +package net.skyscanner.backpack.compose.textarea + +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.text.KeyboardActions +import androidx.compose.foundation.text.KeyboardOptions +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.input.TextFieldValue +import androidx.compose.ui.text.input.VisualTransformation +import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus +import net.skyscanner.backpack.compose.fieldset.LocalFieldStatus +import net.skyscanner.backpack.compose.textfield.internal.BpkTextFieldImpl + +private const val LINES_COUNT = 3 + +@Composable +fun BpkTextArea( + value: String, + onValueChange: (String) -> Unit, + modifier: Modifier = Modifier, + readOnly: Boolean = false, + status: BpkFieldStatus = LocalFieldStatus.current, + placeholder: String? = null, + visualTransformation: VisualTransformation = VisualTransformation.None, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions(), + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, +) { + BpkTextFieldImpl( + value = value, + onValueChange = onValueChange, + modifier = modifier, + readOnly = readOnly, + status = status, + placeholder = placeholder, + visualTransformation = visualTransformation, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + minLines = LINES_COUNT, + maxLines = LINES_COUNT, + interactionSource = interactionSource, + ) +} + +@Composable +fun BpkTextArea( + value: TextFieldValue, + onValueChange: (TextFieldValue) -> Unit, + modifier: Modifier = Modifier, + readOnly: Boolean = false, + status: BpkFieldStatus = LocalFieldStatus.current, + placeholder: String? = null, + visualTransformation: VisualTransformation = VisualTransformation.None, + keyboardOptions: KeyboardOptions = KeyboardOptions.Default, + keyboardActions: KeyboardActions = KeyboardActions(), + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, +) { + BpkTextFieldImpl( + value = value, + onValueChange = onValueChange, + modifier = modifier, + readOnly = readOnly, + status = status, + placeholder = placeholder, + visualTransformation = visualTransformation, + keyboardOptions = keyboardOptions, + keyboardActions = keyboardActions, + minLines = LINES_COUNT, + maxLines = LINES_COUNT, + interactionSource = interactionSource, + ) +} diff --git a/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textfield/internal/BpkTextFieldImpl.kt b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textfield/internal/BpkTextFieldImpl.kt index a13a584012..77d9a7007c 100644 --- a/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textfield/internal/BpkTextFieldImpl.kt +++ b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/textfield/internal/BpkTextFieldImpl.kt @@ -77,6 +77,7 @@ internal fun BpkTextFieldImpl( visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions(), + minLines: Int = 1, maxLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, trailingIcon: BpkIcon? = null, @@ -101,6 +102,7 @@ internal fun BpkTextFieldImpl( visualTransformation = visualTransformation, keyboardOptions = keyboardOptions, keyboardActions = keyboardActions, + minLines = minLines, maxLines = maxLines, interactionSource = interactionSource, trailingIcon = trailingIcon, @@ -109,7 +111,7 @@ internal fun BpkTextFieldImpl( @OptIn(ExperimentalAnimationApi::class) @Composable -fun BpkTextFieldImpl( +internal fun BpkTextFieldImpl( value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, @@ -120,6 +122,7 @@ fun BpkTextFieldImpl( visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions(), + minLines: Int = 1, maxLines: Int = 1, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, trailingIcon: BpkIcon? = null, @@ -193,6 +196,7 @@ fun BpkTextFieldImpl( keyboardOptions = keyboardOptions, keyboardActions = keyboardActions, singleLine = maxLines == 1, + minLines = minLines, maxLines = maxLines, visualTransformation = visualTransformation, interactionSource = interactionSource, diff --git a/docs/compose/FieldSet/screenshots/default.png b/docs/compose/FieldSet/screenshots/default.png index c6ad347dbb..4512790a64 100644 Binary files a/docs/compose/FieldSet/screenshots/default.png and b/docs/compose/FieldSet/screenshots/default.png differ diff --git a/docs/compose/FieldSet/screenshots/default_dm.png b/docs/compose/FieldSet/screenshots/default_dm.png index ee06e8bd1c..612cfc8cdd 100644 Binary files a/docs/compose/FieldSet/screenshots/default_dm.png and b/docs/compose/FieldSet/screenshots/default_dm.png differ diff --git a/docs/compose/FieldSet/screenshots/disabled.png b/docs/compose/FieldSet/screenshots/disabled.png index b60a407a2b..6a3ec0af6e 100644 Binary files a/docs/compose/FieldSet/screenshots/disabled.png and b/docs/compose/FieldSet/screenshots/disabled.png differ diff --git a/docs/compose/FieldSet/screenshots/disabled_dm.png b/docs/compose/FieldSet/screenshots/disabled_dm.png index df58118a9e..26c2876ab5 100644 Binary files a/docs/compose/FieldSet/screenshots/disabled_dm.png and b/docs/compose/FieldSet/screenshots/disabled_dm.png differ diff --git a/docs/compose/FieldSet/screenshots/error.png b/docs/compose/FieldSet/screenshots/error.png index 9dc2258f39..c5ed6e7624 100644 Binary files a/docs/compose/FieldSet/screenshots/error.png and b/docs/compose/FieldSet/screenshots/error.png differ diff --git a/docs/compose/FieldSet/screenshots/error_dm.png b/docs/compose/FieldSet/screenshots/error_dm.png index 294538ca59..eb75d50670 100644 Binary files a/docs/compose/FieldSet/screenshots/error_dm.png and b/docs/compose/FieldSet/screenshots/error_dm.png differ diff --git a/docs/compose/FieldSet/screenshots/validated.png b/docs/compose/FieldSet/screenshots/validated.png index 86c637e9c9..7435f90d82 100644 Binary files a/docs/compose/FieldSet/screenshots/validated.png and b/docs/compose/FieldSet/screenshots/validated.png differ diff --git a/docs/compose/FieldSet/screenshots/validated_dm.png b/docs/compose/FieldSet/screenshots/validated_dm.png index 0a626aa2c1..71c28718c2 100644 Binary files a/docs/compose/FieldSet/screenshots/validated_dm.png and b/docs/compose/FieldSet/screenshots/validated_dm.png differ diff --git a/docs/compose/TextField/README.md b/docs/compose/TextField/README.md index 8762340ed8..08c321dbbd 100644 --- a/docs/compose/TextField/README.md +++ b/docs/compose/TextField/README.md @@ -28,6 +28,30 @@ | --- | --- | | Disabled TextField component |Disabled TextField component - dark mode | +## TextArea + +| Day | Night | +| --- | --- | +| TextArea component |TextArea component - dark mode | + +## TextArea Error + +| Day | Night | +| --- | --- | +| Error TextArea component |Error TextArea component - dark mode | + +## TextArea Validated + +| Day | Night | +| --- | --- | +| Validated TextArea component |Validated TextArea component - dark mode | + +## TextArea Disabled + +| Day | Night | +| --- | --- | +| Disabled TextArea component |Disabled TextArea component - dark mode | + ## Installation Backpack Compose is available through [Maven Central](https://search.maven.org/artifact/net.skyscanner.backpack/backpack-compose). Check the main [Readme](https://github.com/skyscanner/backpack-android#installation) for a complete installation guide. @@ -89,3 +113,28 @@ BpkTextField( status = BpkFieldStatus.Error("Error text"), ) ``` + +Example of a TextArea: + +```Kotlin +import net.skyscanner.backpack.compose.textfield.BpkTextArea + +BpkTextArea( + value = value, + onValueChange = { value -> }, + placeholder = "Placeholder", +) +``` +Example of a TextArea with error status: + +```Kotlin +import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus +import net.skyscanner.backpack.compose.textfield.BpkTextArea + +BpkTextArea( + value = value, + onValueChange = { value -> }, + placeholder = "Placeholder", + status = BpkFieldStatus.Error("Error text"), +) +``` diff --git a/docs/compose/TextField/screenshots/default.png b/docs/compose/TextField/screenshots/default.png index 7be8b9522c..0b03f2f4cd 100644 Binary files a/docs/compose/TextField/screenshots/default.png and b/docs/compose/TextField/screenshots/default.png differ diff --git a/docs/compose/TextField/screenshots/default_dm.png b/docs/compose/TextField/screenshots/default_dm.png index d66bdee89f..7abb8fa302 100644 Binary files a/docs/compose/TextField/screenshots/default_dm.png and b/docs/compose/TextField/screenshots/default_dm.png differ diff --git a/docs/compose/TextField/screenshots/disabled.png b/docs/compose/TextField/screenshots/disabled.png index 152e34e366..4bf2496539 100644 Binary files a/docs/compose/TextField/screenshots/disabled.png and b/docs/compose/TextField/screenshots/disabled.png differ diff --git a/docs/compose/TextField/screenshots/disabled_dm.png b/docs/compose/TextField/screenshots/disabled_dm.png index 3c4f09256f..33a3829f47 100644 Binary files a/docs/compose/TextField/screenshots/disabled_dm.png and b/docs/compose/TextField/screenshots/disabled_dm.png differ diff --git a/docs/compose/TextField/screenshots/error.png b/docs/compose/TextField/screenshots/error.png index cc16723325..e1fc5eabfc 100644 Binary files a/docs/compose/TextField/screenshots/error.png and b/docs/compose/TextField/screenshots/error.png differ diff --git a/docs/compose/TextField/screenshots/error_dm.png b/docs/compose/TextField/screenshots/error_dm.png index b5d218712f..76f20758a3 100644 Binary files a/docs/compose/TextField/screenshots/error_dm.png and b/docs/compose/TextField/screenshots/error_dm.png differ diff --git a/docs/compose/TextField/screenshots/text-area-disabled.png b/docs/compose/TextField/screenshots/text-area-disabled.png new file mode 100644 index 0000000000..ed7150e932 Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area-disabled.png differ diff --git a/docs/compose/TextField/screenshots/text-area-disabled_dm.png b/docs/compose/TextField/screenshots/text-area-disabled_dm.png new file mode 100644 index 0000000000..969eb1815f Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area-disabled_dm.png differ diff --git a/docs/compose/TextField/screenshots/text-area-error.png b/docs/compose/TextField/screenshots/text-area-error.png new file mode 100644 index 0000000000..ea96f1b723 Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area-error.png differ diff --git a/docs/compose/TextField/screenshots/text-area-error_dm.png b/docs/compose/TextField/screenshots/text-area-error_dm.png new file mode 100644 index 0000000000..9aba2aa419 Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area-error_dm.png differ diff --git a/docs/compose/TextField/screenshots/text-area-validated.png b/docs/compose/TextField/screenshots/text-area-validated.png new file mode 100644 index 0000000000..1268cae8af Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area-validated.png differ diff --git a/docs/compose/TextField/screenshots/text-area-validated_dm.png b/docs/compose/TextField/screenshots/text-area-validated_dm.png new file mode 100644 index 0000000000..fa9f284cfc Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area-validated_dm.png differ diff --git a/docs/compose/TextField/screenshots/text-area.png b/docs/compose/TextField/screenshots/text-area.png new file mode 100644 index 0000000000..688e9ac06c Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area.png differ diff --git a/docs/compose/TextField/screenshots/text-area_dm.png b/docs/compose/TextField/screenshots/text-area_dm.png new file mode 100644 index 0000000000..35d230f655 Binary files /dev/null and b/docs/compose/TextField/screenshots/text-area_dm.png differ diff --git a/docs/compose/TextField/screenshots/validated.png b/docs/compose/TextField/screenshots/validated.png index 518e03a803..a91e6a04d3 100644 Binary files a/docs/compose/TextField/screenshots/validated.png and b/docs/compose/TextField/screenshots/validated.png differ diff --git a/docs/compose/TextField/screenshots/validated_dm.png b/docs/compose/TextField/screenshots/validated_dm.png index 986c14846f..f2c8a417b3 100644 Binary files a/docs/compose/TextField/screenshots/validated_dm.png and b/docs/compose/TextField/screenshots/validated_dm.png differ