[HACK][Woo POS] Make WooPosSpacing automatically adaptive

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt

@@ -277,7 +277,7 @@ fun WooPosButtonsPreview() {
                 .padding(WooPosSpacing.Medium.value)
                 .width(600.dp)
                 .verticalScroll(rememberScrollState()),
-            verticalArrangement = Arrangement.spacedBy(8.dp),
+            verticalArrangement = Arrangement.spacedBy(WooPosSpacing.Small.value),
         ) {
             WooPosButton(
                 text = "Button",
@@ -333,7 +333,7 @@ fun WooPosSmallButtonsPreview() {
                 .padding(WooPosSpacing.Medium.value)
                 .width(600.dp)
                 .verticalScroll(rememberScrollState()),
-            verticalArrangement = Arrangement.spacedBy(8.dp),
+            verticalArrangement = Arrangement.spacedBy(WooPosSpacing.Small.value),
         ) {
             WooPosButtonSmall(
                 text = "Button Small",

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosChip.kt

@@ -87,7 +87,7 @@ fun WooPosChipPreview() {
                 modifier = Modifier
             ) {
                 Row(
-                    horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.Start),
+                    horizontalArrangement = Arrangement.spacedBy(WooPosSpacing.Small.value, Alignment.Start),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
                     WooPosChip(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosEmptyScreen.kt

@@ -22,7 +22,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosIco
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 
 @Composable
 fun WooPosEmptyScreen(
@@ -88,15 +87,15 @@ private fun WooPosItemsEmptyListInternal(
                 contentDescription = contentDescription,
             )
 
-            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value))
 
             WooPosText(
                 text = title,
                 style = WooPosTypography.Heading,
                 fontWeight = FontWeight.Bold,
             )
 
-            Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
 
             WooPosText(
                 text = message,
@@ -105,7 +104,7 @@ private fun WooPosItemsEmptyListInternal(
                 textAlign = TextAlign.Center
             )
 
-            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value))
 
             if (onActionClicked != null && actionLabel != null) {
                 WooPosButton(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosErrorScreen.kt

@@ -25,7 +25,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosIco
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 
 @Composable
 fun WooPosErrorScreen(
@@ -40,7 +39,7 @@ fun WooPosErrorScreen(
         modifier = modifier
             .fillMaxSize()
             .clip(RoundedCornerShape(WooPosCornerRadius.Medium.value))
-            .padding(WooPosSpacing.XLarge.value.toAdaptivePadding()),
+            .padding(WooPosSpacing.XLarge.value),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
@@ -55,7 +54,7 @@ fun WooPosErrorScreen(
                 tint = WooPosTheme.colors.unspecified,
             )
 
-            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value))
 
             WooPosText(
                 text = message,
@@ -64,15 +63,14 @@ fun WooPosErrorScreen(
                 textAlign = TextAlign.Center,
             )
 
-            Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
 
             WooPosText(
                 text = reason,
                 style = WooPosTypography.BodyLarge,
                 textAlign = TextAlign.Center,
             )
-            @Suppress("WooPosDesignSystemSpacingUsageRule")
-            Spacer(modifier = Modifier.height(40.dp.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.XXLarge.value))
             primaryButton?.let {
                 WooPosButton(
                     text = it.text,
@@ -81,14 +79,14 @@ fun WooPosErrorScreen(
                 )
             }
             secondaryButton?.let {
-                Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
+                Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
                 WooPosOutlinedButton(
                     text = it.text,
                     onClick = it.click,
                     modifier = WooPosErrorAndEmptyStateButtonModifier
                 )
             }
-            Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
         }
     }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosExitConfirmationDialog.kt

@@ -24,7 +24,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
@@ -48,25 +47,23 @@ fun WooPosExitConfirmationDialog(
         onDismissRequest = onDismissRequest,
     ) {
         Box(
-            modifier = modifier.padding(WooPosSpacing.XLarge.value.toAdaptivePadding())
+            modifier = modifier.padding(WooPosSpacing.XLarge.value)
         ) {
             Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                @Suppress("WooPosDesignSystemSpacingUsageRule")
-                Spacer(modifier = modifier.height(48.dp.toAdaptivePadding()))
+                Spacer(modifier = modifier.height(WooPosSpacing.XXXLarge.value))
                 WooPosText(
                     text = title,
                     style = WooPosTypography.Heading,
                     fontWeight = FontWeight.Bold,
                     color = MaterialTheme.colorScheme.onSurface,
                 )
-                Spacer(modifier = modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
+                Spacer(modifier = modifier.height(WooPosSpacing.Medium.value))
                 WooPosText(
                     text = message,
                     style = WooPosTypography.BodyLarge,
                     color = MaterialTheme.colorScheme.onSurface,
                 )
-                @Suppress("WooPosDesignSystemSpacingUsageRule")
-                Spacer(modifier = modifier.height(56.dp.toAdaptivePadding()))
+                Spacer(modifier = modifier.height(WooPosSpacing.XXXLarge.value))
                 WooPosButton(
                     modifier = modifier
                         .fillMaxWidth(),

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosPaginationErrorIndicator.kt

@@ -28,7 +28,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosIco
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 import com.woocommerce.android.ui.woopos.home.items.WooPosItemList
 import com.woocommerce.android.ui.woopos.home.items.WooPosItemSelectionViewState.Product
 import com.woocommerce.android.ui.woopos.home.items.WooPosPaginationState
@@ -98,7 +97,7 @@ private fun WooPosPaginationErrorIndicatorContent(
 
                 Column(
                     modifier = if (icon == null) {
-                        Modifier.padding(start = WooPosSpacing.Medium.value.toAdaptivePadding())
+                        Modifier.padding(start = WooPosSpacing.Medium.value)
                     } else {
                         Modifier
                     }
@@ -111,7 +110,7 @@ private fun WooPosPaginationErrorIndicatorContent(
                     WooPosText(
                         text = description,
                         style = WooPosTypography.BodyMedium,
-                        modifier = Modifier.padding(top = WooPosSpacing.Small.value.toAdaptivePadding())
+                        modifier = Modifier.padding(top = WooPosSpacing.Small.value)
                     )
                 }
             }
@@ -120,7 +119,7 @@ private fun WooPosPaginationErrorIndicatorContent(
                 text = primaryButton.text,
                 onClick = primaryButton.click,
                 modifier = Modifier
-                    .padding(end = WooPosSpacing.Medium.value.toAdaptivePadding())
+                    .padding(end = WooPosSpacing.Medium.value)
             )
         }
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosRecentSearchesChips.kt

@@ -20,7 +20,6 @@ import androidx.compose.ui.text.font.FontWeight
 import com.woocommerce.android.R
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 
 @Composable
 fun WooPosRecentSearchesChips(
@@ -29,7 +28,7 @@ fun WooPosRecentSearchesChips(
 ) {
     Column {
         SectionHeader(
-            modifier = Modifier.padding(horizontal = WooPosSpacing.Medium.value.toAdaptivePadding()),
+            modifier = Modifier.padding(horizontal = WooPosSpacing.Medium.value),
             title = stringResource(R.string.woopos_search_recent_searches_title)
         )
 
@@ -42,7 +41,7 @@ fun WooPosRecentSearchesChips(
             horizontalArrangement = Arrangement.spacedBy(WooPosSpacing.Small.value, Alignment.Start),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            Spacer(modifier = Modifier.width(WooPosSpacing.Small.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.width(WooPosSpacing.Small.value))
 
             recentSearches.forEach { recentSearch ->
                 WooPosChip(
@@ -52,7 +51,7 @@ fun WooPosRecentSearchesChips(
                 )
             }
 
-            Spacer(modifier = Modifier.width(WooPosSpacing.Small.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.width(WooPosSpacing.Small.value))
         }
     }
 }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosSearchInput.kt

@@ -53,7 +53,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosCor
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 import com.woocommerce.android.ui.woopos.home.items.WOO_POS_ITEMS_TOOLBAR_HEIGHT
 import kotlinx.coroutines.delay
 import kotlinx.parcelize.Parcelize
@@ -126,7 +125,7 @@ private fun SearchInput(
         modifier = Modifier.fillMaxWidth()
     ) {
         WooPosBackButton(
-            modifier = Modifier.padding(start = WooPosSpacing.Small.value.toAdaptivePadding()),
+            modifier = Modifier.padding(start = WooPosSpacing.Small.value),
             contentDescription = stringResource(R.string.woopos_search_back_content_description)
         ) { onEvent(WooPosSearchUIEvent.Close) }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosToolbar.kt

@@ -21,7 +21,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 
 @Composable
 fun WooPosToolbar(
@@ -50,11 +49,11 @@ fun WooPosToolbar(
             }
         ) {
             WooPosBackButton(
-                modifier = Modifier.padding(start = WooPosSpacing.Small.value.toAdaptivePadding())
+                modifier = Modifier.padding(start = WooPosSpacing.Small.value)
             ) { onBackClicked?.invoke() }
         }
 
-        val startPadding = WooPosSpacing.Small.value.toAdaptivePadding()
+        val startPadding = WooPosSpacing.Small.value
         WooPosText(
             text = titleText,
             style = titleStyle,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/designsystem/WooPosIcons.kt

@@ -637,8 +637,8 @@ private fun WooPosIconsPreview() {
         ) {
             FlowRow(
                 modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(8.dp),
-                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(WooPosSpacing.Small.value),
+                verticalArrangement = Arrangement.spacedBy(WooPosSpacing.Small.value),
                 maxItemsInEachRow = 4
             ) {
                 Box(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/designsystem/WooPosSizes.kt

@@ -15,13 +15,21 @@ enum class WooPosCornerRadius(val value: Dp) {
     XLarge(24.dp)
 }
 
-enum class WooPosSpacing(val value: Dp) {
+enum class WooPosSpacing(private val baseValue: Dp) {
     None(0.dp),
+    XXSmall(2.dp),
     XSmall(4.dp),
     Small(8.dp),
     Medium(16.dp),
     Large(24.dp),
-    XLarge(32.dp)
+    XLarge(32.dp),
+    XXLarge(40.dp),
+    XXXLarge(48.dp),
+    Huge(80.dp),
+    Gigantic(104.dp);
+
+    val value: Dp
+        @Composable get() = baseValue.toAdaptivePadding()
 }
 
 enum class WooPosElevation(val value: Dp) {

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/eligibility/WooPosEligibilityScreen.kt

@@ -29,7 +29,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosIco
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTypography
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 import com.woocommerce.android.ui.woopos.root.navigation.WooPosNavigationEvent
 import com.woocommerce.android.ui.woopos.tab.WooPosLaunchability
 
@@ -71,7 +70,7 @@ fun WooPosEligibilityScreen(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(WooPosSpacing.Large.value.toAdaptivePadding()),
+            .padding(WooPosSpacing.Large.value),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center
     ) {
@@ -80,15 +79,15 @@ fun WooPosEligibilityScreen(
             contentDescription = null
         )
 
-        Spacer(modifier = Modifier.height(WooPosSpacing.Large.value.toAdaptivePadding()))
+        Spacer(modifier = Modifier.height(WooPosSpacing.Large.value))
 
         WooPosText(
             text = stringResource(R.string.woopos_eligibility_screen_unable_to_load),
             style = WooPosTypography.Heading,
             textAlign = TextAlign.Center
         )
 
-        Spacer(modifier = Modifier.height(WooPosSpacing.Large.value.toAdaptivePadding()))
+        Spacer(modifier = Modifier.height(WooPosSpacing.Large.value))
 
         val suggestionText = when (retryState) {
             is WooPosEligibilityRetryState.Ineligible -> retryState.suggestionText
@@ -104,7 +103,7 @@ fun WooPosEligibilityScreen(
                 modifier = Modifier.width(547.dp)
             )
 
-            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
+            Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value))
         }
 
         WooPosButton(
@@ -118,7 +117,7 @@ fun WooPosEligibilityScreen(
             modifier = Modifier.size(width = 366.dp, height = 80.dp)
         )
 
-        Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value.toAdaptivePadding()))
+        Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
 
         WooPosOutlinedButton(
             text = stringResource(id = R.string.woopos_eligibility_exit_pos_label),

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/WooPosHomeScreen.kt

@@ -30,7 +30,6 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview
 import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosExitConfirmationDialog
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosSpacing
 import com.woocommerce.android.ui.woopos.common.composeui.designsystem.WooPosTheme
-import com.woocommerce.android.ui.woopos.common.composeui.designsystem.toAdaptivePadding
 import com.woocommerce.android.ui.woopos.common.composeui.isPreviewMode
 import com.woocommerce.android.ui.woopos.common.composeui.modifier.listenForBarcodes
 import com.woocommerce.android.ui.woopos.home.cart.WooPosCartScreen
@@ -164,7 +163,7 @@ private fun WooPosHomeScreen(
 
         WooPosHomeScreenToolbar(
             modifier = Modifier
-                .padding(WooPosSpacing.Large.value.toAdaptivePadding())
+                .padding(WooPosSpacing.Large.value)
                 .align(Alignment.BottomStart),
         )