From 30ef5c7386a1fa0308419ed51e440c4c6715ef80 Mon Sep 17 00:00:00 2001 From: "AKMunny, Dean" <37904970+sodp5@users.noreply.github.com> Date: Mon, 23 Sep 2024 23:33:57 +0900 Subject: [PATCH] =?UTF-8?q?dropdown=20=ED=95=84=EB=93=9C=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20(#74)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/icon_button/BezierIconButton.kt | 37 +++++++++++++++++-- .../properties/BezierIconButtonColor.kt | 31 ++++++++++++++++ 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/BezierIconButton.kt b/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/BezierIconButton.kt index 41968206..8713d748 100644 --- a/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/BezierIconButton.kt +++ b/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/BezierIconButton.kt @@ -31,6 +31,7 @@ import io.channel.bezier.compose.component.icon_button.properties.BezierIconButt import io.channel.bezier.compose.component.loader.BezierLoader import io.channel.bezier.compose.component.loader.properties.BezierLoaderVariant import io.channel.bezier.extension.thenIf +import io.channel.bezier.icon.ChevronSmallDown import io.channel.bezier.icon.Plus @Composable @@ -44,6 +45,7 @@ fun BezierIconButton( modifier: Modifier = Modifier, isLoading: Boolean = false, enabled: Boolean = true, + dropdown: Boolean = false, ) { BezierIconButton( content = BezierIconButtonContent.Icon(icon), @@ -55,6 +57,7 @@ fun BezierIconButton( modifier = modifier, isLoading = isLoading, enabled = enabled, + dropdown = dropdown, ) } @@ -69,10 +72,12 @@ fun BezierIconButton( modifier: Modifier = Modifier, isLoading: Boolean = false, enabled: Boolean = true, + dropdown: Boolean = false, ) { val colorSchemes = color.getColorSchemes(variant) val backgroundColor = colorSchemes.backgroundColor().color val contentColor = colorSchemes.contentColor().color + val dropdownColor = colorSchemes.dropdownColor().color Box( modifier = modifier @@ -94,7 +99,7 @@ fun BezierIconButton( ) } - Box( + Row( modifier = Modifier .thenIf(isLoading) { alpha(0f) @@ -105,8 +110,16 @@ fun BezierIconButton( size = size, contentColor = contentColor, ) - } + if (dropdown) { + Icon( + modifier = Modifier.size(size.iconSize), + painter = rememberVectorPainter(BezierIcons.ChevronSmallDown.imageVector), + contentDescription = null, + tint = dropdownColor, + ) + } + } } } @@ -146,7 +159,7 @@ private fun BezierIconButtonContent( @Composable @Preview( showBackground = true, - widthDp = 500, + widthDp = 700, ) private fun BezierIconButtonRectanglePreview() { BezierTheme { @@ -170,6 +183,24 @@ private fun BezierIconButtonRectanglePreview() { } } } + + BezierIconButtonVariant.entries.forEach { variant -> + Row( + horizontalArrangement = Arrangement.spacedBy(4.dp), + ) { + BezierIconButtonColor.entries.forEach { color -> + BezierIconButton( + content = BezierIconButtonContent.Icon(BezierIcons.Plus), + size = BezierIconButtonSize.Medium, + variant = variant, + color = color, + shape = BezierIconButtonShape.Rectangle, + onClick = { }, + dropdown = true, + ) + } + } + } } } } diff --git a/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/properties/BezierIconButtonColor.kt b/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/properties/BezierIconButtonColor.kt index 554128e9..f690fe7f 100644 --- a/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/properties/BezierIconButtonColor.kt +++ b/bezier/src/main/java/io/channel/bezier/compose/component/icon_button/properties/BezierIconButtonColor.kt @@ -13,140 +13,170 @@ enum class BezierIconButtonColor( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.primaryBgNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.primaryBgLightest }, contentColor = { BezierTheme.colorSchemes.primaryFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.primaryFgNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.primaryFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.primaryFgNormal }, ), ), Cobalt( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.accentBgNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.accentBgLightest }, contentColor = { BezierTheme.colorSchemes.accentFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.accentFgNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.accentFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.accentFgNormal }, ), ), Red( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.criticalBgNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.criticalBgLightest }, contentColor = { BezierTheme.colorSchemes.criticalFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.criticalFgNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.criticalFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.criticalFgNormal }, ), ), Orange( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.warningBgNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.warningBgLightest }, contentColor = { BezierTheme.colorSchemes.warningFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.warningFgNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.warningFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.warningFgNormal }, ), ), Green( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.successBgNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.successBgLightest }, contentColor = { BezierTheme.colorSchemes.successFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.successFgNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.successFgNormal }, + dropdownColor = { BezierTheme.colorSchemes.successFgNormal }, ), ), Pink( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgPinkNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgPinkLightest }, contentColor = { BezierTheme.colorSchemes.fgPinkNormal }, + dropdownColor = { BezierTheme.colorSchemes.fgPinkNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.fgPinkNormal }, + dropdownColor = { BezierTheme.colorSchemes.fgPinkNormal }, ), ), Purple( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgPurpleNormal }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgPurpleLightest }, contentColor = { BezierTheme.colorSchemes.fgPurpleNormal }, + dropdownColor = { BezierTheme.colorSchemes.fgPurpleNormal }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.fgPurpleNormal }, + dropdownColor = { BezierTheme.colorSchemes.fgPurpleNormal }, ), ), DarkGrey( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgGreyDarkest }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteDark }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgBlackLighter }, contentColor = { BezierTheme.colorSchemes.fgBlackDarker }, + dropdownColor = { BezierTheme.colorSchemes.fgBlackDark }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.fgBlackDarker }, + dropdownColor = { BezierTheme.colorSchemes.fgBlackDark }, ), ), LightGrey( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgBlackDark }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteNormal }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteWhiteLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgBlackLighter }, contentColor = { BezierTheme.colorSchemes.fgBlackDark }, + dropdownColor = { BezierTheme.colorSchemes.fgBlackDark }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.fgBlackDark }, + dropdownColor = { BezierTheme.colorSchemes.fgBlackDark }, ), ), White( primaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgAbsoluteWhiteDark }, contentColor = { BezierTheme.colorSchemes.fgAbsoluteBlackNormal }, + dropdownColor = { BezierTheme.colorSchemes.fgAbsoluteBlackLight }, ), secondaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgAbsoluteWhiteLightest }, contentColor = { BezierTheme.colorSchemes.bgAbsoluteWhiteNormal }, + dropdownColor = { BezierTheme.colorSchemes.bgAbsoluteWhiteLight }, ), tertiaryColorSchemes = BezierIconButtonColorSchemes( backgroundColor = { BezierTheme.colorSchemes.bgWhiteWhiteAlphaTransparent }, contentColor = { BezierTheme.colorSchemes.bgAbsoluteWhiteNormal }, + dropdownColor = { BezierTheme.colorSchemes.bgAbsoluteWhiteLight }, ), ); @@ -163,4 +193,5 @@ enum class BezierIconButtonColor( internal class BezierIconButtonColorSchemes( val backgroundColor: @Composable () -> BezierColor, val contentColor: @Composable () -> BezierColor, + val dropdownColor: @Composable () -> BezierColor, )