[Refactor/#74] Acon 2.0 컴포넌트 #80
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| package com.acon.acon.core.designsystem.component.button.v2 | ||
|
|
||
| import androidx.compose.foundation.BorderStroke | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.layout.PaddingValues | ||
| import androidx.compose.foundation.layout.RowScope | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.shape.RoundedCornerShape | ||
| import androidx.compose.material3.Button | ||
| import androidx.compose.material3.ButtonColors | ||
| import androidx.compose.material3.ButtonDefaults | ||
| import androidx.compose.material3.ButtonElevation | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Shape | ||
| import androidx.compose.ui.text.font.FontWeight | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.acon.acon.core.designsystem.blur.LocalHazeState | ||
| import com.acon.acon.core.designsystem.blur.defaultHazeEffect | ||
| import com.acon.acon.core.designsystem.component.loading.AconCircularProgressBar | ||
| import com.acon.acon.core.designsystem.theme.AconTheme | ||
|
|
||
| @Composable | ||
| fun AconFilledButton( | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, | ||
| isLoading: Boolean = false, | ||
| enabled: Boolean = true, | ||
| shape: Shape = RoundedCornerShape(12.dp), | ||
| colors: ButtonColors = ButtonDefaults.buttonColors( | ||
| containerColor = AconTheme.color.GlassWhiteDefault, | ||
| contentColor = AconTheme.color.White, | ||
| disabledContainerColor = AconTheme.color.GlassWhiteDisabled, | ||
| disabledContentColor = AconTheme.color.Gray300, | ||
| ), | ||
| elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), | ||
| border: BorderStroke? = null, | ||
| contentPadding: PaddingValues = PaddingValues(vertical = 15.dp), | ||
| interactionSource: MutableInteractionSource? = null, | ||
| content: @Composable() (RowScope.() -> Unit) | ||
| ) { | ||
|
|
||
| Button( | ||
| onClick = onClick, | ||
| modifier = modifier.defaultHazeEffect( | ||
| hazeState = LocalHazeState.current, | ||
| tintColor = AconTheme.color.GlassWhiteDefault, | ||
| ), | ||
| enabled = enabled, | ||
| shape = shape, | ||
| colors = colors, | ||
| elevation = elevation, | ||
| border = border, | ||
| contentPadding = contentPadding, | ||
| interactionSource = interactionSource, | ||
| ) { | ||
| if (isLoading) { | ||
| AconCircularProgressBar() | ||
| } else { | ||
| content() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| @Preview | ||
| private fun AconFilledButtonPreview() { | ||
| AconTheme { | ||
| AconFilledButton( | ||
| onClick = { }, | ||
| modifier = Modifier.fillMaxWidth(), | ||
| ) { | ||
| Text( | ||
| text = "Button", | ||
| style = AconTheme.typography.Title4, | ||
| fontWeight = FontWeight.SemiBold | ||
| ) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| @Preview | ||
| private fun AconFilledButtonLoadingPreview() { | ||
| AconTheme { | ||
| AconFilledButton( | ||
| onClick = { }, | ||
| modifier = Modifier.fillMaxWidth(), | ||
| isLoading = true, | ||
| ) { } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| package com.acon.acon.core.designsystem.component.button.v2 | ||
|
|
||
| import androidx.compose.foundation.BorderStroke | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.layout.PaddingValues | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.shape.RoundedCornerShape | ||
| import androidx.compose.material3.ButtonColors | ||
| import androidx.compose.material3.ButtonDefaults | ||
| import androidx.compose.material3.ButtonElevation | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Shape | ||
| import androidx.compose.ui.text.TextStyle | ||
| import androidx.compose.ui.text.font.FontWeight | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.acon.acon.core.designsystem.theme.AconTheme | ||
|
|
||
| @Composable | ||
| fun AconFilledTextButton( | ||
| text: String, | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, | ||
| textStyle: TextStyle = AconTheme.typography.Title4.copy(fontWeight = FontWeight.SemiBold), | ||
| isLoading: Boolean = false, | ||
| enabled: Boolean = true, | ||
| shape: Shape = RoundedCornerShape(12.dp), | ||
| colors: ButtonColors = ButtonDefaults.buttonColors( | ||
| containerColor = AconTheme. color. GlassWhiteDefault, | ||
| contentColor = AconTheme. color. White, | ||
| disabledContainerColor = AconTheme. color. GlassWhiteDisabled, | ||
| disabledContentColor = AconTheme. color. Gray300 | ||
| ), | ||
| elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), | ||
| border: BorderStroke? = null, | ||
| contentPadding: PaddingValues = PaddingValues(vertical = 15.dp), | ||
| interactionSource: MutableInteractionSource? = null, | ||
| ) { | ||
| AconFilledButton( | ||
| onClick = onClick, | ||
| modifier = modifier, | ||
| isLoading = isLoading, | ||
| enabled = enabled, | ||
| shape = shape, | ||
| colors = colors, | ||
| elevation = elevation, | ||
| border = border, | ||
| contentPadding = contentPadding, | ||
| interactionSource = interactionSource, | ||
| ) { | ||
| Text( | ||
| text = text, | ||
| style = textStyle | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| @Preview | ||
| private fun PreviewAconFilledTextButton() { | ||
| AconFilledTextButton( | ||
| text = "Text Button", | ||
| onClick = { }, | ||
| modifier = Modifier.fillMaxWidth(), | ||
| isLoading = false, | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| package com.acon.acon.core.designsystem.component.button.v2 | ||
|
|
||
| import androidx.compose.foundation.BorderStroke | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.layout.PaddingValues | ||
| import androidx.compose.foundation.layout.RowScope | ||
| import androidx.compose.foundation.shape.CircleShape | ||
| import androidx.compose.material3.Button | ||
| import androidx.compose.material3.ButtonColors | ||
| import androidx.compose.material3.ButtonDefaults | ||
| import androidx.compose.material3.ButtonElevation | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Color | ||
| import androidx.compose.ui.graphics.Shape | ||
| import androidx.compose.ui.text.font.FontWeight | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.acon.acon.core.designsystem.blur.LocalHazeState | ||
| import com.acon.acon.core.designsystem.blur.defaultHazeEffect | ||
| import com.acon.acon.core.designsystem.component.loading.AconCircularProgressBar | ||
| import com.acon.acon.core.designsystem.theme.AconTheme | ||
|
|
||
| @Composable | ||
| fun AconOutlinedButton( | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, | ||
| isLoading: Boolean = false, | ||
| enabled: Boolean = true, | ||
| shape: Shape = CircleShape, | ||
| colors: ButtonColors = ButtonDefaults.buttonColors( | ||
| containerColor = Color.Transparent, | ||
| contentColor = AconTheme.color.White, | ||
| disabledContainerColor = AconTheme.color.GlassWhiteDisabled, | ||
| disabledContentColor = Color.Transparent, | ||
| ), | ||
| elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), | ||
| border: BorderStroke = if (enabled) BorderStroke( | ||
| width = 1.dp, | ||
| color = AconTheme.color.GlassWhiteDefault, | ||
| ) else BorderStroke( | ||
| width = 1.dp, | ||
| color = AconTheme.color.GlassWhiteDisabled, | ||
| ), | ||
| contentPadding: PaddingValues = PaddingValues(vertical = 12.dp, horizontal = 46.dp), | ||
| interactionSource: MutableInteractionSource? = null, | ||
| content: @Composable() (RowScope.() -> Unit) | ||
| ) { | ||
|
|
||
| Button( | ||
| onClick = onClick, | ||
| modifier = modifier.defaultHazeEffect( | ||
| hazeState = LocalHazeState.current, | ||
| tintColor = AconTheme.color.GlassWhiteDefault, | ||
| ), | ||
| enabled = enabled, | ||
| shape = shape, | ||
| colors = colors, | ||
| elevation = elevation, | ||
| border = border, | ||
| contentPadding = contentPadding, | ||
| interactionSource = interactionSource, | ||
| ) { | ||
| if (isLoading) { | ||
| AconCircularProgressBar() | ||
| } else { | ||
| content() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| @Preview | ||
| private fun AconOutlinedButtonPreview() { | ||
| AconOutlinedButton( | ||
| onClick = { }, | ||
| isLoading = false, | ||
| content = { | ||
| Text( | ||
| text = "Button", | ||
| style = AconTheme.typography.Body1, | ||
| fontWeight = FontWeight.SemiBold | ||
| ) | ||
| } | ||
| ) | ||
| } | ||
|
|
||
| @Composable | ||
| @Preview | ||
| private fun AconOutlinedButtonLoadingPreview() { | ||
| AconOutlinedButton( | ||
| onClick = { }, | ||
| isLoading = true, | ||
| content = {} | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| package com.acon.acon.core.designsystem.component.button.v2 | ||
|
|
||
| import androidx.compose.foundation.BorderStroke | ||
| import androidx.compose.foundation.interaction.MutableInteractionSource | ||
| import androidx.compose.foundation.layout.PaddingValues | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.shape.CircleShape | ||
| import androidx.compose.foundation.shape.RoundedCornerShape | ||
| import androidx.compose.material3.ButtonColors | ||
| import androidx.compose.material3.ButtonDefaults | ||
| import androidx.compose.material3.ButtonElevation | ||
| import androidx.compose.material3.Text | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Color | ||
| import androidx.compose.ui.graphics.Shape | ||
| import androidx.compose.ui.text.TextStyle | ||
| import androidx.compose.ui.text.font.FontWeight | ||
| import androidx.compose.ui.tooling.preview.Preview | ||
| import androidx.compose.ui.unit.dp | ||
| import com.acon.acon.core.designsystem.theme.AconTheme | ||
|
|
||
| @Composable | ||
| fun AconOutlinedTextButton( | ||
| text: String, | ||
| onClick: () -> Unit, | ||
| modifier: Modifier = Modifier, | ||
| textStyle: TextStyle = AconTheme.typography.Title4.copy(fontWeight = FontWeight.SemiBold), | ||
| isLoading: Boolean = false, | ||
| enabled: Boolean = true, | ||
| shape: Shape = CircleShape, | ||
| colors: ButtonColors = ButtonDefaults.buttonColors( | ||
| containerColor = Color.Transparent, | ||
| contentColor = AconTheme.color.White, | ||
| disabledContainerColor = AconTheme.color.GlassWhiteDisabled, | ||
| disabledContentColor = Color.Transparent, | ||
| ), | ||
| elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), | ||
| border: BorderStroke = if (enabled) BorderStroke( | ||
| width = 1.dp, | ||
| color = AconTheme.color.GlassWhiteDefault, | ||
| ) else BorderStroke( | ||
| width = 1.dp, | ||
| color = AconTheme.color.GlassWhiteDisabled, | ||
| ), | ||
| contentPadding: PaddingValues = PaddingValues(vertical = 12.dp, horizontal = 46.dp), | ||
| interactionSource: MutableInteractionSource? = null, | ||
|
Member
There was a problem hiding this comment. interactionSource는 컴포넌트와 사용자의 상호작용을 추적하는 데 사용되는 도구,
Collaborator
Author
There was a problem hiding this comment. 현재로썬 사용할 수 있는 케이스는 딱히 없는 거 같네여,, 요것도 그냥 확장성을 생각한 부분이라고 생각해주시면 될거같아용 |
||
| ) { | ||
| AconOutlinedButton ( | ||
| onClick = onClick, | ||
| modifier = modifier, | ||
| isLoading = isLoading, | ||
| enabled = enabled, | ||
| shape = shape, | ||
| colors = colors, | ||
| elevation = elevation, | ||
| border = border, | ||
| contentPadding = contentPadding, | ||
| interactionSource = interactionSource, | ||
| ) { | ||
| Text( | ||
| text = text, | ||
| style = textStyle | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| @Composable | ||
| @Preview | ||
| private fun PreviewAconFilledTextButton() { | ||
| AconOutlinedTextButton( | ||
| text = "Text Button", | ||
| onClick = { }, | ||
| modifier = Modifier.fillMaxWidth(), | ||
| isLoading = false, | ||
| ) | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RowScope를 사용하신 이유가 궁금해요.
content로 들어오는 composable이 꼭 Row안에 만들지 않아도 row의 속성을 활용하기 위함?? 이해가 잘 안되네요 ㅠ
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
깊게 이해할 필요없이 (저도 디테일하게는 잘 모름) RowScope는 Row 내부에서 사용할 수 있는 객체입니다. 즉 content가 Row로 감싸져있음을 나타냅니다.
기본 Button 컴포넌트를 확인해보시면, content를 RowScope로 수신 객체로 받습니다.
즉, Button 내부에서 요소들을 수평 방향으로 배치하고자 할 때, 별다른 Row를 내부에 지정해주지 않아도 내부에선 자동으로 수평 배치됩니다.