Fix chipgroup spacing (#1730)

* Fix chipgroup spacing The spacing was originally around items, rather than between items. Now that FlowRow added support for spacing between items we can correct the component and only apply spacing between items. * Updated snapshots for 'default' * Updated snapshots for 'rtl' * Updated snapshots for 'dm' * Trigger CI --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Skyscanner · Sep 20, 2023 · 3b735c7 · 3b735c7
1 parent 673ecc9
commit 3b735c7
Show file tree

Hide file tree

Showing 63 changed files with 10 additions and 8 deletions.
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/...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/...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/...et/skyscanner/backpack/compose/chipgroup/multiple/internal/BpkMultiSelectChipGroupImpl.kt b/...et/skyscanner/backpack/compose/chipgroup/multiple/internal/BpkMultiSelectChipGroupImpl.kt
@@ -21,10 +21,10 @@ package net.skyscanner.backpack.compose.chipgroup.multiple.internal
 import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.IntrinsicSize
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
@@ -69,13 +69,13 @@ internal fun BpkMultiSelectChipGroupImpl(
                 LazyRow(
                     modifier = Modifier.selectableGroup(),
                     state = rememberLazyListState(),
+                    horizontalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
                 ) {
                     items(items = chips) { chip ->
                         ChipItem(
                             chip = chip,
                             style = style,
                             modifier = Modifier
-                                .padding(PaddingValues(BpkSpacing.Sm))
                                 .semantics { role = Role.Checkbox },)
                     }
                 }
@@ -85,13 +85,14 @@ internal fun BpkMultiSelectChipGroupImpl(
         BpkMultiChipGroupType.Wrap -> {
             FlowRow(
                 modifier = modifier.selectableGroup(),
+                horizontalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
+                verticalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
             ) {
                 chips.forEach { chip ->
                     ChipItem(
                         chip = chip,
                         style = style,
                         modifier = Modifier
-                            .padding(PaddingValues(BpkSpacing.Sm))
                             .semantics { role = Role.Checkbox },)
                 }
             }
@@ -108,12 +109,12 @@ private fun StickyChip(
     val interactionSource = remember { MutableInteractionSource() }
     Row(
         modifier = modifier
-            .padding(PaddingValues(BpkSpacing.Sm))
+            .padding(end = BpkSpacing.Md)
             .height(IntrinsicSize.Min),
     ) {
         BpkChipImpl(
             modifier = Modifier
-                .padding(PaddingValues(end = BpkSpacing.Md))
+                .padding(end = BpkSpacing.Md)
                 .semantics {
                     role = Role.Button
                     contentDescription = chip.text

diff --git a/...net/skyscanner/backpack/compose/chipgroup/single/internal/BpkSingleSelectChipGroupImpl.kt b/...net/skyscanner/backpack/compose/chipgroup/single/internal/BpkSingleSelectChipGroupImpl.kt
@@ -18,10 +18,9 @@
 
 package net.skyscanner.backpack.compose.chipgroup.single.internal
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -52,6 +51,7 @@ internal fun BpkSingleSelectChipGroupImpl(
             LazyRow(
                 modifier = modifier.selectableGroup(),
                 state = rememberLazyListState(),
+                horizontalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
             ) {
                 itemsIndexed(items = chips) { index, chip ->
                     ChipItem(chip, index == selectedIndex, style) {
@@ -64,6 +64,8 @@ internal fun BpkSingleSelectChipGroupImpl(
         BpkSingleChipGroupType.Wrap -> {
             FlowRow(
                 modifier = modifier.selectableGroup(),
+                horizontalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
+                verticalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
             ) {
                 chips.forEachIndexed { index, chip ->
                     ChipItem(chip, index == selectedIndex, style) {
@@ -85,7 +87,6 @@ private fun ChipItem(
 ) {
     BpkChip(
         modifier = modifier
-            .padding(PaddingValues(BpkSpacing.Sm))
             .semantics { role = Role.RadioButton },
         text = chip.text,
         icon = chip.icon,

diff --git a/docs/compose/Chip/screenshots/default.png b/docs/compose/Chip/screenshots/default.png
diff --git a/docs/compose/Chip/screenshots/default_dm.png b/docs/compose/Chip/screenshots/default_dm.png
diff --git a/docs/compose/Chip/screenshots/on-dark.png b/docs/compose/Chip/screenshots/on-dark.png
diff --git a/docs/compose/Chip/screenshots/on-dark_dm.png b/docs/compose/Chip/screenshots/on-dark_dm.png
diff --git a/docs/compose/Chip/screenshots/on-image.png b/docs/compose/Chip/screenshots/on-image.png
diff --git a/docs/compose/Chip/screenshots/on-image_dm.png b/docs/compose/Chip/screenshots/on-image_dm.png
diff --git a/docs/compose/ChipGroup/screenshots/multi-select-rail-with-no-sticky-chip.png b/docs/compose/ChipGroup/screenshots/multi-select-rail-with-no-sticky-chip.png
diff --git a/docs/compose/ChipGroup/screenshots/multi-select-rail-with-no-sticky-chip_dm.png b/docs/compose/ChipGroup/screenshots/multi-select-rail-with-no-sticky-chip_dm.png
diff --git a/docs/compose/ChipGroup/screenshots/multi-select-rail.png b/docs/compose/ChipGroup/screenshots/multi-select-rail.png
diff --git a/docs/compose/ChipGroup/screenshots/multi-select-rail_dm.png b/docs/compose/ChipGroup/screenshots/multi-select-rail_dm.png
diff --git a/docs/compose/ChipGroup/screenshots/multi-select-wrap.png b/docs/compose/ChipGroup/screenshots/multi-select-wrap.png
diff --git a/docs/compose/ChipGroup/screenshots/multi-select-wrap_dm.png b/docs/compose/ChipGroup/screenshots/multi-select-wrap_dm.png
diff --git a/docs/compose/ChipGroup/screenshots/single-select-rail.png b/docs/compose/ChipGroup/screenshots/single-select-rail.png
diff --git a/docs/compose/ChipGroup/screenshots/single-select-rail_dm.png b/docs/compose/ChipGroup/screenshots/single-select-rail_dm.png
diff --git a/docs/compose/ChipGroup/screenshots/single-select-wrap.png b/docs/compose/ChipGroup/screenshots/single-select-wrap.png
diff --git a/docs/compose/ChipGroup/screenshots/single-select-wrap_dm.png b/docs/compose/ChipGroup/screenshots/single-select-wrap_dm.png