[Compound] implement IconButton changes (#1049)

* Compound: implement IconButton changes.

* Use `LocalContentColor` for tinting

* Update screenshots

* Add changelog

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
Jorge Martin Espinosa 2023-08-11 12:01:18 +02:00 committed by GitHub
parent c6503e87f7
commit d08631fa07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 45 additions and 20 deletions

1
changelog.d/1049.misc Normal file
View file

@ -0,0 +1 @@
Compound: customise `IconButton` component.

View file

@ -17,16 +17,22 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup
import io.element.android.libraries.theme.ElementTheme
// Figma designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=1182%3A48861&mode=design&t=Shlcvznm1oUyqGC2-1
@Composable
fun IconButton(
@ -36,11 +42,15 @@ fun IconButton(
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable () -> Unit
) {
val colors = IconButtonDefaults.iconButtonColors(
contentColor = LocalContentColor.current,
disabledContentColor = ElementTheme.colors.iconDisabled,
)
androidx.compose.material3.IconButton(
onClick = onClick,
modifier = modifier,
enabled = enabled,
colors = IconButtonDefaults.iconButtonColors(),
colors = colors,
interactionSource = interactionSource,
content = content,
)
@ -53,12 +63,26 @@ internal fun IconButtonPreview() =
@Composable
private fun ContentToPreview() {
Row {
IconButton(onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
Column {
CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.iconPrimary) {
Row {
IconButton(onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
}
IconButton(enabled = false, onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
}
}
}
IconButton(enabled = false, onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
CompositionLocalProvider(LocalContentColor provides ElementTheme.colors.iconSecondary) {
Row {
IconButton(onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
}
IconButton(enabled = false, onClick = {}) {
Icon(imageVector = Icons.Filled.Close, contentDescription = "")
}
}
}
}
}

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e3b5474c29a881c61032396785a5c62732fc06f1e551fd6fae8ab620782774ce
size 395492
oid sha256:5a55394e59395b36f7a1e964bdce7d9f7d5f33252c463d0de7a87c213117231a
size 395169

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:cde41cd981bd9ed350b6c4439cfda793946e2b7c14ea701af8fd5bb528329661
size 395494
oid sha256:44acd9adb83a35d38a9da31f8055988740d238e459d7e77145c5c2ad53725ad6
size 395169

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e3b5474c29a881c61032396785a5c62732fc06f1e551fd6fae8ab620782774ce
size 395492
oid sha256:5a55394e59395b36f7a1e964bdce7d9f7d5f33252c463d0de7a87c213117231a
size 395169

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5e11d4107dc8894408eac31625b4061a59e2b5eb955229d4abc64ebb1191cdc9
size 15614
oid sha256:78bb8fcf8275cd3568f6f254c4d7ef1a4e7d251162c8b21bf2c85baaf2ab6c8d
size 15257

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a1805563eccf45f507152722511cacfa3f0411d1ccb90dd8d539f9a4a697b56f
size 14459
oid sha256:43d8d24a65ab1174f6e262563b898d3168ce1e38a1af8e53b1a5a8af205f70f5
size 14103

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0186b4f2d64220e1b0341f5007f0577d82a0c0424ad53937b6669e772fbecc4d
size 7711
oid sha256:c37c5cb1394da3a0b28fdd749f356f8a5d132f5408a88bc6e367052452a828d0
size 7607

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:19db35d98bc8f6e4525e297616b564c9c2acbc2e9f7422292aca4a5d485c4314
size 7682
oid sha256:0de49c41130b525fd6baf687ccd63b3d98997d9a31d23a0ea826d0dbe7c1998e
size 10404