dropdown 필드 적용 (#74)

channel-io · Sep 23, 2024 · 30ef5c7 · 30ef5c7
1 parent 660fdc0
commit 30ef5c7
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 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
@@ -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/.../java/io/channel/bezier/compose/component/icon_button/properties/BezierIconButtonColor.kt b/.../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,
 )