Skip to content

Commit

Permalink
Merge pull request #450 from BCSDLab/feature/designsystem_components
Browse files Browse the repository at this point in the history 
[Feature] 다이얼로그, 윤곽선 버튼 컴포넌트 추가
  • Loading branch information
@nodobi
nodobi authored Nov 2, 2024
2 parents 3b08409 + 59106f4 commit ebef067
Show file tree
Hide file tree
Showing 6 changed files with 561 additions and 9 deletions.
82 changes: 74 additions & 8 deletions ...system/src/main/java/in/koreatech/koin/core/designsystem/component/button/FilledButton.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,57 @@ import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import `in`.koreatech.koin.core.designsystem.theme.KoinTheme


enum class FilledButtonColors {
Primary,
Warning,
Danger,
}

@Composable
fun FilledButton(
modifier: Modifier = Modifier,
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
textStyle: TextStyle = KoinTheme.typography.medium15,
shape: Shape = RoundedCornerShape(5.dp),
enabled: Boolean = true,
colors: FilledButtonColors = FilledButtonColors.Primary,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
) {
val buttonColors = filledButtonColorByType(type = colors)
Button(
modifier = modifier,
onClick = onClick,
shape = shape,
enabled = enabled,
colors = buttonColors,
contentPadding = contentPadding
) {
Text(
text = text,
style = textStyle
)
}
}

