KOA-5106 Update checkbox & radiobuttion paddings (#1063)

These didn't match the design system
Skyscanner · May 31, 2022 · 0ccbcc4 · 0ccbcc4
1 parent c24a4ed
commit 0ccbcc4
Show file tree

Hide file tree

Showing 60 changed files with 7 additions and 3 deletions.
diff --git a/Backpack/src/main/java/net/skyscanner/backpack/checkbox/BpkCheckbox.kt b/Backpack/src/main/java/net/skyscanner/backpack/checkbox/BpkCheckbox.kt
@@ -31,7 +31,7 @@ import net.skyscanner.backpack.util.use
 open class BpkCheckbox @JvmOverloads constructor(
   context: Context,
   attrs: AttributeSet? = null,
-  defStyleAttr: Int = 0
+  defStyleAttr: Int = 0,
 ) : AppCompatCheckBox(
   createContextThemeWrapper(
     createContextThemeWrapper(context, attrs, androidx.appcompat.R.attr.checkboxStyle),
@@ -78,6 +78,8 @@ open class BpkCheckbox @JvmOverloads constructor(
         intArrayOf(textDisabledColor, textEnabledColor)
       )
     )
+
+    setPaddingRelative(resources.getDimensionPixelSize(R.dimen.bpkSpacingSm), paddingTop, paddingEnd, paddingBottom)
   }
 
   override fun setEnabled(enabled: Boolean) {

diff --git a/Backpack/src/main/java/net/skyscanner/backpack/radiobutton/BpkRadioButton.kt b/Backpack/src/main/java/net/skyscanner/backpack/radiobutton/BpkRadioButton.kt
@@ -78,6 +78,8 @@ open class BpkRadioButton @JvmOverloads constructor(
         intArrayOf(textDisabledColor, textEnabledColor),
       )
     )
+
+    setPaddingRelative(resources.getDimensionPixelSize(R.dimen.bpkSpacingSm), paddingTop, paddingEnd, paddingBottom)
   }
 
   override fun setEnabled(enabled: Boolean) {

diff --git a/...creenshots/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Checked.png b/...creenshots/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Checked.png
diff --git a/...ts/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_CheckedDisabled.png b/...ts/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_CheckedDisabled.png
diff --git a/...creenshots/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Default.png b/...creenshots/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Default.png
diff --git a/...reenshots/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Disabled.png b/...reenshots/default/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Disabled.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_checked.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_checked.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_customContent.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_customContent.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_default.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_default.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_disabledChecked.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_disabledChecked.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_disabledUnchecked.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_disabledUnchecked.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_intermediate.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_intermediate.png
diff --git a/app/screenshots/default/compose.checkbox.BpkCheckboxTest_unchecked.png b/app/screenshots/default/compose.checkbox.BpkCheckboxTest_unchecked.png
diff --git a/app/screenshots/default/compose.radiobutton.BpkRadioButtonTest_customContent.png b/app/screenshots/default/compose.radiobutton.BpkRadioButtonTest_customContent.png
diff --git a/app/screenshots/default/compose.radiobutton.BpkRadioButtonTest_defaultChecked.png b/app/screenshots/default/compose.radiobutton.BpkRadioButtonTest_defaultChecked.png
diff --git a/...screenshots/default/compose.radiobutton.BpkRadioButtonTest_defaultUnchecked.png b/...screenshots/default/compose.radiobutton.BpkRadioButtonTest_defaultUnchecked.png
diff --git a/app/screenshots/default/compose.radiobutton.BpkRadioButtonTest_disabledChecked.png b/app/screenshots/default/compose.radiobutton.BpkRadioButtonTest_disabledChecked.png
diff --git a/...creenshots/default/compose.radiobutton.BpkRadioButtonTest_disabledUnchecked.png b/...creenshots/default/compose.radiobutton.BpkRadioButtonTest_disabledUnchecked.png
diff --git a/...s/default/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Checked.png b/...s/default/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Checked.png
diff --git a/...t/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_CheckedDisabled.png b/...t/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_CheckedDisabled.png
diff --git a/...s/default/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Default.png b/...s/default/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Default.png
diff --git a/.../default/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Disabled.png b/.../default/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Disabled.png
diff --git a/app/screenshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Checked.png b/app/screenshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Checked.png
diff --git a/...enshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_CheckedDisabled.png b/...enshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_CheckedDisabled.png
diff --git a/app/screenshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Default.png b/app/screenshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Default.png
diff --git a/app/screenshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Disabled.png b/app/screenshots/dm/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Disabled.png
diff --git a/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_checked.png b/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_checked.png
diff --git a/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_default.png b/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_default.png
diff --git a/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_disabledChecked.png b/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_disabledChecked.png
diff --git a/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_disabledUnchecked.png b/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_disabledUnchecked.png
diff --git a/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_intermediate.png b/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_intermediate.png
diff --git a/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_unchecked.png b/app/screenshots/dm/compose.checkbox.BpkCheckboxTest_unchecked.png
diff --git a/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_defaultChecked.png b/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_defaultChecked.png
diff --git a/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_defaultUnchecked.png b/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_defaultUnchecked.png
diff --git a/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_disabledChecked.png b/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_disabledChecked.png
diff --git a/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_disabledUnchecked.png b/app/screenshots/dm/compose.radiobutton.BpkRadioButtonTest_disabledUnchecked.png
diff --git a/...nshots/dm/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Checked.png b/...nshots/dm/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Checked.png
diff --git a/...m/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_CheckedDisabled.png b/...m/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_CheckedDisabled.png
diff --git a/...nshots/dm/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Default.png b/...nshots/dm/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Default.png
diff --git a/...shots/dm/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Disabled.png b/...shots/dm/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Disabled.png
diff --git a/app/screenshots/rtl/compose.checkbox.BpkCheckboxTest_default.png b/app/screenshots/rtl/compose.checkbox.BpkCheckboxTest_default.png
diff --git a/app/screenshots/rtl/compose.radiobutton.BpkRadioButtonTest_defaultUnchecked.png b/app/screenshots/rtl/compose.radiobutton.BpkRadioButtonTest_defaultUnchecked.png
diff --git a/...screenshots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Checked.png b/...screenshots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Checked.png
diff --git a/...ots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_CheckedDisabled.png b/...ots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_CheckedDisabled.png
diff --git a/...screenshots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Default.png b/...screenshots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Default.png
diff --git a/...creenshots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Disabled.png b/...creenshots/themed/checkbox.BpkCheckboxTests_screenshotTestCheckbox_Disabled.png
diff --git a/...ts/themed/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Checked.png b/...ts/themed/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Checked.png
diff --git a/...d/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_CheckedDisabled.png b/...d/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_CheckedDisabled.png
diff --git a/...ts/themed/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Default.png b/...ts/themed/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Default.png
diff --git a/...s/themed/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Disabled.png b/...s/themed/radiobutton.BpkRadioButtonTests_screenshotTestRadioButton_Disabled.png
diff --git a/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/checkbox/BpkCheckbox.kt b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/checkbox/BpkCheckbox.kt
@@ -128,7 +128,7 @@ fun BpkCheckbox(
   ) {
 
     BpkCheckboxImpl(
-      modifier = Modifier.padding(end = BpkSpacing.Sm),
+      modifier = Modifier.padding(end = BpkSpacing.Md),
       state = state,
       enabled = enabled,
       interactionSource = interactionSource,

diff --git a/...ack-compose/src/main/kotlin/net/skyscanner/backpack/compose/radiobutton/BpkRadioButton.kt b/...ack-compose/src/main/kotlin/net/skyscanner/backpack/compose/radiobutton/BpkRadioButton.kt
@@ -74,7 +74,7 @@ fun BpkRadioButton(
 
   Row(
     verticalAlignment = Alignment.CenterVertically,
-    horizontalArrangement = Arrangement.spacedBy(BpkDimension.Spacing.Sm),
+    horizontalArrangement = Arrangement.spacedBy(BpkDimension.Spacing.Md),
     modifier = modifier.applyIf(onClick != null) {
       selectable(
         selected = selected,

diff --git a/docs/compose/Checkbox/screenshots/default.png b/docs/compose/Checkbox/screenshots/default.png
diff --git a/docs/compose/Checkbox/screenshots/default_dm.png b/docs/compose/Checkbox/screenshots/default_dm.png
diff --git a/docs/compose/RadioButton/screenshots/default.png b/docs/compose/RadioButton/screenshots/default.png
diff --git a/docs/compose/RadioButton/screenshots/default_dm.png b/docs/compose/RadioButton/screenshots/default_dm.png
diff --git a/docs/view/Checkbox/screenshots/default.png b/docs/view/Checkbox/screenshots/default.png
diff --git a/docs/view/Checkbox/screenshots/default_dm.png b/docs/view/Checkbox/screenshots/default_dm.png
diff --git a/docs/view/RadioButton/screenshots/default.png b/docs/view/RadioButton/screenshots/default.png
diff --git a/docs/view/RadioButton/screenshots/default_dm.png b/docs/view/RadioButton/screenshots/default_dm.png