Skip to content

Commit 31b0ddf

Browse files
DBFabianWenzelDBFabianWenzel
committed
added DSButton
1 parent fbd6fd4 commit 31b0ddf

File tree

3 files changed

+237
-5
lines changed

3 files changed

+237
-5
lines changed

‎components/build.gradle.kts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ plugins {
66

77
android {
88
namespace = "com.dbsystel.designsystem.components"
9-
compileSdk = 34
9+
compileSdk = 35
1010

1111
defaultConfig {
1212
minSdk = 30

‎components/src/main/java/com/dbsystel/designsystem/components/button/DSButton.kt‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
package com.dbsystel.designsystem.components.button
2+
3+
import androidx.compose.foundation.BorderStroke
4+
import androidx.compose.foundation.Image
5+
import androidx.compose.foundation.background
6+
import androidx.compose.foundation.layout.Box
7+
import androidx.compose.foundation.layout.PaddingValues
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.padding
12+
import androidx.compose.foundation.layout.size
13+
import androidx.compose.foundation.layout.width
14+
import androidx.compose.foundation.shape.RoundedCornerShape
15+
import androidx.compose.material.ripple.RippleAlpha
16+
import androidx.compose.material3.Button
17+
import androidx.compose.material3.ButtonColors
18+
import androidx.compose.material3.ExperimentalMaterial3Api
19+
import androidx.compose.material3.LocalRippleConfiguration
20+
import androidx.compose.material3.RippleConfiguration
21+
import androidx.compose.material3.Text
22+
import androidx.compose.runtime.Composable
23+
import androidx.compose.runtime.CompositionLocalProvider
24+
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.draw.alpha
26+
import androidx.compose.ui.graphics.Color
27+
import androidx.compose.ui.res.painterResource
28+
import androidx.compose.ui.text.font.FontWeight
29+
import androidx.compose.ui.tooling.preview.Preview
30+
import androidx.compose.ui.tooling.preview.PreviewParameter
31+
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
32+
import androidx.compose.ui.unit.Dp
33+
import androidx.compose.ui.unit.TextUnit
34+
import androidx.compose.ui.unit.dp
35+
import com.dbsystel.designsystem.foundation.theme.DesignSystemTheme
36+
37+
/**
38+
* Basic DesignSystem-Button
39+
*
40+
* @param modifier - custom modifier of the button
41+
* @param enabled - enable state
42+
* @param callback - callback when button clicked
43+
* @param text - text to display
44+
* @param icon - icon to display
45+
* @param iconContentDescription - content description of the icon
46+
* @param size - size of the button
47+
* @param variant - variant of the button
48+
* @param width - width-setting of the button
49+
*/
50+
@OptIn(ExperimentalMaterial3Api::class)
51+
@Composable
52+
fun DSButton(
53+
modifier: Modifier = Modifier,
54+
enabled: Boolean = true,
55+
callback: () -> Unit,
56+
text: String? = null,
57+
icon: Int? = null,
58+
iconContentDescription: String = "Icon",
59+
size: DSButtonSize = DSButtonSize.MEDIUM,
60+
variant: DSButtonVariant = DSButtonVariant.OUTLINE,
61+
width: DSButtonWidth = DSButtonWidth.AUTO,
62+
) {
63+
val shape = RoundedCornerShape(size = size.borderRadius())
64+
val iconOnly = icon != null && text.isNullOrEmpty()
65+
val textOnly = icon == null && !text.isNullOrEmpty()
66+
val textAndIcon = icon != null && !text.isNullOrEmpty()
67+
val backgroundRippleTheme = RippleConfiguration(
68+
color = DesignSystemTheme.activeColor.Basic.Background.Transparent.Pressed,
69+
rippleAlpha = RippleAlpha(1.0f, 1.0f, 1.0f, 1.0f)
70+
)
71+
CompositionLocalProvider(LocalRippleConfiguration provides backgroundRippleTheme) {
72+
Button(
73+
border = if (variant.hasBorder) BorderStroke(
74+
width = size.borderHeight(),
75+
color = DesignSystemTheme.activeColor.onBgBasicEmphasis100Default
76+
) else null,
77+
shape = shape,
78+
modifier = Modifier
79+
.height(size.size())
80+
.run { if (width == DSButtonWidth.FULL_WIDTH) fillMaxWidth() else this }
81+
.run { if (enabled) alpha(1.0f) else alpha(0.4f) }
82+
.then(modifier),
83+
onClick = callback,
84+
enabled = enabled,
85+
colors = ButtonColors(
86+
contentColor = variant.color(),
87+
containerColor = variant.background(),
88+
disabledContentColor = variant.color(),
89+
disabledContainerColor = variant.background(),
90+
),
91+
contentPadding = if (textAndIcon || textOnly) {
92+
PaddingValues(horizontal = size.paddingH(), vertical = 0.dp)
93+
} else if (iconOnly) {
94+
PaddingValues(all = size.paddingFull())
95+
} else {
96+
PaddingValues(horizontal = size.paddingH())
97+
},
98+
) {
99+
Row {
100+
if (icon != null) Image(
101+
modifier = Modifier
102+
.size(size.iconSize())
103+
.padding(end = size.spacing()),
104+
painter = painterResource(id = icon),
105+
contentDescription = iconContentDescription
106+
)
107+
if (text != null) Text(
108+
text = text,
109+
fontSize = size.textSize(),
110+
fontWeight = FontWeight(size.fontWeight()),
111+
lineHeight = size.lineHeight(),
112+
color = variant.color()
113+
)
114+
}
115+
}
116+
}
117+
}
118+
119+
enum class DSButtonVariant(
120+
val background: @Composable () -> Color,
121+
val color: @Composable () -> Color,
122+
val hasBorder: Boolean,
123+
) {
124+
OUTLINE(
125+
background = { DesignSystemTheme.activeColor.Basic.Background.Transparent.Full },
126+
color = { DesignSystemTheme.activeColor.Basic.Text.Emphasis100.Default },
127+
hasBorder = true,
128+
),
129+
FILLED(
130+
background = { DesignSystemTheme.activeColor.Basic.Background.Transparent.Semi },
131+
color = { DesignSystemTheme.activeColor.Basic.Text.Emphasis100.Default },
132+
hasBorder = false,
133+
),
134+
GHOST(
135+
background = { DesignSystemTheme.activeColor.Basic.Background.Transparent.Full },
136+
color = { DesignSystemTheme.activeColor.Basic.Text.Emphasis100.Default },
137+
hasBorder = false,
138+
),
139+
BRAND(
140+
background = { DesignSystemTheme.colors.brand.Origin.Default },
141+
color = { DesignSystemTheme.colors.brand.OnOrigin.Default },
142+
hasBorder = false,
143+
),
144+
}
145+
146+
enum class DSButtonSize(
147+
val size: @Composable () -> Dp,
148+
val paddingFull: @Composable () -> Dp,
149+
val paddingH: @Composable () -> Dp,
150+
val spacing: @Composable () -> Dp,
151+
val borderRadius: @Composable () -> Dp,
152+
val borderHeight: @Composable () -> Dp,
153+
val iconSize: @Composable () -> Dp,
154+
val textSize: @Composable () -> TextUnit,
155+
val fontWeight: @Composable () -> Int,
156+
val lineHeight: @Composable () -> TextUnit,
157+
) {
158+
MEDIUM(
159+
textSize = { DesignSystemTheme.typography.bodyMd.fontSize },
160+
lineHeight = { DesignSystemTheme.typography.bodyMd.lineHeight },
161+
size = { DesignSystemTheme.dimensions.sizing.baseMd },
162+
paddingFull = { DesignSystemTheme.dimensions.spacing.fixedXs },
163+
paddingH = { DesignSystemTheme.dimensions.spacing.fixedMd },
164+
spacing = { DesignSystemTheme.dimensions.spacing.fixedXs },
165+
borderRadius = { DesignSystemTheme.dimensions.border.radiusXs },
166+
borderHeight = { DesignSystemTheme.dimensions.border.height3xs },
167+
iconSize = { 20.dp },
168+
fontWeight = { 700 }
169+
),
170+
SMALL(
171+
size = { DesignSystemTheme.dimensions.sizing.baseSm },
172+
textSize = { DesignSystemTheme.typography.bodySm.fontSize },
173+
lineHeight = { DesignSystemTheme.typography.bodyMd.lineHeight },
174+
paddingFull = { DesignSystemTheme.dimensions.spacing.fixed3xs },
175+
paddingH = { DesignSystemTheme.dimensions.spacing.fixedSm },
176+
spacing = { DesignSystemTheme.dimensions.spacing.fixed2xs },
177+
borderRadius = { DesignSystemTheme.dimensions.border.radiusXs },
178+
borderHeight = { DesignSystemTheme.dimensions.border.height3xs },
179+
iconSize = { 16.dp },
180+
fontWeight = { 700 }
181+
)
182+
}
183+
184+
enum class DSButtonWidth { AUTO, FULL_WIDTH }
185+
186+
private class DSButtonPreviewProvider : PreviewParameterProvider<DSButtonPreviewParameterType> {
187+
override val values = DSButtonVariant.entries.flatMap { variant ->
188+
DSButtonSize.entries.flatMap { size ->
189+
DSButtonWidth.entries.flatMap { width ->
190+
listOf(true, false).map { enabled ->
191+
DSButtonPreviewParameterType(
192+
variant = variant,
193+
size = size,
194+
width = width,
195+
enabled = enabled
196+
)
197+
}
198+
}
199+
}
200+
}.asSequence()
201+
}
202+
203+
private class DSButtonPreviewParameterType(
204+
val size: DSButtonSize,
205+
val variant: DSButtonVariant,
206+
val width: DSButtonWidth,
207+
val enabled: Boolean
208+
)
209+
210+
@Composable
211+
@Preview
212+
private fun DSButtonPreview(
213+
@PreviewParameter(DSButtonPreviewProvider::class) previewType: DSButtonPreviewParameterType
214+
) {
215+
DesignSystemTheme {
216+
Box(
217+
modifier = Modifier
218+
.width(150.dp)
219+
.background(Color.White)
220+
.padding(5.dp)
221+
) {
222+
DSButton(
223+
callback = {},
224+
text = previewType.width.name,
225+
size = previewType.size,
226+
width = previewType.width,
227+
variant = previewType.variant,
228+
enabled = previewType.enabled
229+
)
230+
}
231+
}
232+
}

‎foundation/src/main/java/com/dbsystel/designsystem/foundation/theme/DesignSystemColorScheme.kt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -315,10 +315,10 @@ class DSColorVariant private constructor(
315315
colorMap.getValue(colorName + 12),
316316
colorMap.getValue(colorName + 11),
317317
colorMap.getValue(colorName + 10),
318-
colorMap.getValue(colorName + 6).copy(1f),
319-
colorMap.getValue(colorName + 6).copy(0.92f),
320-
colorMap.getValue(colorName + 6).copy(0.84f),
321-
colorMap.getValue(colorName + 6).copy(0.76f),
318+
colorMap.getValue(colorName + 6).copy(0f),
319+
colorMap.getValue(colorName + 6).copy(0.08f),
320+
colorMap.getValue(colorName + 6).copy(0.16f),
321+
colorMap.getValue(colorName + 6).copy(0.24f),
322322
colorMap.getValue(colorName + 3),
323323
colorMap.getValue(colorName + 4),
324324
colorMap.getValue(colorName + 5),

0 commit comments

Comments
 (0)