PM-18388 add hyphens on segmented button labels (#4777)

Author: dseverns-livefront

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/segment/BitwardenSegmentedButton.kt

@@ -3,10 +3,12 @@ package com.x8bit.bitwarden.ui.platform.components.segment
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
@@ -24,7 +26,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.Hyphens
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -34,6 +38,8 @@ import com.x8bit.bitwarden.ui.platform.components.segment.color.bitwardenSegment
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 import kotlinx.collections.immutable.ImmutableList
 
+private const val FONT_SCALE_THRESHOLD = 1.5f
+
 /**
  * Displays a Bitwarden styled row of segmented buttons.
  *
@@ -82,7 +88,8 @@ fun BitwardenSegmentedButton(
                 .onGloballyPositioned {
                     weightedWidth = (it.size.width / options.size).toDp(density)
                 }
-                .padding(horizontal = 4.dp),
+                .padding(horizontal = 2.dp, vertical = 2.dp)
+                .height(IntrinsicSize.Min),
             space = 0.dp,
         ) {
             options.forEachIndexed { index, option ->
@@ -100,6 +107,12 @@ fun SingleChoiceSegmentedButtonRowScope.SegmentedButtonOptionContent(
     option: SegmentedButtonState,
     modifier: Modifier = Modifier,
 ) {
+    val fontScale = LocalConfiguration.current.fontScale
+    val labelVerticalPadding = if (fontScale > FONT_SCALE_THRESHOLD) {
+        8.dp
+    } else {
+        0.dp
+    }
     SegmentedButton(
         enabled = option.isEnabled,
         selected = option.isChecked,
@@ -110,7 +123,13 @@ fun SingleChoiceSegmentedButtonRowScope.SegmentedButtonOptionContent(
         label = {
             Text(
                 text = option.text,
-                style = BitwardenTheme.typography.labelLarge,
+                style = BitwardenTheme.typography.labelLarge.copy(
+                    hyphens = Hyphens.Auto,
+                ),
+                modifier = Modifier.padding(
+                    vertical = labelVerticalPadding,
+                    horizontal = 4.dp,
+                ),
             )
         },
         icon = {

app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt

@@ -665,7 +665,9 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
                 ) {
                     SegmentedButtonOptionContent(
                         option = option,
-                        modifier = Modifier.width(weightedWidth),
+                        modifier = Modifier
+                            .fillMaxHeight()
+                            .width(weightedWidth),
                     )
                 }
             }
@@ -694,7 +696,9 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
                 ) {
                     SegmentedButtonOptionContent(
                         option = option,
-                        modifier = Modifier.width(weightedWidth),
+                        modifier = Modifier
+                            .fillMaxHeight()
+                            .width(weightedWidth),
                     )
                 }
             }
@@ -723,15 +727,19 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
                 ) {
                     SegmentedButtonOptionContent(
                         option = option,
-                        modifier = Modifier.width(weightedWidth),
+                        modifier = Modifier
+                            .fillMaxHeight()
+                            .width(weightedWidth),
                     )
                 }
             }
 
             else -> {
                 SegmentedButtonOptionContent(
                     option = option,
-                    modifier = Modifier.width(weightedWidth),
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .width(weightedWidth),
                 )
             }
         }