[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:
parent
c6503e87f7
commit
d08631fa07
9 changed files with 45 additions and 20 deletions
1
changelog.d/1049.misc
Normal file
1
changelog.d/1049.misc
Normal file
|
|
@ -0,0 +1 @@
|
|||
Compound: customise `IconButton` component.
|
||||
|
|
@ -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 = "")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:e3b5474c29a881c61032396785a5c62732fc06f1e551fd6fae8ab620782774ce
|
||||
size 395492
|
||||
oid sha256:5a55394e59395b36f7a1e964bdce7d9f7d5f33252c463d0de7a87c213117231a
|
||||
size 395169
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:cde41cd981bd9ed350b6c4439cfda793946e2b7c14ea701af8fd5bb528329661
|
||||
size 395494
|
||||
oid sha256:44acd9adb83a35d38a9da31f8055988740d238e459d7e77145c5c2ad53725ad6
|
||||
size 395169
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:e3b5474c29a881c61032396785a5c62732fc06f1e551fd6fae8ab620782774ce
|
||||
size 395492
|
||||
oid sha256:5a55394e59395b36f7a1e964bdce7d9f7d5f33252c463d0de7a87c213117231a
|
||||
size 395169
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:5e11d4107dc8894408eac31625b4061a59e2b5eb955229d4abc64ebb1191cdc9
|
||||
size 15614
|
||||
oid sha256:78bb8fcf8275cd3568f6f254c4d7ef1a4e7d251162c8b21bf2c85baaf2ab6c8d
|
||||
size 15257
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:a1805563eccf45f507152722511cacfa3f0411d1ccb90dd8d539f9a4a697b56f
|
||||
size 14459
|
||||
oid sha256:43d8d24a65ab1174f6e262563b898d3168ce1e38a1af8e53b1a5a8af205f70f5
|
||||
size 14103
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:0186b4f2d64220e1b0341f5007f0577d82a0c0424ad53937b6669e772fbecc4d
|
||||
size 7711
|
||||
oid sha256:c37c5cb1394da3a0b28fdd749f356f8a5d132f5408a88bc6e367052452a828d0
|
||||
size 7607
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:19db35d98bc8f6e4525e297616b564c9c2acbc2e9f7422292aca4a5d485c4314
|
||||
size 7682
|
||||
oid sha256:0de49c41130b525fd6baf687ccd63b3d98997d9a31d23a0ea826d0dbe7c1998e
|
||||
size 10404
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue