design-system: round every button at every size

app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/Button.kt

@@ -31,7 +31,6 @@ import androidx.compose.ui.draw.dropShadow
 import androidx.compose.ui.draw.innerShadow
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.graphics.shadow.Shadow
 import androidx.compose.ui.semantics.Role
@@ -44,6 +43,7 @@ import androidx.compose.ui.unit.dp
 import com.hedvig.android.compose.ui.LayoutWithoutPlacement
 import com.hedvig.android.compose.ui.withoutPlacement
 import com.hedvig.android.design.system.hedvig.ButtonDefaults.ButtonSize
+import com.hedvig.android.design.system.hedvig.tokens.ButtonTokens
 import com.hedvig.android.design.system.hedvig.tokens.GhostStyleButtonTokens
 import com.hedvig.android.design.system.hedvig.tokens.LargeSizeButtonTokens
 import com.hedvig.android.design.system.hedvig.tokens.MediumSizeButtonTokens
@@ -78,7 +78,6 @@ fun HedvigButton(
   border: Color? = null,
   onClickLabel: String? = null,
   isLoading: Boolean = false,
-  shape: Shape? = null,
 ) {
   HedvigButton(
     onClick = onClick,
@@ -89,7 +88,6 @@ fun HedvigButton(
     interactionSource = interactionSource,
     border = border,
     onClickLabel = onClickLabel,
-    shape = shape,
     isLoading = isLoading,
   ) {
     val buttonColors = buttonStyle.style.buttonColors
@@ -131,7 +129,6 @@ fun HedvigButton(
   interactionSource: MutableInteractionSource? = null,
   border: Color? = null,
   onClickLabel: String? = null,
-  shape: Shape? = null,
   isLoading: Boolean = false,
   content: @Composable RowScope.() -> Unit,
 ) {
@@ -152,8 +149,7 @@ fun HedvigButton(
     },
   )
 
-  @Suppress("NAME_SHADOWING")
-  val shape = shape ?: size.shape
+  val shape = ButtonTokens.ContainerShape.value
   val glass = style.glassMaterial.takeIf { enabled }
   Surface(
     onClick = onClick,
@@ -271,7 +267,7 @@ fun HedvigButtonGhostWithBorder(
     modifier = modifier.border(
       width = 1.dp,
       color = HedvigTheme.colorScheme.borderPrimary,
-      shape = size.size.shape,
+      shape = ButtonTokens.ContainerShape.value,
     ),
     buttonSize = size,
     interactionSource = interactionSource,
@@ -351,8 +347,9 @@ private val ButtonSize.size: Size
   }
 
 /**
- * The metrics this size takes on within [style]. The rounded styles get their own pill metrics at
- * [ButtonSize.Large]; at every smaller size they fall back to the standard button metrics.
+ * The metrics this size takes on within [style]. The glass styles get their own tighter padding at
+ * [ButtonSize.Large]; at every smaller size they fall back to the standard button metrics. Corner
+ * radius is not part of this: every button is a pill, see [ButtonTokens.ContainerShape].
  */
 @Composable
 private fun ButtonSize.sizeIn(style: Style): Size = when {
@@ -396,9 +393,6 @@ private sealed interface Size {
   @get:Composable
   val textStyle: TextStyle
 
-  @get:Composable
-  val shape: Shape
-
   object Large : Size {
     override val contentPadding: PaddingValues = PaddingValues(
       top = LargeSizeButtonTokens.TopPadding,
@@ -411,11 +405,6 @@ private sealed interface Size {
       @Composable
       @ReadOnlyComposable
       get() = LargeSizeButtonTokens.LabelTextFont.value
-
-    override val shape: Shape
-      @Composable
-      @ReadOnlyComposable
-      get() = LargeSizeButtonTokens.ContainerShape.value
   }
 
   object LargeRounded : Size {
@@ -430,11 +419,6 @@ private sealed interface Size {
       @Composable
       @ReadOnlyComposable
       get() = RoundedLargeSizeButtonTokens.LabelTextFont.value
-
-    override val shape: Shape
-      @Composable
-      @ReadOnlyComposable
-      get() = RoundedLargeSizeButtonTokens.ContainerShape.value
   }
 
   object Medium : Size {
@@ -449,11 +433,6 @@ private sealed interface Size {
       @Composable
       @ReadOnlyComposable
       get() = MediumSizeButtonTokens.LabelTextFont.value
-
-    override val shape: Shape
-      @Composable
-      @ReadOnlyComposable
-      get() = MediumSizeButtonTokens.ContainerShape.value
   }
 
   object Small : Size {
@@ -468,11 +447,6 @@ private sealed interface Size {
       @Composable
       @ReadOnlyComposable
       get() = SmallSizeButtonTokens.LabelTextFont.value
-
-    override val shape: Shape
-      @Composable
-      @ReadOnlyComposable
-      get() = SmallSizeButtonTokens.ContainerShape.value
   }
 
   object Mini : Size {
@@ -487,11 +461,6 @@ private sealed interface Size {
       @Composable
       @ReadOnlyComposable
       get() = MiniSizeButtonTokens.LabelTextFont.value
-
-    override val shape: Shape
-      @Composable
-      @ReadOnlyComposable
-      get() = MiniSizeButtonTokens.ContainerShape.value
   }
 }
 

app/design-system/design-system-hedvig/src/commonMain/kotlin/com/hedvig/android/design/system/hedvig/tokens/ButtonTokens.kt

@@ -2,6 +2,15 @@ package com.hedvig.android.design.system.hedvig.tokens
 
 import androidx.compose.ui.unit.dp
 
+/**
+ * Every button is a pill at every size, so the corner radius is no longer a per-size or per-style
+ * choice and lives here instead of on the size tokens below. The radius tokens themselves stay in
+ * use by cards, sheets and the rest of the system.
+ */
+internal object ButtonTokens {
+  val ContainerShape = ShapeKeyTokens.CornerFull
+}
+
 internal object PrimaryStyleButtonTokens {
   val ContainerColor = ColorSchemeKeyTokens.ButtonPrimaryResting
   val ContentColor = ColorSchemeKeyTokens.TextNegative
@@ -98,40 +107,35 @@ internal object LargeSizeButtonTokens {
   val HorizontalPadding = 32.dp
   val TopPadding = 15.dp
   val BottomPadding = 17.dp
-  val ContainerShape = ShapeKeyTokens.CornerLarge
   val LabelTextFont = TypographyKeyTokens.BodySmall
 }
 
-// TODO: the rounded button styles are only designed at the large size. Every smaller size falls back to
+// TODO: the glass button styles are only designed at the large size. Every smaller size falls back to
 //  the standard button metrics above until design provides them.
 internal object RoundedLargeSizeButtonTokens {
   val HorizontalPadding = 20.dp
   val TopPadding = 12.dp
   val BottomPadding = 12.dp
-  val ContainerShape = ShapeKeyTokens.CornerFull
   val LabelTextFont = TypographyKeyTokens.BodySmall
 }
 
 internal object MediumSizeButtonTokens {
   val HorizontalPadding = 14.dp
   val TopPadding = 7.dp // todo look into if we use the right line heights to justify the offset introduced here
   val BottomPadding = 9.dp
-  val ContainerShape = ShapeKeyTokens.CornerMedium
   val LabelTextFont = TypographyKeyTokens.BodySmall
 }
 
 internal object SmallSizeButtonTokens {
   val HorizontalPadding = 12.dp
   val TopPadding = 6.5.dp
   val BottomPadding = 7.5.dp
-  val ContainerShape = ShapeKeyTokens.CornerSmall
   val LabelTextFont = TypographyKeyTokens.Label
 }
 
 internal object MiniSizeButtonTokens {
   val HorizontalPadding = 8.dp
   val TopPadding = 3.dp
   val BottomPadding = 3.dp
-  val ContainerShape = ShapeKeyTokens.CornerXSmall
   val LabelTextFont = TypographyKeyTokens.Label
 }

app/feature/feature-home/src/main/kotlin/com/hedvig/android/feature/home/home/ui/HomeDestination.kt

@@ -1334,7 +1334,6 @@ private fun QuoteCard(
           buttonStyle = Secondary,
           buttonSize = ButtonSize.Medium,
           enabled = true,
-          shape = HedvigTheme.shapes.cornerFull,
           modifier = Modifier.fillMaxWidth(),
         )
       }
@@ -1537,7 +1536,6 @@ private fun AddonsSection(
         imageLoader = imageLoader,
         modifier = Modifier.fillMaxWidth(),
         buttonSize = ButtonSize.Small,
-        buttonShape = HedvigTheme.shapes.cornerFull,
       )
     }
   }
@@ -1558,7 +1556,6 @@ private fun DiscoverInsurancesSection(
     imageLoader = imageLoader,
     buttonText = stringResource(string.HOME_DISCOVER_SEE_PRICE_BUTTON),
     buttonSize = ButtonSize.Small,
-    buttonShape = HedvigTheme.shapes.cornerFull,
   )
 }
 

app/ui/cross-sells/src/main/kotlin/com/hedvig/android/crosssells/CrossSells.kt

@@ -26,7 +26,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalLayoutDirection
@@ -613,7 +612,6 @@ fun CrossSellsSection(
   title: String? = null,
   buttonText: String? = null,
   buttonSize: ButtonDefaults.ButtonSize = ButtonDefaults.ButtonSize.Medium,
-  buttonShape: Shape? = null,
 ) {
   Column(modifier) {
     if (withSubHeader) {
@@ -632,7 +630,6 @@ fun CrossSellsSection(
           onSheetDismissed = onSheetDismissed,
           buttonText = crossSell.buttonText ?: buttonText,
           buttonSize = buttonSize,
-          buttonShape = buttonShape,
         )
       } else {
         CrossSellItem(
@@ -642,7 +639,6 @@ fun CrossSellsSection(
           imageLoader = imageLoader,
           buttonText = buttonText,
           buttonSize = buttonSize,
-          buttonShape = buttonShape,
         )
       }
       if (index != crossSells.lastIndex) {
@@ -690,7 +686,6 @@ private fun CrossSellItem(
   modifier: Modifier = Modifier,
   buttonText: String? = null,
   buttonSize: ButtonDefaults.ButtonSize = ButtonDefaults.ButtonSize.Medium,
-  buttonShape: Shape? = null,
 ) {
   CrossSellItem(
     crossSellTitle = crossSell.title,
@@ -704,7 +699,6 @@ private fun CrossSellItem(
     onSheetDismissed = onSheetDismissed,
     buttonText = buttonText,
     buttonSize = buttonSize,
-    buttonShape = buttonShape,
   )
 }
 
@@ -721,7 +715,6 @@ private fun CrossSellItem(
   modifier: Modifier = Modifier,
   buttonText: String? = null,
   buttonSize: ButtonDefaults.ButtonSize = ButtonDefaults.ButtonSize.Medium,
-  buttonShape: Shape? = null,
 ) {
   PillowRow(
     title = crossSellTitle,
@@ -737,7 +730,6 @@ private fun CrossSellItem(
     isLoading = isLoading,
     modifier = modifier,
     buttonSize = buttonSize,
-    buttonShape = buttonShape,
   )
 }
 
@@ -759,7 +751,6 @@ fun PillowRow(
   buttonStyle: ButtonDefaults.ButtonStyle = ButtonDefaults.ButtonStyle.Secondary,
   isLoading: Boolean = false,
   buttonSize: ButtonDefaults.ButtonSize = ButtonDefaults.ButtonSize.Medium,
-  buttonShape: Shape? = null,
   pillow: (@Composable () -> Unit)? = null,
 ) {
   val description = "$title $subtitle"
@@ -823,7 +814,6 @@ fun PillowRow(
       onClickLabel = onButtonClickLabel,
       buttonSize = buttonSize,
       buttonStyle = buttonStyle,
-      shape = buttonShape,
       modifier = Modifier.hedvigPlaceholder(
         visible = isLoading,
         shape = HedvigTheme.shapes.cornerSmall,
@@ -847,7 +837,6 @@ private fun CrossSellItemWithDiscounts(
   onSheetDismissed: () -> Unit,
   modifier: Modifier = Modifier,
   buttonSize: ButtonDefaults.ButtonSize = ButtonDefaults.ButtonSize.Medium,
-  buttonShape: Shape? = null,
 ) {
   val description = "$crossSellTitle $crossSellSubtitle"
   Row(
@@ -908,7 +897,6 @@ private fun CrossSellItemWithDiscounts(
       onClickLabel = stringResource(Res.string.TALKBACK_OPEN_EXTERNAL_LINK),
       buttonSize = buttonSize,
       buttonStyle = ButtonDefaults.ButtonStyle.PrimaryAlt,
-      shape = buttonShape,
       modifier = Modifier.hedvigPlaceholder(
         visible = isLoading,
         shape = HedvigTheme.shapes.cornerSmall,