From 7eddeec51dc517594ea73b4f4fb9268168cb9166 Mon Sep 17 00:00:00 2001 From: LEE YOU BIN <128459613+leeeyubin@users.noreply.github.com> Date: Thu, 11 Apr 2024 08:48:58 +0900 Subject: [PATCH] =?UTF-8?q?[YDS-#218]=20Atom=20-=20SuffixTextField=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20(#268)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : SuffixTextField 구현 * chore : SuffixTextField 수정 * chore : Preview 추가 * chore : versionName 2.5.10 -> 2.5.11 * fix : text, suffixLabel 기본값 제거 * fix : versionName 2.6.0으로 수정 * fix : isDisabled 네이밍 수정 * fix : 코드리뷰 반영 * fix : hintText 8dp로 수정 * fix : TextField의 hintText 8dp로 수정 --- .../system/compose/atom/PasswordTextField.kt | 2 +- .../system/compose/atom/SimpleTextField.kt | 2 +- .../system/compose/atom/SuffixTextField.kt | 141 ++++++++++++++++++ version.properties | 2 +- 4 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 compose/src/main/java/com/yourssu/design/system/compose/atom/SuffixTextField.kt diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt index e9b8d59a..b7c001f0 100644 --- a/compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt +++ b/compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt @@ -106,7 +106,7 @@ fun PasswordTextField( Row(modifier = Modifier.padding(top = 8.dp)) { Spacer( modifier = Modifier - .width(16.dp), + .width(8.dp), ) YdsText( text = hintText, diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt index 037dc3dd..a62a15db 100644 --- a/compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt +++ b/compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt @@ -88,7 +88,7 @@ fun SimpleTextField( Row(modifier = Modifier.padding(top = 8.dp)) { Spacer( modifier = Modifier - .width(16.dp), + .width(8.dp), ) YdsText( text = hintText, diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/SuffixTextField.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/SuffixTextField.kt new file mode 100644 index 00000000..98799947 --- /dev/null +++ b/compose/src/main/java/com/yourssu/design/system/compose/atom/SuffixTextField.kt @@ -0,0 +1,141 @@ +package com.yourssu.design.system.compose.atom + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +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.material.OutlinedTextField +import androidx.compose.material.TextFieldDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +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.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 com.yourssu.design.system.compose.YdsTheme +import com.yourssu.design.system.compose.base.YdsText + +@Composable +fun SuffixTextField( + text: String, + suffixLabel: String, + modifier: Modifier = Modifier, + isError: Boolean = false, + isDisabled: Boolean = false, + placeHolder: String = "", + hintText: String = "", + onValueChange: (value: String) -> Unit, + keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text), +) { + Column(modifier = modifier) { + OutlinedTextField( + value = text, + onValueChange = onValueChange, + modifier = Modifier.fillMaxWidth(), + shape = RoundedCornerShape(8.dp), + colors = TextFieldDefaults.outlinedTextFieldColors( + backgroundColor = YdsTheme.colors.inputFieldElevated, + cursorColor = YdsTheme.colors.textPointed, + errorBorderColor = YdsTheme.colors.textWarned, + unfocusedBorderColor = Color.Transparent, + focusedBorderColor = YdsTheme.colors.textPointed, + disabledTextColor = YdsTheme.colors.textDisabled, + disabledBorderColor = Color.Transparent, + textColor = YdsTheme.colors.textSecondary, + ), + isError = isError, + enabled = !isDisabled, + placeholder = { + YdsText( + text = placeHolder, + style = YdsTheme.typography.body1, + color = YdsTheme.colors.textTertiary, + ) + }, + trailingIcon = { + YdsText( + modifier = Modifier.padding(16.dp), + text = suffixLabel, + style = YdsTheme.typography.body1, + color = YdsTheme.colors.textTertiary, + ) + }, + textStyle = YdsTheme.typography.body1.toTextStyle(), + keyboardOptions = keyboardOptions, + singleLine = true, + ) + if (hintText.isNotEmpty()) { + Row(modifier = Modifier.padding(top = 8.dp)) { + Spacer( + modifier = Modifier + .width(8.dp), + ) + YdsText( + text = hintText, + style = YdsTheme.typography.caption1, + color = if (isError) { + YdsTheme.colors.textWarned + } else if (!isDisabled) { + YdsTheme.colors.textDisabled + } else { + YdsTheme.colors.textTertiary + }, + ) + + } + } + } +} + +@Preview +@Composable +private fun PreviewSuffixTextField() { + var isError by remember { mutableStateOf(false) } + var text1 by rememberSaveable { mutableStateOf("") } + var text2 by rememberSaveable { mutableStateOf("") } + var text3 by rememberSaveable { mutableStateOf("") } + + Column { + SuffixTextField( + text = text1, + isError = isError, isDisabled = false, + placeHolder = "플레이스 홀더", + onValueChange = { value -> + text1 = value + }, + hintText = "힌트 텍스트", + modifier = Modifier.padding(10.dp), + suffixLabel = "@soongsil.ac.kr", + ) + + SuffixTextField( + text = text2, + isDisabled = true, + onValueChange = { value -> + text2 = value + }, + hintText = "힌트 텍스트", + modifier = Modifier.padding(bottom = 10.dp), + suffixLabel = "@soongsil.ac.kr", + ) + + SuffixTextField( + text = text3, + isError = true, + hintText = "힌트 텍스트", + suffixLabel = "@soongsil.ac.kr", + onValueChange = { value -> + text3 = value + }, + ) + } +} \ No newline at end of file diff --git a/version.properties b/version.properties index 42988410..fc152168 100644 --- a/version.properties +++ b/version.properties @@ -1,2 +1,2 @@ -versionName=2.5.10 +versionName=2.6.0 #자동 배포를 위해서 버전은 여기 한 군데에서 관리하면 된다