@Composable
fun FilledButton(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
textStyle: TextStyle = KoinTheme.typography.medium15,
shape: Shape = RoundedCornerShape(5.dp),
enabled: Boolean = true,
colors: ButtonColors = ButtonDefaults.buttonColors(
containerColor = KoinTheme.colors.primary500,
contentColor = Color.White,
disabledContainerColor = KoinTheme.colors.neutral300,
disabledContentColor = KoinTheme.colors.neutral600
),
colors: ButtonColors,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
) {
Button(
Expand All @@ -47,6 +76,31 @@ fun FilledButton(
}
}

@Composable
@Stable
internal fun filledButtonColorByType(type: FilledButtonColors): ButtonColors = when (type) {
FilledButtonColors.Primary -> ButtonColors(
containerColor = KoinTheme.colors.primary500,
contentColor = KoinTheme.colors.neutral0,
disabledContainerColor = KoinTheme.colors.neutral300,
disabledContentColor = KoinTheme.colors.neutral600
)

FilledButtonColors.Warning -> ButtonColors(
containerColor = KoinTheme.colors.sub500,
contentColor = KoinTheme.colors.neutral0,
disabledContainerColor = KoinTheme.colors.neutral300,
disabledContentColor = KoinTheme.colors.neutral600
)

FilledButtonColors.Danger -> ButtonColors(
containerColor = KoinTheme.colors.danger700,
contentColor = KoinTheme.colors.neutral0,
disabledContainerColor = KoinTheme.colors.neutral300,
disabledContentColor = KoinTheme.colors.neutral600
)
}

@Preview
@Composable
private fun FilledButtonPreview() {
Expand All @@ -69,4 +123,16 @@ private fun FilledButtonDisabledPreview() {
@Composable
private fun FilledButtonCustomColorPreview() {
FilledButton(text = "조회하기", onClick = {}, enabled = false, modifier = Modifier.fillMaxWidth())
}

@Preview
@Composable
private fun FilledButtonWarningPreview() {
FilledButton(text = "조회하기", onClick = {}, colors = FilledButtonColors.Warning)
}

@Preview
@Composable
private fun FilledButtonDangerPreview() {
FilledButton(text = "조회하기", onClick = {}, colors = FilledButtonColors.Danger)
}
166 changes: 166 additions & 0 deletions ...m/src/main/java/in/koreatech/koin/core/designsystem/component/button/OutlinedBoxButton.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
package `in`.koreatech.koin.core.designsystem.component.button

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import `in`.koreatech.koin.core.designsystem.theme.KoinTheme


enum class OutlinedBoxButtonColors {
Primary,
Neutral
}

/**
* 테두리 선이 있는 텍스트 버튼
* @param text 텍스트
* @param onClick 버튼 클릭시 실행할 함수
* @param textStyle 텍스트 스타일
* @param shape 버튼 모양
* @param enabled 버튼 활성화 여부
* @param colors 버튼 색상 타입
* @param contentPadding 버튼 내부 padding
* @see OutlinedBoxButtonColors
*/
@Composable
fun OutlinedBoxButton(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
textStyle: TextStyle = KoinTheme.typography.medium15,
shape: Shape = KoinTheme.shapes.extraSmall,
enabled: Boolean = true,
colors: OutlinedBoxButtonColors = OutlinedBoxButtonColors.Primary,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
) {
val buttonColors = outlinedBoxButtonColorByType(colors)
val buttonBorder = outlinedBoxButtonBorderByType(colors)

OutlinedButton(
modifier = modifier,
onClick = onClick,
enabled = enabled,
shape = shape,
colors = buttonColors,
border = buttonBorder,
contentPadding = contentPadding,
) {
Text(
text = text,
style = textStyle
)
}
}


/**
* 테두리 선이 있는 텍스트 버튼
* @param text 텍스트
* @param onClick 버튼 클릭시 실행할 함수
* @param textStyle 텍스트 스타일
* @param shape 버튼 모양
* @param enabled 버튼 활성화 여부
* @param colors 버튼 색상
* @param border 테두리 선
* @param contentPadding 버튼 내부 padding
* @see OutlinedBoxButtonColors
*/
@Composable
fun OutlinedBoxButton(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
textStyle: TextStyle = KoinTheme.typography.medium15,
shape: Shape = KoinTheme.shapes.extraSmall,
enabled: Boolean = true,
colors: ButtonColors = ButtonColors(
containerColor = KoinTheme.colors.neutral0,
contentColor = KoinTheme.colors.neutral0,
disabledContainerColor = KoinTheme.colors.neutral400,
disabledContentColor = KoinTheme.colors.neutral500
),
border: BorderStroke,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
) {
OutlinedButton(
modifier = modifier,
onClick = onClick,
enabled = enabled,
shape = shape,
colors = colors,
border = border,
contentPadding = contentPadding,
) {
Text(
text = text,
style = textStyle
)
}
}

@Composable
@Stable
internal fun outlinedBoxButtonColorByType(type: OutlinedBoxButtonColors): ButtonColors = when (type) {
OutlinedBoxButtonColors.Primary -> ButtonColors(
containerColor = KoinTheme.colors.neutral0,
contentColor = KoinTheme.colors.primary500,
disabledContainerColor = KoinTheme.colors.neutral400,
disabledContentColor = KoinTheme.colors.neutral500
)

OutlinedBoxButtonColors.Neutral -> ButtonColors(
containerColor = KoinTheme.colors.neutral0,
contentColor = KoinTheme.colors.neutral500,
disabledContainerColor = KoinTheme.colors.neutral400,
disabledContentColor = KoinTheme.colors.neutral500
)
}


@Composable
@Stable
internal fun outlinedBoxButtonBorderByType(type: OutlinedBoxButtonColors): BorderStroke = when (type) {
OutlinedBoxButtonColors.Primary -> BorderStroke(
1.0.dp,
color = KoinTheme.colors.primary500
)

OutlinedBoxButtonColors.Neutral -> BorderStroke(
1.0.dp,
color = KoinTheme.colors.neutral500
)
}


@Preview
@Composable
private fun OutlinedButtonPrimaryPreview() {
KoinTheme {
OutlinedBoxButton(
text = "대체하기",
onClick = {}
)
}
}

@Preview
@Composable
private fun OutlinedButtonNeutralPreview() {
KoinTheme {
OutlinedBoxButton(
text = "대체하기",
colors = OutlinedBoxButtonColors.Neutral,
onClick = {}
)
}
}
Loading

0 comments on commit ebef067

Please sign in to comment.