Fix Chip background not clipped when pressed (#1903)

* Clip to ChipShape before applying selectable * Updated snapshots * Dismissible chip - clip to shape before clickable * Updated snapshots --------- Co-authored-by: Andra-Georgescu <Andra.Georgescu@skyscanner.net> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Skyscanner · Mar 18, 2024 · be9c7d8 · be9c7d8
1 parent a7c155f
commit be9c7d8
Showing 55 changed files with 14 additions and 11 deletions.
diff --git a/...et.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content.png b/...et.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content.png
diff --git a/...ner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content_inputText.png b/...ner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content_inputText.png
diff --git a/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithStickyChip.png b/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithStickyChip.png
diff --git a/...compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithoutStickyChip.png b/...compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithoutStickyChip.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_default.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_default.Wrap.png
diff --git a/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithStickyChip.png b/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithStickyChip.png
diff --git a/...compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithoutStickyChip.png b/...compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithoutStickyChip.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.Wrap.png
diff --git a/...k.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithStickyChip.png b/...k.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithStickyChip.png
diff --git a/...ompose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithoutStickyChip.png b/...ompose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithoutStickyChip.png
diff --git a/...canner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.Wrap.png b/...canner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.Wrap.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Rail.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Rail.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Wrap.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Wrap.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Rail.png b/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Rail.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Wrap.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Rail.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Rail.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Wrap.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Wrap.png
diff --git a/.../net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryTest_chip_grid.png b/.../net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryTest_chip_grid.png
diff --git a/...et.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content.png b/...et.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content.png
diff --git a/...ner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content_inputText.png b/...ner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content_inputText.png
diff --git a/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithStickyChip.png b/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithStickyChip.png
diff --git a/...compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithoutStickyChip.png b/...compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithoutStickyChip.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_default.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_default.Wrap.png
diff --git a/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithStickyChip.png b/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithStickyChip.png
diff --git a/...compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithoutStickyChip.png b/...compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithoutStickyChip.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.Wrap.png
diff --git a/...k.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithStickyChip.png b/...k.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithStickyChip.png
diff --git a/...ompose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithoutStickyChip.png b/...ompose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithoutStickyChip.png
diff --git a/...canner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.Wrap.png b/...canner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.Wrap.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Rail.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Rail.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Wrap.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Wrap.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Rail.png b/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Rail.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Wrap.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Rail.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Rail.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Wrap.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Wrap.png
diff --git a/.../net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryTest_chip_grid.png b/.../net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryTest_chip_grid.png
diff --git a/...et.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content.png b/...et.skyscanner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content.png
diff --git a/...ner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content_inputText.png b/...ner.backpack.compose.appsearchmodal.BpkAppSearchModalTest_content_inputText.png
diff --git a/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithStickyChip.png b/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithStickyChip.png
diff --git a/...compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithoutStickyChip.png b/...compose.chipgroup.BpkMultiSelectChipGroupTest_default.RailWithoutStickyChip.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_default.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_default.Wrap.png
diff --git a/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithStickyChip.png b/...ck.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithStickyChip.png
diff --git a/...compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithoutStickyChip.png b/...compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.RailWithoutStickyChip.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_dark.Wrap.png
diff --git a/...k.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithStickyChip.png b/...k.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithStickyChip.png
diff --git a/...ompose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithoutStickyChip.png b/...ompose.chipgroup.BpkMultiSelectChipGroupTest_on_image.RailWithoutStickyChip.png
diff --git a/...canner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.Wrap.png b/...canner.backpack.compose.chipgroup.BpkMultiSelectChipGroupTest_on_image.Wrap.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Rail.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Rail.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Wrap.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_default.Wrap.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Rail.png b/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Rail.png
diff --git a/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Wrap.png b/...scanner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onDark.Wrap.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Rail.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Rail.png
diff --git a/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Wrap.png b/...canner.backpack.compose.chipgroup.BpkSingleSelectChipGroupTest_onImage.Wrap.png
diff --git a/.../net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryTest_chip_grid.png b/.../net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryTest_chip_grid.png
diff --git a/...pack-compose/src/main/kotlin/net/skyscanner/backpack/compose/chip/internal/BpkChipImpl.kt b/...pack-compose/src/main/kotlin/net/skyscanner/backpack/compose/chip/internal/BpkChipImpl.kt
@@ -20,7 +20,6 @@ package net.skyscanner.backpack.compose.chip.internal
 
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -33,6 +32,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -80,12 +80,13 @@ internal fun BpkChipImpl(
         type = type,
         interactionSource = interactionSource,
         modifier = modifier.applyIf(onSelectedChange != null) {
-            selectable(
-                selected = selected,
-                enabled = enabled,
-                interactionSource = interactionSource,
-                indication = LocalIndication.current,
-            ) { onSelectedChange!!.invoke(!selected) }
+            clip(ChipShape)
+                .selectable(
+                    selected = selected,
+                    enabled = enabled,
+                    interactionSource = interactionSource,
+                    indication = rememberRipple(),
+                ) { onSelectedChange!!.invoke(!selected) }
         },
     )
 }
@@ -108,10 +109,11 @@ internal fun BpkDismissibleChipImpl(
         type = BpkChipType.Dismiss,
         interactionSource = interactionSource,
         modifier = modifier.applyIf(onClick != null) {
-            clickable(
-                interactionSource = interactionSource,
-                indication = LocalIndication.current,
-            ) { onClick!!.invoke() }
+            clip(ChipShape)
+                .clickable(
+                    interactionSource = interactionSource,
+                    indication = rememberRipple(),
+                ) { onClick!!.invoke() }
         },
     )
 }
@@ -199,6 +201,7 @@ internal fun BpkChipImpl(
                         default = style.dismissibleTrailingIconColor,
                         pressed = style.dismissibleTrailingIconPressedColor,
                     )
+
                     selected -> style.selectedContentColor
                     else -> interactionSource.animateAsColor(
                         default = style.contentColor,