diff --git a/tarka-ui/screenshots/debug/screenshots-default/com.tarkalabs.uicomponents.screenshots.TUIButtonScreenShotTest__customButtonTest_darkTheme_false.png b/tarka-ui/screenshots/debug/screenshots-default/com.tarkalabs.uicomponents.screenshots.TUIButtonScreenShotTest__customButtonTest_darkTheme_false.png new file mode 100644 index 00000000..e6997386 Binary files /dev/null and b/tarka-ui/screenshots/debug/screenshots-default/com.tarkalabs.uicomponents.screenshots.TUIButtonScreenShotTest__customButtonTest_darkTheme_false.png differ diff --git a/tarka-ui/screenshots/debug/screenshots-default/com.tarkalabs.uicomponents.screenshots.TUIButtonScreenShotTest__customButtonTest_darkTheme_true.png b/tarka-ui/screenshots/debug/screenshots-default/com.tarkalabs.uicomponents.screenshots.TUIButtonScreenShotTest__customButtonTest_darkTheme_true.png new file mode 100644 index 00000000..3ae30baf Binary files /dev/null and b/tarka-ui/screenshots/debug/screenshots-default/com.tarkalabs.uicomponents.screenshots.TUIButtonScreenShotTest__customButtonTest_darkTheme_true.png differ diff --git a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIButtonTest.kt b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIButtonTest.kt index b4585161..33ded981 100644 --- a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIButtonTest.kt +++ b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIButtonTest.kt @@ -4,7 +4,7 @@ import androidx.compose.ui.test.assertIsDisplayed import androidx.compose.ui.test.junit4.createComposeRule import androidx.compose.ui.test.onNodeWithText import androidx.compose.ui.test.performClick -import com.tarkalabs.tarkaui.components.base.ButtonStyle.SECONDARY +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Secondary import com.tarkalabs.tarkaui.components.base.TUIButton import com.tarkalabs.tarkaui.components.base.TUIButtonTags import org.junit.Rule @@ -20,7 +20,7 @@ class TUIButtonTest { @Test fun button_Displayed() { composable.setContent { - TUIButton(label = "Button", tags = tags, onClick = { }, buttonStyle = SECONDARY) + TUIButton(label = "Button", tags = tags, onClick = { }, buttonStyle = Secondary) } composable.onNodeWithText("Button").assertIsDisplayed() } @@ -32,7 +32,7 @@ class TUIButtonTest { TUIButton( label = "Button", onClick = onClick, - buttonStyle = SECONDARY + buttonStyle = Secondary ) } composable.onNodeWithText("Button").performClick() diff --git a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIButtonScreenShotTest.kt b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIButtonScreenShotTest.kt index eab7eb35..4c64b635 100644 --- a/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIButtonScreenShotTest.kt +++ b/tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIButtonScreenShotTest.kt @@ -1,12 +1,14 @@ package com.tarkalabs.uicomponents.screenshots import com.tarkalabs.tarkaui.components.base.ButtonSize.L -import com.tarkalabs.tarkaui.components.base.ButtonStyle.ERROR -import com.tarkalabs.tarkaui.components.base.ButtonStyle.GHOST -import com.tarkalabs.tarkaui.components.base.ButtonStyle.OUTLINE -import com.tarkalabs.tarkaui.components.base.ButtonStyle.PRIMARY -import com.tarkalabs.tarkaui.components.base.ButtonStyle.SECONDARY +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Custom +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Error +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Ghost +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Primary +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Secondary import com.tarkalabs.tarkaui.components.base.TUIButton +import com.tarkalabs.tarkaui.theme.TUITheme import org.junit.Test import org.junit.runner.RunWith import org.junit.runners.Parameterized @@ -31,22 +33,29 @@ class TUIButtonScreenShotTest( } @Test fun primaryButtonTest() = compareScreenshotFor(darkTheme, "_primaryButtonTest_$testName") { - TUIButton(label = "Primary button", buttonStyle = PRIMARY, height = L, onClick = {}) + TUIButton(label = "Primary button", buttonStyle = Primary, height = L, onClick = {}) } @Test fun secondaryButtonTest() = compareScreenshotFor(darkTheme, "_secondaryButtonTest_$testName") { - TUIButton(label = "Secondary button", buttonStyle = SECONDARY, height = L, onClick = {}) + TUIButton(label = "Secondary button", buttonStyle = Secondary, height = L, onClick = {}) } @Test fun ghostButtonTest() = compareScreenshotFor(darkTheme, "_ghostButtonTest_$testName") { - TUIButton(label = "Ghost button", buttonStyle = GHOST, height = L, onClick = {}) + TUIButton(label = "Ghost button", buttonStyle = Ghost, height = L, onClick = {}) } @Test fun errorButtonTest() = compareScreenshotFor(darkTheme, "_errorButtonTest_$testName"){ - TUIButton(label = "Error button", buttonStyle = ERROR, height = L, onClick = {}) + TUIButton(label = "Error button", buttonStyle = Error, height = L, onClick = {}) } @Test fun outlineButtonTest() = compareScreenshotFor(darkTheme, "_outlineButtonTest_$testName"){ - TUIButton(label = "Outline button", buttonStyle = OUTLINE, height = L, onClick = {}) + TUIButton(label = "Outline button", buttonStyle = Outline, height = L, onClick = {}) + } + + @Test fun customButtonTest() = compareScreenshotFor(darkTheme, "_customButtonTest_$testName"){ + TUIButton( + label = "Custom button", buttonStyle = Custom( + containerColor = TUITheme.colors.secondaryAlt, contentColor = TUITheme.colors.onSecondaryAlt + ), height = L, onClick = {}) } } \ No newline at end of file diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt index 7da7828e..52206e40 100644 --- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt +++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileButtonBlock.kt @@ -14,8 +14,8 @@ import com.tarkalabs.tarkaui.icons.ChevronDown24 import com.tarkalabs.tarkaui.icons.TarkaIcon import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular import com.tarkalabs.tarkaui.components.base.ButtonSize.XL -import com.tarkalabs.tarkaui.components.base.ButtonStyle.OUTLINE -import com.tarkalabs.tarkaui.components.base.ButtonStyle.PRIMARY +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Primary import com.tarkalabs.tarkaui.components.base.TUIButton import com.tarkalabs.tarkaui.components.base.TUIButtonTags import com.tarkalabs.tarkaui.theme.TUITheme @@ -61,7 +61,7 @@ fun TUIMobileButtonBlock( height = XL, label = outlineButtonLabel, onClick = { outlineButtonOnClick?.invoke() }, - buttonStyle = OUTLINE, + buttonStyle = Outline, leadingIcon = outlineLeadingIcon, trailingIcon = outlineTrailingIcon, modifier = if (primaryButtonWeight == null) Modifier.weight(1f) else Modifier.wrapContentWidth(), @@ -74,7 +74,7 @@ fun TUIMobileButtonBlock( height = XL, label = it, onClick = { primaryButtonOnClick?.invoke() }, - buttonStyle = PRIMARY, + buttonStyle = Primary, leadingIcon = primaryLeadingIcon, trailingIcon = primaryTrailingIcon, modifier = Modifier.weight( diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt index f78b26fc..72082c10 100644 --- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt +++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt @@ -16,8 +16,9 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import com.tarkalabs.tarkaui.components.base.ButtonStyle.ERROR -import com.tarkalabs.tarkaui.components.base.ButtonStyle.OUTLINE +import com.tarkalabs.tarkaui.components.base.ButtonStyle +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Error +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline import com.tarkalabs.tarkaui.components.base.IconButtonStyle import com.tarkalabs.tarkaui.components.base.TUIButton import com.tarkalabs.tarkaui.components.base.TUIIconButton @@ -134,14 +135,14 @@ fun TUIMobileOverlayFooterPreview() { TUIButton( label = "Cancel", onClick = {}, - buttonStyle = OUTLINE + buttonStyle = Outline ) }, rightContent = { TUIButton( label = "Delete", onClick = {}, - buttonStyle = ERROR + buttonStyle = Error ) } ) @@ -155,14 +156,14 @@ fun TUIMobileOverlayFooterPreview() { TUIButton( label = "Cancel", onClick = {}, - buttonStyle = OUTLINE + buttonStyle = Outline ) }, rightContent = { TUIButton( label = "Delete", onClick = {}, - buttonStyle = ERROR + buttonStyle = ButtonStyle.Error ) } ) @@ -173,7 +174,7 @@ fun TUIMobileOverlayFooterPreview() { TUIButton( label = "Delete", onClick = {}, - buttonStyle = ERROR + buttonStyle = Error ) } ) @@ -184,7 +185,7 @@ fun TUIMobileOverlayFooterPreview() { TUIButton( label = "Cancel", onClick = {}, - buttonStyle = OUTLINE + buttonStyle = Outline ) } ) diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt index d90f49b0..8a665d95 100644 --- a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt +++ b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIButton.kt @@ -4,11 +4,11 @@ import com.tarkalabs.tarkaui.components.base.ButtonSize.L import com.tarkalabs.tarkaui.components.base.ButtonSize.M import com.tarkalabs.tarkaui.components.base.ButtonSize.S import com.tarkalabs.tarkaui.components.base.ButtonSize.XS -import com.tarkalabs.tarkaui.components.base.ButtonStyle.ERROR -import com.tarkalabs.tarkaui.components.base.ButtonStyle.GHOST -import com.tarkalabs.tarkaui.components.base.ButtonStyle.OUTLINE -import com.tarkalabs.tarkaui.components.base.ButtonStyle.PRIMARY -import com.tarkalabs.tarkaui.components.base.ButtonStyle.SECONDARY +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Error +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Ghost +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Outline +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Primary +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Secondary import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column @@ -40,14 +40,19 @@ import com.tarkalabs.tarkaui.icons.Add24 import com.tarkalabs.tarkaui.icons.TarkaIcon import com.tarkalabs.tarkaui.icons.TarkaIcons.Regular import com.tarkalabs.tarkaui.components.HorizontalSpacer +import com.tarkalabs.tarkaui.components.base.ButtonStyle.Custom import com.tarkalabs.tarkaui.theme.TUITheme -enum class ButtonStyle { - PRIMARY, - SECONDARY, - GHOST, - ERROR, - OUTLINE; +sealed class ButtonStyle { + object Primary: ButtonStyle() + object Secondary: ButtonStyle() + object Ghost: ButtonStyle() + object Error: ButtonStyle() + object Outline: ButtonStyle() + data class Custom( + val containerColor: Color, + val contentColor: Color + ) : ButtonStyle() } enum class ButtonSize(val size: Dp) { @@ -106,7 +111,7 @@ enum class ButtonSize(val size: Dp) { * @param label The text to be displayed on the button. * @param modifier The modifier to apply to the button. * @param height The height size of the button. Default is [ButtonSize.M]. - * @param buttonStyle The style of the button. Default is [ButtonStyle.PRIMARY]. + * @param buttonStyle The style of the button. Default is [ButtonStyle.Primary]. * @param leadingIcon The drawable resource for the leading icon, if any. Default is null. * @param trailingIcon The drawable resource for the trailing icon, if any. Default is null. * @param onClick The callback function to be executed when the button is clicked. @@ -124,46 +129,53 @@ onClick = {} label: String, modifier: Modifier = Modifier, height: ButtonSize = M, - buttonStyle: ButtonStyle = PRIMARY, + buttonStyle: ButtonStyle = Primary, leadingIcon: TarkaIcon? = null, trailingIcon: TarkaIcon? = null, tags: TUIButtonTags = TUIButtonTags(), onClick: () -> Unit, ) { val buttonColor = when (buttonStyle) { - PRIMARY -> { + Primary -> { ButtonDefaults.buttonColors( containerColor = TUITheme.colors.primary, contentColor = TUITheme.colors.onPrimary ) } - SECONDARY -> { + Secondary -> { ButtonDefaults.buttonColors( containerColor = TUITheme.colors.secondary, contentColor = TUITheme.colors.onSecondary ) } - GHOST -> { + Ghost -> { ButtonDefaults.buttonColors( containerColor = Color.Transparent, contentColor = TUITheme.colors.secondary ) } - ERROR -> { + Error -> { ButtonDefaults.buttonColors( containerColor = TUITheme.colors.error, contentColor = TUITheme.colors.onPrimary, ) } - OUTLINE -> { + Outline -> { ButtonDefaults.buttonColors( containerColor = TUITheme.colors.surface, contentColor = TUITheme.colors.onSurface ) } + + is Custom -> { + ButtonDefaults.buttonColors( + containerColor = buttonStyle.containerColor, + contentColor = buttonStyle.contentColor, + ) + } } Button( @@ -176,7 +188,7 @@ onClick = {} isLeadingIconNull = leadingIcon == null, isTrailingIconNull = trailingIcon == null ), - border = if (buttonStyle == OUTLINE) BorderStroke( + border = if (buttonStyle == Outline) BorderStroke( width = 1.dp, color = TUITheme.colors.onSurface ) else null ) { @@ -226,24 +238,48 @@ data class TUIButtonTags( Column { Text("Primary Button", fontSize = 24.sp) Spacer(modifier = Modifier.height(20.dp)) - TUIButton(label = "Primary ", height = M, buttonStyle = PRIMARY, onClick = {}, trailingIcon = Regular.Add24) + TUIButton( + label = "Primary ", height = M, buttonStyle = Primary, onClick = {}, + trailingIcon = Regular.Add24 + ) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Primary ", height = L, buttonStyle = PRIMARY, onClick = {}, trailingIcon = Regular.Add24) + TUIButton( + label = "Primary ", height = L, buttonStyle = Primary, onClick = {}, + trailingIcon = Regular.Add24 + ) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Primary ", height = S, buttonStyle = PRIMARY, onClick = {}, trailingIcon = Regular.Add24) + TUIButton( + label = "Primary ", height = S, buttonStyle = Primary, onClick = {}, + trailingIcon = Regular.Add24 + ) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Primary ", height = XS, buttonStyle = PRIMARY, onClick = {}, trailingIcon = Regular.Add24) + TUIButton( + label = "Primary ", height = XS, buttonStyle = Primary, onClick = {}, + trailingIcon = Regular.Add24 + ) } Column { Text("Secondary Button", fontSize = 24.sp) Spacer(modifier = Modifier.height(20.dp)) - TUIButton(label = "Secondary ", height = M, buttonStyle = SECONDARY, onClick = {}, leadingIcon = Regular.Add24) + TUIButton( + label = "Secondary ", height = M, buttonStyle = Secondary, onClick = {}, + leadingIcon = Regular.Add24 + ) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Secondary ", height = L, buttonStyle = SECONDARY, onClick = {}, leadingIcon = Regular.Add24) + TUIButton( + label = "Secondary ", height = L, buttonStyle = Secondary, onClick = {}, + leadingIcon = Regular.Add24 + ) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Secondary ", height = S, buttonStyle = SECONDARY, onClick = {}, leadingIcon = Regular.Add24) + TUIButton( + label = "Secondary ", height = S, buttonStyle = Secondary, onClick = {}, + leadingIcon = Regular.Add24 + ) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Secondary ", height = XS, buttonStyle = SECONDARY, onClick = {}, leadingIcon = Regular.Add24) + TUIButton( + label = "Secondary ", height = XS, buttonStyle = Secondary, onClick = {}, + leadingIcon = Regular.Add24 + ) } } @@ -256,37 +292,70 @@ data class TUIButtonTags( Column(horizontalAlignment = Alignment.Start) { Text("Ghost Button", fontSize = 24.sp) Spacer(modifier = Modifier.height(20.dp)) - TUIButton(label = "Ghost Button", height = M, buttonStyle = GHOST, onClick = {}) + TUIButton(label = "Ghost Button", height = M, buttonStyle = Ghost, onClick = {}) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Ghost Button", height = L, buttonStyle = GHOST, onClick = {}) + TUIButton(label = "Ghost Button", height = L, buttonStyle = Ghost, onClick = {}) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Ghost Button", height = S, buttonStyle = GHOST, onClick = {}) + TUIButton(label = "Ghost Button", height = S, buttonStyle = Ghost, onClick = {}) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Ghost Button", height = XS, buttonStyle = GHOST, onClick = {}) + TUIButton(label = "Ghost Button", height = XS, buttonStyle = Ghost, onClick = {}) } Column { Text("Error Button", fontSize = 24.sp) Spacer(modifier = Modifier.height(20.dp)) - TUIButton(label = "Error Button", height = M, buttonStyle = ERROR, onClick = {}) + TUIButton(label = "Error Button", height = M, buttonStyle = Error, onClick = {}) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Error Button", height = L, buttonStyle = ERROR, onClick = {}) + TUIButton(label = "Error Button", height = L, buttonStyle = Error, onClick = {}) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Error Button", height = S, buttonStyle = ERROR, onClick = {}) + TUIButton(label = "Error Button", height = S, buttonStyle = Error, onClick = {}) Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Error Button", height = XS, buttonStyle = ERROR, onClick = {}) + TUIButton(label = "Error Button", height = XS, buttonStyle = Error, onClick = {}) } } - Text("Outline Button", fontSize = 30.sp) - Spacer(modifier = Modifier.height(20.dp)) - TUIButton(label = "Outline Button", height = M, buttonStyle = OUTLINE, onClick = {}) - Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Outline Button", height = L, buttonStyle = OUTLINE, onClick = {}) - Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Outline Button", height = S, buttonStyle = OUTLINE, onClick = {}) - Spacer(modifier = Modifier.height(10.dp)) - TUIButton(label = "Outline Button", height = XS, buttonStyle = OUTLINE, onClick = {}) + Row( + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 10.dp) + ) { + Column { + Text("Outline Button", fontSize = 30.sp) + Spacer(modifier = Modifier.height(20.dp)) + TUIButton(label = "Outline Button", height = M, buttonStyle = Outline, onClick = {}) + Spacer(modifier = Modifier.height(10.dp)) + TUIButton(label = "Outline Button", height = L, buttonStyle = Outline, onClick = {}) + Spacer(modifier = Modifier.height(10.dp)) + TUIButton(label = "Outline Button", height = S, buttonStyle = Outline, onClick = {}) + Spacer(modifier = Modifier.height(10.dp)) + TUIButton(label = "Outline Button", height = XS, buttonStyle = Outline, onClick = {}) + } + Column { + Spacer(modifier = Modifier.height(5.dp)) + Text("Custom Button", fontSize = 24.sp) + Spacer(modifier = Modifier.height(20.dp)) + TUIButton(label = "Custom Button", height = M, buttonStyle = Custom( + contentColor = TUITheme.colors.onSecondaryAlt, + containerColor = TUITheme.colors.secondaryAlt + ), onClick = {}) + Spacer(modifier = Modifier.height(10.dp)) + TUIButton(label = "Custom Button", height = L, buttonStyle = Custom( + contentColor = TUITheme.colors.onSecondaryAlt, + containerColor = TUITheme.colors.secondaryAlt + ), onClick = {}) + Spacer(modifier = Modifier.height(10.dp)) + TUIButton(label = "Custom Button", height = S, buttonStyle = Custom( + contentColor = TUITheme.colors.onSecondaryAlt, + containerColor = TUITheme.colors.secondaryAlt + ), onClick = {}) + Spacer(modifier = Modifier.height(10.dp)) + TUIButton(label = "Custom Button", height = XS, buttonStyle = Custom( + contentColor = TUITheme.colors.onSecondaryAlt, + containerColor = TUITheme.colors.secondaryAlt + ), onClick = {}) + } + } } } } \ No newline at end of file