Fix Borderless Buttons

app/src/main/java/org/thoughtcrime/securesms/conversation/start/newmessage/NewMessage.kt

@@ -86,13 +86,13 @@ private fun EnterAccountId(
 
         BorderlessButtonWithIcon(
             text = stringResource(R.string.messageNewDescription),
-            iconRes = R.drawable.ic_circle_question_mark,
-            contentColor = LocalColors.current.textSecondary,
             modifier = Modifier
                 .animateContentSize()
                 .contentDescription(R.string.AccessibilityId_help_desk_link)
                 .padding(horizontal = LocalDimensions.current.margin)
                 .fillMaxWidth(),
+            color = LocalColors.current.textSecondary,
+            iconRes = R.drawable.ic_circle_question_mark
         ) { onHelp() }
 
         OutlineButton(

app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt

@@ -11,13 +11,13 @@ import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ButtonColors
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
-import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -65,6 +65,7 @@ fun Button(
     border: BorderStroke? = type.border(color, enabled),
     colors: ButtonColors = type.buttonColors(color),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    contentPadding: PaddingValues = type.contentPadding,
     content: @Composable RowScope.() -> Unit
 ) {
     style.applyButtonConstraints {
@@ -76,7 +77,8 @@ fun Button(
             elevation = null,
             shape,
             border,
-            colors
+            colors,
+            contentPadding
         ) {
             // Button sets LocalTextStyle, so text style is applied inside to override that.
             style.applyTextConstraints {
@@ -205,47 +207,37 @@ fun TemporaryClickedContent(
     }
 }
 
+/**
+ * Base [BorderlessButton] implementation.
+ */
 @Composable
 fun BorderlessButton(
     modifier: Modifier = Modifier,
-    contentColor: Color = LocalColors.current.text,
+    color: Color = LocalColors.current.text,
-    backgroundColor: Color = Color.Transparent,
     onClick: () -> Unit,
     content: @Composable RowScope.() -> Unit
 ) {
-    TextButton(
+    Button(
         onClick = onClick,
+        color = color,
         modifier = modifier,
-        colors = ButtonDefaults.outlinedButtonColors(
+        style = ButtonStyle.Borderless,
-            contentColor = contentColor,
+        type = ButtonType.Borderless,
-            backgroundColor = backgroundColor
-        ),
         content = content
     )
 }
 
+/**
+ * Courtesy [BorderlessButton] implementation that accepts [text] as a [String].
+ */
 @Composable
 fun BorderlessButton(
     text: String,
     modifier: Modifier = Modifier,
-    contentDescription: GetString = GetString(text),
+    color: Color = LocalColors.current.text,
-    contentColor: Color = LocalColors.current.text,
-    backgroundColor: Color = Color.Transparent,
     onClick: () -> Unit
 ) {
-    BorderlessButton(
+    BorderlessButton(modifier, color, onClick) { Text(text) }
-        modifier = modifier.contentDescription(contentDescription),
-        contentColor = contentColor,
-        backgroundColor = backgroundColor,
-        onClick = onClick
-    ) {
-        Text(
-            text = text,
-            textAlign = TextAlign.Center,
-            style = extraSmall,
-            modifier = Modifier.padding(horizontal = 2.dp)
-        )
-    }
 }
 
 @Composable
@@ -254,14 +246,12 @@ fun BorderlessButtonWithIcon(
     @DrawableRes iconRes: Int,
     modifier: Modifier = Modifier,
     style: TextStyle = baseBold,
-    contentColor: Color = LocalColors.current.text,
+    color: Color = LocalColors.current.text,
-    backgroundColor: Color = Color.Transparent,
     onClick: () -> Unit
 ) {
     BorderlessButton(
         modifier = modifier,
-        contentColor = contentColor,
+        color = color,
-        backgroundColor = backgroundColor,
         onClick = onClick
     ) {
         AnnotatedTextWithIcon(text, iconRes, style = style)
@@ -272,20 +262,12 @@ fun BorderlessButtonWithIcon(
 fun BorderlessHtmlButton(
     textId: Int,
     modifier: Modifier = Modifier,
-    contentColor: Color = LocalColors.current.text,
+    color: Color = LocalColors.current.text,
-    backgroundColor: Color = Color.Transparent,
     onClick: () -> Unit
 ) {
-    BorderlessButton(
+    BorderlessButton(modifier, color, onClick) {
-        modifier,
-        contentColor = contentColor,
-        backgroundColor = backgroundColor,
-        onClick = onClick
-    ) {
         Text(
             text = annotatedStringResource(textId),
-            textAlign = TextAlign.Center,
-            style = extraSmall,
             modifier = Modifier.padding(horizontal = 2.dp)
         )
     }
@@ -311,6 +293,8 @@ private fun VariousButtons(
             SlimOutlineButton("Slim Primary", color = LocalColors.current.buttonOutline) {}
             SlimOutlineButton("Slim Danger", color = LocalColors.current.danger) {}
             SlimOutlineCopyButton {}
+            BorderlessButton("Borderless Button") {}
+            BorderlessButton("Borderless Secondary", color = LocalColors.current.textSecondary) {}
         }
     }
 }

app/src/main/java/org/thoughtcrime/securesms/ui/components/ButtonStyle.kt

@@ -11,6 +11,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import org.thoughtcrime.securesms.ui.baseBold
+import org.thoughtcrime.securesms.ui.extraSmall
 import org.thoughtcrime.securesms.ui.extraSmallBold
 
 interface ButtonStyle {
@@ -43,4 +44,9 @@ interface ButtonStyle {
         override val textStyle = extraSmallBold.copy(textAlign = TextAlign.Center)
         override val minHeight = 29.dp
     }
+
+    object Borderless: ButtonStyle {
+        override val textStyle = extraSmall.copy(textAlign = TextAlign.Center)
+        override val minHeight = 37.dp
+    }
 }

app/src/main/java/org/thoughtcrime/securesms/ui/components/ButtonType.kt

@@ -1,6 +1,7 @@
 package org.thoughtcrime.securesms.ui.components
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material.ButtonColors
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.runtime.Composable
@@ -10,6 +11,8 @@ import org.thoughtcrime.securesms.ui.LocalDimensions
 import org.thoughtcrime.securesms.ui.color.LocalColors
 
 interface ButtonType {
+    val contentPadding: PaddingValues get() = ButtonDefaults.ContentPadding
+
     @Composable
     fun border(color: Color, enabled: Boolean): BorderStroke?
     @Composable
@@ -42,4 +45,17 @@ interface ButtonType {
             disabledBackgroundColor = Color.Unspecified
         )
     }
+
+    object Borderless: ButtonType {
+        override val contentPadding: PaddingValues
+            get() = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
+        @Composable
+        override fun border(color: Color, enabled: Boolean) = null
+        @Composable
+        override fun buttonColors(color: Color) = ButtonDefaults.outlinedButtonColors(
+            contentColor = color,
+            backgroundColor = Color.Transparent,
+            disabledContentColor = LocalColors.current.disabled
+        )
+    }
 }