Add IconColorButton (CloseButton)
Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37586
This commit is contained in:
Benoit Marty
parent
99b3e6b547
commit
8d14ac67e9
8 changed files with 128 additions and 152 deletions
|
|
@ -12,9 +12,7 @@ import io.element.android.libraries.designsystem.R
|
|||
// This list and all the drawable it contains should be removed at some point.
|
||||
// All the icons should be defined in Compound.
|
||||
internal val iconsOther = listOf(
|
||||
R.drawable.ic_cancel,
|
||||
R.drawable.ic_notification_small,
|
||||
R.drawable.ic_plus_composer,
|
||||
R.drawable.ic_stop,
|
||||
R.drawable.pin,
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
package io.element.android.libraries.designsystem.theme.components
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.compound.theme.ElementTheme
|
||||
import io.element.android.compound.tokens.generated.CompoundIcons
|
||||
import io.element.android.libraries.designsystem.preview.ElementPreview
|
||||
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
|
||||
import io.element.android.libraries.ui.strings.CommonStrings
|
||||
|
||||
/**
|
||||
* Button with colored background.
|
||||
* Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37586
|
||||
*/
|
||||
@Composable
|
||||
fun IconColorButton(
|
||||
onClick: () -> Unit,
|
||||
imageVector: ImageVector,
|
||||
modifier: Modifier = Modifier,
|
||||
buttonSize: ButtonSize = ButtonSize.Large,
|
||||
iconColorButtonStyle: IconColorButtonStyle = IconColorButtonStyle.Primary,
|
||||
) {
|
||||
val bgColor = when (iconColorButtonStyle) {
|
||||
IconColorButtonStyle.Primary -> ElementTheme.colors.iconPrimary
|
||||
IconColorButtonStyle.Secondary -> ElementTheme.colors.iconSecondary
|
||||
IconColorButtonStyle.Disabled -> ElementTheme.colors.iconDisabled
|
||||
}
|
||||
IconButton(
|
||||
modifier = modifier
|
||||
.size(48.dp),
|
||||
onClick = onClick
|
||||
) {
|
||||
Icon(
|
||||
modifier = modifier
|
||||
.clip(CircleShape)
|
||||
.size(buttonSize.toContainerSize())
|
||||
.background(bgColor)
|
||||
.padding(buttonSize.toContainerPadding()),
|
||||
imageVector = imageVector,
|
||||
contentDescription = stringResource(CommonStrings.action_close),
|
||||
tint = ElementTheme.colors.iconOnSolidPrimary
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
enum class IconColorButtonStyle {
|
||||
Primary,
|
||||
Secondary,
|
||||
Disabled,
|
||||
}
|
||||
|
||||
private fun ButtonSize.toContainerSize() = when (this) {
|
||||
ButtonSize.Small -> 20.dp
|
||||
ButtonSize.Medium -> 24.dp
|
||||
ButtonSize.Large,
|
||||
ButtonSize.MediumLowPadding,
|
||||
ButtonSize.LargeLowPadding -> 30.dp
|
||||
}
|
||||
|
||||
private fun ButtonSize.toContainerPadding() = when (this) {
|
||||
ButtonSize.Small -> 2.dp
|
||||
ButtonSize.Medium -> 2.dp
|
||||
ButtonSize.Large,
|
||||
ButtonSize.MediumLowPadding,
|
||||
ButtonSize.LargeLowPadding -> 3.dp
|
||||
}
|
||||
|
||||
@PreviewsDayNight
|
||||
@Composable
|
||||
internal fun IconColorButtonPreview() = ElementPreview {
|
||||
Column {
|
||||
listOf(
|
||||
IconColorButtonStyle.Primary,
|
||||
IconColorButtonStyle.Secondary,
|
||||
IconColorButtonStyle.Disabled,
|
||||
).forEach { style ->
|
||||
Row(
|
||||
modifier = Modifier.padding(4.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(4.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
listOf(ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small).forEach { size ->
|
||||
IconColorButton(
|
||||
onClick = {},
|
||||
imageVector = CompoundIcons.Close(),
|
||||
buttonSize = size,
|
||||
iconColorButtonStyle = style,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!--
|
||||
~ Copyright 2023 New Vector Ltd.
|
||||
~
|
||||
~ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
~ Please see LICENSE files in the repository root for full details.
|
||||
-->
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="30dp"
|
||||
android:height="30dp"
|
||||
android:viewportWidth="30"
|
||||
android:viewportHeight="30">
|
||||
<path
|
||||
android:pathData="M4.393,4.393C-1.464,10.251 -1.464,19.749 4.393,25.607C10.251,31.465 19.749,31.465 25.607,25.607C31.465,19.749 31.465,10.251 25.607,4.393C19.749,-1.464 10.251,-1.464 4.393,4.393ZM11.465,19.95L15,16.414L18.535,19.95C18.736,20.15 18.972,20.25 19.243,20.25C19.514,20.25 19.749,20.15 19.95,19.95C20.15,19.749 20.25,19.514 20.25,19.243C20.25,18.972 20.15,18.736 19.95,18.535L16.414,15L19.95,11.465C20.15,11.264 20.25,11.028 20.25,10.757C20.25,10.486 20.15,10.251 19.95,10.05C19.749,9.85 19.514,9.75 19.243,9.75C18.972,9.75 18.736,9.85 18.535,10.05L15,13.586L11.465,10.05C11.264,9.85 11.028,9.75 10.757,9.75C10.486,9.75 10.251,9.85 10.05,10.05C9.85,10.251 9.75,10.486 9.75,10.757C9.75,11.028 9.85,11.264 10.05,11.465L13.586,15L10.05,18.535C9.85,18.736 9.75,18.972 9.75,19.243C9.75,19.514 9.85,19.749 10.05,19.95C10.251,20.15 10.486,20.25 10.757,20.25C11.028,20.25 11.264,20.15 11.465,19.95Z"
|
||||
android:fillColor="#ffffff"
|
||||
android:fillType="evenOdd"/>
|
||||
</vector>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!--
|
||||
~ Copyright 2023 New Vector Ltd.
|
||||
~
|
||||
~ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
~ Please see LICENSE files in the repository root for full details.
|
||||
-->
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="30dp"
|
||||
android:height="30dp"
|
||||
android:viewportWidth="30"
|
||||
android:viewportHeight="30">
|
||||
<path
|
||||
android:pathData="M0,15C0,23.284 6.716,30 15,30C23.284,30 30,23.284 30,15C30,6.716 23.284,0 15,0C6.716,0 0,6.716 0,15ZM16,21V16H21C21.283,16 21.521,15.904 21.712,15.712C21.904,15.521 22,15.283 22,15C22,14.717 21.904,14.479 21.712,14.288C21.521,14.096 21.283,14 21,14H16V9C16,8.717 15.904,8.479 15.712,8.288C15.521,8.096 15.283,8 15,8C14.717,8 14.479,8.096 14.288,8.288C14.096,8.479 14,8.717 14,9L14,14L9,14C8.717,14 8.479,14.096 8.288,14.288C8.096,14.479 8,14.717 8,15C8,15.283 8.096,15.521 8.288,15.712C8.479,15.904 8.717,16 9,16H14V21C14,21.283 14.096,21.521 14.288,21.712C14.479,21.904 14.717,22 15,22C15.283,22 15.521,21.904 15.712,21.712C15.904,21.521 16,21.283 16,21Z"
|
||||
android:fillColor="#ffffff"
|
||||
android:fillType="evenOdd"/>
|
||||
<path
|
||||
android:pathData="M14,16H9C8.717,16 8.479,15.904 8.288,15.712C8.096,15.521 8,15.283 8,15C8,14.717 8.096,14.479 8.288,14.288C8.479,14.096 8.717,14 9,14H14V9C14,8.717 14.096,8.479 14.288,8.288C14.479,8.096 14.717,8 15,8C15.283,8 15.521,8.096 15.712,8.288C15.904,8.479 16,8.717 16,9V14H21C21.283,14 21.521,14.096 21.712,14.288C21.904,14.479 22,14.717 22,15C22,15.283 21.904,15.521 21.712,15.712C21.521,15.904 21.283,16 21,16H16V21C16,21.283 15.904,21.521 15.712,21.712C15.521,21.904 15.283,22 15,22C14.717,22 14.479,21.904 14.288,21.712C14.096,21.521 14,21.283 14,21V16Z"
|
||||
android:fillColor="#00000000"/>
|
||||
</vector>
|
||||
Loading…
Add table
Add a link
Reference in a new issue