From d357199a29e5505a75dbd807b5a07e72b212ef47 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 18:08:45 +0900 Subject: [PATCH 01/30] =?UTF-8?q?fix:=20=EC=A3=BC=EC=84=9D=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/compose/foundation/SemanticColors.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt index 4ac83cd..d668f4f 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt @@ -37,12 +37,12 @@ data class ColorScheme( val textStatusNegative: Color = ColorStatusRedMain, val textStatusPositive: Color = ColorViolet500, - // Line / Basic + // Tertiary / Basic val lineBasicLight: Color = ColorGray100, val lineBasicMedium: Color = ColorGray200, val lineBasicStrong: Color = ColorGray300, - // Line / Status + // Tertiary / Status val lineStatusNegative: Color = ColorStatusRedMain, val lineStatusPositive: Color = ColorViolet500, From 08eaa50f2c95afde8741f3c3e46dc0b9445f2308 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 18:13:07 +0900 Subject: [PATCH 02/30] =?UTF-8?q?feat:=20button=20pressed=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EC=9C=84=ED=95=9C=20interactionSource=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kotlin/com/yourssu/handy/compose/Surface.kt | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Surface.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Surface.kt index e02d6f9..4b26673 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/Surface.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Surface.kt @@ -4,6 +4,7 @@ import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.selection.toggleable @@ -11,6 +12,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Stable +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color @@ -92,6 +94,7 @@ fun Surface( backgroundColor: Color = HandyTheme.colors.bgBasicDefault, contentColor: Color = LocalContentColor.current, border: BorderStroke? = null, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource()}, content: @Composable () -> Unit, ) { CompositionLocalProvider( @@ -105,6 +108,8 @@ fun Surface( border = border, ) .clickable( + interactionSource = interactionSource, + indication = null, enabled = enabled, onClick = onClick, ), @@ -128,6 +133,7 @@ fun Surface( * @param backgroundColor Surface 배경 색상. 기본값 : bgBasicDefault(#0xFFFFFFFF) * @param contentColor Surface 내부 content 색상 * @param border Surface 테두리 굵기 + * @param interactionSource Surface 상호작용 소스 * @param content Surface 내부 content **/ @Composable @@ -141,6 +147,7 @@ fun Surface( backgroundColor: Color = HandyTheme.colors.bgBasicDefault, contentColor: Color = LocalContentColor.current, border: BorderStroke? = null, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource()}, content: @Composable () -> Unit ) { CompositionLocalProvider( @@ -155,6 +162,8 @@ fun Surface( border = border, ) .selectable( + interactionSource = interactionSource, + indication = null, selected = selected, onClick = onClick, enabled = enabled, @@ -179,6 +188,7 @@ fun Surface( * @param backgroundColor : Surface 배경 색상. 기본값 : bgBasicDefault(#0xFFFFFFFF) * @param contentColor : Surface 내부 content 색상 * @param border : Surface 테두리 굵기 + * @param interactionSource : Surface 상호작용 소스 * @param content : Surface 내부 content **/ @@ -193,6 +203,7 @@ fun Surface( backgroundColor: Color = HandyTheme.colors.bgBasicDefault, contentColor: Color = LocalContentColor.current, border: BorderStroke? = null, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit ) { CompositionLocalProvider( @@ -207,6 +218,8 @@ fun Surface( border = border, ) .toggleable( + interactionSource = interactionSource, + indication = null, value = checked, enabled = enabled, onValueChange = onCheckedChange From ca724c9cdc5a7a4873b5113666e4b1a232d1197e Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 18:17:48 +0900 Subject: [PATCH 03/30] =?UTF-8?q?feat:=20BaseButton=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/compose/button/BaseButton.kt | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt new file mode 100644 index 0000000..9544f76 --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt @@ -0,0 +1,74 @@ +package com.yourssu.handy.compose.button + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.Surface + +@Composable +internal fun BaseButton( + onClick: () -> Unit, + colors: ButtonColorState, + modifier: Modifier = Modifier, + enabled: Boolean = true, + showBorder: Boolean = false, + rounding: Dp = 8.dp, + contentPadding: PaddingValues = ButtonDefaults.ContentPadding, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + minWidth: Dp = ButtonDefaults.MinWidth, + minHeight: Dp = ButtonDefaults.MinHeight, + content: @Composable RowScope.() -> Unit, +) { + val localPressed by interactionSource.collectIsPressedAsState() + val buttonColors = colors.apply { pressed = localPressed } + val contentColor by buttonColors.contentColor(enabled) + + Surface( + onClick = onClick, + modifier = modifier, + enabled = enabled, + rounding = rounding, + border = if (showBorder) BorderStroke(1.dp, contentColor) else null, + backgroundColor = buttonColors.backgroundColor(enabled).value, + contentColor = contentColor, + interactionSource = interactionSource, + ) { + Row( + modifier = Modifier + .defaultMinSize( + minWidth = minWidth, + minHeight = minHeight, + ) + .padding(contentPadding), + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, + content = content, + ) + } +} + +object ButtonDefaults { + private val ButtonHorizontalPadding = 20.dp + private val ButtonVerticalPadding = 16.dp + + val ContentPadding = PaddingValues( + horizontal = ButtonHorizontalPadding, + vertical = ButtonVerticalPadding, + ) + + val MinWidth = 64.dp + val MinHeight = 36.dp +} From 1d14bd1785b410bf893d7dda49186e4e9ff00f7a Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 18:18:05 +0900 Subject: [PATCH 04/30] =?UTF-8?q?feat:=20BoxButton=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yourssu/handy/compose/button/BoxButton.kt | 161 ++++++++++++++++++ .../handy/compose/button/ButtonState.kt | 77 +++++++++ 2 files changed, 238 insertions(+) create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt new file mode 100644 index 0000000..5e96707 --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt @@ -0,0 +1,161 @@ +package com.yourssu.handy.compose.button + +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.IconSize +import com.yourssu.handy.compose.Text +import com.yourssu.handy.compose.foundation.HandyTypography +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.line.Add + + +enum class BoxButtonType { + Primary, + Secondary, + Tertiary, +} + +@Composable +private fun boxButtonColorByType( + type: BoxButtonType, +): ButtonColorState = when (type) { + BoxButtonType.Primary -> ButtonColorState( + contentColor = HandyTheme.colors.textBasicWhite, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + bgColor = HandyTheme.colors.buttonBoxPrimaryEnabled, + disabledBgColor = HandyTheme.colors.buttonBoxPrimaryDisabled, + ) + + BoxButtonType.Secondary -> ButtonColorState( + contentColor = HandyTheme.colors.textBrandSecondary, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + bgColor = HandyTheme.colors.buttonBoxSecondaryEnabled, + disabledBgColor = HandyTheme.colors.buttonBoxSecondaryDisabled, + ) + + BoxButtonType.Tertiary -> ButtonColorState( + bgColor = HandyTheme.colors.buttonBoxTertiaryEnabled, + contentColor = HandyTheme.colors.textBasicPrimary, + disabledBgColor = HandyTheme.colors.buttonBoxTertiaryDisabled, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + ) +} + +@Composable +private fun boxButtonSizeStateBySize( + size: ButtonSize, +): ButtonSizeState = when (size) { + ButtonSize.XL -> ButtonSizeState( + typo = HandyTypography.B1Sb16, + iconSize = IconSize.S, + height = 56.dp, + horizontalPadding = 20.dp, + round = 16.dp + ) + + ButtonSize.L -> ButtonSizeState( + typo = HandyTypography.B1Sb16, + iconSize = IconSize.S, + height = 52.dp, + horizontalPadding = 20.dp, + round = 16.dp + ) + + ButtonSize.M -> ButtonSizeState( + typo = HandyTypography.B1Sb16, + iconSize = IconSize.S, + height = 48.dp, + horizontalPadding = 16.dp, + round = 14.dp + ) + + ButtonSize.S -> ButtonSizeState( + typo = HandyTypography.B3Sb14, + iconSize = IconSize.XS, + height = 40.dp, + horizontalPadding = 16.dp, + round = 12.dp + ) + + ButtonSize.XS -> ButtonSizeState( + typo = HandyTypography.B5Sb12, + iconSize = IconSize.XXS, + height = 32.dp, + horizontalPadding = 8.dp, + round = 10.dp + ) + + ButtonSize.XXS -> ButtonSizeState( + typo = HandyTypography.B5Sb12, + iconSize = IconSize.XXS, + height = 24.dp, + horizontalPadding = 8.dp, + round = 8.dp + ) +} + +@Composable +fun BoxButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + text: String, + leftIcon: ImageVector? = null, + rightIcon: ImageVector? = null, + isDisabled: Boolean = false, + sizeType: ButtonSize = ButtonSize.M, + buttonType: BoxButtonType = BoxButtonType.Primary, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } +) { + val roundingDp = boxButtonSizeStateBySize(size = sizeType).round + val (typo, iconSize, height, horizontalPadding) = boxButtonSizeStateBySize(size = sizeType) + + BaseButton( + onClick = onClick, + colors = boxButtonColorByType( + type = buttonType, + ), + modifier = Modifier + .then(modifier) + .height(height), + enabled = !isDisabled, + showBorder = (buttonType == BoxButtonType.Tertiary), + interactionSource = interactionSource, + rounding = roundingDp, + contentPadding = PaddingValues( + horizontal = horizontalPadding, + ), + ) { + leftIcon?.let { + Icon( + imageVector = leftIcon, + iconSize = iconSize, + modifier = Modifier.padding(end = 4.dp) + ) + } + + Text( + text = text, + style = typo, + ) + + rightIcon?.let { + Icon( + imageVector = rightIcon, + iconSize = iconSize, + modifier = Modifier.padding(start = 4.dp) + ) + } + } +} \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt new file mode 100644 index 0000000..b2beb53 --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt @@ -0,0 +1,77 @@ +package com.yourssu.handy.compose.button + +import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable +import androidx.compose.runtime.ReadOnlyComposable +import androidx.compose.runtime.State +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.rememberUpdatedState +import androidx.compose.runtime.setValue +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.IconSize +import com.yourssu.handy.compose.foundation.HandyTextStyle + +@Immutable +class ButtonColorState( + val contentColor: Color = Color.Unspecified, + val disabledContentColor: Color = Color.Unspecified, + val bgColor: Color = Color.Transparent, + val disabledBgColor: Color = Color.Transparent, + pressed: Boolean = false, +) { + var pressed by mutableStateOf(pressed) + internal set + + @Composable + fun contentColor(enabled: Boolean): State = + rememberUpdatedState( + when { + !enabled -> disabledContentColor + pressed -> pressedColorFor(contentColor) + else -> contentColor + } + ) + + @Composable + fun backgroundColor(enabled: Boolean): State = + rememberUpdatedState( + when { + !enabled -> disabledBgColor + pressed -> pressedColorFor(bgColor) + else -> bgColor + } + ) +} + +@Composable +private fun pressedColorFor(color: Color): Color { + return when (color) { + HandyTheme.colors.buttonBoxPrimaryEnabled -> HandyTheme.colors.buttonBoxPrimaryPressed + HandyTheme.colors.buttonBoxSecondaryEnabled -> HandyTheme.colors.buttonBoxSecondaryPressed + HandyTheme.colors.buttonBoxTertiaryEnabled -> HandyTheme.colors.buttonBoxTertiaryPressed + else -> color + } +} + +@Immutable +data class ButtonSizeState( + val typo: HandyTextStyle = HandyTextStyle.Default, + val iconSize: IconSize = IconSize.S, + val height: Dp = 0.dp, + val horizontalPadding: Dp = 0.dp, + val betweenSpace: Dp = 0.dp, + val round: Dp = 0.dp, +) + +enum class ButtonSize (internal val value: Dp) { + XXS(12.dp), + XS(16.dp), + S(20.dp), + M(24.dp), + L(28.dp), + XL(32.dp); +} \ No newline at end of file From 49519254d4d169b6a99693b33d9345f5c7ae9eb1 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 19:06:55 +0900 Subject: [PATCH 05/30] =?UTF-8?q?feat:=20BoxButton=20horizontalPadding=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kotlin/com/yourssu/handy/compose/button/BoxButton.kt | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt index 5e96707..de8a20f 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt @@ -6,11 +6,13 @@ import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.Icon @@ -116,10 +118,11 @@ fun BoxButton( isDisabled: Boolean = false, sizeType: ButtonSize = ButtonSize.M, buttonType: BoxButtonType = BoxButtonType.Primary, - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding ) { val roundingDp = boxButtonSizeStateBySize(size = sizeType).round - val (typo, iconSize, height, horizontalPadding) = boxButtonSizeStateBySize(size = sizeType) + val (typo, iconSize, height) = boxButtonSizeStateBySize(size = sizeType) BaseButton( onClick = onClick, From e41f3644934919d2c169672702e610f3c6749b0a Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 19:07:10 +0900 Subject: [PATCH 06/30] =?UTF-8?q?feat:=20BoxButton=20Preview=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/demo/ButtonPreview.kt | 275 ++++++++++++++++++ 1 file changed, 275 insertions(+) create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt new file mode 100644 index 0000000..4df3900 --- /dev/null +++ b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt @@ -0,0 +1,275 @@ +package com.yourssu.handy.demo + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.button.BoxButton +import com.yourssu.handy.compose.button.BoxButtonType +import com.yourssu.handy.compose.button.ButtonSize +import com.yourssu.handy.compose.icons.HandyIcons +import com.yourssu.handy.compose.icons.line.Add + + +@Preview +@Composable +private fun BoxButtonPreview() { + HandyTheme { + Column { + Row { + Column { + BoxButton( + onClick = {}, + text = "XL Button", + sizeType = ButtonSize.XL, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "L Button", + sizeType = ButtonSize.L, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.M, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "S Button", + sizeType = ButtonSize.S, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "XS Button", + sizeType = ButtonSize.XS, + ) + + // XXS + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "XXS Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.XXS, + ) + } + Column { + BoxButton( + onClick = {}, + text = "XL Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.XL, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "L Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.L, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "M Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.M, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "S Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.S, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "XS Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.XS, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "XXS Button", + buttonType = BoxButtonType.Secondary, + sizeType = ButtonSize.XXS, + ) + } + Column { + BoxButton( + onClick = {}, + text = "XL Button", + buttonType = BoxButtonType.Tertiary, + sizeType = ButtonSize.XL, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "L Button", + buttonType = BoxButtonType.Tertiary, + sizeType = ButtonSize.L, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "M Button", + buttonType = BoxButtonType.Tertiary, + sizeType = ButtonSize.M, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "S Button", + buttonType = BoxButtonType.Tertiary, + sizeType = ButtonSize.S, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "XS Button", + buttonType = BoxButtonType.Tertiary, + sizeType = ButtonSize.XS, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + BoxButton( + onClick = {}, + text = "XXS Button", + buttonType = BoxButtonType.Tertiary, + sizeType = ButtonSize.XXS, + ) + } + } + Spacer(modifier = Modifier.height(20.dp)) + Row { + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + leftIcon = HandyIcons.Line.Add, + ) + + Spacer(modifier = Modifier.width(8.dp)) + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + rightIcon = HandyIcons.Line.Add, + ) + Spacer(modifier = Modifier.width(8.dp)) + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + leftIcon = HandyIcons.Line.Add, + rightIcon = HandyIcons.Line.Add, + ) + } + Spacer(modifier = Modifier.height(20.dp)) + Row { + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + buttonType = BoxButtonType.Secondary, + leftIcon = HandyIcons.Line.Add, + ) + + Spacer(modifier = Modifier.width(8.dp)) + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + buttonType = BoxButtonType.Secondary, + rightIcon = HandyIcons.Line.Add, + ) + Spacer(modifier = Modifier.width(8.dp)) + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + buttonType = BoxButtonType.Secondary, + leftIcon = HandyIcons.Line.Add, + rightIcon = HandyIcons.Line.Add, + ) + } + Spacer(modifier = Modifier.height(20.dp)) + Row { + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + buttonType = BoxButtonType.Tertiary, + leftIcon = HandyIcons.Line.Add, + ) + + Spacer(modifier = Modifier.width(8.dp)) + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + buttonType = BoxButtonType.Tertiary, + rightIcon = HandyIcons.Line.Add, + ) + Spacer(modifier = Modifier.width(8.dp)) + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.S, + buttonType = BoxButtonType.Tertiary, + leftIcon = HandyIcons.Line.Add, + rightIcon = HandyIcons.Line.Add, + ) + } + Spacer(modifier = Modifier.height(20.dp)) + Row { + BoxButton( + onClick = {}, + text = "M Button", + sizeType = ButtonSize.M, + leftIcon = HandyIcons.Line.Add, + horizontalPadding = 100.dp + ) + } + } + } +} From 521a1be1ed2048bb13a3e37f58abffad683821c9 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 19:38:04 +0900 Subject: [PATCH 07/30] =?UTF-8?q?feat:=20Tertiary=20BoxButton=20border=20?= =?UTF-8?q?=EC=83=89=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/yourssu/handy/demo/ButtonPreview.kt | 36 +++++++++++++++++-- .../handy/compose/button/BaseButton.kt | 3 +- .../yourssu/handy/compose/button/BoxButton.kt | 8 +---- .../handy/compose/button/ButtonState.kt | 5 +-- 4 files changed, 39 insertions(+), 13 deletions(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt index 4df3900..35f55bd 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt @@ -1,5 +1,6 @@ package com.yourssu.handy.demo +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -7,6 +8,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color.Companion.White import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme @@ -21,9 +23,19 @@ import com.yourssu.handy.compose.icons.line.Add @Composable private fun BoxButtonPreview() { HandyTheme { - Column { + Column(modifier = Modifier.background(White)) { Row { Column { + + BoxButton( + onClick = {}, + text = "isDisabled", + isDisabled = true, + sizeType = ButtonSize.XL, + ) + + Spacer(modifier = Modifier.height(8.dp)) + BoxButton( onClick = {}, text = "XL Button", @@ -62,17 +74,25 @@ private fun BoxButtonPreview() { sizeType = ButtonSize.XS, ) - // XXS Spacer(modifier = Modifier.height(8.dp)) BoxButton( onClick = {}, text = "XXS Button", - buttonType = BoxButtonType.Secondary, sizeType = ButtonSize.XXS, ) } Column { + BoxButton( + onClick = {}, + buttonType = BoxButtonType.Secondary, + text = "isDisabled", + isDisabled = true, + sizeType = ButtonSize.XL, + ) + + Spacer(modifier = Modifier.height(8.dp)) + BoxButton( onClick = {}, text = "XL Button", @@ -126,6 +146,16 @@ private fun BoxButtonPreview() { ) } Column { + BoxButton( + onClick = {}, + buttonType = BoxButtonType.Tertiary, + text = "isDisabled", + isDisabled = true, + sizeType = ButtonSize.XL, + ) + + Spacer(modifier = Modifier.height(8.dp)) + BoxButton( onClick = {}, text = "XL Button", diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt index 9544f76..6cfc436 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.Surface @Composable @@ -41,7 +42,7 @@ internal fun BaseButton( modifier = modifier, enabled = enabled, rounding = rounding, - border = if (showBorder) BorderStroke(1.dp, contentColor) else null, + border = if (showBorder) BorderStroke(1.dp, HandyTheme.colors.lineBasicMedium) else null, backgroundColor = buttonColors.backgroundColor(enabled).value, contentColor = contentColor, interactionSource = interactionSource, diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt index de8a20f..768889e 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt @@ -1,17 +1,13 @@ package com.yourssu.handy.compose.button import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme @@ -19,8 +15,6 @@ import com.yourssu.handy.compose.Icon import com.yourssu.handy.compose.IconSize import com.yourssu.handy.compose.Text import com.yourssu.handy.compose.foundation.HandyTypography -import com.yourssu.handy.compose.icons.HandyIcons -import com.yourssu.handy.compose.icons.line.Add enum class BoxButtonType { @@ -119,7 +113,7 @@ fun BoxButton( sizeType: ButtonSize = ButtonSize.M, buttonType: BoxButtonType = BoxButtonType.Primary, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding + horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding, ) { val roundingDp = boxButtonSizeStateBySize(size = sizeType).round val (typo, iconSize, height) = boxButtonSizeStateBySize(size = sizeType) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt index b2beb53..b18dc16 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt @@ -2,7 +2,6 @@ package com.yourssu.handy.compose.button import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable -import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.State import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -53,6 +52,8 @@ private fun pressedColorFor(color: Color): Color { HandyTheme.colors.buttonBoxPrimaryEnabled -> HandyTheme.colors.buttonBoxPrimaryPressed HandyTheme.colors.buttonBoxSecondaryEnabled -> HandyTheme.colors.buttonBoxSecondaryPressed HandyTheme.colors.buttonBoxTertiaryEnabled -> HandyTheme.colors.buttonBoxTertiaryPressed + HandyTheme.colors.buttonTextPrimaryEnabled -> HandyTheme.colors.buttonTextPrimaryPressed + HandyTheme.colors.buttonTextSecondaryEnabled -> HandyTheme.colors.buttonTextSecondaryPressed else -> color } } @@ -67,7 +68,7 @@ data class ButtonSizeState( val round: Dp = 0.dp, ) -enum class ButtonSize (internal val value: Dp) { +enum class ButtonSize(internal val value: Dp) { XXS(12.dp), XS(16.dp), S(20.dp), From 1f73d62df7d410f3161c58492f6c1408c97817f1 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 20:19:57 +0900 Subject: [PATCH 08/30] =?UTF-8?q?feat:=20TextButtonSize,=20BoxButtonSize?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/compose/button/ButtonState.kt | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt index b18dc16..762bc92 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt @@ -68,11 +68,17 @@ data class ButtonSizeState( val round: Dp = 0.dp, ) -enum class ButtonSize(internal val value: Dp) { - XXS(12.dp), - XS(16.dp), - S(20.dp), - M(24.dp), - L(28.dp), - XL(32.dp); +enum class BoxButtonSize { + XXS, + XS, + S, + M, + L, + XL; +} + +enum class TextButtonSize { + S, + M, + L; } \ No newline at end of file From 847a6b44b514f7522f488c2d578151f8ffa08951 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 20:20:11 +0900 Subject: [PATCH 09/30] =?UTF-8?q?feat:=20TextButtonSize,=20BoxButtonSize?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yourssu/handy/compose/button/BoxButton.kt | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt index 768889e..6c1dfa9 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt @@ -51,9 +51,9 @@ private fun boxButtonColorByType( @Composable private fun boxButtonSizeStateBySize( - size: ButtonSize, + size: BoxButtonSize, ): ButtonSizeState = when (size) { - ButtonSize.XL -> ButtonSizeState( + BoxButtonSize.XL -> ButtonSizeState( typo = HandyTypography.B1Sb16, iconSize = IconSize.S, height = 56.dp, @@ -61,7 +61,7 @@ private fun boxButtonSizeStateBySize( round = 16.dp ) - ButtonSize.L -> ButtonSizeState( + BoxButtonSize.L -> ButtonSizeState( typo = HandyTypography.B1Sb16, iconSize = IconSize.S, height = 52.dp, @@ -69,7 +69,7 @@ private fun boxButtonSizeStateBySize( round = 16.dp ) - ButtonSize.M -> ButtonSizeState( + BoxButtonSize.M -> ButtonSizeState( typo = HandyTypography.B1Sb16, iconSize = IconSize.S, height = 48.dp, @@ -77,7 +77,7 @@ private fun boxButtonSizeStateBySize( round = 14.dp ) - ButtonSize.S -> ButtonSizeState( + BoxButtonSize.S -> ButtonSizeState( typo = HandyTypography.B3Sb14, iconSize = IconSize.XS, height = 40.dp, @@ -85,7 +85,7 @@ private fun boxButtonSizeStateBySize( round = 12.dp ) - ButtonSize.XS -> ButtonSizeState( + BoxButtonSize.XS -> ButtonSizeState( typo = HandyTypography.B5Sb12, iconSize = IconSize.XXS, height = 32.dp, @@ -93,7 +93,7 @@ private fun boxButtonSizeStateBySize( round = 10.dp ) - ButtonSize.XXS -> ButtonSizeState( + BoxButtonSize.XXS -> ButtonSizeState( typo = HandyTypography.B5Sb12, iconSize = IconSize.XXS, height = 24.dp, @@ -110,7 +110,7 @@ fun BoxButton( leftIcon: ImageVector? = null, rightIcon: ImageVector? = null, isDisabled: Boolean = false, - sizeType: ButtonSize = ButtonSize.M, + sizeType: BoxButtonSize = BoxButtonSize.M, buttonType: BoxButtonType = BoxButtonType.Primary, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding, From 41beaffa5f74d0677de1f1e777db7f790e566428 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 20:20:36 +0900 Subject: [PATCH 10/30] =?UTF-8?q?feat:=20TextButton=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/compose/button/TextButton.kt | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt new file mode 100644 index 0000000..2bc6295 --- /dev/null +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt @@ -0,0 +1,124 @@ +package com.yourssu.handy.compose.button + +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.unit.dp +import com.yourssu.handy.compose.HandyTheme +import com.yourssu.handy.compose.Icon +import com.yourssu.handy.compose.IconSize +import com.yourssu.handy.compose.Text +import com.yourssu.handy.compose.foundation.HandyTypography + +enum class TextButtonType { + Primary, + Secondary, +} + +@Composable +private fun textButtonColorByType( + type: TextButtonType, +): ButtonColorState = when (type) { + TextButtonType.Primary -> ButtonColorState( + bgColor = HandyTheme.colors.buttonTextPrimaryEnabled, + contentColor = HandyTheme.colors.textBrandPrimary, + disabledBgColor = HandyTheme.colors.buttonTextPrimaryEnabled, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + ) + + TextButtonType.Secondary -> ButtonColorState( + bgColor = HandyTheme.colors.buttonTextSecondaryEnabled, + contentColor = HandyTheme.colors.textBasicTertiary, + disabledBgColor = HandyTheme.colors.buttonTextSecondaryDisabled, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + ) +} + + +@Composable +private fun textButtonSizeStateBySize( + size: TextButtonSize, +): ButtonSizeState = when (size) { + TextButtonSize.L -> ButtonSizeState( + typo = HandyTypography.B3Sb14, + iconSize = IconSize.S, + height = 36.dp, + horizontalPadding = 8.dp, + round = 8.dp + ) + + TextButtonSize.M -> ButtonSizeState( + typo = HandyTypography.B3Sb14, + iconSize = IconSize.XS, + height = 32.dp, + horizontalPadding = 8.dp, + round = 8.dp + ) + + TextButtonSize.S -> ButtonSizeState( + typo = HandyTypography.B5Sb12, + iconSize = IconSize.XXS, + height = 24.dp, + horizontalPadding = 6.dp, + round = 8.dp + ) + +} + +@Composable +fun TextButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + text: String, + leftIcon: ImageVector? = null, + rightIcon: ImageVector? = null, + sizeType: TextButtonSize = TextButtonSize.M, + isDisabled: Boolean = false, + buttonType: TextButtonType = TextButtonType.Primary, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, +) { + val roundingDp = textButtonSizeStateBySize(size = sizeType).round + val (typo, iconSize, height, horizontalPadding) = textButtonSizeStateBySize(size = sizeType) + + BaseButton( + onClick = onClick, + colors = textButtonColorByType( + type = buttonType, + ), + modifier = Modifier + .then(modifier) + .height(height), + enabled = !isDisabled, + interactionSource = interactionSource, + rounding = roundingDp, + contentPadding = PaddingValues( + horizontal = horizontalPadding, + ), + ) { + leftIcon?.let { + Icon( + imageVector = leftIcon, + iconSize = iconSize, + modifier = Modifier.padding(end = 4.dp) + ) + } + + Text( + text = text, + style = typo, + ) + + rightIcon?.let { + Icon( + imageVector = rightIcon, + iconSize = iconSize, + modifier = Modifier.padding(start = 4.dp) + ) + } + } +} \ No newline at end of file From cbf5371ef479162ca5fe4532ddb407479eaf3376 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 20:20:47 +0900 Subject: [PATCH 11/30] feat: TextButton Preview --- .../com/yourssu/handy/demo/ButtonPreview.kt | 210 +++++++++++++++--- 1 file changed, 178 insertions(+), 32 deletions(-) diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt index 35f55bd..a2335cc 100644 --- a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt +++ b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt @@ -14,9 +14,14 @@ import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.button.BoxButton import com.yourssu.handy.compose.button.BoxButtonType -import com.yourssu.handy.compose.button.ButtonSize +import com.yourssu.handy.compose.button.BoxButtonSize +import com.yourssu.handy.compose.button.TextButton +import com.yourssu.handy.compose.button.TextButtonSize +import com.yourssu.handy.compose.button.TextButtonType import com.yourssu.handy.compose.icons.HandyIcons import com.yourssu.handy.compose.icons.line.Add +import com.yourssu.handy.compose.icons.line.ArrowsChevronLeft +import com.yourssu.handy.compose.icons.line.ExternalLink @Preview @@ -31,7 +36,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "isDisabled", isDisabled = true, - sizeType = ButtonSize.XL, + sizeType = BoxButtonSize.XL, ) Spacer(modifier = Modifier.height(8.dp)) @@ -39,7 +44,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "XL Button", - sizeType = ButtonSize.XL, + sizeType = BoxButtonSize.XL, ) Spacer(modifier = Modifier.height(8.dp)) @@ -47,7 +52,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "L Button", - sizeType = ButtonSize.L, + sizeType = BoxButtonSize.L, ) Spacer(modifier = Modifier.height(8.dp)) @@ -55,7 +60,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.M, + sizeType = BoxButtonSize.M, ) Spacer(modifier = Modifier.height(8.dp)) @@ -63,7 +68,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "S Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, ) Spacer(modifier = Modifier.height(8.dp)) @@ -71,7 +76,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "XS Button", - sizeType = ButtonSize.XS, + sizeType = BoxButtonSize.XS, ) Spacer(modifier = Modifier.height(8.dp)) @@ -79,7 +84,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "XXS Button", - sizeType = ButtonSize.XXS, + sizeType = BoxButtonSize.XXS, ) } Column { @@ -88,7 +93,7 @@ private fun BoxButtonPreview() { buttonType = BoxButtonType.Secondary, text = "isDisabled", isDisabled = true, - sizeType = ButtonSize.XL, + sizeType = BoxButtonSize.XL, ) Spacer(modifier = Modifier.height(8.dp)) @@ -97,7 +102,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "XL Button", buttonType = BoxButtonType.Secondary, - sizeType = ButtonSize.XL, + sizeType = BoxButtonSize.XL, ) Spacer(modifier = Modifier.height(8.dp)) @@ -106,7 +111,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "L Button", buttonType = BoxButtonType.Secondary, - sizeType = ButtonSize.L, + sizeType = BoxButtonSize.L, ) Spacer(modifier = Modifier.height(8.dp)) @@ -115,7 +120,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "M Button", buttonType = BoxButtonType.Secondary, - sizeType = ButtonSize.M, + sizeType = BoxButtonSize.M, ) Spacer(modifier = Modifier.height(8.dp)) @@ -124,7 +129,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "S Button", buttonType = BoxButtonType.Secondary, - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, ) Spacer(modifier = Modifier.height(8.dp)) @@ -133,7 +138,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "XS Button", buttonType = BoxButtonType.Secondary, - sizeType = ButtonSize.XS, + sizeType = BoxButtonSize.XS, ) Spacer(modifier = Modifier.height(8.dp)) @@ -142,7 +147,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "XXS Button", buttonType = BoxButtonType.Secondary, - sizeType = ButtonSize.XXS, + sizeType = BoxButtonSize.XXS, ) } Column { @@ -151,7 +156,7 @@ private fun BoxButtonPreview() { buttonType = BoxButtonType.Tertiary, text = "isDisabled", isDisabled = true, - sizeType = ButtonSize.XL, + sizeType = BoxButtonSize.XL, ) Spacer(modifier = Modifier.height(8.dp)) @@ -160,7 +165,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "XL Button", buttonType = BoxButtonType.Tertiary, - sizeType = ButtonSize.XL, + sizeType = BoxButtonSize.XL, ) Spacer(modifier = Modifier.height(8.dp)) @@ -169,7 +174,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "L Button", buttonType = BoxButtonType.Tertiary, - sizeType = ButtonSize.L, + sizeType = BoxButtonSize.L, ) Spacer(modifier = Modifier.height(8.dp)) @@ -178,7 +183,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "M Button", buttonType = BoxButtonType.Tertiary, - sizeType = ButtonSize.M, + sizeType = BoxButtonSize.M, ) Spacer(modifier = Modifier.height(8.dp)) @@ -187,7 +192,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "S Button", buttonType = BoxButtonType.Tertiary, - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, ) Spacer(modifier = Modifier.height(8.dp)) @@ -196,7 +201,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "XS Button", buttonType = BoxButtonType.Tertiary, - sizeType = ButtonSize.XS, + sizeType = BoxButtonSize.XS, ) Spacer(modifier = Modifier.height(8.dp)) @@ -205,7 +210,7 @@ private fun BoxButtonPreview() { onClick = {}, text = "XXS Button", buttonType = BoxButtonType.Tertiary, - sizeType = ButtonSize.XXS, + sizeType = BoxButtonSize.XXS, ) } } @@ -214,7 +219,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, leftIcon = HandyIcons.Line.Add, ) @@ -222,14 +227,14 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, rightIcon = HandyIcons.Line.Add, ) Spacer(modifier = Modifier.width(8.dp)) BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, leftIcon = HandyIcons.Line.Add, rightIcon = HandyIcons.Line.Add, ) @@ -239,7 +244,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, buttonType = BoxButtonType.Secondary, leftIcon = HandyIcons.Line.Add, ) @@ -248,7 +253,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, buttonType = BoxButtonType.Secondary, rightIcon = HandyIcons.Line.Add, ) @@ -256,7 +261,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, buttonType = BoxButtonType.Secondary, leftIcon = HandyIcons.Line.Add, rightIcon = HandyIcons.Line.Add, @@ -267,7 +272,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, buttonType = BoxButtonType.Tertiary, leftIcon = HandyIcons.Line.Add, ) @@ -276,7 +281,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, buttonType = BoxButtonType.Tertiary, rightIcon = HandyIcons.Line.Add, ) @@ -284,7 +289,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.S, + sizeType = BoxButtonSize.S, buttonType = BoxButtonType.Tertiary, leftIcon = HandyIcons.Line.Add, rightIcon = HandyIcons.Line.Add, @@ -295,7 +300,7 @@ private fun BoxButtonPreview() { BoxButton( onClick = {}, text = "M Button", - sizeType = ButtonSize.M, + sizeType = BoxButtonSize.M, leftIcon = HandyIcons.Line.Add, horizontalPadding = 100.dp ) @@ -303,3 +308,144 @@ private fun BoxButtonPreview() { } } } + +@Composable +@Preview +fun TextButtonPreview() { + HandyTheme { + Column { + Row { + Column { + TextButton( + onClick = {}, + text = "L Button", + isDisabled = true, + sizeType = TextButtonSize.L, + buttonType = TextButtonType.Primary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + TextButton( + onClick = {}, + text = "L Button", + sizeType = TextButtonSize.L, + buttonType = TextButtonType.Primary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Primary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + TextButton( + onClick = {}, + text = "S Button", + sizeType = TextButtonSize.S, + buttonType = TextButtonType.Primary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + } + Column { + TextButton( + onClick = {}, + text = "L Button", + isDisabled = true, + sizeType = TextButtonSize.L, + buttonType = TextButtonType.Secondary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + TextButton( + onClick = {}, + text = "L Button", + sizeType = TextButtonSize.L, + buttonType = TextButtonType.Secondary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Secondary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + TextButton( + onClick = {}, + text = "S Button", + sizeType = TextButtonSize.S, + buttonType = TextButtonType.Secondary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + } + } + Spacer(modifier = Modifier.height(20.dp)) + Row { + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Primary, + ) + + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Primary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Primary, + rightIcon = HandyIcons.Line.ExternalLink, + ) + + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Primary, + leftIcon = HandyIcons.Line.ExternalLink, + rightIcon = HandyIcons.Line.ExternalLink, + ) + } + Row { + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Secondary, + ) + + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Secondary, + leftIcon = HandyIcons.Line.ExternalLink, + ) + + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Secondary, + rightIcon = HandyIcons.Line.ExternalLink, + ) + + TextButton( + onClick = {}, + text = "M Button", + sizeType = TextButtonSize.M, + buttonType = TextButtonType.Secondary, + leftIcon = HandyIcons.Line.ExternalLink, + rightIcon = HandyIcons.Line.ExternalLink, + ) + } + } + + } +} From 8a63ab7aad7315715b9e8d98b865e6f889a9f902 Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Wed, 21 Aug 2024 21:06:08 +0900 Subject: [PATCH 12/30] =?UTF-8?q?feat:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handy/compose/button/BaseButton.kt | 16 ++ .../yourssu/handy/compose/button/BoxButton.kt | 138 +++++++++++------- .../handy/compose/button/ButtonState.kt | 15 -- .../handy/compose/button/TextButton.kt | 119 ++++++++------- 4 files changed, 168 insertions(+), 120 deletions(-) diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt index 6cfc436..53b8566 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt @@ -19,6 +19,22 @@ import androidx.compose.ui.unit.dp import com.yourssu.handy.compose.HandyTheme import com.yourssu.handy.compose.Surface +/** + * BaseButton : ripple 효과가 없는 Composable 함수 입니다. + * + * BoxButton, TextButton의 베이스가 됩니다. + * + * @param onClick Button 클릭 시 실행되는 함수 + * @param colors Button 색상 상태 + * @param enabled Surface 클릭 가능 여부 + * @param showBorder Button 테두리 표시 여부 + * @param rounding Button 모서리의 둥글기 + * @param contentPadding Button 내부 content padding + * @param interactionSource Button 상호작용 소스 + * @param minWidth Button 최소 너비 + * @param minHeight Button 최소 높이 + * @param content Button 내부 content + **/ @Composable internal fun BaseButton( onClick: () -> Unit, diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt index 6c1dfa9..5cd2c7f 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt @@ -20,9 +20,90 @@ import com.yourssu.handy.compose.foundation.HandyTypography enum class BoxButtonType { Primary, Secondary, - Tertiary, + Tertiary; } +enum class BoxButtonSize { + XXS, + XS, + S, + M, + L, + XL; +} + +/** + * BaseButton : ripple 효과가 없는 Composable 함수 입니다. + * + * BoxButton, TextButton의 베이스가 됩니다. + * + * @param onClick Button 클릭 시 실행되는 함수 + * @param text Button 내부 text + * @param leftIcon Button 왼쪽에 표시되는 Icon + * @param rightIcon Button 오른쪽에 표시되는 Icon + * @param isDisabled Button 비활성화 여부 + * @param sizeType Button 사이즈 + * @param buttonType Button 타입 (Primary, Secondary, Tertiary) + * @param interactionSource Button 상호작용 소스 + * @param horizontalPadding Button 내부 content padding + **/ + +@Composable +fun BoxButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + text: String, + leftIcon: ImageVector? = null, + rightIcon: ImageVector? = null, + isDisabled: Boolean = false, + sizeType: BoxButtonSize = BoxButtonSize.M, + buttonType: BoxButtonType = BoxButtonType.Primary, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding, +) { + val roundingDp = boxButtonSizeStateBySize(size = sizeType).round + val (typo, iconSize, height) = boxButtonSizeStateBySize(size = sizeType) + + BaseButton( + onClick = onClick, + colors = boxButtonColorByType( + type = buttonType, + ), + modifier = Modifier + .then(modifier) + .height(height), + enabled = !isDisabled, + showBorder = (buttonType == BoxButtonType.Tertiary), + interactionSource = interactionSource, + rounding = roundingDp, + contentPadding = PaddingValues( + horizontal = horizontalPadding, + ), + ) { + leftIcon?.let { + Icon( + imageVector = leftIcon, + iconSize = iconSize, + modifier = Modifier.padding(end = 4.dp) + ) + } + + Text( + text = text, + style = typo, + ) + + rightIcon?.let { + Icon( + imageVector = rightIcon, + iconSize = iconSize, + modifier = Modifier.padding(start = 4.dp) + ) + } + } +} + + @Composable private fun boxButtonColorByType( type: BoxButtonType, @@ -100,59 +181,4 @@ private fun boxButtonSizeStateBySize( horizontalPadding = 8.dp, round = 8.dp ) -} - -@Composable -fun BoxButton( - onClick: () -> Unit, - modifier: Modifier = Modifier, - text: String, - leftIcon: ImageVector? = null, - rightIcon: ImageVector? = null, - isDisabled: Boolean = false, - sizeType: BoxButtonSize = BoxButtonSize.M, - buttonType: BoxButtonType = BoxButtonType.Primary, - interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, - horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding, -) { - val roundingDp = boxButtonSizeStateBySize(size = sizeType).round - val (typo, iconSize, height) = boxButtonSizeStateBySize(size = sizeType) - - BaseButton( - onClick = onClick, - colors = boxButtonColorByType( - type = buttonType, - ), - modifier = Modifier - .then(modifier) - .height(height), - enabled = !isDisabled, - showBorder = (buttonType == BoxButtonType.Tertiary), - interactionSource = interactionSource, - rounding = roundingDp, - contentPadding = PaddingValues( - horizontal = horizontalPadding, - ), - ) { - leftIcon?.let { - Icon( - imageVector = leftIcon, - iconSize = iconSize, - modifier = Modifier.padding(end = 4.dp) - ) - } - - Text( - text = text, - style = typo, - ) - - rightIcon?.let { - Icon( - imageVector = rightIcon, - iconSize = iconSize, - modifier = Modifier.padding(start = 4.dp) - ) - } - } } \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt index 762bc92..7d6f893 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt @@ -67,18 +67,3 @@ data class ButtonSizeState( val betweenSpace: Dp = 0.dp, val round: Dp = 0.dp, ) - -enum class BoxButtonSize { - XXS, - XS, - S, - M, - L, - XL; -} - -enum class TextButtonSize { - S, - M, - L; -} \ No newline at end of file diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt index 2bc6295..bcbdb04 100644 --- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt +++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt @@ -17,59 +17,29 @@ import com.yourssu.handy.compose.foundation.HandyTypography enum class TextButtonType { Primary, - Secondary, + Secondary; } -@Composable -private fun textButtonColorByType( - type: TextButtonType, -): ButtonColorState = when (type) { - TextButtonType.Primary -> ButtonColorState( - bgColor = HandyTheme.colors.buttonTextPrimaryEnabled, - contentColor = HandyTheme.colors.textBrandPrimary, - disabledBgColor = HandyTheme.colors.buttonTextPrimaryEnabled, - disabledContentColor = HandyTheme.colors.textBasicDisabled, - ) - - TextButtonType.Secondary -> ButtonColorState( - bgColor = HandyTheme.colors.buttonTextSecondaryEnabled, - contentColor = HandyTheme.colors.textBasicTertiary, - disabledBgColor = HandyTheme.colors.buttonTextSecondaryDisabled, - disabledContentColor = HandyTheme.colors.textBasicDisabled, - ) -} - - -@Composable -private fun textButtonSizeStateBySize( - size: TextButtonSize, -): ButtonSizeState = when (size) { - TextButtonSize.L -> ButtonSizeState( - typo = HandyTypography.B3Sb14, - iconSize = IconSize.S, - height = 36.dp, - horizontalPadding = 8.dp, - round = 8.dp - ) - - TextButtonSize.M -> ButtonSizeState( - typo = HandyTypography.B3Sb14, - iconSize = IconSize.XS, - height = 32.dp, - horizontalPadding = 8.dp, - round = 8.dp - ) - - TextButtonSize.S -> ButtonSizeState( - typo = HandyTypography.B5Sb12, - iconSize = IconSize.XXS, - height = 24.dp, - horizontalPadding = 6.dp, - round = 8.dp - ) - +enum class TextButtonSize { + S, + M, + L; } +/** + * BaseButton : ripple 효과가 없는 Composable 함수 입니다. + * + * BoxButton, TextButton의 베이스가 됩니다. + * + * @param onClick Button 클릭 시 실행되는 함수 + * @param text Button 내부 text + * @param leftIcon Button 왼쪽에 표시되는 Icon + * @param rightIcon Button 오른쪽에 표시되는 Icon + * @param isDisabled Button 비활성화 여부 + * @param sizeType Button 사이즈 + * @param buttonType Button 타입 (Primary, Secondary) + * @param interactionSource Button 상호작용 소스 + **/ @Composable fun TextButton( onClick: () -> Unit, @@ -121,4 +91,55 @@ fun TextButton( ) } } +} + + +@Composable +private fun textButtonColorByType( + type: TextButtonType, +): ButtonColorState = when (type) { + TextButtonType.Primary -> ButtonColorState( + bgColor = HandyTheme.colors.buttonTextPrimaryEnabled, + contentColor = HandyTheme.colors.textBrandPrimary, + disabledBgColor = HandyTheme.colors.buttonTextPrimaryEnabled, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + ) + + TextButtonType.Secondary -> ButtonColorState( + bgColor = HandyTheme.colors.buttonTextSecondaryEnabled, + contentColor = HandyTheme.colors.textBasicTertiary, + disabledBgColor = HandyTheme.colors.buttonTextSecondaryDisabled, + disabledContentColor = HandyTheme.colors.textBasicDisabled, + ) +} + + +@Composable +private fun textButtonSizeStateBySize( + size: TextButtonSize, +): ButtonSizeState = when (size) { + TextButtonSize.L -> ButtonSizeState( + typo = HandyTypography.B3Sb14, + iconSize = IconSize.S, + height = 36.dp, + horizontalPadding = 8.dp, + round = 8.dp + ) + + TextButtonSize.M -> ButtonSizeState( + typo = HandyTypography.B3Sb14, + iconSize = IconSize.XS, + height = 32.dp, + horizontalPadding = 8.dp, + round = 8.dp + ) + + TextButtonSize.S -> ButtonSizeState( + typo = HandyTypography.B5Sb12, + iconSize = IconSize.XXS, + height = 24.dp, + horizontalPadding = 6.dp, + round = 8.dp + ) + } \ No newline at end of file From 30f7294ebf49a47968fdb71c0aed9c0c0e4b4b4e Mon Sep 17 00:00:00 2001 From: kangyuri1114 Date: Fri, 6 Sep 2024 17:25:36 +0900 Subject: [PATCH 13/30] =?UTF-8?q?fix:=20preview=20=EC=A0=95=EB=A0=AC?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/other.xml | 66 ++++++++ .../com/yourssu/handy/demo/ButtonPreview.kt | 145 +++++++++-------- .../kotlin/com/yourssu/handy/compose/FAB.kt | 153 ++++++++++++++++++ .../com/yourssu/handy/compose/Surface.kt | 47 ++++++ .../handy/compose/button/ButtonState.kt | 12 ++ .../compose/foundation/PrimitiveColors.kt | 7 +- 6 files changed, 362 insertions(+), 68 deletions(-) create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/FAB.kt diff --git a/.idea/other.xml b/.idea/other.xml index 4604c44..94c96f6 100644 --- a/.idea/other.xml +++ b/.idea/other.xml @@ -69,6 +69,28 @@